モックアップ

モックアップというのはもともと工業製品に用いられていた用語で、デザイン段階で試作される「外見を実物そっくりに似せて作られた実物大の模型」のことです。
スマートフォンのショップでよく見かける実際に操作することができない実物大の模型が最も身近なモックアップではないでしょうか。
実際に手に取り、重さや大きさなどを確認しながら実機をイメージすることができます。

Webサイトにおいては、ビジュアルデザインをデバイスで確認できるようにした本物そっくりの見本のことをモックアップと呼んでいます。
ワイヤーフレームにはない「本番と同じデザイン要素やコンテンツ」を載せていくことで、より明確に完成した後のデザインをイメージできるようになります。

モックアップでUIを確認する

ワイヤーフレームで起こりがちなのが、完成を頭の中で思い描いていたのに「思っていたのと違う」という想像と実物の差異です。
モックアップでは、パソコンやスマートフォン、タブレットなどで実際に操作し、実物と同じデザインを確認できるため、想像と実物の差異を埋めることができます。

モックアップの制作フロー

Webサイトの下書きをする場合、紙を用意し、写真の配置や動きのイメージを思い描きながら案を出し合います。
要素ごとに画像を照らし合わせながら配置を決めたり、戦略に則ってコピーの場所を考えたりしてある程度の骨組みを作るのに2~3時間程度はかかります。

この段階で下書きのメモのようなものは手元にあり、これを清書したものがワイヤーフレームとなります。
モックアップはここからさらに指定の画像を入れ込み、ある程度イメージできるコピーを入れ、本番さながらのデザインに落とし込むため、シンプルなものでも1日程度の作業時間を必要とします。

時間をかけても効果がある理由

発注者と制作側の間で同じWebサイトのイメージを思い描いて進めていたつもりでも想像と実物の差異を0にするのは難しいでしょう。
さらに、見本を確認して議論を重ねたとしても、全員がまったく同じものをイメージできるわけではありません。

Webサイトの制作において最も致命的な修正は、作った後に発生します。
雑誌などの紙面デザインで数分で終わるような修正でも、Webでは時として数時間かかってしまうことがあります。

また、Webサイトはコードがグループ化され、さまざまな部分に共通して影響しあっているっことがあるため、想定していなかった場所に修正が入った場合、対応が一筋縄ではいかない場合があります。
修正するには関連性を再調整し、デザインと動作の両面で問題ないものを構築しなおす必要があるため、大幅に時間がかかってしまうことがあります。
致命的な修正が発生した場合、最悪リリースを延期することにもなりかねません。
この確率を少しでも下げるために必要なのが「実物に近いものを初期段階で用意する」ことです。

イメージに差異が生じやすい理由

何故、ワイヤーフレームだとイメージに差異が生じてしまうのか。その原因はいくつかあります。
まず単純なところで実際にデザインや画像を落とし込んでみるとイメージと違うこと。画像ひとつ取ってもトリミングしただけでイメージが大きく変わってしまうものもあるため、ちょっとしたことでも違和感が生じることがあります。

次に、使用するデバイスによってイメージが変わるという点。
例えば、さまざまな機種が世の中にあふれているスマートフォンは、それぞれに違った画面サイズになっています。
そのため、同じスマホサイトでも、見る機種によって画像のサイズや文字の改行位置などが異なります。
ちょっとした違いでも見る時のイメージには誤差が生じるため、完成した後のWebサイトですら使用しているデバイスによって「Aの機種だと問題ないが、Bの機種だと問題がある」といったことが起こります。

モックアップがワイヤーフレームより優れている点

モックアップはワイヤーフレームで生じやすい「イメージと実物の誤差」をなくし、本番さながらのデザインを確認することができます。
実機を使ってイメージを確認できるため、さまざまな機種を使って表示されるイメージを詰めていくことができるのです。
A4用紙に印刷されたデザイン案と実機で確認できる本物そっくりのデザイン。どちらがよりイメージの誤差が生じにくいかは言うまでもありません。

使用感をイメージしやすい

実際のイメージを実機で確認できる利点はUIをイメージできる点です。
プロトタイプのように本番サイトをそのまま体感できる訳ではありません。それでもモックアップなら実機を使ってボタンが押しやすい位置にあるか、画像のサイズは適正か、使用している色のイメージやフォントのサイズは問題ないかなど、細かい部分まで詰めていくことが可能になります。

モックアップ段階での修正が開発をスムーズにする

モックアップの段階で修正点を洗い出し、デザインを詰めていくことによって本番デザインの制作がスムーズになることは言うまでもありません。
ビジュアルの構築がスムーズになれば、その分CMSをはじめとする裏側の設定に時間をかけられるため、より質の高いWebサイトを完成させることが可能になります。
質が高く、ユーザビリティの高いWebサイトを構築するためにも、glowではモックアップやプロトタイプで事前にデザインを確認することをおすすめしています。