モックアップとは？ Web制作で欠かせない重要ステップの作成ポイントを解説 市川莉緒 2021.07.30 2022/11/11 WEBデザイン UIWEBデザインサイト改善 モックアップ（デザインカンプ）とは モックアップ作成後は必ず評価する モックアップ作成時に注意したいポイント モックアップ（デザインカンプ）とは モックアップ (mock-up) とは「模型」という意味を持ちます。 工業製品では、内部のシステムが実装されておらず機能しないものの、外面は完成品に近いサンプル品を指します。 Webサイトやモバイルアプリなどの制作現場においても、色やレイアウトなどのビジュアルデザインを表現したサンプルとしてモックアップを作成します。 またWeb制作の現場ではデザインカンプという言葉も耳にします。「カンプ」とは一般的に、デザインやレイアウトを含めた仕上がりを具体的に表現した完成サンプルのことを指します。 実際の制作現場では、デザインカンプとモックアップは同じような意味で用いられます。コンセプトに合ったデザインになっているかなど、完成品のイメージをチーム内やクライアントとすり合わせるために使われるという点において、両者に大きな違いはありません。以降の表現をモックアップに統一します。 ワイヤーフレーム、モックアップ、プロトタイプの違いは？ モックアップと一緒にワイヤーフレーム、プロトタイプという言葉をよく耳にしますが、3つの違いはなんでしょうか？ ワイヤーフレームは構成、モックアップは色などのデザインを加えたもの、プロトタイプはボタンがクリックできるなどの動きを加えたものを指し、それぞれ検証する対象が異なります。 モックアップとワイヤーフレームの違い ワイヤーフレームはWebサイトの設計を指し、モックアップとの大きな違いは見た目のデザインが施されていない点です。 ワイヤーフレームに、WebデザイナーやUIデザイナーがPhotoshopなどのツールでデザインを加え、モックアップを作成します。 ワイヤーフレームの作り方も併せてご覧ください。 プロトタイプとモックアップの違い プロトタイプは「試作品」という意味で、ワイヤーフレームやモックアップに動作や機能を追加したものです。 モックアップがページ単位の静的な「模型」であるのに対し、プロトタイプはサイト全体のページが連動した、実際に動く「試作品」という違いがあります。 プロトタイプの使い方も併せてご覧ください。 モックアップはいつ作る？ 一般的にモックアップは、ワイヤーフレームの完成後に作成します。以下の図はWebサイト作成やリニューアルの主要な工程を表しています。 UXデザインでは評価と改善のサイクルを何度か繰り返し、ユーザー目線のサービスを作ることが基本です。ユーザーのインタラクション（クリックや入力など）が多い場合は特に、頻繁にプロトタイプを用いて評価し、少しずつ修正を重ねてモックアップを完成させます。 モックアップ作成後は必ず評価する 作成後はデザインに問題がないか必ず評価しましょう。デザインの評価はWebサイト公開前と公開後の二度実施します。 Webサイト公開前にデザインを評価する まずは関係者間で評価しましょう。 たとえば、色や文字、要素のサイズはユーザーにストレスを与えるものでないか、ボタンなどの導線は認識されやすいかなどの内容を評価します。評価の際に課題となったポイントを修正し、再度評価します。 また、外部の協力者を集めてユーザビリティテストと呼ばれる評価方法をとる場合もあります。ユーザビリティテストではプロトタイプが用いられることが多いですが、デザインの評価の際はプロトタイプを作りこまず、モックアップを用いても構いません。 ユーザビリティテストの実施方法はこちらの記事で解説しています。 モックアップは表面の完成イメージであることを共有しよう 評価の際にチーム内やクライアントへモックアップを共有する場合は、あくまで外面の完成イメージであることをしっかり共有しましょう。 モックアップには、クリックやスワイプ、アニメーション（インタラクティブデザイン）などの動的要素は実装されないので、インタラクティブデザインの多いサイト（ECサイトやSNSなど）やWebアプリなどの場合、モックアップだけでは完成イメージが付かないこともあります。 そのため、モックアップを評価、共有する際は対象をビジュアルのみに留めて、動きがある部分は口頭で説明するなどして補足しましょう。 ※参照記事：Live by the Mockup, Die by the Mockup – Luke Wroblewski Webサイト公開後に実際の行動データから評価する Webサイト公開後は必ずデザインを含めた全体を実データをもとに評価しましょう。 実データとはコンバージョンなどの定量データと、Webサイト内部でユーザーが取った行動などの定性データの2つを指します。特に定量データはユーザビリティテストでは分からないため、Google Analyticsなどの解析ツールを用いて測定します。 公開後に定性データを評価する代表的な方法がヒートマップです。 ユーザーが熟読した箇所や離脱に繋がった箇所、クリックした箇所がひと目でわかるので、Webサイト内のユーザー行動が簡単に理解できます。 たとえば、ヒートマップを使って最適なバナーデザインを見つけ出すことも可能です。 公開前の評価では特に問題なかったバナーも、実際にはあまり認識されなかったということが起こりえます。ヒートマップを使ってバナーがしっかり認識されているか確認し、改善に活用しましょう。 ヒートマップは無料から使えるツールなので、Webサイトの効果測定で是非使ってみてください。 無料のヒートマップを使う モックアップ作成時に注意したいポイント 制作現場によって異なりますが、モックアップでは主に配色、レイアウト、ボタンや導線、タイポグラフィ（文字のサイズ、書体や行間など）を決めます。 これらの要素を決める際に特に注意したいポイントを2つ解説します。 ・モックアップのレイアウトではファーストビューに注力する ・モックアップでユーザーが認識しやすいボタンや導線を作る モックアップのレイアウトではファーストビューに注力する ワイヤーフレームをもとに、要素の細かな配置、サイズや一画角に入る要素の数などをデザインします。 ワイヤーフレームで決めた要素の優先順位をもとにビジュアルを作りましょう。特に最初に目に入るファーストビュー (FV) は、画面レイアウトの中で最も重要なエリアです。 ユーザーの滞在に大きく影響を与える部分であり、Web制作や運用の際に特に重要となる領域です。サービスサイトやLPの場合は特に、サービスを利用するメリットをファーストビューに端的に入れましょう。 CVR（目標達成の割合）が4％向上した実例を1つ紹介します。 コンバージョンアップにつながるファーストビュー作成のコツはこちらの記事で解説しています。 モックアップでユーザーが認識しやすいボタンや導線を作る コンバージョンボタン（CVボタン／CTA）やメニュー、ナビゲーションはユーザーに認識されやすいものにしましょう。 特にCVボタンは、サイトに訪れたユーザーに対して、問い合わせや購買など具体的なアクションを促す重要な役割を担っています。ユーザーに対して具体的なアクションを喚起することからCTA（コールトゥーアクション）とも呼ばれています。 この要素は特に評価を繰り返すことが重要です。ヒートマップを使ってバナーのデザインを変えたことでクリック率が大幅改善した事例があるように、評価と改善を通して最適なデザインを見つけることが出来ます。 クリック率をあげるCVボタンの作り方はこちらの記事で詳しく解説しています。 モックアップを制作フローに取り入れよう 「詳しく知らない」「制作フローにうまく取り込めていない」ことの多いモックアップですが、コンセプトに合ったデザインになっているか、イメージとかけ離れていないかなどのすり合わせや評価、フィードバックのためにとても重要なステップです。モックアップはWeb制作のフローの中で重要な役割を果たすので、注意したいポイントをしっかりと理解して活用しましょう。 無料のヒートマップを使う 編集者情報 市川莉緒 大阪大学卒。新卒でFaber Companyに入社後、 300近くの会社のヒートマップ分析に従事。 現在はミエルカヒートマップのマーケティングを担当。 大学時代1年休学し1人で世界を放浪。 グレートバリアリーフでのダイビングが最高の思い出。 監修者情報 玉飼 真一 この記事をシェアする
