このモックアップ、どっちが正解？ロゴを素材に馴染ませるセンスを磨こう
現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。
デザイナー・アートディレクターの黒葛原 道です。
今回、私は「モックアップ」についてのクイズを出題します。
自分でデザインしたロゴが完成したら、実際のグッズや製品に使われたときのイメージを確認したくなりますよね。
そこでつくるのが「モックアップ」です。
モックアップとは、Tシャツやトートバッグ、コーヒーカップなどにロゴを貼り込んで、実際に使われたときの「完成イメージ」を再現したものです。
でも、ただロゴを単に画像の上に置くだけでは、どこか浮いた仕上がりになってしまうことも……。
実はモックアップの仕上がりをよくするためには、素材の質感やシワ、曲面にぴったりロゴを馴染ませる必要があります。
それでは、モックアップを題材にした3問クイズを出します。
以下の3つの作例を見て、AとB、あなたはどちらの「モックアップ」がより違和感なく仕上がっていると感じますか？
1問目「ロゴがカップの形に馴染んでいるのはどっち？」（難易度★）
2問目「ロゴが白いTシャツに馴染んでいるのはどっち？」（難易度★）
3問目「ロゴがボールの質感に馴染んでいるのはどっち？」（難易度★★★）
いかがでしたか？
私が考える答えは……
1問目の答え：B
2問目の答え：A
3問目の答え：A
以上が私なりの解答です。
ロゴが自然に馴染んでいると感じたモックアップは、AとBどちらでしたか？
ではここからは、それぞれの作例のAとBで、どこが異なっていたのか？を説明し、作例で用いられていたデザインテクニックについて紹介していきます。
https://main--cc--adobecom.aem.page/jp/cc-shared/fragments/roc/seo/design/quiz-challenge-annotation
1．ロゴを馴染ませたい場合は「モックアップ機能」の利用を検討する
まずは1問目を振り返ります。
私の考える正解は「B」でした。
AとBは、いずれもコーヒーカップにロゴを配置したモックアップです。
それでは、AとBを見比べてみましょう。
Aは、ロゴがカップの上にそのまま置かれただけの状態です。
ロゴは平面のまま変形していないため、カップの丸みに馴染んでおらず、浮いた印象になっています。
一方Bは、ロゴがカップの丸みに沿って自然に変形しており、実際に印刷されたような仕上がりになっています。
カップの曲面に合わせてロゴが歪んでいるため、立体感のあるリアルなイメージに見えます。
モックアップでは、ロゴやデザインが対象物の形状に馴染んでいるかどうかは、仕上がりの説得力を大きく左右します。
ただ上に重ねるだけでは「仮置き」に見えてしまい、完成イメージとしての役割を果たしません。
以上の理由から、ここでは「B」を正解に選びました。
Illustratorの「モックアップ」機能でロゴを曲面に馴染ませる方法
Illustratorには、写真の上にロゴやデザインを配置するだけで、素材の形状に合わせて自動的に変形してくれる「モックアップ」機能が搭載されています。
従来は、ロゴを手動で変形させる必要がありましたが、モックアップ機能を使えばIllustrator上で手軽にリアルな完成イメージを作れます。
「まずは手軽にモックアップ機能を試したい」という方は、Illustratorに内蔵されているテンプレート素材を活用するのが効率的です。
それでは、操作手順を解説します。
【手順1】「モックアップ」パネルでプレビューする
まず、使用したいロゴやデザインのオブジェクトを選択し、「オブジェクト」メニューから「モックアップ」＞「モックアップをプレビュー」をクリックします。
すると、「モックアップ」パネルが開き、使用したいオブジェクトが配置されたプレビューが確認できます。
「モックアップ」パネル内のプルダウンメニューから、異なるジャンルのテンプレート（アパレル、パッケージ、デジタルデバイスなど）に切り替えることも可能です。
【手順2】カンバスへ配置し、位置を調整する
プレビュー画像をカンバスへドラッグするか、「カンバスに配置」ボタンをクリックすれば、カンバス内に配置できます。
これで、カップなどの曲面に沿って、自動的にロゴが変形します。
モックアップを適用した後も、ロゴの位置やサイズはドラッグ操作で自由に調整できます。
ロゴを動かすと、背景の画像の形状に合わせてリアルタイムでロゴがフィットします。
なお、モックアップが適用されている状態ではグループ化されています。
配置したロゴやデザインを編集したい場合は、モックアップ画像をダブルクリックして「グループ編集モード」に入ることで編集できます。
【応用編】オリジナルの写真にロゴを馴染ませる方法
Illustratorに内蔵された素材だけでなく、自身で撮影した商品写真や素材サイトからダウンロードした画像を使ってモックアップを作成することも可能です。
なお、ベースとして使用できるのはビットマップ画像のみです。
操作は非常にシンプルで、土台となる画像（カップやTシャツなど）と、そこに配置したいロゴやデザインのオブジェクトを、あらかじめ両方選択しておくだけです。
両方を選択した状態で、前述の「手順1」と同様に「オブジェクト」メニュー＞「モックアップ」＞「モックアップを作成（※）」を実行すれば、独自の画像に対しても同様にモックアップが適用されます。
※独自の画像の場合、メニュー名が「モックアップをプレビュー」ではなく「モックアップを作成」になります。
モックアップ機能を使えば、クライアントへのデザイン提案の説得力を高めるのはもちろん、自身のポートフォリオ作成にも役立ちます。
「ただ平面に置くだけ」のデータから卒業し、実物の立体感をしっかりと表現する武器として、ぜひ日々のデザインワークに取り入れてみてください。
2．白い部分を「抜いて」、よりリアルなモックアップに仕上げる
続いて、2問目の振り返りです。
私の考える正解は「A」でした。
2問目は、Tシャツにロゴを配置したモックアップです。
AもBも、先ほどご紹介した「モックアップ機能」を使用していますが、仕上がりに大きな違いがあります。
Aは、ロゴの白い部分が透過処理になっていて、Tシャツの生地がロゴの白い部分から透けて見えています。
さらに、Tシャツのシワに合わせてロゴが変形しているため、実際にプリントされたかのような自然な仕上がりです。
一方Bは、ロゴの白い部分がそのまま残っているため、白い背景色の上にロゴが載っているように見えます。
Tシャツの生地の色や質感が白い領域で遮られてしまい、上から「貼り付けた感」が拭えません。
白い背景を含むロゴデータをモックアップに使う場合、白い部分をそのまま残すか、透過させるかで仕上がりの印象が大きく変わります。
特に色や質感のある素材にロゴを貼り込む場合は、白い部分を透過させることで素材の色や質感が活き、より自然なモックアップになります。
また、今回の作例のように平面的な素材の場合、モックアップ機能だけではシワなどの微細な凹凸が解析されづらいケースがあり、白い背景が残っているとより一層不自然さが目立ってしまいます。
ただし、必ずしも「透過させる」のがふさわしいとは限りません。
印刷手法やコスト、どのように表現したいかで変わりますが、Tシャツといった布にプリントする場合は単色でプリントすることも多いので、今回は布の質感を最も活かせる表現として「A」を正解としました。
Illustratorの「パスファインダー」で白い部分を抜く方法
ロゴデータの白い部分を抜くには、Illustratorの「パスファインダー」機能を使います。
パスファインダーは、複数のオブジェクトを合体させたり、切り抜いたりする機能です。
白い部分を抜く基本的な手順は以下のとおりです。
- ロゴデータの中で、「くり抜きたい白いオブジェクト（前面）」と、その下にある「色付きのベースオブジェクト（背面）」を同時に選択
- 「ウィンドウ」メニューの「パスファインダー」をクリックしパネルを開く
- 「パスファインダー」パネルから「前面オブジェクトで型抜き」をクリック
これで重なっていた白い部分がくり抜かれ、下のTシャツの素材（背景）が透けて見えるようになります。
実際のデータ構造を元に、パスファインダーの効果を確認してみましょう。
以下の作例データで白い部分を「抜く」場合は、真ん中のオブジェクト（白色）を使って背面（紺色）のオブジェクトを型抜きします。
真ん中（白色）と背面（紺色）のオブジェクトを選択し、「パスファインダー」パネルで「前面オブジェクトで型抜き」をクリックすると、重なっていた部分が型抜きされます。
複雑なロゴマークの場合は、形状に応じて「合体」や「分割」なども上手く組み合わせながら、データ構造をスッキリと整理してみましょう。
Illustratorの「エンベロープ」で布のシワに馴染ませる方法
作例Aでは、さらに「エンベロープ」機能を使ってTシャツのシワに合わせてロゴを変形させています。
エンベロープとは、オブジェクトを自由な形に歪ませる機能で、布のシワや折り目に沿った変形を表現するのに最適です。
エンベロープにはいくつかの作成方法がありますが、モックアップで使いやすいのは「メッシュで作成」です。
メッシュとはオブジェクトにメッシュ状のパスを追加し、そのパスを編集することで、元のオブジェクトを変形させる機能です。
それでは、「メッシュで作成」の手順を解説します。
【手順1】オブジェクトを選択して、編集モードに入る
モックアップが適用されているオブジェクトはグループ化されています。
まずは、オブジェクトをダブルクリックして「グループ編集モード」へ入り、対象のロゴを選択しましょう。
ただし、モックアップ内のオブジェクトはシンボルとして扱われているため、そのままではエンベロープ機能を使えません。
さらにもう一度ダブルクリックして「シンボル編集モード」に切り替える必要があります。
【手順2】変形の土台となる「メッシュ」を作成する
編集モードに入ったら、「オブジェクト」メニューから「エンベロープ」＞「メッシュで作成」を選択します。
ここで任意の行数と列数を指定し、変形の土台となるメッシュを作成してください。
【手順3】シワの流れに合わせてアンカーポイントを調整する
ツールバーから「ダイレクト選択ツール」を選び、作成されたメッシュの交差点（アンカーポイント）や方向線を個別にドラッグします。
Tシャツの影やシワの凹凸、曲面の流れに沿うように少しずつ歪みを加えていくことで、よりリアルな質感を表現できます。
自動のモックアップ機能だけでも大まかな形状には馴染みますが、「エンベロープ」を組み合わせることで、シワの凹凸まで再現したよりリアルな仕上がりを目指せます。
3．描画モードで、ロゴを素材の質感に馴染ませる
最後に、3問目の振り返りです。
私の考える正解は「A」でした。
3問目はボールにテキストを配置したモックアップです。
AもBも「モックアップ機能」を使って配置していますが、仕上がりの質感が異なります。
Aは、文字にボールの凹凸が浮かび上がっていることで、ボールの表面にプリントされたように見え、素材の質感と一体化しています。
一方でBは、形状には沿っていますが、文字がボールの上に「乗っている」ように見え、やや不自然です。
この違いを生んでいるのが「描画モード」の設定です。
描画モードとは、重なり合うオブジェクト同士の色がどのように合成されるかを制御する機能です。
Aでは文字の描画モードを「差の絶対値」に設定し、さらに不透明度を80%に下げています。
これにより、ボールの表面のテクスチャが文字を通して透けて見え、あたかもボールに直接印刷されたかのような自然な仕上がりになっています。
Bは描画モードが「通常」のままです。
文字が素材の質感を完全に覆い隠してしまうため、表面に溶け込んでいる感じがしません。
「モックアップ機能」で形状に合わせた変形をした上で、さらに「描画モード」を調整することで、よりリアルな仕上がりを追求できます。
Illustratorの「描画モード」で質感をなじませるコツ
「描画モード」が「通常」のままでは、上のオブジェクトが下のオブジェクトを完全に覆い隠します。
しかし、描画モードを変えることで下のオブジェクトの色や質感を活かした表現が可能になります。
モックアップで描画モードを活用する手順は以下のとおりです。
- モックアップが適用されているオブジェクトをダブルクリックして「グループ編集モード」に入り、前面にあるロゴ（文字）のオブジェクトを選択する
- オブジェクトを選択した状態で「ウィンドウ」メニューの「透明」を選択してパネルを開く
- パネル左上にあるプルダウンメニュー（初期状態は「通常」）をクリックし、デザインに最適な描画モードに変更する（今回の作例では「差の絶対値」を選択）
- 必要に応じて「不透明度」を調整する（作例では80%に設定）
「描画モード」にはさまざまな種類がありますが、よく使われるのは以下のようなモードです。
- 「乗算」：暗い部分がより暗くなり、素材の影や質感が自然に反映される
- 「スクリーン」：明るい部分がより明るくなり、光沢のある素材との相性がよい
- 「オーバーレイ」：明暗のコントラストを保ちながら色を重ねられる
- 「差の絶対値」：色の差分を表示し、独特の質感表現ができる
どのモードが最適かは素材の色や質感によって異なるので、いくつか試して比較してみるのがおすすめです。
不透明度との組み合わせで表現の幅がさらに広がるので、ぜひ試してみてください。
まとめ：モックアップのセンスを磨くポイント
今回はモックアップに関するクイズと、デザインテクニックを取り上げました。
最後に今回のノウハウのまとめです。
1．ロゴを馴染ませたい場合は「モックアップ機能」の利用を検討する
ロゴを平面のまま画像の上に重ねるだけでは「仮置き感」が出てしまい、仕上がりの説得力が生まれません。
Illustratorの「モックアップ機能」を活用すれば、コーヒーカップのような曲面に合わせてロゴが自動で変形し、立体感のあるリアルなモックアップを簡単に作れます。
2．白い部分を「抜いて」、よりリアルなモックアップに仕上げる
Tシャツなどの布地素材に合わせるときは、「パスファインダー」を使ってロゴの不要な白い背景をくり抜き、素材のベースを活かすのが鉄則です。
さらに「エンベロープ」機能を組み合わせることで、自動機能だけでは拾いきれない布の微細なシワや凹凸の流れに沿った、より自然な馴染ませ方が可能です。
3．描画モードで、ロゴを素材の質感に馴染ませる
ロゴの形状を歪ませるだけでなく、文字やデザインの「描画モード」や「不透明度」を細かく調整しましょう。
ロゴの下にあるボールなどの表面テクスチャ（凹凸）をあえて適度に透けさせることで、ただ上に乗っている状態から、まるで「直接印刷された」かのような自然な仕上がりになります。
ただし、モックアップはあくまで「完成イメージを共有するための試作」です。
実際の印刷物とまったく同じ仕上がりになるとは限りません。
クライアントに提示する際は、その点を必ず添えるようにしましょう。
お相手はデザイナー・アートディレクターの黒葛原 道でした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。
※本コンテンツは、デザイナーがそれぞれの視点で理想とするデザインを語っています。
クイズの正解はひとつではなく、あくまで参考としてご活用ください。
執筆：黒葛原 道
1999年にデザイナーとして活動を開始し、広告代理店勤務を経て2003年に独立。翌年大阪から宮崎へ移住し、Webデザインを中心にサイト構築、ディレクション、撮影、コンテンツ企画まで幅広く手がける。ECサイト運営を通じて培った「売る」視点を活かし、成果につながる制作を信条とする。現在はAdobe Community Expertとしても活動。
著書に『ネットショップ初心者でも売れる商品写真の基礎知識とつくり方』（玄光社）。
https://main--cc--adobecom.aem.page/jp/cc-shared/fragments/roc/seo/desig２n/quiz-challenge