この演出、どっちが正解？デザインに奥行きを生み出すセンスを磨こう
現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。
グラフィックデザイナーのNOZOMiです。
今回、私は「デザインの奥行きの演出」についてのクイズを出題します。
早速ですが、3問クイズを出します。
以下の3つの作例を見て、AとB、あなたはどちらのデザインがより「奥行き（または立体感）」を感じますか？
1問目「より立体感を感じるハートはどっち？」（難易度★）
2問目「より奥行きを感じるデザインはどっち？その1」（難易度★★）
3問目「より奥行きを感じるデザインはどっち？その2」（難易度★★★）
いかがでしたか？
私が考える答えは……
1問目の答え：A
2問目の答え：B
3問目の答え：A
以上が私なりの解答です。
あなたがより奥行きを感じたデザインは、AとBどちらでしたか？
ではここからは、それぞれの作例のAとBで、何が異なっていたのか？を説明し、作例で用いられていたデザインテクニックについて紹介していきます。
https://main--cc--adobecom.aem.page/jp/cc-shared/fragments/roc/seo/design/quiz-challenge-annotation
1．オブジェクトにハイライトを加えて立体感を強調する
まずは1問目から振り返っていきましょう。
この作例では、ハートのモチーフを立体的に見せるために、それぞれ異なる効果を加えています。
私が、より立体的に見えると感じた作例は「A」でした。
Aの作例ではハートのモチーフの中にハイライトを加えています。
気軽に立体感を演出する方法といえば、まず「影（陰）」を思い浮かべる方も多いのではないでしょうか。
今回の作例ではA・Bどちらのハートも、陰をつけて立体感を作り出しています。
デザインのテイストによってはBのような表現でも十分ですが、より立体感を強調したいときや、リッチな印象に仕上げたいときはハイライトを加えると効果的です。
なぜ、ハイライトを加えるといいのでしょうか。
その理由を、光と影の関係性の解説とともに述べていきます。
光と影の関係性
私たちは普段、無意識のうちに「光と影の情報」から物体の形や奥行きを認識しています。
まずは、球体に左上から光が当たった場合の、光と影の関係性を見ていきましょう。
- ハイライト：光が直接当たって、最も明るく見える部分
- ハーフトーン：光が当たっている明るい部分（明部）と、当たっていない暗い部分（暗部）の中間部分
- シェード（陰）：物体の光が当たらない暗い部分。物体そのものに帯びるカゲ
- シャドウ（影）：物体によって光が遮られ、壁や地面に投影されるカゲ
ここで押さえておきたいポイントは以下の2つです。
- 物体の立体感は、明暗（光と陰）の差によって表現できる
- 空間での物体の位置関係は、シャドウ（影）によって表現できる
デザインに合わせた光と影の使い分け
平面上のデザインにおいては、この光と影の情報をリアルに再現するだけでなく、あえて簡略化したり、大げさに誇張したりしながらビジュアルに落とし込んでいきます。
例えば、目指したい世界観に合わせて、以下のような表現のバリエーションを意識してみましょう。
高級感やリアルさを出したいとき
→本物に近いカゲをつける（写実的な表現）
すっきり洗練された印象にしたいとき
→カゲを限界までシンプルにする（ミニマルな表現）
リッチで大人っぽい雰囲気にしたいとき
→滑らかな光のグラデーション（リアルなハイライト）
親しみやすさや可愛さを出したいとき
→パキッとした白い線や丸で描く（ポップなハイライト）
どっしりとした安定感を出したいとき
→物体がその場に置かれているようなカゲ
軽やかさやフワッとした浮遊感を出したいとき
→画面から浮き上がっているように見えるカゲ
このように、デザインの方向性に合わせて光と影の見せ方を変化させることで、ビジュアルに一貫性が生まれ、デザイン全体のクオリティアップにもつながります。
Illustratorの「3Dとマテリアル」機能でハイライトを作る
「3Dとマテリアル」は、平面のオブジェクトを立体的な3Dオブジェクトに変換できる機能です。
作例のハートのモチーフも、この「3Dとマテリアル」機能を使用して立体感を演出しています。
作例Aに加えている「ハイライト」のような、リアルな質感や光の当たり方も手軽に再現できます。
それでは、作成方法を見ていきましょう。
【手順1】3Dに変換したいオブジェクトを選択
まずは、「選択」ツールを選択し、3Dに変換したいオブジェクトをクリックします。
【手順2】「3Dとマテリアル」の「膨張」を選択
次に、「効果」メニューから「3Dとマテリアル」＞「膨張」を選択します。
すると、「3Dとマテリアル」パネルが開き、「膨張」が適用されます。
オブジェクトが風船のように膨らみました。
ここで、「3Dとマテリアルパネル」について少し解説しておきます。
パネル内には3つのタブがあり、それぞれの項目を調整しながら3Dを作成していきます。
1．オブジェクト
立体の形状を設定するパネルです。
3Dの種類は「平面」「押し出し」「回転体」「膨張」の4つがあり、それぞれ奥行きや角度などを細かく調整できます。
2．マテリアル
表面の質感を設定するパネルです。
金属感やザラつき、マットな質感など、さまざまなマテリアルを選択できます。
また、オリジナルのマテリアルやグラフィックを追加することも可能です。
3．ライト
光の当たり方を設定するパネルです。
光源の位置や光の強さ、カラーなどを調整できます。
では、先ほどの続きから進めていきます。
【手順3】ライトの設定をする
「ライト」タブに切り替え、プリセットから「左上」を選択します。
光源が左上に設定されたら、今回はこの状態から「環境光」の強度のみ、以下の数値に調整しました。
・環境光（強度）：80%
【手順4】レンダリングを実行する
一連の設定が完了したら、パネル右上にある「レイトレーシングでレンダリング」アイコンをクリックして、レンダリングを実行します。
また、レンダリング設定のドロップダウンから、レンダリング方式や画質の選択もできます。
※レンダリングとは、光の当たり方や質感などを再計算し、より高品質で自然な見た目に仕上げる処理のことです。
【手順5】レンダリング実行後の微調整
レンダリング実行後もパネル内で調整が可能です。
今回は「マテリアル」タブに切り替えて、ベースプロパティの「粗さ」を以下の数値に調整してみます。
・ベースプロパティ「粗さ」：0.35
少しだけツヤ感がアップしました。
「粗さ」は、数値を下げるほどツヤが増し、上げるほどマットな質感に仕上がります。
（ちなみに、作例Bのハートのアイコンは「粗さ」の数値を上げて、マットな質感を演出しています。）
デザインのテイストに合わせて、お好みの3Dオブジェクトを作成してみてください。
2．オブジェクトをぼかして「距離感」を表現する
続いて2問目を振り返ります。
この作例では、画面に奥行きを感じさせるために、配置した球体にそれぞれ異なる効果を加えています。
私が、より奥行きを感じるバナーだと感じたのは「B」でした。
作例Bでは、周囲に散りばめた装飾の球体の一部をぼかして「奥行き」を表現しています。
これは、ピントを合わせた部分以外の背景をぼかす撮影手法を、擬似的に再現した演出です。
ピントが合っている部分とぼけている部分の差によって前後関係が明確になり、オブジェクト同士の距離感が感じられるようになります。
その結果、平らな画面の中に立体的な空間（奥行き）が生まれるのです。
また、周囲をあえてぼかすことで、はっきりと見える部分が強調され、ユーザーの視線を自然に被写体へ導く効果もあります。
階層を意識して自然な奥行きを演出する
オブジェクトをぼかす際は「手前・主役（被写体）・奥」の階層を意識してみましょう。
被写体に近い要素ほどくっきりと見せ、離れるほどぼかしを強く加えることで、より自然な奥行き感を演出できます。
オブジェクトを散りばめるコツ
今回の作例では、被写体の周りに散りばめた球体のサイズにメリハリをつけています。
オブジェクト同士の距離感を表現するとともに、画面にリズムや躍動感が生まれるよう意識しました。
また、被写体にオブジェクトの一部を重ねて配置すると、前後関係をより明確に表現できるのでおすすめです。
Illustratorでオブジェクトをぼかす方法
ここからは、Illustratorに搭載されている、以下の2つの「ぼかし効果」をご紹介します。
1.【Illustrator効果】スタイライズのぼかし
オブジェクトの輪郭が内側に向かってぼけるのが特徴
2.【Photoshop効果】ぼかし（ガウス）
オブジェクト全体が均一にぼけるのが特徴
「どちらの効果を使えば良いの？」と悩んだことがある方もいるのではないでしょうか。
同じオブジェクトにそれぞれの効果を適用してみると、その違いがはっきりと分かります。
例えば、以下のような目的に合わせて使い分けてみてください。
写真の輪郭をぼかして柔らかな印象を演出したいときは「スタイライズのぼかし」
袋文字のフチをぼかしたいときは「ぼかし（ガウス）」
では、それぞれの作成方法を見ていきましょう。
「スタイライズのぼかし」の作成手順
【手順1】「選択ツール」でぼかしたいオブジェクトを選択
【手順2】「効果」メニューから「スタイライズ」＞「ぼかし」を選択
【手順3】ダイアログボックスに任意の数値を入力し、「OK」ボタンを押して適用
「ぼかし（ガウス）」の作成手順
【手順1】「選択ツール」でぼかしたいオブジェクトを選択
【手順2】「効果」メニューから「ぼかし」＞「ぼかし（ガウス）」を選択
【手順3】ダイアログボックスに任意の数値を入力し、「OK」ボタンを押して適用
今回の作例Bでは、球体を均一にぼかしたかったため、「ぼかし（ガウス）」を使用しました。
ご紹介した2種類のぼかし効果は、一見似ているようでいて、実は異なる特性をもっていることがお分かりいただけたかと思います。
ぜひ、目的に合わせて使い分けてみてください。
3．オブジェクトを「交差」させて重なりを作る
最後に3問目を振り返ってみましょう。
この作例では、より深い奥行きを与えるために、オブジェクトの「重ね方」に工夫を凝らしています。
私が、より奥行きを感じるビジュアルだと感じた作例は「A」でした。
AとBをよく見比べると、Aはオブジェクトの重ね方に以下のような工夫があります。
- 人物がタイトル文字の中に腕を通しているかのような重ね方をしている
- 人物がリボンの装飾を飛び越えているかのような重ね方をしている
このように、単に要素を順番に重ねるだけでなく、重ね方にひと工夫加えることで、デザインの印象が変わります。
オブジェクトの重ね方を工夫する
2問目の解説でも触れたように、要素同士を重ねるだけでも、ビジュアルに前後関係が生まれます。
今回の作例Bも、手前から「人物＞リボン・文字＞背景」の順に重なっているため、奥行き自体は表現できています。
しかし作例Aでは、オブジェクトの重ね方を少し工夫することで、より奥行きを感じさせるビジュアルに仕上げています。
具体的にどのようなテクニックが使われているのか、ポイントを2つに分けて解説していきます。
【ポイント1】一部をあえて交差させてリアルな立体感を演出する
オブジェクトの一部分だけ前後を入れ替えることで、視覚的に手前と奥が交互に切り替わり、平面的な情報の中に立体的な関係性が生まれます。
また交差させる箇所を変えるだけで、上から見下ろしたり、下から見上げたりと、まるで視点が変わったかのような印象を与えることもできます。
このように、重ね方によって生まれる視覚効果の違いを意識することで、表現の幅はさらに広がります。
【ポイント2】重なりでインパクトとストーリーを生み出す
作例Aでは、被写体がただそこに配置されている状態から、「文字を通過している」「リボンを飛び越えている」という動き（動線）を感じさせる状態へと変化しています。
このように、オブジェクトの動線を意識した重なりを作ることで、インパクトやストーリー性が強調され、より奥行きを感じるビジュアルに仕上がります。
Illustratorの「クロスと重なり」で前後関係を部分的に入れ替えるコツ
Illustratorの「クロスと重なり」は、オブジェクトの重なりの前後関係を部分的に入れ替えることができる便利な機能です。
ここでは、機能の基本的な使い方をご紹介します。
【手順1】「選択ツール」で前後関係を変更したいオブジェクトをすべて選択
まずは重ね順を入れ替えたい要素（人物、文字、リボンなど）をすべて一緒に選択します。
【手順2】「クロスと重なり」の「作成」を選択する
「オブジェクト」メニューから「クロスと重なり」＞「作成」を選択します。
【手順3】重なりを変更したい箇所をクリック、またはドラッグで囲んで適用する
マウスポインターがなげなわ（カッター）の形に変わるので、重なりを入れ替えたい交差部分をクリックします。
クリックで適用すると、該当箇所の前後関係が入れ替わります。
「細かな一部分だけ」を変更したい場合は、その範囲をドラッグで囲んで選択するのが、正確に適用するコツです。
重ね順を後から編集する方法
「やっぱり別の場所を交差させたい」「元に戻したい」という場合も、以下の手順でいつでも直せます。
【手順1】「選択ツール」で編集したいオブジェクトを選択
【手順2】「オブジェクト」メニューの「クロスと重なり」＞「編集」を選択
【手順3】作成時と同じ要領で、重なりを変更したい箇所をクリック（またはドラッグで囲む）
適用後も元のデータを壊さない「非破壊」の状態で効果がかかっているのが、この機能の便利なポイントです。
重ね順の変更はもちろん、後からのフォント変更やテキストの修正、色変更などもスムーズに行えます。
「クロスと重なり」は、テキストや図形、写真など幅広い要素に適用できます。
手軽かつ直感的に、印象的なビジュアルを作り出せる機能ですので、ぜひお試しください。
まとめ：デザインに奥行きを生み出すためのポイント
今回は「奥行きの演出」に関するクイズと、デザインテクニックを取り上げました。
最後に今回のノウハウのまとめです。
1．光と影を使い分ける
- デザインの方向性に合わせて光と影の見せ方を変えることで、ビジュアルのクオリティアップにつながる
- より立体感を強調したいときや、リッチな印象に仕上げたいときは、ハイライトを加えるのが効果的
2．階層を意識してぼかす
- 「手前・主役（被写体）・奥」の階層を意識する
- 被写体に近い要素ほどくっきりと見せ、離れるほどぼかしを強く加えることで、より自然な奥行き感を演出できる
3．重ね方で視覚効果を演出する
- オブジェクトを重ねることで、ビジュアルに前後関係が生まれる
- 一部分だけ前後を入れ替えることで立体的な関係性が生まれる
- オブジェクトの動線を意識した重なりを作ることで、インパクトやストーリー性が強調される
お相手はデザイナーのNOZOMiでした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。
※本コンテンツは、それぞれのデザイナーが自身の感性で理想とするデザインを語っています。
クイズの答えはひとつの参考としてください。
執筆：NOZOMi
株式会社ヴイデザインオフィスのデザイナー。
“伝わるデザイン”をモットーに、企業・教育機関・自治体など、幅広い分野のグラフィックデザインやWebデザインを担当。「朝までイラレ 」に登壇。
https://main--cc--adobecom.aem.page/jp/cc-shared/fragments/roc/seo/desig２n/quiz-challenge