みなさんは、モックアップという言葉をご存じでしょうか。Webサイトやアプリのデザインをプレゼンする際に活躍してくれる存在ですが、存在は知っていても、詳細を知らない方もいるでしょう。

そこで、本記事ではモックアップの概要をはじめ、作成の目的や押さえるべきポイントについて解説します。おすすめのモックアップ作成ツールも一緒に取り上げるため、興味を持った方はぜひ最後までご覧ください。

モックアップとは

そもそもモックアップとは、模型を意味する言葉です。デザインカンプとも呼ばれる、Webサイトやアプリにおいては画面のデザインを再現したものをモックアップと呼びます。

わかりにくい場合は、完成品に近いサンプル品という認識でも問題ありません。

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

以下では、モックアップをどのような目的で作成するかについて解説します。

イメージの確認

モックアップは、視覚的に商品のイメージを共有する目的で作成されます。

商品開発において、完成品のイメージを関係者の間で共有することは重要です。しかし、口頭だけの説明では、脳内のイメージを完全に共有できません。

もし完成品がイメージと異なっていた場合、不要なトラブルの発生につながります。

課題の洗い出し

モックアップを作成すれば、正確なイメージを共有しつつ、課題の洗い出しもできます。これは、モックアップが完成品に近いサンプリのためです。

たとえば、ユーザーアクセシビリティの高いWebサイトの制作をしている場合、モックアップを通じてユーザ視点でサイトの構成を確認できます。

修正リスクの低減

修正リスクを最小限に抑えるのも、モックアップの作成目的です。

プロジェクトにおいて、修正は決して珍しいものではありません。しかし、修正の回数が増えれば余計なコストがかかるだけでなく、従業員のモチベーションにも関わります。

モックアップを作成すれば、イメージの共有や課題の抽出を視覚的に行えるため、大幅な修正は発生しにくいです。そのため、スムーズなプロジェクト進行を実現できます。

モックアップの作成手順

モックアップを作成しようと思っても、初見ではどのように作業を進めればよいかわからない方もいるでしょう。以下では、モックアップの基本的な作成手順について解説します。

ワイヤーフレームを作成

まずは、ワイヤーフレームを作成しましょう。

ワイヤーフレームとは、要素や情報などを配置した、Webサイトのシンプルな骨組みのことです。各ページにどのような情報を記載するか、またデザインをどうするか、この段階で決定します。

ワイヤーフレームがないと、Webサイト全体の完成イメージを持ちにくいため、丁寧に作業を進めましょう。

モックアップを作成

ワイヤーフレームが完成したら、モックアップの作成に着手しましょう。

具体的なデザインに入る前には、ターゲティングやコンセプトなどをもとに、ベースカラーやトンナマを決定します。ベースカラーとは読んで字のごとくWebサイト全体の貴重となるカラー、そしてトンナマはデザインや文面、配色に一貫性を持たせることです。

ベースカラー、そしてトンナマともに、Webサイトの雰囲気を決定する重要な要素です。両者がしっかり設定されていないと、チグハグな雰囲気のWebサイトが完成しなねないため、慎重に検討しましょう。

作成したモックアップを評価

モックアップが完成したら、評価して課題を抽出しましょう。サイト全体の雰囲気はもちろん、フォントのサイズやボタンの位置など、細かい部分までチェックしてください。

なお、モックアップの評価は、フィルターがかからない第三者に任せるのもおすすめです。客観的にモックアップを評価できるだけでなく、新しい視点からよりよいアイデアをもらえる可能性があります。

モックアップ作成時のポイント

モックアップを作成する場合は、以下の4つのポイントに注意してください。

作成漏れが発生しないようにする

モックアップは、作成漏れが発生しないようにしましょう。作成漏れが発生すると、あとの工程に影響が出てしまいます。

あらかじめ必要なページを洗い出しておくと、作成漏れが発生するリスクを減らせます。

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

モックアップを作成する際は、ファーストビューにこだわってください。

ファーストビューとは、Webサイトにおいて最初に目に入る部分のことです。ここでユーザーの興味を引けなければ、すぐに離脱されてしまいます。

テキストやフォント、画像など細部にまでこだわり、よりよいファーストビューの実現を目指しましょう。

デザイン設計にこだわる

モックアップはデザイン設計、とくに動線にこだわりましょう。

購入や申し込みが目的のWebサイトの場合、動線が悪いとユーザーが離れてしまいかねません。ユーザーの実際の動きを想定して、より使いやすい動線を考えましょう。

共有と評価を怠らない

モックアップを作成したあとは、必ず共有と評価をしてください。

共有と評価を怠った結果、実装後に修正や変更が発生すると、相当な時間と手間がかかります。共有と評価を行い、チームメンバー全員が納得してから実装できるようにしましょう。

おすすめのモックアップ作成ツール

最後に、おすすめのモックアップ作成ツールを3つほど紹介します。

Sketch

プロトタイプ作成ツールで、アイコンをはじめ、さまざまなデザインを作成できます。

チームとアイデアやデザインを共有できる機能が搭載されており、団体での作業でも活躍してくれます。また、プラグインが充実している点や、ファイルサイズが小さく動作がスムーズな点も魅力です。

Studio

デザインと開発が同時に行える、国産デザイン作成ツールです。

Webサイトやスマホアプリのモックアップ作成はもちろん、さまざまな実機でのプレビューや運用もできます。クオリティの高い写真素材やフォント素材が使えるため、幅広いデザインの実現が可能です。

Bootstrap

モックアップの作成に特化した、Adobe社のツールです。

完成したモックアップは自動的にHTML、およびCSSが作成されるため、コーディングの知識がない方も安心です。もちろん、自動生成された部分を好きなようにカスタマイズすることもできます。

まとめ

モックアップは、イメージの共有や課題の洗い出しのため活躍してくれる存在です。最近では便利なモックアップの作成ツールも多数登場しており、ポイントさえ押さえれば初見でも簡単にモックアップを作成できます。

なお、ソニックムーブでも課題を解決するためのデザインや、情報設計サービスを行っています。とくに予算や期間などを踏まえた理想的かつ実現性が高いUXデザインは、高く評価されています。

興味を持った方は、ぜひ以下の記事をチェックしてください。

UX DESIGN