---

ニジボックスのUIデザインフローや案件事例をご紹介！

---

モックアップは、製品などの完成イメージを把握するためにさまざまな業界で使われているものであり、WebサイトなどWeb制作にも活用されます。ただ、ワイヤーフレームと類似していることもあり、モックアップについて正確には分かっていないという方もいるかもしれません。

この記事では、モックアップについて紹介していきます。作成する目的やポイントについても解説するので、ぜひ参考にしてください。

モックアップとは

モックアップ（mock-up）とは、「模型」という意味を持っています。工業製品などでは、機能を持たないものの、完成品に近いサンプル品を指す意味で使われます。

Webサイトやアプリでも活用されており、色やレイアウト、フォントなどのデザイン要素を表現したサンプルとして、最終的な完成品のイメージを共有するものとして使われます。
デザインカンプと呼ぶこともあり、Web制作においては同じ意味として使われることが多いです。

モックアップとワイヤーフレーム、プロトタイプの違い

Webサイトの制作過程の中で、モックアップと類似しているものとして「ワイヤーフレーム」や「プロトタイプ」も作られることがあります。それぞれ、どのような違いがあるのでしょうか。

モックアップとワイヤーフレームの違い

ワイヤーフレームとは、Webサイトの「設計図」を指し、どの情報を／ページ内のどこに／どのように配置するかという骨組みと共に、情報の設計意図を記載します。

モックアップとワイヤーフレームの大きな違いは、色などのデザイン要素を含んでいない点です。ワイヤーフレームにデザインの要素も入れ込んだものが、モックアップという理解で良いでしょう。

ワイヤーフレームについて、より詳しく知りたい方はこちらの記事もご覧ください。

モックアップとプロトタイプの違い

プロトタイプは、Webサイトの「試作品」を指し、モックアップやワイヤーフレームに、機能や動作を入れ込んだものを作成していきます。

モックアップに、さらに機能を持たせたものがプロトタイプです。そのためプロトタイプは、より完成品に近いものと言えます。

プロトタイプについて、より詳しく知りたい方はこちらの記事もご覧ください。

モックアップを作成する3つの目的

モックアップを作成する目的はどのようなものでしょうか。目的を明確にせずに作成しても活用しきれないので、こちらを参考にチーム全体で目的を共有しておきましょう。

1.視覚的なイメージの確認と課題の抽出

モックアップは、完成品と同様のビジュアルイメージなので、視覚的にイメージを確認するという目的で作ります。

トンマナやブランドイメージなどを、言語で擦り合わせしていても、実際のデザインに落とし込むときには、多少の食い違いが出てきてしまいます。そのため、実装する前にモックアップを制作し、頭の中にあるイメージと違いがないか、ターゲティングに合ったデザインとなっているかを確認しましょう。

この時点で、デザイン上の課題がある場合は抽出して、解消できるように再度、擦り合わせやデザインの修正を行っていきます。ビジュアルイメージがあることで、客観的に見やすくなっているため、ユーザー視点で見つめ直して課題を抽出していくことが可能です。

2.チームやステークホルダーとの共有

モックアップを制作したら、チームやステークホルダーと共有しましょう。

前述したように、言語やワイヤーフレームで擦り合わせていても、デザイン要素を加えてみると、それぞれの頭の中のイメージとは違うところが出てくるものです。モックアップを作成し、チームやステークホルダー全員と共有することで、世界観やビジョンの違いを解消する議論ができるでしょう。

完成品に近いものが視覚的に確認できるため、大人数への共有が簡単にできることも、モックアップの特徴の一つです。

3.修正や変更の労力を軽減する

モックアップを制作した時点で、ビジュアルに関する課題をきちんと解消することが重要です。

なぜなら、実装フェーズでの大幅な修正は、モックアップを修正するよりも多大な労力が必要となってしまうからです。

そのため、前述したイメージの確認と共有をきちんと行い、その後に大幅な修正がないようにデザインイメージを固めておきましょう。

モックアップの作成3ステップ

ここでは、モックアップの制作をどのように進めていくか解説していきます。
いきなりモックアップを制作しても、スムーズに活用できないこともあるため、順序を追ってしっかり制作していきましょう。

1.ワイヤーフレームを作成する

まずは、ワイヤーフレームを作成します。サイト全体の構成を描いたサイトマップや、各ページに掲載する情報やコンテンツを整理したワイヤーフレームを確定しないと、サイト全体のイメージが出来上がりません。

コンテンツを確定した上でレイアウトを決めて、ユーザーが適切な順序で情報を取得できるかを考えていきます。ワイヤーフレームがWebサイトの骨組みとなるので、しっかりと作成していきましょう。

2.モックアップを作成する

ワイヤーフレームができたら、ワイヤーフレームをベースにデザインを加えて、モックアップを作成します。

まずは、具体的なデザインに入る前に、ターゲティングやコンセプト、ブランドイメージなどを基にベースカラーやトンマナを決めます。ここで決めたベースカラーやトンマナを、具体的なデザインに落とし込み、モックアップを作成していきます。

トンマナについて詳しく知りたい方はこちらの記事もご覧ください。

3.モックアップを評価する

モックアップを作成したら、評価して課題を改善していきましょう。

自分たちが表現したい世界観やイメージが反映されているかという目線と共に、ユーザー側の目線で、見やすく使いやすいものになっているかを評価することも重要です。

サイト全体だけではなく、フォントサイズやボタンのデザイン、レイアウトの見やすさなど、具体的な要素についても評価してください。

制作してきたチームメンバーだけではなく、その他の関係者に意見をもらうことも重要です。第三者の目があることで、より客観的に評価できるでしょう。

モックアップを作成する際の4つのポイント

モックアップを作成するときには、いくつかのポイントがあります。モックアップを最大限活用し、より良いWebサイトにするためにも、ポイントを押さえて作成してください。

ここでは、代表的なポイント4点について解説します。

1.モックアップの作成漏れがないようにする

モックアップは、実際に制作するページ全てで作成します。ここで作成漏れがあると、後の工程で再度デザインの確認が必要となるからです。

作成漏れをしないためには、ワイヤーフレーム作成前のサイト全体の構造を検討する段階で、サイトマップを確定させることが重要です。サイトマップに沿って、必要なページを洗い出し、漏れがないようにモックアップを作成してください。

2.ファーストビューにこだわる

ファーストビューは、Webサイトにおいて非常に重要な箇所です。ファーストビューでユーザーが興味を持たなければ、すぐに離脱してしまうため、自社のWebサイトを見てもらうためには、興味を引くファーストビューにしなければなりません。

興味を引くためのファーストビューにするためには、例えば下記のようなポイントがあります。

• What・Why・Howを意識した情報を発信する
• 数字や実績を入れて信頼性を上げる
• ユーザー目線での商品・サービスの価値を伝える

一つ一つのテキストや、フォントサイズ、画像、ボタン、余白など細部にまでこだわって、興味を引くファーストビューを作成していきましょう。

ファーストビュー作成のポイントについて、より詳しく知りたい方はこちらもご覧ください。

3.CTAやボタンなどのデザイン設計にこだわる

Webサイトにおいて、コンテンツや画像・テキストももちろん重要ですが、ユーザーの導線設計を適切に行うことも同様に重要です。

特に、申し込みや購入などのコンバージョンを目的としたWebサイトを制作する場合、適切な導線がないとユーザーは行動してくれません。

そのため、CTA（アクションを促すための画像やテキスト）やリンクボタンなど、導線に関わるものについては、特にこだわってデザイン設計しましょう。

魅力の訴求は工夫されているか、ユーザーが見やすい色やサイズとなっているかなど、ユーザー目線で評価して改善していくことが重要です。

CTAについて、より詳しく知りたい方はこちらもご覧ください。

4.共有と評価をしっかり行う

モックアップは作成しただけでは意味がありません。前述しましたが、作成した後はしっかりと共有と評価を行ってください。

モックアップの作成後は、必要に応じてプロトタイプの作成をするか、実装するかという工程となります。実装まで進んだ後に、デザインの変更や修正が発生すると、モックアップの時点で修正するよりも多くの労力が必要です。

チームメンバーやステークホルダー全員と共有して、全員が納得した状態で実装するようにしましょう。主観的な視点だけではなく、ユーザー目線に立って、使いやすく魅力的なサイトになっているかを精査してください。

まとめ

この記事では、モックアップについて解説してきました。

Webサイト制作において、デザインは自社や商品・サービスのブランドや世界観を表す非常に重要な要素です。また、デザインが良くなければユーザーはすぐに離脱してしまうため、ユーザーに興味を持ってもらうためにもデザインは重要となります。

そのためデザインについて、モックアップの時点で全員が納得のいくまで、議論や改善を重ねていきましょう。より良いWebサイトにするためにも、デザインにこだわって制作することが重要です。

ニジボックスでは、サイト制作や開発における情報設計やビジュアル設計、デザインガイドライン制作といったUIデザイン面のご支援も行っております。

下記資料にて、人間中心設計の考え方をベースとした、UXリサーチ結果に基づくユーザー課題解決型のUIデザインフローや、支援事例を一部紹介しています。

ご興味を持たれた方はぜひ、ダウンロードリンクよりご参照ください！