こんにちは、つしまです。今週はロゴ制作を行い、提案資料にイメージとしてモックアップを挿入する機会が度々ありました。そこで今回は、提案書作りや実績紹介に役に立つ「モックアップ」についてまとめていきます。
モックアップとは
モックアップ（mock-up）は、英語で「模型」を意味します。
製造業などの場で、外観や機能の検討・確認を目的に試作される原寸大模型のことを指しています。
少し意味は異なりますが、WebサイトやDTPなどの制作現場においても、「自分が制作したデザインが実際にどのような形で使用されるのか」「街中に存在するとどんな印象になるのか」などを想像しやすくするために、ビジュアルイメージとしてモックアップを作成する場合があります。
例えば看板に載せるロゴをデザインしたとして、デザインを決定するのに、実際に看板として掲示されたときにどのように見えるのかを確認したりします。PC上のプレビュー画面を見て得られる印象と、実際に掲示したものを見て得られる印象は大きく異なります。
モックアップを使用することで、社内・社外ともにイメージの共有をすることができます。クライアント側は完成した時のイメージを具体的に理解することができ、デザインを選定する際にも効果的です。また、企業で実績を紹介するときにもデザインの実際のサイズを視覚的に伝えたり、擬似的に掲示されている様子を見せることで、見る人に説得力を与えることができます。
名刺からマグカップ、看板などの大きなものまで、サイズにあったデザインを行えばどんな製品にもデザインを反映させることができます。
モックアップの作り方
Photoshopの「消点」機能を使った方法
まずははめ込みたい画像を開き、長方形選択ツールで全てを選択して、コピーをします。
次に合成する写真を開き、レイヤーパネルから[新規レイヤー]を追加します。
上のメニューバーから[フィルター]→[消点（Vanishing Point）]を選択します。
[面作成ツール]を選択した状態で、合成したい面の四隅をクリックしてポイントを打ちます。
打ったポイントは[面修正ツール]を使い、後から調整することも可能です。
消点（Vanishing Point）の画面のまま、貼り付けをします。
そのままデザイン画像をドラッグして、面を作成した場所に移動すると、自動ではめ込まれます。
はめ込んだ画像は[変形ツール]を使って、拡大・縮小できます。サイズ調整ができたら、完成です。
一度[OK]で確定すると、再度消点（Vanishing Point）の画面をひらけば、前回の設定の情報を維持したままなので、デザインの変更を行いたい場合は新規レイヤーを追加して新たにはめ込むこと、スムーズにできます。
Illustratorのモックアップ作成機能を使った方法
- オブジェクトと合成したい写真を選択
選択ツールでベクターオブジェクトと合成したい画像をまとめて選択します。
※配置するベクターオブジェクトはグループ化しておく必要があります。
※背景はJPGやPSDなどの画像が使用可能ですが、ロゴなど配置するものはベクターアートである必要があります。
- モックアップパネルを表示させる
ベクターオブジェクトと合成用画像の全てを選択したら、上のメニューバーからオブジェクト→モックアップ→作成を選択します。
モックアップパネルにはイメージ画像の一覧が表示されているので、独自の画像を使わない場合は、それらの画像をカンバスにドラッグして使うこともできます。
- オブジェクトを目的の場所に配置する
モックアップの作成をクリックするとベクターオブジェクトが画像に合わせて自動で配置されます。
配置されたベクターオブジェクトはクリックして移動させたり、周囲に表示されるバウンディボックスをドラッグして大きさや角度を変更することができます。
さいごに
デザインモックアップの使用用途は紙媒体に留まらず、パッケージデザイン、ウェアのデザインなど、立体的なものにも活用できます。ビジュアルイメージの展開をいきなり実物で行うことは難しいですが、デジタル上であれば簡単に行うことが可能です。
提案書の訴求力をアップさせたり、実績紹介を少しランクアップさせるモックアップ、うまく活用していきたいです。
