用語の意味を理解しよう
Webデザインを行う上では、さまざまな用語が飛び交います。こうした用語の意味を理解していないと、クライアントとの共有に支障が出て、信用が落ちてしまう可能性もあるでしょう。
モックアップと混同されやすい用語がいくつかありますので、それぞれの意味について理解を深めることが重要です。
スケッチとは
スケッチは、デザイン行程において最初に行う作業です。1枚の紙にフリーハンドで描く手法で、デザインのアイディアや構想をまとめるために行います。
クライアントとの打ち合わせやデザインの会議において有効な手法で、アイディアが浮かんだ際のメモや注文なども取り込みつつ、構想を視覚化する作業です。
いわば設計図を作る前の段階のアイディア案のようなものですが、その後の段階をスムーズに進めるためにも、しっかりとイメージを形にしておきましょう。
ワイヤーフレームとは
ワイヤーフレームはシンプルな設計図です。Webサイトであれば、どの位置にどのようなコンテンツを配置するのか、レイアウトの視覚化をする段階にあたります。
構造を形にしておくことで完成のイメージを関係者同士で共有し、実際に作った時に素材や機能が欠けていたということがないようにするためのものです。
ボタンの配置やロゴの位置などはこの段階で決定します。
モックアップとは
ワイヤーフレームを元に、さらに綿密な設計を作っていくのがモックアップです。テキストやフォント、画像などを追加して完成品に寄せることで、全体のデザインや要素、機能について確認します。
モックアップは、直訳すると『模型』です。その名のとおり、できる限り完成品に近い見た目にしてデザインを検証し、修正や課題の解決を繰り返してブラッシュアップをしていくためなどに使われます。
プロトタイプとは
モックアップはビジュアルやデザイン面など、いわば外見のデザインに重点を置いているのに対し、プロトタイプは内面を確認するための工程を踏む、いわば試作品です。
ボタンを押した時のアクションや移動時の画面の移り変わりなどを実際にチェックします。実際のデータのやりとりなどは行いませんが、操作性や機能について確認していく段階です。
完成させる前に、この段階で実際に顧客やクライアントに提出し、フィードバックをもらうこともあります。
アプリ制作の流れとモックアップ
アプリケーションを作る際に、どういった制作過程を辿るのかを確認しましょう。加えて、なぜその過程の中でモックアップが必要なのかを解説します。
設計の流れ
基本的には、際ほど紹介した『スケッチ』『ワイヤーフレーム』『モックアップ』『プロトタイプ』の4段階を経て制作を行います。
最初は『企画』です。クライアントから出る場合もありますし、自分から提案する場合もあるでしょう。予算や期間についても確認していきます。
その後は『スケッチ』です。企画が固まって要件を洗い出しできたのなら、大まかなイメージやアイディアをまとめていきましょう。それから『ワイヤーフレーム』を使い、基本設計、必要な素材やプログラムなどを検証していきます。
次に『モックアップ』でデザイン面についての規格を固めていき、最後に『プロトタイプ』を作成して機能やアクション面の仕様について最終確認を行いましょう。
これらの工程をすべて終えた後で、実際に製品を作ることになります。
モックアップの必要性
モックアップやプロトタイプの工程は、時間がかかることもあります。しかし、それぞれの段階でクライアントや製作チームのチェックをもらうためには必要な工程です。
画面がどのようになっているのか、どんなパーツやオブジェクトが配置されているのかといったデザインやレイアウトのチェックができますし、プロトタイプは実際に動作の確認もできます。
仮にワイヤーフレームを見せても、完成形やデザインがイメージし辛いのでなかなか許可が下りないといった事態にもなりかねません。モックアップを先に見せておけば、完成品にリテイクが入る可能性も少なくなります。
モックアップを作成するメリット
モックアップの作成はWebサイトやアプリ開発などにおいて必要な工程ですが、モックアップがあることによってさまざまなメリットが生まれます。どのようなメリットがあるのかに注目していきましょう。
イメージの共有
モックアップのメリットの一つが『完成製品のイメージを共有』できることです。
例えば、喫茶店の内装をイメージしてください。店内の雰囲気や机とテーブルの数、装飾品などを見取り図だけで伝えるより、イメージしやすいイラストや3Dグラフィックなども使って見せた方が理解も早く、共通のイメージとして認識できるでしょう。
具体的な要望も浮かびやすいはずです。設計図の段階であるワイヤーフレームを見せるよりも細かい部分までイメージが伝わり安く、話し合いを一歩先へと進ませることができます。
リスク回避
モックアップやプロトタイプを作らずに、クライアントと制作者の認識がずれたまま作業を進めてしまうと、完成品を提出した段階でリテイクが入るようなケースに発展する恐れがあります。
場合によっては何工程か前に戻す必要が発生してしまいます。他の機能にも影響が出るようになると大幅な仕様変更が必要になりますので、制作期間が大幅に遅れるといった事態にもなりかねません。
このようなリスクを回避するためにも、モックアップの作成は必須と言っていいでしょう。
モックアップの作り方
モックアップの作り方に正解はありません。Sketch、Figma、Photoshopなどデザイナーに利用されるツールや素材を使えば簡単に作ることもできます。ここでは『Photoshop』を使ったモックアップ作り方の一例と、ポイントをご紹介します。
素材の用意とはめ込み
まずはモックアップに利用する素材を用意しましょう。Photoshopを起動してドキュメントを開いたら『ライブラリ』を表示します。検索フィールドが『Adobe Stockを検索』であることを確認しましょう。モックアップに利用する素材がここで手に入ります。
素材を入手したら『マイライブラリ』の中に素材があることを確認しましょう。その画像を選択してカンバス上にドラッグ＆ドロップすることで、素材をはめ込んでいくことができます。
レイヤースタイルの調整
ただ素材をはめ込むだけではなく、レイヤースタイルを調整することによって素材に影を加えて、立体感などを演出できます。
レイヤーパネルにある『レイヤースタイルの追加』から『ベベルとエンボス』を選択します。『レイヤースタイル』のダイアログからスタイルを『ベベル（内側）』に設定し、影の大きさなどの数値を調整してください。これでレイヤーの縁の内側に影ができて、画面全体に立体感が出せます。
グラデーションや透明度の調整
素材の透明度や彩度を調整して全体の雰囲気を整え、さらにグラデーションの演出なども行いましょう。
『グラデーションツール』を使って、白から黒、あるいは透明から黒などのグラデーションのレイヤーを作ります。まずレイヤーのクリッピングマスクを作成して、スマホの画面の部分にだけグラデーションが適用されるようにします。
レイヤーを『オーバーレイ』にすることで、デザインに陰影がつき、自然な感じに仕上がります。レイヤーの透明度を変えることで、グラデーションの強さを調整しましょう。
無料素材を活用しよう
モックアップに使う素材は色々ありますが、インターネット上では無料で使える素材もたくさん配布されています。素材まとめサイト等から、無料素材をダウンロードしてみましょう。
Photoshop形式の素材が便利
モックアップ素材はPhotoshopの形式である『psd』の拡張子である方が良いでしょう。モックアップはPhotoshopで加工されることが多く、そのためネット上で公開されている素材もpsd形式のものが多いからです。
フォントやパーツといった部分素材や、iPhoneやスマートフォン等のテンプレート、他にもポンプや陶磁器といった日用品まで様々なモックアップのための素材があります。
モバイル画面のテンプレートがあれば、アプリを作成する際に画面上でボタンやデザインを考えるのにも便利です。
Photoshopの形式の無料素材の配布サイトが多数ありますので、使いやすいサイトや、デザイナーのブログ等をチェックしてみてください。
作成ツールを活用しよう
Photoshopは画像編集のための汎用的なツールですが、モックアップを作ることに特化した便利なツールもあります。専用ツールでどんなことができるのか、またその選び方についても解説します。
モックアップ作成ツールとは
モックアップ作成ツールでは、直感的な操作でモックアップが作れるフレーム構成などの機能が色々と用意されています。
最近ではクラウド型の作成ツールも登場していて、Web上で動作させることができるモックアップを簡単に作成することが可能です。他のスタッフやクライアントとの共有を行いやすく、作成したデータをいちいち変換するといった手間も必要ありません。
無料ツールもありますが、有料版に比べて機能が少なかったり、試用期間が設定されていたりする場合もあるので、利用方法については作成前に確認しておくことをおすすめします。
ツールの選び方
モックアップの作成ツールはWeb上に多く存在していますが、その中で自分に合ったツールを見つけるために、選別ポイントを押さえておきましょう。
大切なのは『使いやすさ』です。そのためにはツールバーやインターフェイスが使いやすいかどうかを確認しましょう。使える機能が多すぎるために、上級者には便利でも初心者には使いにくいという場合もあります。初心者のうちは直感的に使えるものをおすすめします。
英語が苦手な人は、日本語対応しているツールであるかどうかも重要です。費用がかかりすぎないかといった部分にも注目しましょう。
おすすめのモックアップ作成ツール
モックアップを作成するためによく用いられるのが、『はめ込み画像』を作るツールです。
スマホを持っている人の画像や、PCを使っている人の写真に、モックアップとして作成したアプリやWebサイトの画像をはめ込むことで、開発した完成品を使用している人の様子を表現したのが『はめ込み画像』です。
はめ込み画像を作れるツールの中でも使いやすく、おすすめのものを厳選して紹介しますので参考にしてください。
高クオリティのDunnnk
『Dunnnk』は無料で利用可能で、会員登録も不要なので、初心者に使いやすいWebツールです。モックアップに利用できるクオリティの高い素材が豊富に用意されていて、簡単な操作ではめ込み画像を作成し、ダウンロードできます。
iPhone・Android・Macbook・iPad・iMacの5つのデバイスのはめ込み用画像が用意されているので、さまざまなシーンで活用できるサイトです。
フレーム数の多いFrame
こちらもモックアップ作成に使えるスマホやPCのはめ込み画像が作成できるWebツールです。モックアップ作成に使えるフレームが多くそろえられています。
設定の手間もかからず、FacebookやTwitterなどのSNSで作成したものを共有することもできます。ホームページから簡単に開始できるので初心者にも扱いやすいツールです。
デザインが魅力のMagic Mockups
『Magic Mockups』は、20種類以上のお洒落な画像に、自分で用意した任意の画像をはめこむことで簡単にモックアップが作成できるツールです。こちらもブラウザ上で動作します。
用意されている画像はどれもセンスが良く、魅力的なデザインを作りやすいツールです。PC・スマートフォン・ポスターフレーム・タブレット・iMacなどの画像があります。
iPhoneやiPadでも作成可能
PCだけではなく、iPhoneやiPadでもモックアップが作成可能なツールを紹介します。外出先での空いた時間や、アイディアが浮かんだ時にすぐに起動して作成できるので、ぜひ利用してみてください。
手書きスケッチも取り込めるPOP
iPhone・iPadだけでなく、Android・Windowsにも対応しています。その特徴は、手書きのスケッチを取り込んでモックアップを作ることができる機能です。紙とペンがあればどこにいてもモックアップが作れるので、デジタルデザインになれていない人にも使いやすいツールといえます。
- アプリ名：POP
- 価格：無料
- App Store：ダウンロードページ
多機能で便利なAppCooker
iPad、iPad miniを利用して、iOSアプリのモックアップとプロトタイプが作成できます。画面遷移から画面設計、さらには売上予測を立てるという多彩な機能が魅力です。
そのため、単にモックアップの作成だけでなく、日常のさまざまな場面で利用するのにも便利です。お試し版はありませんが、公式の動画で実際に動かす様子を見られるので、そちらをまずは確認してみてください。
- アプリ名：AppCooker
- 価格：$29.99
- App Store：ダウンロードページ
自由度が高いAppGyver
『AppGyver』はiPhoneとAndroidの両方でモックアップが制作できます。手書きのイラストを使うこともできるため自由度が高いことが特徴です。
テキストや写真、ボタンやパネルといった豊富なパーツもあらかじめそろっています。欲しいパーツがない場合はHTMLを編集できるので、自分で好きなようにカスタマイズできる自由度が高いツールです。
無料でも利用ができますが、用意されている豊富な機能が使える有料版での価格は応相談となっています。まずは無料版から試してみましょう。
- アプリ名：AppGyver
- 価格：無料（有料版あり）
- App Store：ダウンロードページ
まとめ
アプリやWebサイトを設計する上では、モックアップという工程はほぼ必須となります。イメージも共有しやすく、製品作成前に完成時の仕様を想定してプレゼンテーションができるため、大幅な修正や仕様変更になるリスクを抑えることが可能です。
モックアップはPhotoshopで作成されることも多いですが、モックアップ作成の専用ツールもWeb上にはたくさんあります。
モックアップ作成ツールは初心者向けのものや、機能が豊富なもの、テンプレートの多いものなど、それぞれ独自の特徴を持っています。まずは自分に合った作成方法でモックアップの作成に取りかかってみましょう。