こんにちは、ツバサです。
ECサイトのリニューアルでデザイナーとの打ち合わせがあり、「来週モック見せますね」と言われた。モック？ モックアップ？ なんとなく「デザインの下書きみたいなもの」だろうとは思ったけど、正確な意味がわからなかったので調べてみた。
モックアップとは
ひとことで言うと、Webサイトやアプリの「見た目の完成イメージ」を再現したもの。色、フォント、画像、レイアウトなど、実際の画面に近いビジュアルで作られるが、ボタンを押しても動かない。あくまで見た目の確認用だ。
Miroのモックアップ解説ページによると、モックアップ（mock-up）は英語で「模型」を意味する単語で、工業製品の世界では外見だけ完成品に近い試作品を指す。Web制作でもこの考え方は同じで、見た目は本番に近いが実際には動かない静的なデザインデータのことをモックアップと呼ぶ。
紛らわしいのがワイヤーフレームとプロトタイプとの違い。ニジボックスのモックアップ解説記事にわかりやすい整理があったので、それをもとにまとめるとこうなる。
| 用語 | 内容 | 動作 |
|---|---|---|
| ワイヤーフレーム | 要素の配置を線と四角で示した設計図 | なし |
| モックアップ | 色・画像・フォントを含む完成イメージ | なし |
| プロトタイプ | モックアップに操作感を加えたもの | あり（クリックで遷移など） |
つまり、ワイヤーフレーム → モックアップ → プロトタイプの順にデザインが具体化していくイメージだ。
EC実務で出てくる場面
ECの仕事をしていると、モックアップを見る機会はけっこう多い。僕が遭遇した場面を書いておく。
サイトリニューアルのデザイン確認
制作会社にサイトリニューアルを依頼すると、まずワイヤーフレームで構成を確認し、次にモックアップで見た目を確認するという流れが一般的。ミエルカヒートマップのモックアップ解説でも、モックアップの段階で色やレイアウトの認識合わせをしておかないと、あとで「思っていたのと違う」という手戻りが起きると書いてあった。
商品ページのレイアウト検討
商品ページのデザインを変更するとき、「商品画像を左に大きく配置して、右に購入ボタンを置く」みたいなレイアウト案をモックアップで見せてもらう。テキストベースの説明だけだと社内で意見がまとまらないことが多いけど、モックアップがあると関係者の認識が揃いやすい。
バナーやLPのデザイン確認
セール用のバナーやLP（ランディングページ）のデザイン案も、モックアップの形で共有されることが多い。マーケトランクのモックアップ解説によると、モックアップで確認すべきポイントとしては、ブランドの世界観との一致、情報の優先順位が正しいか、CTAボタンの位置がわかりやすいか、などがある。
覚えておきたいポイント
モックアップの段階で細かく確認する
モックアップの段階で色や配置に違和感があれば、遠慮せずに言ったほうがいい。コーディング（実装）が始まってからデザインを変更すると、追加費用やスケジュールの遅延につながる。僕も最初は「プロに任せておけばいいだろう」と思っていたけど、ECサイトの使い勝手は担当者が一番わかっているので、気になる点はこの段階で伝えるのが大事だ。
「モック」は略称
打ち合わせで「モック」と言われたらモックアップのこと。「モック見せます」「モック確認お願いします」のように使われる。最初に聞いたときは何のことかわからなかったけど、Web制作の現場ではごく普通に使われている略称だった。
作成ツールはFigmaが主流
最近のモックアップ作成にはFigmaが広く使われている。ブラウザ上で動くのでインストール不要、共有もURLを送るだけ。制作会社からFigmaのリンクが送られてきて「ここにコメント入れてください」と言われることもある。
