簡単なグラデーションでシャドーブレイクのイラスト #034

簡単なグラデーションを追加するだけで，デザインにさりげない立体感を与えることができます．はっきりしていない曖昧な立体感は，オブジェクト同士の重なりをすっきり見せ，デザインを洗練された印象に仕上げるのに役立ちます．今回解説したのは，そのようなさりげないグラデーションによる立体感の作り方です．

シャドーブレイクを駆使

新しい手法「シャドーブレイク」

今回作成したデザインのように，複数の線を重ねたデザインは大変人気があります．動画の冒頭で言及した通り，ロゴ検索エンジンとして有名なLogoLoungeが2017年4月30日に公開した「2017 Logo Trends」という記事では，このようなデザインを「シャドーブレイク」と呼んでいます．彼らの定義によれば，シャドーブレイクとは次のようなデザインです．

これらのシャドーブレイクは、通常，グラデーションなしで作成されます。フラットな1-2段階暗い色は、line-breakで表現できるすべてを達成できますが、マークを次元のレイヤリングの象徴的な表現ではなく自然な表現に一歩近づけます。
2017 Logo Trends | Articles | LogoLounge

上記で引用した記事は少し読みにくい文章で書かれていますが，要するにこういう意味です．従来，デザインで重なりを表現するには，下の層に配置されたオブジェクトを途切れさせるline-breakの手法が一般的でした．しかし，最近では下の層に配置されたオブジェクトにグラデーションのない「硬い」影を落とすshadow-breakの方法が登場し流行しています．

フラットデザインで影の扱い

影はフラットデザインの全体と統一されるように，グラデーションを使用しないことが多いです．それでも線を途切れさせるよりも，影を落とすデザインはより自然な視覚効果を与えるため優れています．

一方で，フラットデザインのもう一つのアプローチとして「マテリアルデザイン」があります．これはGoogleが2014年のGoole I/Oで発表した新しいUX (顧客体験) 体系です．マテリアルデザインのルールでは，ドロップシャドウの落とし方にも精密な規格が定められています．

影の作り方について，決められた各種数値は下表のとおりです．ここに登場する「dp」という単位はAndroidのマテリアルデザインに特有の単位ですが，詳しいことは無視して，単純に「長さの単位」だと思っておけばよいでしょう．

要素	内容
モード	ノーマル
不透明度	20%
横のずらし	0 dp
縦のずらし	4 dp
ぼかし	4 dp
色	(※ 後述)

影の色は，上記表に書ききれるほど単純ではありません．今回の動画では，影はただ半透明の黒を使用して作成しました．しかし現実の物体に落ちる影の色は複雑な物理過程によって決められており，単純に黒を重ねたような色とは限りません．

マテリアルデザインにおける影

マテリアルデザインではこのことがデザインの指針に考慮されています．影の色については次の5つ (あるいは6つ) のキメ細やかな取り決めがあります．

1 暗い寒色にはIndigo (`#1a237e`) を不透明度20%で重ねる．

2 明るい寒色にはBlue Grey (`#263238`) を不透明度20%で重ねる

3 明るい暖色にはDeep Orange (`#bf3603`) を不透明度20%で重ねる

3 暗い暖色にはBrown (`#3e2723`) を不透明度20%で重ねる

4 無彩色にはGrey (`#212121`) を不透明度20%で重ねる

※ ただし，#e1e1e1より明るい色には10%で重ねる

デザインの中の影を上手に支配することで，デザインが見る者に与える印象を制御することができます．今回の動画チュートリアルではシャドーブレイクという技法について解説しましたが，マテリアルデザインでは別の指針も示されています．影はデザインの主役ではないことが多いですが，影にもしっかりと意識を払うようにすると良いでしょう．