こんにちは。新人クリエイターのMです。
制作したサイトやロゴをより使っているイメージが伝わるように、一段も二段も完成度高く見せてくれるのがモックアップ。意外と作る機会が多いですよね！
Figmaのプラグインでも簡単に作ることが可能ですが、後から先方でも調整したいので、より精密なデータが欲しい！ モックアップを反映させる画像も厳選したい！ という時はIllustratorでのモックアップ作成がおすすめです。
さらに、昨年Illustratorに新たに追加されたモックアップ作成機能を使えば、よりリアルなイメージ写真を簡単に作成することができます！ 今回は、従来の画像はめ込みを使用したモックアップ作例と、最新機能を使用したモックアップ作例の二種類をご紹介いたします。
画像はめ込みを使用したモックアップの作成
こちらの作例ではAdobe Stockから選んだPC、タブレット、スマホのモックアップ画像（AIファイル）を用意し、その液晶画面にデスクトップ背景画像をはめ込んでいきます。Illustratorのエンベロープ機能を使った従来のモックアップ作成方法です。
大抵Adobe Stockで配布されているモックアップ画像のAIファイルデータはモニターの上に液晶画面に合わせた長方形がセットで配置されています。
今回はこの長方形をそのまま使いますが、もし配布されているのが画像データのみで液晶画面だけ分離できない場合はペンツールなどでモニターに合わせた長方形を作成してみてくださいね。
まずはわかりやすいように、はめ込みたいデスクトップ画像と長方形を並べました。
Shiftキーを押しながら二つともクリックして選択します。
長方形の重ね順がデスクトップ画像より上になっていることを確認してください。
そのまま上のメニューバーのオブジェクト→「エンベロープ」を選択します。
さらに「最前面のオブジェクトで作成」を選ぶと…
液晶型の長方形に合わせてぴったりはめこむことができました！
これをこのままモニター画面の上に配置すればOKです♪
もしもエンベロープ機能を使おうとしたら下記のような表示が出てしまったという方は、以下二つの原因が考えられます。
まず、画像がリンク配置になっていること。画像はかならず埋め込み配置にしてください。
埋め込み配置に変えてもダメなようであれば、長方形の複合パスを解除してみてください。
この二つを試してみれば大抵はエンベロープ機能が利用できるようになるのではないかと思います！
PC以外の液晶画面にも画像を埋め込み、完成したのがこちらになります！
なかなかかっこよくできたのではないでしょうか！
ベクターイラストを用い、新機能を利用したモックアップ作成
次に昨年追加された新たなモックアップ機能を使っていきます。
こちらは画像をはめ込むというより、ベクターイラストを画像の形状に合わせて変形させてくれます。
作成したロゴやイラストが実際に使われているイメージをワンクリックで作成できる素晴らしい機能です！
まず無地のコーヒーカップのJPEG画像とベクターイラストを用意します。
ロゴのベクターイラストを作成するのは大変なので、今回はIllustratorの生成AI機能を使って、コーヒーとペンギンのロゴを作成しました！（プロンプトは画像参照）
三種類ほど作ったのですが、どれも可愛いですね。今回は一番上のロゴを使います。
そして使うロゴのベクターイラストとカップの画像をShiftキーを押しながら二つともクリックして選択。
そのまま上のメニューバーのオブジェクト→「モックアップ」を選択します。
さらに「作成」を選ぶと…
コーヒーカップの表面に合わせてイラストを変形することができました！
ただ、このままではやはり少し違和感があるので周囲の円を動かし、傾きや大きさを調整します。
さらに馴染ませるために、イラストを「不透明度60％」「焼き込みカラー」に調整します。
完成したのがこちらになります！
実際にロゴが使われている雰囲気がイメージしやすくなり、提案資料にも使えそうですね！
まとめ
いかがでしたでしょうか？
デザインはもちろんですが、折角なのでそのデザインを使ったモックアップもかっこよくできると嬉しいですよね。
今回書いた二つの方法だけでなく、他にもFigmaやPhotoshopを使ったいろんな作成方法がありますので、ぜひ試してみて自分のベストなモックアップを作ってみてくださいね！
最後までご覧いただきありがとうございました！
