Advertisement

 

文字や画像に、まるで影が落ちているような立体感を表現できる、「ドロップシャドウ(英: Drop Shadow)」。

 

美しい影をデザインするテクニックや、コピペ可能なCSS便利コレクション色付きの影生成ツールなど、さまざまな「影」を紹介してきました。

 

今回は、最近のWebサイトで効果的なドロップシャドウ5つのスタイルの作成方法、使いかたを詳しくみていきましょう。

 

 

ドロップシャドウ5つのサンプルがこちら

 

 

まずは、基本のドロップシャドウ

 

ウェブサイトでもよく見かける、一般的な以下のカード型UIデザインを参考に、さまざまなドロップシャドウを追加していきます。

 

元のオリジナルとなるカード型UIデザイン。影はまだありません。

 

 

ここでは、無料ダウンロードできるFigma用UIキットを利用。画像イメージや見出しも便利なプラグインで自動、一発で挿入してくれます。

 

ゼロからデザインをする必要がなく、時短としても便利。Figmaの基本の使いかたをチェックしておきましょう。

 

 

はじめはFigmaのデフォルト効果でもある、シンプルなドロップシャドウから。

 

カード型のレイアウトを選択したら、右側のプロパティパネルより「エフェクト」を選択し、「ドロップシャドウ」を追加しましょう。

 

Xで左右に、Yで上下にドロップシャドウをずらし、ぼかし(Blur)をほんの少しだけ。不透明度は25%。

 

Figmaデフォルトのドロップシャドウ設定

 

 

あまり濃くせず、オブジェクトと影の距離をあまり離さないようにするのがポイント。ここでは「13%」ほどに設定しました。

 

ドロップシャドウの不透明度はできるだけ落として、控えめで品のあるかんじに

 

 

ドロップシャドウはほんのり控えめに。やりすぎるとダサい感じに。

 

ドロップシャドウがこすぎる問題は、デザイン初心者によくありがちなミス

 

 

今回のように背景に色をつかっている場合は、背景色より少し濃い色をドロップシャドウにしてみましょう。

 

 

 

通常を黒色の影に比べて、よりナチュラルで自然な仕上がりとなる小技テクニック。

 

背景色に合わせてドロップシャドウの色も変更すると、よりナチュラルな仕上がりに

 

 

 

ハードシャドウ・スタイル

 

カードと影の距離を少しだけ離し、ドロップシャドウの「ぼかし0」として、背景よりも少しだけ濃い色合いをセレクト。

 

ぼかし一切なしのハードスタイルは、大胆でボールドな見た目に。

 

 

影の位置をずらし、ぼかしをなくすだけでまた違った印象に仕上がります。不透明度で色の濃さを調整しても問題ありません。

 

ここでも不透明度を調整することで、控えめな仕上がりを実現しましょう

 

 

ハイコントラスト・シャドウ・スタイル

 

最近のウェブデザインでよく見かける、通称「ブルータリズム(英: Brutalism)」。

 

コントラストの高い影に、太めのストローク線を引くのが特長のスタイルです。

 

先述の「ハードシャドウ」の色を黒(#00000)に変更し、ストローク線は3pxに。これだけで印象がガラリと変わります。

 

いま話題のブルータリズム・スタイルのドロップシャドウ

 

 

実際に有名アプリなどで採用されているドロップシャドウも参考にしてみましょう。クリックでコピペ可能。

 

マテリアルデザインや最近話題のニューモーフィズム・スタイルで見かける、立体感を演出するドロップシャドウ、影エフェクト。 CSS box-shadow

 

 

また、ドロップシャドウを重ねることでより美しい、リアルな影を表現できます。おすすめツールは、Shadow Palette Generator

 

 

 

Smooth Shadow Tool Bram も簡単に影を追加できます。

brumm-smooth-shadowツール

 

 

 

ローコントラスト・スタイル

 

静かなデザイントレンドのニューモーフィズムグラスモーフィズムでも見かける、大きなぼかしをつかった影。

 

ポイントは2つ。背景色とカードの色を統一すること。そして、大胆で大きなぼかし(50くらい)を利用すること。

 

淡いローコントラストのドロップシャドウ

 

 

ニューモーフィズムを手軽に再現できるツール Neumorphism.io

 

 

 

背景が白のときにも効果的なテクニックで、程よい立体感を品よく演出できます。

 

背景が白でも効果的なテクニックです

 

 

 

影に色のついた、カラーシャドウ

 

影に色を付けた「カラーシャドウ」スタイル。不透明度で控えめな色合いに調整するのがポイントです。

 

色のついたカラーシャドウは、これから注目のスタイルのひとつ

 

 

2色の配色によるグラデーションをつかった影を作成できるオンラインツールも公開されています。

 

CSS Shadow Gradientsツール

グラデーションは鮮やかな配色や動く流体Blobシェイプなど、さまざまな方法や見せ方で見かけるようになっています。 2色の配色によるグラデーションをつか

 

各種ツールを活用することで、より手軽にドロップシャドウを表現できます。今後のプロジェクトに合った影をデザインしてみましょう。

 

話題の最新ツールを紹介した記事はこちら

最新オンラインツールを見てみる

時短で便利なCSSツール一覧はこちら

CSS便利ツール一覧リスト