海外デザインブログCanva Design School Blogで公開された「Designing with Light and Shadow: 10 Highly Effective Tips You Should Try [With Case Studies]」より許可をもらい、日本語抄訳しています。

 

窓から太陽の光が差し込み、部屋の中にある物体に光が当たることで、色が変わり、影を落としたような光景を見たことはないでしょうか。

 

 

いいえと答えた人は、日常生活であまりにも光や影を見ることに慣れすぎていて、それらがどのように作用しているのか考えたことはないかもしれません。しかし、意識的に感じているかは別として、光（英: Light）と影（英: Shadow）は、わたしたちの毎日の生活に直結しています。光と影は、形や距離、配置場所、質感、他の物質的に感じることができる物体の情報を、わたしたちに伝えてくれます。

 

 

 

デザインに光と壁を利用するメリットとデメリット

 

日常生活における光と影の相互作用に気を配ることで、よりデザインを本物っぽく（英：Life-Like）仕上げるための、素晴らしいインスピレーションを与えてくれます。家に3Dプリンターがあるという場合をのぞいて、多くの人は二次元のデザインを作成する能力しかありません。しかし立体を見ることに慣れていることで、毎日の生活で見かけるものと、紙やスクリーンの上に書かれたデザインに違いを感じることがあります。

 

 

デザインに光と影を加えることで、平面的なデザインと立体的デザインのギャップを埋め、平面デザインをよりリアルで、立体的に魅せる手助けをしてくれます。

 

 

 

しかしネットサーフィンなどをしていると、この光と影のエフェクトは使いすぎているのをよく見かけます。ひとりのデザイナーは記事”Confessions of a Drop-Shadow Addict“のなかで、私たちの世界では、クリックひとつでデザインを完成させることができることもあり、デザインプロジェクトに本当に必要かどうかを考えずに、次から次へのエフェクトを追加してしまいがち、と述べています。

 

 

これらのポイントも念頭に入れて、光と影エフェクトのメリットとデメリットをまとめてみました。

 

 

光と影は奥行き感や広がり方、立体感やリアリティー、そして視覚的な興味をデザインに加えることができます。同時に見ている人をデザインに惹き込み、スクリーンから飛び出したような効果を演出することができます。

 

 

しかし、デザインを台無しにしてしまうのも簡単です。エフェクトの使いすぎはデザインをアマチュアっぽく、そして安っぽくしてしまうでしょう。

 

 

これらの点を合わせると、影と光を上手く利用するテクニックとして、計画的（英: Purpose）で控えめ（英 Subtly ）に利用するようにしましょう。まず、利用するエフェクトに実践的な意図があるか確認しましょう。そして、「Less is More（素朴こそ美学）」のデザインプローチでエフェクトを適用していきましょう。Photoshopなどのデザインアプリケーションを利用するときは、ドロップシャドウの初期設定を利用は避けましょう。よりソフトで、明るく、より控えめに利用することが大切です。

 

 

 

光と影の簡単な仕組みについて

 

光と影をデザインに活用するテクニックを見ていく前に、基本的なはたらきを理解しておきましょう。これはアーティストや写真家が、よりうまく照明を当てるために学ぶコンセプトですが、グラフィックやウェブデザイナーが、本物そっくりの光や影エフェクトを作成するときにも役立ちます。

 

 

 

上記サンプル図では、いくつかのポイントとなる用語をまとめています。

 

• 光源（英: Light Source）: 影とハイライトを見ているときは、光源が必ずあります。当たり前のように聞こえますが、多くのデザインプロジェクトでは、光源は非表示となっているでしょう。しかし、デザインを作成するときに、同じ光源からの光を意識することで、ランダムにエフェクトを適用するよりもリアルで、よりきちんとした見た目に仕上げることができます。
• ハイライト（英: Highlight）: もっとも明るく、光が輝いているポイントを指します。（光源からもっとも近く、向き合っている場所）
• シャドウ/コアシャドウ（英: Shadow/Core Shadow）: もっとも暗い場所になりますが、影はすべて真っ黒というわけではなく、薄暗がりとなっています。その中でももっとも暗がりになり、完全に光源から隠れてしまう場所は、コアシャドウ（英: Core Shadow）としても知られています。
• キャストシャドウ（英: Cast Shadow）: コアシャドウとは違い、キャストシャドウは物体によってできます。光源と同じ向きに向かって影ができ、光源とは真逆の場所を指します。

 

以上はとても基本的な概要で、光と影をうまく活用したデザインの取りかかりにも最適です。では、どのようにこのテクニックを有効活用するのか見ていきましょう。

 

 

 

01. 奥行きを演出するために、色を使おう。

 

単独で色を使うことは、あらかじめ搭載されたエフェクトに頼らずに、明るさと暗さのイリュージョンを表現するのに最適な方法と言えるでしょう。特に同じ色合いのレイヤーを重ねることで、奥行き感のあるデザインを演出することができます。わたしたちの目は、明るい色ほど遠くに見え、暗い色ほど近くに見えることが理由となります。

 

 

以下のサンプル例は、このアイデアをうまく表現しています。描かれている山は、近いほど濃い色となり、遠くに行くにつれて、かすんだような奥行き感を演出することができています。

 

 

 

ほかにも光と影エフェクトに、色を利用する理由はたくさんあります。デザイナーが選ぶ色温度によって、エフェクトをより強調することもできます。空の淡いグラデーションは、異なる時間帯や光の種類（温かみのある朝日や、冷たく白い月明かりなど）を表します。グラデーションの使い方については、次のテクニックで。

 

 

 

02. 背景にグラデーションを加えよう。

 

家のなかの明かりをつけて、近くの壁を見てみましょう。一色の単色カラーではないですよね。ランプにもっとも近い場所がもっとも明るくなり、明かりから遠くなるについれて、より暗くなっているでしょう。青一色でペイントされた影を見ると、灰色やみどり、青、むらさき色など次第に変化しているのが分かります。このように、光があたっている物体は同じ色で輝くことはないのです。

 

 

魅力的なカラーバリエーションを作成する、もうひとつの方法は、背景やデザインの大きな部分にグラデーションを加えてみましょう。重ねて配置される文字テキストが読みにくいようなカラーリングではなく、控えめな色使いが、影をよりソフトにぼかしてくれ、デザインの一部にライトが当たっているような見た目に仕上げてくれます。（特に円形グラデーションのとき）

 

 

以下のサンプル例で使われている円形グラデーションは、いくつかの目的をもって利用されています。グラデーションの明るい場所は、上からライトが当たっている様子を表し、スマートフォンの影はより見えやすく配置されています。これらを組み合わせることで、まるでスマートフォンに触ることができそうな、立体的なエフェクトを実現しています。右上に配置されたハイライトは、よりスマートフォンを立体的に魅せる工夫がされています。

 

 

 

 

03. ハイライトを使って、注目を集めよう。

 

キラキラと輝くものは、いつでも注目を集めてくれます。デザインでは、ハイライトはスポットライトのようなような役割を果たし、特定の要素をすこしだけ見やすくしてくれます。さらに上記アイデアで触れたように、よりリアルな見た目を表現することができます。もし複数の要素をハイライトしたいときは、光源の位置を考え、すべてのハイライトが一定方向をきちんと向いているか確認しましょう。

 

 

以下のサンプル例では、801という商品パッケージのロゴにハイライトが当たっています。ロゴ本来の色よりほんの少し明るくなっているだけですが、デザインの注目して欲しいポイント、フォーカル・ポイント（英: Focal Point）をより分かりやすくし、デザインをより面白くしています。

 

 

 

 

04. 影エフェクトをマスターしよう: シェーディング

 

シェーディング（英: Shading）は、明暗のコントラストで立体感を与えることを指し、上記でふれたコアシャドウのようなものです。対象物への光の当たり方を考え、シェーディングを施すことで、まるで紙上に奥行きがあるかのような表現を可能にします。

 

 

以下のサンプル例では、平面的なロゴデザインにシェーディングを加えることで、奥行き感のある複雑な見た目を実現しています。

 

 

 

 

05. 影エフェクトをマスターしよう: キャスト＆ドロップシャドウ

 

記事の最初にある、リンゴの図を覚えていますか。キャストシャドウ（英: Cast Shadow）は、リンゴによって光が遮られ、そばに影を作り出しています。ドロップシャドウ（英: Drop Shadow）はキャストシャドウの一種で、頭上に光源があるときに、物体の後ろや下にできた影を指します。このテクニックによって、表面から浮いているようなエフェクトを実現します。

 

 

デザインをはじめるにあたって、ドロップシャドウは情報やコンテンツを、レイアウトから浮かび上がったように見せ、他から目立たせることができます。また白などの明るい色を使ったデザイン、特に文字テキストを、より見やすくしてくれます。以下のサンプル例では、ドロップシャドウを利用することで、特集コンテンツが他よりも重要であることを、分かりやすく伝えています。

 

 

 

ドロップシャドウは、さまざまなデザインプロジェクトに利用されていますが、多くの場合は間違って使われています。よく見かける影エフェクトの間違いとして、影が大きすぎたり、暗すぎたり、はっきりしすぎているケースです。デザインを見た人が、影エフェクトに気付かないほど、他のデザインとうまくなじませる必要があるでしょう。

 

 

 

06. 不透明度を調整しよう。

 

わたしたちの日常生活において、本当は影は暗くなく、光も白や黄色ではありません。どちらも透明と言え、デザインでも同じように表現されるべきです。より控えめで、リアルな見た目を作成するときは、不透明度の調整がもっとも重要になってきます。取りかかりとして、Photoshopなどのデザインアプリの機能をおさらいし、すこしずつ必要なデザインに変えていきましょう。こうすることで、影エフェクトの使いすぎを防いでくれるでしょう。

 

 

 

07. 魅力的なタイポグラフィーに、影エフェクトを利用しよう。

 

文字テキストやタイポグラフィー（英: Typography）と一緒に、光と影エフェクトを加えてみましょう。特にフォーカルポイント（英: Focal Point）がタイポグラフィの場合は、魅力的にキーワードを表現することができます。

 

 

以下のサンプルを例に見てみましょう。ハイライトとシェーディングを両方利用し、グラデーションでフェードさせることで、立体的な3Dデザインに仕上げています。また、ドロップシャドウを有効的に利用しています。（光源が左上から当たり、メインとなるタイポグラフィーの上部と左側にハイライトが使われ、右側にドロップシャドウが描かれいる。）また質感の高いテクスチャ素材も、全体のデザインを整えています。

 

 

 

 

08. 文字テキスト用も活用しよう。

 

文字テキストは、クリエイティブな影エフェクトを加えるのに最適といえます。簡単にエフェクトを加えることができるだけでなく、カスタマイズされたオリジナルのタイポグラフィのような見た目に仕上げることができます。2つの設定オプションを見ていきましょう。

 

• レイズド・スタイル（英: Raised Style）: エンボス加工（英: Embossing）とも言われるこの印刷テクニックは、裏面を押し上げて、紙の上から浮かせます。通常はメタルスタンプなどを用いることで作成できますが、同様のエフェクトをデジタルデザインでも表現可能です。以下サンプル例では、文字の外側に影を落とし、文字自体はハイライトされています。

 

 

 

• リセス・スタイル（英: Recessed Style）: 日本語で型押しデザインとも言われるこのスタイルは、一般的にレタープレス（英: Letterpress）加工と呼ばれ、柔らかい紙の上にメタル板を押し付ける印刷テクニックを指します。デジタルデザインでもよく利用されるテクニックで、以下のサンプル例は好例と言えるでしょう。

 

 

 

影とハイライトを反対方向に配置することで、エンボス加工に仕上げ、文字の内側に影があり、外側にハイライトを配置することで、レタープレス加工に仕上げることができます。

 

 

 

09. フラットデザインについても考えよう。

 

AppleがiOSデザインに利用したり、Googleの新しいロゴデザインなど、フラットデザインはこれからもしばらく続くであろうデザイントレンドと言えるでしょう。フラットデザインの性質のひとつは、奥行き感がない（英: Lack of Depth）点で、通常は影やハイライトなどは見かけません。しかし、フラットデザインのシンプルでミニマルなスタイルに、光や影エフェクトを加えてみたらどうでしょう。デザイナーの中には、このトレンドをすでに取り入れており、いくつかのデザインアプローチ方法は以下の通りです。

 

 

• 配色（英：Color）: さまざまな色の組み合わせやグラデーションを利用することで、デザインの広がりを表現できます。または、フラットデザインのコンセプトを残したまま、光と影エフェクトを加えてみましょう。

 

以下のサンプル例では、明るい色と暗い色を一緒に利用することで、奥行きのある見た目を表現しています。（テクニック１を参考。）

 

 

 

• ロング・シャドウ（英：Long Shadows）: 特にフラットデザインとペアで使われる影エフェクトで、文字テキストやアイコンに活用してみましょう。このエフェクトは、デザインの端にまで適用されているケースが多いです。

 

 

 

 

10. Webデザインでは、クリックできるように見せよう。

 

ウェブデザインにおいては、ユーザーがなにも考えずにサイトを閲覧できることが、重要な検討課題のひとつとなるでしょう。ユーザー・インターフェース（UI）デザインは使いやすく、理解しやすくする必要があり、どこがクリックできるか分かるように、作成することが大切になります。特にボタンをデザインするときには、光と影エフェクトを役立ててみましょう。

 

 

以下のサンプル例では、グラデーションやハイライト、シェーディング、ドロップシャドウなど、これまで紹介したテクニックを組み合わせて、立体感のあるデザインに仕上げています。特にここでは、ハイライトがよい働きをしています。左のボタンの周りに、わずかなハイライトを加えることで、表面からすこしだけ浮いているようなエフェクトを実現し、ボタン上部の丸みのあるハイライトは、立体感を表現しています。右のボタンの内側に、影エフェクトを加えることで、まるでボタンが押されているような仕上がりとなっています。

 

 

 

これらの種類のデザインテクニックは、小さく控えめかもしれませんが、無意識に読み手の興味をデザインに向けることができるでしょう。

 

 

 

さいごに、。

 

光と影エフェクトは、注意深く、そして戦略的に適用されたときに、もっとも威力を発揮します。なにも考えずランダムに適用することは避けましょう。さいごにデザイナーNate Eagleは、ドロップシャドウとグラデーションの良い使い方を、自身の記事のなかで以下のようにアドバイスしています。

 

 

デザインの仕上げとして、レイヤーを追加する前に、余白スペース（英: Spacing）や配置（英: Placement）、配色（英: Color）を使ってみましょう。このようにデザイン作業をすすめることで、不要なデザイン要素に気付きやすくなり、レイヤーを追加したときにより効果的なデザインとなるでしょう。

 

 

今回学んだテクニックを、今後のデザインプロジェクトに活かしてみましょう。では、デザインをたのしんで！

 

 

参照元リンク : Designing with Light and Shadow: 10 Highly Effective Tips You Should Try [With Case Studies] – Canva Design School