モックアップは、Webサイトやアプリの完成度を左右する重要な役割を持ちます。しかし、Web制作の現場でどのようにモックアップが活用されるのかイメージしにくいという方も多いのではないでしょうか。
本記事では、Webサイトやアプリの制作に欠かせないモックアップについて解説します。Webサイトの構築に関わる方や、Web制作の分野で新たなキャリアを目指したい方は、本記事を参考にモックアップに関する知識を深めましょう。
モックアップとは
モックアップは「模型」という意味を持つ言葉で、Webサイトやアプリの制作現場ではレイアウトなどのビジュアルサンプルを指します。
例えば、クライアントの要望をもとにWebサイトを制作する際、初期段階でモックアップを共有することで、完成イメージを明確化できます。あくまで見た目のみを整えた「模型」ではありますが、完成度の高いWebサイトを制作するために、モックアップは欠かすことのできないものなのです。
モックアップとデザインカンプの違い
モックアップと似た用語に「デザインカンプ」があります。このデザインカンプも、Web制作の現場でよく使用されます。「カンプ」はデザインやレイアウトの完成見本を示すもので、制作物の仕上がりを事前に確認する際に役立ちます。
デザインカンプが完成形の「デザイン案」で、モックアップが完成品の「実物模型」という点で違いはあるものの、制作イメージをすり合わせる際に利用されるという点では、両者は同じ意味合いで用いられることも多いです。
モックアップとワイヤーフレームの違い
ワイヤーフレームはWebサイトやアプリの「構成」をシンプルに示したものです。ワイヤーフレームでWebサイトの設計を行い、それに色味やデザインを加えてモックアップを作成します。
いずれもWeb制作の設計段階で使用されますが、ワイヤーフレームはサイトの「構造」を、モックアップはビジュアル面での「デザイン」を共有するためのものである点に違いがあります。
モックアップとプロトタイプの違い
プロトタイプは制作物の「試作品」を指します。プロトタイプを使用することで、実際にWebサイトがどのような動きをするか、どのボタンを押すことで、どこのページに遷移するかといった「動作面」での確認が可能です。
モックアップはあくまで「模型」であり、実際にWebサイトを使用する際の機能は実装されていないので、動作の確認をする際はプロトタイプが利用されます。
モックアップの立ち位置
Webサイト制作において、モックアップは一般的にワイヤーフレームのあとに作成・使用されます。ワイヤーフレームがサイト構造のスケッチだとしたら、モックアップはサイトの完成模型という立ち位置です。
制作物の規模や制作現場によって流れや工程に若干の違いは見られるものの、主にモックアップと並行して、機能・動作面を測るプロトタイプが作成され、完成イメージのすり合わせが行われます。
モックアップ作成のメリット
モックアップのメリットには、主に以下の点が挙げられます。
いずれもスムーズなWeb制作のために欠かすことのできないポイントです。それぞれ見ていきましょう。
完成形がイメージできる
モックアップはWebサイトの設計段階で作成され、事前に完成イメージを明確化することができます。
完成形がはっきりしていれば、都度デザインを組み直す必要がないので、制作もスムーズに進むでしょう。また当初の想定と完成形が乖離することもなく、イメージ通りのWebサイトが制作しやすくなります。
正確なモックアップの作成は、スムーズな制作進行かつサイトの完成度を高めるために欠かせません。
デザイン・機能の視覚的な共有ができる
モックアップは、ビジュアルデザインを関係者間で確認する際も非常に役立ちます。
「お洒落なデザイン」「クールな色合い」など、抽象的なイメージのみで制作を進めても、それぞれのメンバ―が考えるデザインは異なるため、制作がスムーズに進まなかったり成果物に統一感が無くなったりする恐れがあります。
よって、イメージを可視化したモックアップがあれば、メンバーやクライアントと完成イメージを共有でき、認識の違いも起きづらくなります。
修正・変更のリスク低減につながる
サイトを制作する途中でデザインの修正や変更が発生した場合、作業に遅れをきたしたり、余計なリソースを必要としたりするなどのリスクを伴う可能性があります。
その際、モックアップが共有されていれば、制作の方向性がずれた場合でもすぐに問題が可視化でき、作業にも余裕が生まれます。
また完成間近になってクライアントから「イメージと違う」といった修正依頼の発生リスクも低減されるので、制作からサイト公開までスムーズに進行しやすくなるでしょう。
デザインの評価ができる
クライアントの要望をもとにデザインを具現化していく場合や、複数名のチームでWeb制作にあたる際、制作物のイメージ共有が欠かせません。
その際、ビジュアルイメージがないままで議論をしても、具体的な完成形が描けないほか、評価の方向性も定まりません。
モックアップという「完成模型」を用いて話し合うことで、具体性のあるレイアウトを考えられるほか、細部のデザインまでこだわることができます。
モックアップの作り方
モップアップを作るには、主に以下の工程を踏みます。
実際にどのような流れで作成すればよいのかを順番に見ていきましょう。
1.デザインツールの選定
モックアップはデザインツールを使用して制作することができます。デザインツールを利用すれば、コーディングなどの専門知識がなくてもモックアップを作成しやすいほか、複数人でイメージを共有しながら作ることも可能です。
代表的なデザインツールには「Canva」や「Photoshop」、「Illustrator」「Figma」「Sketch」「Adobe XD」などが挙げられます。
ツールの利用に料金がかかることも少なくありませんが、無料のお試し期間を設けている場合もあります。適切なツール選定は、作業効率化やスムーズな制作進行において重要です。
2.基本構造とレイアウトの決定
利用するデザインツールを選択したら、Webサイトの基本構造・レイアウトを決めていきます。はじめにおおよそのスケッチを描き、次にワイヤーフレームで骨組みを整えていきます。
基本構造を決める際は、細部だけでなく全体的なレイアウトにもこだわり、サイトの利用目的やクライアントの意向などをふまえた、統一感のあるデザイン作りを心がけましょう。
3.ビジュアル要素の追加
基本構造が決まったら、それにアイコンや写真、ロゴなど、ビジュアル要素を追加していきます。特にデザインの色味は、サイトのイメージを決定づける重要な要素となるため、慎重に選ぶ必要があるでしょう。
ビジュアルデザインにはクライアントの意向やメンバーの意見を反映させるほか、実際に使用するユーザー目線での検討も欠かせません。
モックアップ作成時のポイント
モックアップを作成する際は、漫然と進めるのではなく、押さえておくべきいくつかのポイントがあります。
それぞれのポイントを解説します。
遷移先の画面数の確認
サイト内に別ページへ遷移させる機能を含める場合、事前に遷移先の画面数がいくつであるかを明確にしておく必要があります。ワイヤーフレームの段階から、遷移させるためのボタンなどを組み込んでおき、モックアップにも漏れなく反映させます。
遷移先の画面数をあとから修正しようとすると全体のデザインのバランスにも支障をきたすことがあるため、遷移先の画面数はしっかり確認しておきましょう。
ユーザー目線を意識した導線設計
モックアップの作成においては、サイトを利用するユーザー目線での導線設計にこだわる必要があります。
サイトを開いた際のファーストビューをどのようなデザインにするか、そこからどういった操作で何をチェックするかなど、実際の使用感をイメージしてモックアップを作り上げるとよいでしょう。
そのためにはサイトの目的やクライアントがユーザーへ伝えたいポイントなどについても理解しておく必要があります。
情報の確認・共有の徹底
モックアップ作成の目的は、設計段階で完成イメージを共有することです。そのためには、サイトに盛り込むべき内容や情報についてクライアントと確認しておくほか、作成したモックアップに評価をもらい、都度修正点を反映していくことが大切です。
モックアップの時点で改善の余地を残しておくと、制作の途中で変更や再考が必要となり、制作に支障をきたす可能性があります。
制作をスムーズに進めるためにも、モックアップは確認を重ねながら慎重に作成しましょう。
モックアップはWeb制作に欠かせない要素
モックアップはWebサイト制作の方向性を決める重要な役割を持っており、制作をスムーズに進めるために欠かせない要素です。正確なモックアップを作成することが、Webサイトの完成度にも大きな影響を与えるでしょう。
女性向けキャリアスクールSHElikes（シーライクス）では、全45以上の職種スキルの習得が目指せるコースを用意しています。PhotoshopやFigmaコースなど、モックアップ作成に必要なスキルを学べます。
Webデザインの知識を学び新たなキャリアを目指したい方は、まずは無料体験レッスンに参加してみてはいかがでしょうか。
