webサイトやアプリのデザイン・制作の際には、クライアントと完成イメージを共有することが重要ですよね。
完成イメージがうまく共有できていないと、実際に形になってからクライアントからの「思っていたものと違う」「頼んだものと違う」などというクレームにつながりかねません。
最悪の場合、初期段階から作り直しなんてことに発展してしまう可能性があります。
そういったクレームやトラブルを避けるためにも、「モックアップ」は重要な役割を果たします。今回はシステム開発におけるモックアップについて、制作の意図や作り方を確認してみましょう。
目次
モックアップとは？
クライアントとのイメージのすり合わせに、効果的な役割を果たしてくれるモックアップ。
もともと「モックアップ（mock-up）」とは「模型」の意味をもつ言葉です。
モップアップは工業製品などで、システムは実装されていないものの、外観は本物そっくりに作られたサンプルを指します。
携帯電話ショップで、スマホやガラケーのモックアップが店頭に展示されているのを見たことがある人も多いのではないでしょうか。色や形は完成品と同じですが、実際に使用することはできませんよね。
また、建築業界では実際に建物をつくる前に、縮尺模型をモックアップとして作成することがあります。webサイトやアプリ制作の際の「モックアップ」も、ほぼ同じ意味で使われます。
ビジュアル面での完成形サンプルのこと
webサイトやアプリを制作していくうえで、ビジュアル面のデザインは大事な要素です。クライアントの思い描く世界観や雰囲気などを、できる限り再現する必要があります。
たとえば、webサイトの制作の場合は、実際にサイト上で表示する色やボタンの形状や配置によってビジュアル面の印象が大きく変わります。使用する写真や画像の雰囲気なども大切です。
ビジュアルデザインは、クライアントと打ち合わせによってイメージをすり合わせながら進めますが、イメージは言葉や文章だけでは伝わらない面も多いでしょう。視覚的に確認し、イメージを共有しながら進めるためにも、サンプル作成は必要不可欠です。
そこで、機能は実装されていなくても、視覚的には完成形に近いサンプルである「モックアップ」を作成し、クライアントとイメージを共有します。
webサイトやアプリをデザインする過程のひとつ
制作を始めて、いきなりモックアップを作るわけではありません。
ビジュアル面でのアイデアがほぼ固まったタイミングでのモックアップ制作が望ましいでしょう。
まずは、スケッチやワイヤーフレームを作り、全体の概要を固めていく作業から始まります。
大まかな工程としては、
「スケッチ」→「ワイヤ」ー「フレーム」→「モックアップ」→「プロトタイプ」
と、制作を進め、段階を踏んで完成に近づけていくプロセスが一般的です。
ワイヤーフレームやプロトタイプとの違い
ワイヤーフレームは全体の概要、プロトタイプは機能面でのサンプルといえるでしょう。
ワイヤーフレームは、主にレイアウトを決めるための設計図を指します。色や形の指示はないものが多く、どこにどんな機能がレイアウトされるのかを線画と文字で表されることが多いです。スケッチをもとにした手書きのものから、作成ツールで作られたものまで、その形式はさまざまです。
プロトタイプは、機能面で完成形に近いシステムが実装されたサンプルです。webサイトであればクリックでき、リンク先のコンテンツに遷移する挙動などが実装されたものとなります。
その点モックアップは機能は実装されていないビジュアルサンプルです。ビジュアルイメージの共有を目的に、見た目のイメージが一致しているかどうかを確認するものとなります。
モックアップを制作するメリットは？
では、モックアップを制作する具体的なメリットには、どのようなものがあるのでしょうか。ここでは、3つのメリットをご紹介します。
完成形のイメージを確認することができる
webサイトやアプリ制作の過程では、色見本や表示サンプルを照らし合わせながら制作を進めていくことが多いですが、完成間近になって思い描いていたイメージとズレが生じてしまうことも少なくありません。
とくにカラーデザインでは、サンプルの小さな範囲で見る色と、実際に使用する大きな範囲で見る色のイメージが異なる場合があります。
モックアップを制作することにより、サンプルの時点でイメージと異なる部分を修正することができるのです。
クライアントとイメージを共有しすり合わせができる
webサイトやアプリなどの制作過程において、クライアントとのイメージの共有は欠かせません。しかし、どんなに丁寧な仕様書でやり取りを重ねても、文章や言葉だけでは、双方の頭の中にあるイメージは一致しづらい場合が多いです。
実際に目に見える形でビジュアルデザインを示すことによって、クライアントの理想的なイメージに効率的に近づけることができます。
完成後の追加修正リスクを低減することができる
デザインの制作で最も避けたいことは、完成したあとに、クライアントから「やっぱりこの部分を修正してほしい」と追加修正を返されることではないでしょうか。
場合によっては、外観を修正するために機能面からの修正が必要になってしまうこともあります。
完成後の修正が重なると、本来想定していなかった時間や手間も増え、追加工賃を請求しなくては採算がとれない…なんて事態にもなりかねません。
完成前に、試作としてモックアップを提示しておくことで、クライアントと視覚的にイメージを共有し、のちのち修正に及ぶ可能性のある部分について認識することができるでしょう。イメージのズレをできる限り小さくし、結果的に業務の効率化をはかることができるのです。
モックアップの作り方と利用法
モックアップは制作のメリットも多く、webサイトやアプリ構築の過程で欠かせないサンプルといえるでしょう。しかし、実際に作る際に膨大な時間と手間をかけてしまっては本末転倒です。
内部の機能は備わっていないデザインサンプルだから、簡単に制作できるのでは？と感じるかもしれません。
でも、webサイトやアプリなどを表示するデバイスは多岐に渡ります。パソコンやスマホ、タブレットなど、それぞれのデバイスでの見え方のイメージをすべて作成する必要があるのです。
では、モックアップはどのように作成するのが効率的なのでしょうか。
スケッチ、ワイヤーフレームをもとに作る
まず、アイデアスケッチやワイヤーフレームをもとに、デザインや外観にかかわる要素をピックアップします。ラフなアイデアを実用的な形へと構築していくプロセスです。
モックアップには、可能な限り完成形に近い形で素材を埋め込んで作成します。全体のデザインやレイアウトだけでなく、カラーやフォントなど、できるだけ細かい部分までグラフィックに表すとよいでしょう。
モックアップで確認すべきこと
webサイトやアプリ制作においてのモックアップでは、とくに次のようなポイントを確認しましょう。
- カラーで不自然な部分はないか
- レイアウトで見づらい部分はないか
- クライアントの希望に寄り添えているか
まず、webサイトやアプリ全体の雰囲気や世界観を作るのはカラーです。画面全体で違和感のないカラーになっているか確認しましょう。画面サイズによっても色の印象は変わります。それぞれのデバイスで、適切なイメージになっているかの確認が必要です。
つぎに、レイアウトを確認しましょう。ボタンやウィジェットは見やすく設置されているか、視線の誘導はできているかなど、実際にサイトやアプリを利用する立場になって確かめることが必要です。
そしてもっとも大切なことは、クライアントとのイメージ共有です。モックアップをクライアントに提示し、希望どおりのビジュアルイメージになっているか確認しましょう。
クライアントには、実際に使用しているシーンのモックアップイメージを提示することも効果的です。モックアップ作成専用ツールなどを利用して、より実用的で具体的なイメージを作成することをおすすめします。
モックアップをもとにプロトタイプを作る
モックアップを制作し、ビジュアルイメージがほぼ確定したら、それをもとにプロトタイプの制作を行います。モックアップがビジュアル面でのサンプルであったのに対して、プロトタイプは機能面でのサンプルです。
ビジュアルイメージが固まることで、コンテンツの相関性も視覚的に分かりやすくなります。モックアップで確認した視覚的イメージをもとに、プロトタイプで機能や内部システムをシミュレーションし、機能性や操作性を高めていくことが求められます。
そして、ビジュアルイメージと機能が統合されて、最終的な完成品が構築されるのです。
モックアップを活用して完成度を高めよう
モックアップの制作は、一見余計な手間のように思えるかもしれません。
しかし、完成度を高めるためには必要不可欠なプロセスです。結果的に作業効率を上げることにもつながります。
とくに、クライアントとイメージを共有しやすくなることは大きなメリットです。完成後の修正リスクを低減し、円滑なコミュニケーションを生み出すきっかけにもなります。
ビジュアルイメージの高度サンプルであるモックアップを最大限に活用することで、スムーズでハイクオリティな制作が可能になるでしょう。
