モックアップの基礎知識
デザインの現場で頻繁に耳にする言葉の中に、『モックアップ』というワードがあります。
デザインの細かいニュアンスを言葉で相手に伝えることには限界があります。その限界を超える手段としてモックアップを活用することで、互いの認識を速やかに共有することができるのです。
まずモックアップの内容や、モックアップ作成のメリットについて解説します。
モックアップとは
モックアップとは、直訳すると『模型』です。ウェブサイトやアプリのデザインを制作する際、完成品の模型となり、そのサイトやアプリの完成イメージを視覚的に表現するものがモックアップです。
イメージを共有することで、開発者同士やあるいは開発者とクライアント同士が互いの認識を一つにまとめることができます。
モックアップ作成のメリット
実際にサイトやアプリの制作に取り掛かる前にモックアップを作成することで、
- お互いの認識のズレがなくなる
- スムーズに開発を進められる
- エビデンスが残る
というメリットがあります。
開発途中で認識のズレが判明した場合に、大きく方向転換せざるを得なくなるというリスクを避けられるのです。
また、アプリ開発のプレゼンテーション段階で完成品を提示することは時間も手間もかかります。手軽に作成できて、サービスの概要を分かりやすく表現できるモックアップが、それらの負担を省く役目も果たしてくれるのです。
モックアップの作り方
モックアップの作成は一見難しそうに思えますが、すでにネット上に用意されているツールを活用することで、初心者でも簡単に作成することが可能です。
ここでは、素材のはめ込みかたやスタイルの調整など、モックアップの作り方の概要を解説します。
素材を準備してはめ込む
モックアップは、Photoshopなどの画像編集ソフトを使って簡単に作成することができます。画像などのダウンロードサービス『Adobe Stock』を検索すると、モックアップに使えるさまざまな素材が見つかります。それらの中からイメージに合う画像を選択してください。
素材を購入してダウンロードした後は、マイライブラリを確認しましょう。ライセンス取得済みのマークがついた画像を選択して、カンバス上にドラッグ&ドロップすることで、簡単に素材をはめ込むことができます。
スタイルなどを調整する
選択した画像のスタイルは自由に調整できます。Shiftキーを押して画像を適切な大きさに縮小し、適切な大きさに変形させることで目的の枠の中に自然に配置することができるのです。
さらに立体感や陰影の調整をして細部を仕上げましょう。不自然さが目立たないようにツールを細かく調整し、違和感がなくなるように調整すればモックアップが完成します。
iPhoneやiPadでおすすめの作成ツール
スマートフォンアプリやモバイルサービス用のモックアップは、モバイル用の作成ツールを使えば、iPhoneだけでも手軽に作成可能です。ここからはiPhoneでおすすめのモックアップ作成ツールを3つ紹介します。
直感的に操作できるInterface3
『Interface3』は直感的な操作でモックアップが作成できるiPad用のツールです。すでに用意されている要素を画面に追加し、簡単な設定をすることで短時間でモックアップが完成します。
操作性が高いので使いやすく、これまでモックアップを作ったことがない人でも、チュートリアル動画をみれば短時間でモックアップを作成できるでしょう。
無料版と有料版がありますが、無料版でも十分見栄えのいいモックアップを作成できます。
- アプリ名：Interface3 for iPad
- 価格：無料（有料版あり）
- App Store：ダウンロードページ
アナログ派にもおすすめのPOP
『POP』はiPhoneとiPadの両方に対応したアプリです。紙で描いたデザイン画などを、そのままカメラで撮影し、モックアップとして組み立てられます。
出先でもアイデアを素早く形にできるので、急遽モックアップを作る必要が生じたときなどにも便利です。アナログ派で、デザイン画は紙に描くことが多いという人にもおすすめできます。
- アプリ名：POP
- 価格：無料
- App Store：ダウンロードページ
様々なシーンで使えるAppCooker
多機能なサービスの提供が特徴的なツールが、このAppCookerです。iPadやiPadminiを使用してモックアップを作成することができます。
さらにアイコン画像の作成やアプリの売上予測までしてくれる優れた機能を持っています。App Storeでの評価も高くコメントも概ね好意的です。
- アプリ名：AppCooker
- 価格：29.99ドル
- App Store：ダウンロードページ
まとめ
アプリやウェブサイトなど何らかのサービスを開発する場合、モックアップを利用することでイメージの共有がしやすくなり、プロジェクトをスムーズに進めることができます。
モックアップはiPhoneなどのモバイル端末でも手軽に作成可能です。これから新たにアプリ開発などをする場合は、モックアップを作成してコミュケーションの円滑化を図りましょう。