052-223-0200

平日9:30〜18:30

モックアップとは？Web制作における意味や重要性・作り方を紹介

SHARE

Web制作におけるモックアップは、完成イメージをクライアントに伝えるうえで欠かせないものです。

作成時の注意点や、モックアップに類似したワークフローがあるため、違いがよくわからないこともあるでしょう。

そこで本記事では、Web制作におけるモックアップの重要性について解説します。制作方法や注意点、メリットも紹介しますのでぜひ参考にしてみてください。

モックアップとは完成形をイメージできるサンプル

モックアップは、完成形を具体的にイメージできるように作成するサンプルのことを指します。モックアップ（mock up）は模型を意味しますが、Web制作においても意味はほとんど変わりません。

完成形をクライアントに伝えられるビジュアルサンプルであり、Wenデザインにおいては「デザインカンプ」とも呼ばれます。

ただし、モックアップはあくまでもビジュアルを確認するためのものなので、動作の確認ができない点は把握しておいてください。

モックアップとワイヤーフレーム・プロトタイプの違い

それでは、モックアップと、ワイヤーフレーム・プロトタイプの違いをそれぞれ紹介します。

  1. モックアップとワイヤーフレームの違い
  2. モックアップとプロトタイプの違い

モックアップとワイヤーフレームの違い

モックアップとワイヤーフレームの違いは、デザインの有無にあります。

いずれもWebサイト制作のワークフローの一つですが、ワイヤーフレームは線と文字で構成されるページレイアウトの設計図です。

画像やテキストは使用せずシンプルに仕上げます。

モックアップは、ワイヤーフレームにビジュアルデザインをプラスするのが違いです。

モックアップとプロトタイプの違い

モックアップとプロトタイプは、動作にも違いがあります。

モックアップは、デザインサンプルなので、リンクボタンを押しても動作しません。

プロトタイプは、動作を確認する目的があるため、リンクボタンを押せば実際の動きを体験できます。

モックアップはワイヤーフレームの完成後に作成する

モックアップは、工程としてワイヤーフレームが完成した後に作成します。

Webデザインを作成する主な手順は、以下の通りです。

  1. リサーチ・分析
  2. ペルソナ設定
  3. サイトマップ作成
  4. ワイヤーフレームを作成
  5. モックアップを作成
  6. プロトタイプを作成

プロジェクトによって手順が異なる場合もありますが、モックアップはワイヤーフレームの後に行うのは共通しています。

モックアップの作成方法3選

モックアップの作成方法は、主に3つあります。

  1. ツールで作成する
  2. ジェネレーターを使用する
  3. デザイナーに依頼する

それぞれの方法について見ていきましょう。

ツールで作成する

ツールを使用すれば、専門的な知識がなくてもモックアップを作成できます。

モックアップはビジュアルイメージの確認と共有が主な目的です。

ツールは複数人で共有できるよう「共同編集機能」「コメント機能」などが搭載されたものを選ぶといいでしょう。

ジェネレーターを使用する

ジェネレーターを使用すれば、簡単に画像をはめ込むことができます。

Webサイト制作では、URLを入力するだけでモックアップを生成できます。

パソコン以外にも、スマートフォンやタブレット向けのサイトを作成するなら、マルチデバイスに対応したツールを選びましょう。

デザイナーに依頼する

デザイナーに依頼するのも選択肢の一つです。

プロのデザイナーやフリーランスなど、依頼先の選択肢もあります。依頼料が発生しますが、自社にはない視点での提案が可能です。

デザイナーに依頼すれば、モックアップ以外の業務に注力できます。

モックアップの作り方4ステップ

モックアップの作り方を4つのステップに分けて紹介します。

  1. 構造・レイアウトを決定する
  2. ビジュアル要素を担うデザインを決める
  3. 決めたデザインをもとに形にする
  4. 作成したモックアップを評価する

構造・レイアウトを決定する

まず、構造やレイアウトを決定します。

ワイヤーフレームを元に、色やデザインの位置、見え方を形にしていくイメージです。構造は、最優先すべき要素を決めてから、階層を設計するといいでしょう。

また、ユーザーフローを意識して作成することも重要です。

ビジュアル要素を担うデザインを決める

次に、ビジュアル要素を担うデザインを決めます。

例えば、企業のイメージカラーがあるなら、Webサイトにもイメージカラーを使用してください。

イメージカラーがない場合は、ユーザーにアピールしたいイメージにマッチしたカラーを選ぶといいでしょう。

また、フォントでもイメージが変わってきますが、読みやすいことも意識してください。

決めたデザインをもとに形にする

デザインが決まったら、ツールで形にしていきます。

ツールを使えば効率的にモックアップを作成できますが、特にLP（ランディングページ）はファーストビューが重要です。

ユーザビリティを意識しながら、形にしていきましょう。

作成したモックアップを評価する

モックアップは、作成する度に評価することが大切です。

まず、社内関係者でモックアップを評価します。課題や問題点が見つかったらその都度改善し、評価してください。

ユーザビリティテストを実施する際は、実施前に社内関係者での評価と情報共有を徹底した後に実施します。

モックアップを作成するうえでの注意点3つ

次に、モックアップを作成するうえでおさえておきたい3つの注意点を紹介します。

  1. レイアウトはファーストビューにこだわる
  2. ユーザー目線で作成する
  3. わかりやすい導線やボタン設置を心がける

レイアウトはファーストビューにこだわる

レイアウトは、ファーストビューにこだわりましょう。

LPはサイト全体のイメージに直結します。

デザインにこだわって作り込んでも、ユーザーにとって見づらく分かりづらいサイトと判断されれば、そこで離脱されかねません。

ボタンの位置やフォントの種類やサイズ、画像やカラーなど、誰が見てもわかりやすいデザインであることが重要です。

ユーザー目線で作成する

ユーザー目線で作成することを心がけてください。

導線がわかりづらければ、途中で離脱する恐れがあります。

レイアウトを決めるときは、目線の動きにも注目しましょう。

タイプ 目線の動き 向いている内容
F型 左上→右上→左中央→右中央→左上から下 文字の多いコンテンツ
N型 左上→右上→右上→斜めに左下へ→左下→右下 画像が多いサイト
Z型 右上→右下→右下から斜めに左上へ→左上→左下 縦読み

目線の動きをアルファベットに当てはめ、どのタイプが向いているかを確認できます。

F型はポピュラーで多くのサイトで使用されています。カタログやパンフレットなど、画像が多い場合は、N型が適しているでしょう。

Z型はWebサイトではあまり使用されませんが、縦読みに適しています。

わかりやすい導線やボタン設置を心がける

そして、わかりやすい導線やボタン配置を心がけてください。

コンバージョンの獲得を目的として、「資料請求はこちら」「問い合わせはこちら」といったCTAボタンを設置するなら、見やすいことが重要です。

背景と同化して見づらかったり、ボタンが小さすぎたりすると、CTAボタンに気づいてもらえない恐れがあります。

一目でわかるように、カラー・サイズ・位置を意識しましょう。

モックアップを作成するメリット

では最後に、モックアップの作成でどのようなメリットがあるのかを見ていきましょう。

  1. 完成イメージを見える化できる
  2. 課題がわかりやすくなる
  3. 仕様変更のリスクを防止できる

完成イメージを見える化できる

モックアップを作成すれば、完成イメージを見える化できます。

コンセプトに基づきWebサイト制作を進めていても、関係者内で認識のズレが生じることもあるでしょう。

認識にズレが生じたままサイト制作を進めてしまうと、コンセプトのイメージとかけ離れてしまう恐れがあります。

そこで、事前にモックアップを作成しイメージを見える化しておけば、イメージと違っていても修正が可能です。最終的にイメージとの乖離を防げるでしょう。

課題がわかりやすくなる

課題がわかりやすくなるのもメリットです。

Webサイト制作においては、工程の途中でさまざまな課題が生じます。

モックアップを作成すれば、デザインの途中で課題が生じても把握しやすいでしょう。

ツールの機能を活用して社内で情報を共有すれば、認識を統一できます。

仕様変更のリスクを防止できる

仕様変更のリスクを防止できるのもメリットです。

クライアントの要望通りに制作を進めても、完成形に近い状態で仕様変更になることもあるでしょう。

デザインが完成した段階で、モックアップを作成しクライアントと共有すれば仕様変更になっても迅速に対処できます。

完成してからの変更よりも、コストや時間を節約できます。

まとめ：モックアップを作成してデザインの完成度を高めよう

モックアップは、デザインを見える化して社内やクライアントとの共有が可能です。

ツールを活用すれば、専門的な知識がなくても簡単にモックアップを作成できます。

あくまでもデザインイメージのサンプルですが、完成後に修正するリスクを軽減できるのもメリットです。

モックアップを作成して、デザインの完成度を高めてください。

前の記事

インサイトとは？マーケティングやビジネスでの意味・事例をわかり…

次の記事

プロトタイプとは？Webサイト制作での意味や種類をわかりやすく…