あやね
モックアップは、色、文字、画像、余白を実際の画面に近い形で表し、見た目と情報の優先順位を検討するための試作です。作る順序は「確かめたい画面を決める → 実際に近い内容を入れる → 状態違いを用意する → 判断してほしい点を絞ってレビューする」です。
この段階では、きれいな完成見本を作ることより、読めるか、意味が伝わるか、次の操作が分かるかを確かめます。PixsoのUIデザインと共同編集を使う場合も、画面を描く前にレビューの目的を一つ決めておきましょう。
1.モックアップとは何か？
まず、「そもそもモックアップとは何か」から説明しましょう。
「モックアップ(mock-up)」は『模型』という意味の言葉で、アプリやWebサイトの制作においては中身の伴わない外側だけ完成させた、あるいは完成に近いデザインのことを指します。
モックアップは主に、静的な画面で外観と情報の配置を確認するために使います。画面遷移や入力に対する反応も確かめたい場合は、その画面をつないでインタラクティブなプロトタイプにします。
2.なぜモックアップを作るのか？
では、なぜデザイン面だけ完成品に近いモックアップを作るのでしょうか。実は、とても重要な理由があるのです。このパートでは、その理由を3つ紹介いたします。
2.1 クライアントや関係者とのコンセンサスをとるため
理由の1つ目は、アプリやWebサイトのデザイン面について、クライアントや社内の上司、他部門の担当者とのコンセンサスをとるためです。
開発・制作前にいくら念入りに打ち合わせして目線をすり合わせていても、いざデザインを見てみると思ったのと違った、ということはあることです。
そういったことを起こさないためにも、開発・制作前にデザイン面の合意を得ておこうというわけです。モックアップはそのために作られ、使用されます。
2.2 事前に課題をつぶし、修正リスクを減らすため
理由の2つ目は、見た目や情報の配置に関する課題を早めに見つけ、開発後の大きな手戻りを減らすためです。モックアップで検討しても、実装後の修正が一切なくなるわけではありません。
もし、アプリやWebサイトの開発が始まってからデザイン面の指摘を受けると、デザインだけではなく他の面でも修正の影響が発生します。
そのため、モックアップの段階でデザイン面のチェック⇄修正を繰り返しておくことで、開発・制作開始後の手戻りを少なくすることが可能となります。そして、スケジュールの遅延や修正の手間を省くこともできます。
2.3 理由その3：完成見本として商品訴求に使えるようにするため
理由の3つ目は、モックアップを完成品の見本として使うことで、事前の商品プロモーションなどに利用できるからです。
アプリやWebサイトについては、一般的なモノとしての商品のように、そう簡単に試作品を作ることはできません。しかし、完成するのを待ってから宣伝するのでは立ち上がりが遅れてしまいます。
そこで、モックアップを見た目だけの試作品の位置付けで利用することで、完成前からの商品の訴求が可能となるのです。
3. モックアップvsワイヤーフレームvsプロトタイプ！その違いは？
次に、アプリやWebサイトの開発・制作の前に作るものとして、モックアップの他に「ワイヤーフレーム」と「プロトタイプ」と呼ばれるものがあります。
これらはどのようなもので、モックアップとの違いはどこにあるのでしょうか。このパートではそのあたりのことを説明してまいります。
3.1 ワイヤーフレームとは？
まずワイヤーフレームとは、アプリやWebサイトのコンテンツを線のみの図形で表した“設計図”のようなものです。必要な要素をワイヤーのような線で囲んだ四角いフレームで表し、配置して、完成形の要素の洗い出しやレイアウトの検討に用いるのです。
ワイヤーフレームでは、装飾よりも情報の階層、配置と操作の順序を検討します。簡単な線や文字で描いても、それ自体が重要な設計作業です。モックアップでは、そこへ配色、書体、画像などを加えて視覚表現を具体化します。
3.2 プロトタイプとは？
プロトタイプとは、アプリやWebの構造や操作を検証するための“試作品”のことです。モックアップが主に静的な外観を扱うのに対し、プロトタイプでは目的に応じて画面をつなぎ、操作の流れや反応を試せるようにします。
プロトタイプは、確かめたい疑問に合わせて画面や動作を用意した試作です。完成品に近い画面だけでなく、簡単な線画をつないで流れを検討することもできます。モックアップを必ず先に完成させる必要はありません。
3.3 確かめたいことに合わせて使い分ける
ワイヤーフレーム、モックアップ、プロトタイプは、必ず順番に作る三つの納品物ではありません。構造を比べるのか、外観を決めるのか、操作を試すのかに合わせて使い分け、必要なら前の段階へ戻ります。
どの方法でも、クライアントや関係者からフィードバックを受け、判断を具体化することが目的です。すでに構造が決まっているならモックアップから始め、操作の流れが不明なら簡単なプロトタイプで試すなど、残っている疑問に合わせて選びましょう。
4.モックアップの作り方のポイント
ここからは、モックアップの作り方の概要を紹介していきたいと思います。具体的な作り方は、どのようなデザインツールを使うかによって異なるため、ここでは作り方の重要となるポイントに絞って説明いたします。
イベント申込画面をモックアップにする
例えば定員のある勉強会の申込ページなら、参加者は開催日時、会場、参加費と残席を見て判断します。写真とボタンだけを先に整えるのではなく、この情報を実際に近い長さで置きます。「イベント名」のような仮文言では、長い名称が折り返す問題を見落とします。
| 用意する画面 | 確かめる判断 | 入れておく内容 |
|---|---|---|
| 申込前 | 参加する条件を理解できるか | 日時・会場・料金・申込締切 |
| 満席 | 申し込めない理由が分かるか | 満席の表示と、次回案内など実際に用意する選択肢 |
| 申込内容の確認 | 確定前に誤りに気づけるか | 氏名、参加人数、合計額、修正への入口 |
| 狭い画面 | 説明やボタンが隠れないか | 長いイベント名、注意事項、複数行の住所 |
画面の外には「満席時はキャンセル待ちを受け付けるか」のような未決事項を残します。未決の機能をボタンとして描くと、実装する約束として受け取られやすいため、レビューで決める点を区別してください。
4.1 作り方その1：ワイヤーフレームに沿って画像などの素材を揃える
最初に、既に作成してあるワイヤーフレームを元に必要となる画像やアイコンなどの静的要素の素材を揃えていきます。素材を購入できるサイトで画像などを購入したり、あるいはIllustratorなどで素材を作成するのが一般的でしょう。
4.2 作り方その2：素材をはめ込んでモックアップを作り上げる
素材を集めたら、ワイヤーフレームの情報の順序に沿って配置します。文字サイズ、行間、余白をそろえ、重要な日時や金額が装飾に埋もれないようにします。端末の枠に入れた完成見本は説明資料には便利ですが、UIを検討するときは画面を正面から実際の表示幅で読むことが先です。
4.3 作り方その3：見つけた課題を反映して、プロトタイプ作成につなげる
レビューでは「どう思いますか」だけでなく、「参加費の総額はどこで分かりますか」「満席の場合は何ができますか」と具体的に問いかけます。好みの意見と、利用者が判断できない問題を分け、対象の画面や要素にコメントを残します。採用した変更と理由を記録すれば、次回も同じ議論を繰り返さずに済みます。
見つけた課題を画面に反映し、見た目と情報の優先順位を整えます。画面遷移や入力への反応も確かめたい場合は、必要な画面をつないでプロトタイプにします。モックアップを完全に仕上げてからでなければ試せないわけではありません。
5.モックアップ作成に便利なデザインツール-Pixso
最後に、モックアップを作成するのにとても役立つデザインツールを紹介します。一般にアプリやWebサイトのモックアップを作成するときはデザインツールを使用することが多いですが、様々なデザインツールが存在しているので、正直どのツールを選べばよいか迷うと思います。そんな方におすすめのデザインツールが「Pixso」です。
5.1 Pixsoとは？
Pixsoとは、2021年リリースの比較的新しいデザインツールです。とても有用な機能がたくさん搭載されており、そのうえ非常に高性能なものとなっています。
モックアップの作成はもちろん、ワイヤーフレームやプロトタイプの作成にも活用できます。また、デザイン制作におけるいくつかのフェーズ間をシームレスに移行可能なので、デザイン制作をトータルしてカバーしている点も大変優秀なデザインツールと言えるでしょう。
5.2 Pixsoの特徴やメリット
そんな優れもののPixsoには、様々な特徴やメリットがあります。以下はその中の一例ですが、これだけでも大変魅力的だということが伝わるかと思います。
- 無料での利用が可能
- WEB上での利用が可能で、アプリのインストールの必要がない
- 複数人によるリアルタイムの共同編集が可能
- WindowsやmacOSなど、ほとんどのOSに対応
- FigmaやAdobe XDなど、他の様々なデザインツールとの互換性がある
- 再利用可能なコンポーネントを共有でき、デザインの一貫性を保てる
Pixsoではイベント情報のカード、入力欄、申込ボタンをコンポーネントとしてそろえ、申込前と満席の画面に配置します。画面を複製して長い文言や異なる参加人数を入れると、余白や料金表示の問題を比較できます。共有リンクからレビューしてもらい、修正箇所にコメントを付ければ、見た目の調整と判断の理由を同じ場所で管理できます。
6.まとめ
今回は、アプリやWebサイトの開発・制作に欠かせないモックアップについて解説してまいりました。質の高いアプリやWebサイトを実現するにはモックアップの作成が重要だということが分かったかと思います。また、ワイヤーフレームやプロトタイプとの違いや、モックアップの作り方のポイントについてもご理解いただけたことでしょう。
そして、高品質のモックアップの作成には、高性能なデザインツールが必要不可欠です。中でもおすすめなのがPixsoです。もしデザインツールをお探しであれば、Pixsoをぜひ使ってみてください。
