モックアップとは
モックアップとは模型を意味する言葉です。Webサイトやアプリのデザインにも使われるモックアップの概要について解説します。
模型やプロダクトデザインの試作
モックアップとは模型やプロダクトデザインの試作を指します。Webサイトやアプリデザインで使われるモックアップは、完成形に近いデザインやコンテンツを確認するために使われます。
ただし、モックアップはデザインやコンテンツの完成イメージを確認するためのものなので、画面の遷移やプログラムが動作することはありません。動作するものはプロトタイプと呼びます。
モックアップはなぜ必要か
前述のとおり、モックアップはWebサイトやアプリの完成イメージを確認するためものものです。
Webサイトやアプリを本格的に作り込む前に、一度立ち止まってイメージを形にすることで、全体のデザインやバランスを確認したり、気づかなかった問題を洗い出したりできます。
本格的な開発に入ってからの手戻りはコストや納期に影響するので、モックアップを作ることは必要な工程だと言えます。
モックアップの作り方例
モックアップはAdobeのイラストレーターやフォトショップを使えば簡単に作成することができます。フォトショップを例に、具体的な作り方を紹介しますので参考にしてください。
イラストレーターでの作成など素材準備
まずはモックアップに必要な素材を集めます。素材はAdobe StockやAdobe Creative Cloud マーケットから入手することが可能です。
例えばスマートフォンアプリのモックアップを作るのであれば、フォトショップからAdobe Stock検索し、スマートフォンの外観画像を選びます。
次に、スマートフォンの画面にはめ込むアプリの画像を準備します。アプリの特徴が分かりやすい画像を選ぶのがポイントです。また必要に応じて、イラストレーターで素材を作成します。
ストック写真、ロイヤリティフリーの画像、グラフィック、ベクターおよびビデオ | Adobe Stock
画像のはめ込みと調整
それぞれの画像が準備できたら、実際にはめ込みを行います。フォトショップでスマートフォンの外観画像を開き、次にはめ込み用のアプリ画像を配置します。
アプリ画像はスマートフォンの画面の大きさに合わせて縮小し、角度を調整してスマートフォンの画面にぴったりと重なるようにします。
さらに、レイヤーをかけることでスマートフォンとアプリ画面の境目に立体感を出すと、自然な感じに仕上がります。
おすすめモックアップ作成ツール
モックアップはフォトショップやイラストレーターを使わなくても作ることができます。さまざまなモックアップ作成ツールがありますが、その中からおすすめのツールを紹介します。
Webブラウザ利用で共有可能なInVision
『InVision』はWebブラウザ上で動作するモックアップ作成ツールです。TwitterやEvernoteといった海外の有名企業でも使用されており、信頼性は高いと言えるでしょう。
作ったモックアップファイルは共有することができるほか、ログやコメントを残すことができるので、チームでの開発作業に向いているツールです。
無料版と有料版（月額15ドル～）がありますが、無料版は1個のモックアップしか作れないため、本格的に使うのであれば有料版が必要です。
InVision | Digital product design, workflow & collaboration
iPhoneアプリならAppCooker
『AppCooker』はiPhoneやiPadなどのiOSアプリのモックアップが作成できるツールです。
モックアップ作成だけでなく、画面遷移や売上予測など多彩な機能を備えているので、幅広く活用することができます。
有料アプリですが、公式サイトの動画で使用イメージをチェックすることができます。iOSアプリを作るのであれば、そろえておいて損はないでしょう。
- アプリ名：AppCooker Prototyping & Mockup
- 価格：29.99ドル
- iTunes：ダウンロードページ
HTML自動生成のBootstrap Studio
『Bootstrap Studio』はWindows、MacOS、Linuxで動作するツールです。
CSSフレームワークである『Bootstrap』からモックアップを作ることができるほか、作ったモックアップのHTMLとCSS、JavaScriptが自動生成されるのが特徴です。
ドラッグ＆ドロップだけでかなりの部分を作成できるため、コーディングをほぼ必要としません。また、編集した結果はリアルタイムで確認できるため、効率的に作業を行うことができます。
有料で英語版のみですが、Bootstrapを使っているのであれば購入を検討する価値は十分ありそうです。
Bootstrap Studio - The Revolutionary Web Design Tool
名刺モックアップならBusinesscardstar
『Businesscardstar』は名刺作成に特化したツールです。Webブラウザ上で動作し、名刺だけでなくポストカードを作ることもできます。
あらかじめ用意されたテンプレートから好みのものを選び、名刺デザインを作ります。作った名刺データはモックアップとしてだけでなく、名刺用紙に印刷して使うこともできます。
Business Card Star - It's easy to make your own business cards online - Try it for free.
まとめ
モックアップはWebサイトやアプリのデザインを効率よく開発するために欠かせないものです。モックアップを作ることは、開発の方向性を再確認すると同時に、潜在的な課題を見つけるきっかけになります。
本格的な開発作業に入る前に必ずモックアップを作るようにしましょう。
