フラットデザインが世間を賑わしてまだそれほど時は流れていませんが、海外ではフラットデザイン2.0という呼ばれ方もされることがあるようなロングシャドウデザインというものがどんなものなのか考察してみました。
そして、ロングシャドーデザインを作る方法を勝手ながら考えてみました。
ドロップシャドーデザインとは？
ロングシャドウデザインとは、言葉で説明するとこんなかんじになるのでしょうか。photoshopvipさんの言葉を引用すると、
斜め45度に差し込む光が作る、その名の通り、シャドウ部分を強調した、冬の日によく見受けられる様な、長い影が印象的なデザイン
とこのような感じになりますかね。的確な表現かと思います。
ざっくりとどんなものかを検証してみました
ハイライトの角度、シャドウの角度、ともに45°できれいに作ってあります。そして、配色ですが分かりやすいようにHSB方式で表記してあります。
ハイライトはそれほど色相は変化していませんね。210→200ですし。B（ブライトネス：明度）で強弱をつけているような感じになっています。
シャドウに関しては、若干色相は変化していますが、色がグレー系ということで、数字ほど大きな変化は見られません。こちらもあまり色相をいじらずに明度でシャドウを作る感じですね。
先ほどのサンプルとは違い、ちょっと色味が増えています。角度もしっかりと45°で作られていますね。
こちらのハイライトは、先ほどのように明度で変化させる方法ではなく、S（サチュレーション：彩度）で変化させていますね。20%くらい動かしています。
シャドウに関しては、彩度・明度ともに変更してあります。恐らく、ベースとなる色との兼ね合いも考えた上で、このように変更するのがベストなんだと思います。（色を掛け合わせるような感じになりますしね）
お次はサファリなアイコンですな。可愛く仕上がっていますね。こういうの大好きです。
それはさておき、角度も定番の45°です。ハイライトは彩度で変化させていますね。逆にシャドウは明度で変化させているように見受けられます。
ここからはちょっと番外編的な感じになるかもしれませんが、冒頭でも紹介した言葉にもあったように45°の角度で差し込む光とありますが、こちらはシャドウの角度は45°ではありません。
配色に関しては数字を見る限り、他と比べても特別な変化はありませんね。
もう１つだけ紹介してから考察してみましょう。
こちらも見る限り角度が違うことは明らかですね。あと、うっすらとベース部分にグラデーションがかかっています。これがこれら角度が違うものとの違いのヒントとなります。
なぜ角度が45°でなく違う角度にするのか
一言で言うと、光源をどこに設定するかという問題となります。
シャドウが右下45°に伸びていると仮定すると、光源は左上45°方向にあるということになります。
ちょっと光源をオブジェクトの近くに接近させてみましょう（極端ですが）。
このようにシャドウのアングルが変わりますね。では、光源の位置を左上45°から動かしてみましょう。
このように、シャドウのアングルも光源の移動に伴って変化することになります。
これがロングシャドウデザインにおける角度変化の原因となるわけです。要するに、光源の位置が問題となるのですね。
他にも影にぼかしを加える事によって、光源の光の強さ・柔らかさを表現したりすることもできます。そういう要素を絡めて作られているわけですね。
まとめ
フラットデザインもそうですが、意外と簡単に作れると思われすぎだと思います。デザイン制作に関して大きくくくって考えてもそういう風に思われがちな業界ではありますが、いろいろと苦労する部分もあるのですよ。
このロングシャドウデザインも例に漏れず、配色選びもそうですが、シャドウの付け方、角度、ぼかしを入れるか、どれくらい入れるかなどなど、考察しなければいけないことがたくさんあります。一筋縄ではいかないでしょう。
こちらの記事でデザイン制作に関係のない仕事の方々にも、「こういうこと考えてやっているんだよ〜」というような雰囲気が伝われば嬉しいなと思います。
