その「影」、サイトを安っぽくしていませんか？

「一生懸命デザインしたのに、なんだか素人っぽい…」
私がWeb制作を始めた頃、ずっとこの悩みを抱えていました。

ある日、先輩デザイナーに私のコードを見てもらったところ、一言こう言われました。
「影が汚いね」

当時の私は、影をつける＝ box-shadow: 5px 5px 5px black; だと思っていました。
しかし、これは現実世界にはありえない「真っ黒で不自然な影」です。これがサイト全体を「薄汚れた感じ」に見せていた犯人でした。

プロの影は「薄く」て「重なっている」

先輩に教わったプロの影の鉄則は2つありました。

1. 完全な黒を使わない: rgba(0, 0, 0, 0.1) のように、透明度を下げた薄い色を使う。
2. 影を重ねる（レイヤー）: 「濃くて狭い影」と「薄くて広い影」を重ねることで、リアルな奥行きを出す。

しかし、これを手書きのCSSで書くのは至難の業です。 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) ...なんて、頭の中でイメージできるわけがありません。

「もっと直感的に、スライダーをいじるだけで『プロっぽい影』を作りたい！」

そんな私の個人的な願望から生まれたのが、このジェネレーターです。

おすすめの使い方：マテリアルデザイン風

Googleのマテリアルデザインのような、浮き上がるような美しい影を作りたい時は、このツールの「レイヤー追加」ボタンを使ってみてください。

• 1層目：Y軸を少しずらして、濃いめの影にする（物体の輪郭）
• 2層目：ぼかしを大きくして、薄い影にする（空間の広がり）

この2つを組み合わせるだけで、あなたのサイトのボタンやカードは、驚くほどモダンで洗練された見た目に生まれ変わります。 ぜひ、色々な影を試して、あなたのサイトに「深み」を与えてあげてください。