Web制作では設計も重要！モックアップの必要性と作成ポイントを紹介
Web制作においては、利用者の気持ちに立ったデザインや機能の実装が大切です。
これらを満たすためには制作段階で関係者が協議しあい、多くの問題点を洗い出して解決しなければなりませんが、何が問題点となりうるのかをそもそも理解できておくことが大前提になります。
制作するコンテンツの問題を洗い出すためには、モックアップの作成が効果的です。
今回はモックアップ作成の重要性や作成時のポイントについてまとめました。制作過程におけるワイヤーフレームやプロトタイプとの違いについても述べているため、Web制作に携わる担当者の方はぜひ参考にしてください。あわせて、効率的にモックアップを作成するためのおすすめツールも紹介しています。
モックアップとは？
モックアップとは日本語で模型を意味する言葉で、本来の機能は有していないものの本物そっくりの外観を再現した見本品のことを指します。
Web制作におけるモックアップは、サイトやアプリケーションの初期設計を具現化したモデルのことです。
モックアップとして具現化するのはデザインや色合いといった見た目部分で、機能部分の実装はこの段階では行いません。
色合いや画像、ボタンやテキストの配置等に問題がなさそうかなど、デザイン面の検証に広く活用されます。
このモックアップを確実に作成しておくことで、以降の作業が進みやすくなるのです。
モックアップは開発前の設計段階として作成されるものの一部であり、基本的にはスケッチ→ワイヤーフレーム→モックアップ→プロトタイプの順で作成が進められます。
モックアップとそれぞれの工程の違いは以下で解説します。
スケッチとの違い
スケッチとは文字通り紙にアイディアやデザインのラフを書き出すものであり、いわば最初の下書きにあたる工程です。
フリーハンドで大まかにサイトのレイアウトを描いて、どういう方針でデザインを固めていくかを検討します。
サイトやアプリケーションを利用するユーザーに何を伝えたいのか、プロジェクトの目的を念頭に置きながらアイディアを巡らせます。
モックアップ作成の基礎の基礎になる工程がスケッチだと覚えておきましょう。
ワイヤーフレームとの違い
スケッチで大まかなレイアウトを完成させた後に行うのが、サイトやアプリケーションの骨組み部分であるワイヤーフレームの作成です。
ここにこのサイズの画像を貼り付ける、このボタンとテキストエリアは横並びにするなどを考えて枠取りして、デザインの基盤部分を作り上げる工程です。
もちろんワイヤーフレームがデザインの完成形ではなく、これをもとにモックアップやプロトタイプを作っていき、違和感のある箇所や問題点を洗い出して改善を繰り返していきます。
プロジェクトによってはスケッチの工程を省略して、ワイヤーフレームから設計を進めていくケースもあります。
プロトタイプとの違い
プロトタイプはデザイン部分にくわえて、サイトやアプリケーションに持たせる機能を可能な限り模倣した試作品を作成する工程です。
モックアップがデザインの見本品であるならば、プロトタイプは機能の試作品という認識を持っておきましょう。
プロトタイプで実装する機能として代表的なものが、画面遷移です。
複数の画面を持つサイトやアプリケーションでは、どのアクションでどの画面に遷移するかは利用の快適さや機能性の高さを決定付ける重要な要素です。
画面遷移のサンプルが作成できると利用イメージも関係者間で共有できるため、実利用を想定したあらゆる問題点を洗い出せます。
モックアップに続いて、プロトタイプも質の高いものが作成できれば以降の作業を効率よく進められるでしょう。
モックアップの重要性
設計段階において、モックアップの作成は完成後のコンテンツの質を大きく左右する重要性を持っています。
具体的には、以下の項目においてモックアップは重要な役割を担います。
デザインの認識合わせ
モックアップはデザイン面において完成形に近いため、プロジェクトメンバーやクライアントと認識を合わせる時に重宝されます。
開発作業においてもっとも避けたい事態が、認識の齟齬による作業の戻りです。
自社とクライアントで認識がずれたまま作業を進めると、スケジュールや予算的にも大きな損害となります。
モックアップを作成して事前にデザインの認識合わせを実施することで、余計な作業の発生を防ぎます。
開発前の評価と問題の可視化
本格的な開発が始まってからのデザイン変更は、これまでやってきた作業を丸ごとやり直さなければならない恐れもあります。
そのため、開発前のモックアップの段階でデザインを評価できる体制が整っていれば、プロジェクトメンバーやクライアントと問題の有無を事前にチェックできます。
問題を洗い出して課題を見つけられれば、開発作業が進んでからの作業戻りも防げるため効果的です。
ただ設計書を見るだけでなく視覚的な見本があれば、Webに精通していない人であっても自分なりの違和感や感想を言葉に表せます。
モックアップは関係者全体で共有して評価を行いやすく、問題を可視化するツールとしておすすめです。
画面の作成漏れを防ぐ
モックアップはデザイン面の確認に必要なため、サイトやアプリケーションのページ数、画面数に応じて漏れなく作成しなければなりません。
そのため、モックアップを見ていく中で必要な画面がすべてデザインできているか、新たに必要と感じる画面はないかを確認して画面の作成漏れを防ぐ効果があります。
画面数はワイヤーフレームの段階で考えられていることがほとんどですが、モックアップ後のプロトタイプを作るタイミングでは画面遷移などの機能も検討しなければなりません。
遷移元・遷移先の画面がそれぞれ用意されているか、関係者にモックアップが共有された段階で協議しておけば開発時に画面を作り忘れる事態を避けられます。
モックアップ作成時のポイント
モックアップを作成する際は、いくつかポイントがあります。
質の高いモックアップを作るためにも、以下のポイントを意識して作業にあたりましょう。
ワイヤーフレームを参考に取り掛かる
モックアップを作成する段階では、スケッチやワイヤーフレームを既に作成しています。
スケッチを作らずワイヤーフレームから取り掛かるケースもありますが、少なくともモックアップを作るために参照する枠組みは持っています。
モックアップは、あくまで事前に作ったワイヤーフレームを参考に作り始めましょう。
作成後の話し合いやレビュー時には内容の変更を求められることもありますが、最初のモックアップは素直にワイヤーフレームを参考にして作成することで、無駄な作業時間をかけずに済みます。
モックアップは完璧につくるのではなく、デザインの不備や違和感を指摘されて当然と思いながら作成にあたりましょう。
ファーストビューは特に力を入れて作成
Webマーケティングにおいて、サイトに訪れたりアプリを起動したユーザーがいかに興味を持ってくれるかが大切です。
ユーザーが強い興味を抱くコンテンツに仕上がるかは、ファーストビューの作り込みが左右するといっても過言ではありません。
ファーストビューとは、サイトやアプリケーションを開いた時にユーザーが最初に目にする部分です。
インパクトのある画像を差し込んだり、特徴的なキャッチコピーを見せてコンテンツを強く印象付けるのが目的になります。
このファーストビューでユーザーの興味を引けなければその分離脱も早くなり、中々成約へとつなげられません。
ユーザーの興味を引くファーストビューを作り上げるためにも、モックアップの段階から注力して作成にあたりましょう。
また、ファーストビューはPCやスマートフォンなど、コンテンツを開く端末や画面サイズによっても見た目が異なります。
あらゆる状況での見た目を想定したモックアップを用意して、多くのユーザーを成約に導けるよう備えるのが望ましいです。
デザイン変更やレビュー要望も柔軟に取り入れる
モックアップはあくまでデザインを模倣したもので、それをもとに関係者からのレビューや要望が入ります。
レビューや要望をもらったら柔軟に取り入れることで、より質の高いデザインを目指せます。
モックアップはこうしたレビューや要望をもらえてこそ作成した甲斐もあるため、失敗を恐れずに作成しましょう。
利用導線を考えながら作成する
ユーザーの実操作を想定した試作品はモックアップの次の段階であるプロトタイプで作成しますが、モックアップの時点でも利用導線を考えながら作成していきましょう。
ワイヤーフレームをもとに一度モックアップを作り上げてみると、ボタンはここに配置されていた方が押しやすそう、色合いが弱くてユーザーの興味を引かないといった見た目からでも分かる違和感が判明してきます。
こうした部分を関係者間で協議したうえで、プロトタイプを作る前にデザイン面から最適な利用導線を組み立てておくことをおすすめします。
大切なのは、ユーザーがそのコンテンツにおける最終目標の成約まで進んでくれることです。
自分がユーザーの場合はどのようなデザインであれば使いやすいと感じるのか、客観的な意見も持ちながらモックアップを作成しましょう。
不自然なレイアウトがないか確認
各要素に画像を貼ったり色をつけることで、ワイヤーフレームの段階では見えてこなかった違和感や不自然さが浮き出てきます。
こうしたレイアウトをモックアップ上で確認できれば、改善してより質の高いサイトやアプリケーションの作成につなげられます。
一度作ってみたモックアップは冷静に全体を確認して、不自然や違和感の残る箇所を洗い出すようにしましょう。
モックアップ作成におすすめのツール
モックアップはさまざまなツールで作成でき、いずれも業務効率化に大幅に役立てられます。
おすすめのモックアップ作成ツールを3つ紹介するため、どのツールを使うべきか悩んでいる方は参考にしてください。
Canva
参考: https://www.canva.com/ja_jp/
グラフィックデザインツールとしてWebデザイナーの利用者が多いCanvaは、豊富なテンプレートや素材数の多さでモックアップの作成に向いています。
作成したデザインをPCやスマートフォンの画面に埋め込んで確認できるため、実機でデザインを見る状況を再現できるのは大きな特徴です。
端末に対してのサイズ感を確認してバランスのよくデザインを修正できれば、コンテンツ全体の質も向上します。
スマホ版を使えば手元のスマートフォンでもデザインが行えるため、手軽にモックアップを作成したい方にはおすすめのツールです。
Figma
クラウドベースでWebデザインを作成できるツールです。
ブラウザ上で容易に操作ができるため、端末を選ばず誰でもWebデザインが行えます。
画像貼り付けや図形埋め込みといった機能ももちろん搭載されているため、さまざまなモックアップ画面の作成におすすめです。
作ったデザインは編集画面のURLを共有するだけで誰でも確認でき、また同時に編集作業も行えるため、レビューや修正作業が簡単に実施できます。
MockUPhone
MockUPhoneはサイトやアプリケーションのデザイン自体はできませんが、あらゆるスマートフォンやタブレットデバイスの埋め込み画像を作成できます。
デバイスはカラーも豊富に揃っており、背景も過されているため、不要な箇所を切り抜く手間もかかりません。
iOSやAndroidの主要端末だけでなく、パソコンやテレビ画面に埋め込んだモックアップも容易に作成できます。
プレゼン資料などで活用するモックアップ画像を作成したい方にはおすすめできるツールです。
モックアップについてよくある質問
Q:モックアップはツールを使わなくても作成できる？
Answer）モックアップ作成用のツールを新たに覚えるのが手間だと感じる場合は、元々利用しているデザインツールやコーディングによる作成も可能です。
ただしモックアップの作成を今後頻繁に行う可能性がある場合は、効率化のことを考えてツールを活用することをおすすめします。
Q:モックアップ作成にWebデザインの知識は必須？
Answer）モックアップはワイヤーフレームの次の段階として作成されるため、Webデザインの知識を持つ担当者が引き続き取り組むことが望ましいです。
ワイヤーフレームでは見えなかったデザインの全体像や、スマホ・PC別のレスポンシブデザインのイメージなども上手に作成できればより具体的になります。
レスポンシブデザインについては以下の記事でも詳しく解説しているためご確認ください。
参考ページ：レスポンシブデザインとは？ CSSとHTMLの作り方やブレイクポイントの目安も
Q:作成したモックアップはどのように公開すればよい？
Answer）モックアップは外観のみ再現した見本品であるため、公開方法はクライアントや社内メンバーで共有しやすい形であればも何でも構いません。
画像として公開するもよし、紙に印刷して関係者に配布するなど、手軽に確認してもらえる方法を選ぶとよいでしょう。
まとめ
モックアップはWeb制作において、デザインの質を高める重要な役割を担います。Webマーケティングにおいてコンテンツの質の高さは最終目標であるユーザーの成約というアクションに直結します。よいモックアップが作成できてこそ、的を得たレビューやクライアントからの具体的な要望が飛び交い、ユーザー満足度を高められるコンテンツに仕上がるのです。ファーストビューが興味を引くものになっているか、不自然なレイアウトがないかなども意識しながら作業に取り掛かりましょう。
この記事の監修者
日本大学法学部卒業、広告代理店で12年間働いている間、SEOと出会い、SEO草創期からSEO研究を始める。SEOを独学で研究し100以上のサイトで実験と検証を繰り返しました。そのノウハウを元に起業し現在、11期目。営業、SEOコンサル、WEB解析（Googleアナリティクス個人認定資格GAIQ保持）コーディング、サイト制作となんでもこなす。会社としては今まで2000以上のサイトのSEO対策を手掛けてきました。
