ボタンの影は濃くせず、ぼかしを広め・濃さを薄めにすると上品に見える

どんな問題を解決するか / いつ使うか

ボタンやカードを浮かせたくて濃い影を付けると、古い・重い印象になる。影で立体感を出したいときの基本。

やり方

/* 強すぎる例 */
.btn-bad  { box-shadow: 0 4px 6px rgba(0, 0, 0, .45); }

/* 繊細な例：ぼかしを広く、濃さを薄く。2層重ねると自然 */
.btn {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .06),
    0 8px 24px rgba(15, 23, 42, .08);
}
.btn:hover {
  box-shadow:
    0 2px 4px rgba(15, 23, 42, .08),
    0 12px 32px rgba(15, 23, 42, .10);
}

• 影の色は真っ黒ではなく、背景やブランドの色に寄せた暗い色にするとなじむ。
• 近い影（小さく少し濃い）と遠い影（大きく薄い）を重ねると、少ない濃さでも浮いて見える。

注意点

• 影だけで「押せる」ことを伝えようとしない。形・色・コントラストで分かるようにする（文字だけでなく、ボタンや入力欄の枠などUI部品にも背景との3:1のコントラストを確保する）。
• ホバーしていないのに常に付いている影は「AIっぽさ」の印にも挙げられている（バイブコーディングしたサイトは、taste-skill v2 で「AIっぽさの印」を幅ごとに洗い出してから直す）。
• コード例は一般的な書き方で補ったもの（元の投稿はテキストのみ）。

出典

• 投稿者: @wokobo_net
• 投稿: @wokobo_net · 2026-10-16
• 収集日: 2026-10-16（JST、10/15・10/16分の巡回をまとめて実施）