CreaTools LogoCreaTools
Tech Notes
Shadow Generator

box-shadow完全ガイド｜UI設計で迷わない影の使い分けとNGライン

2025-12-09

結論：この3行で即決

UIコンポーネント → box-shadow SVG / PNG アイコン → drop-shadow text-shadow → 原則使わない

影の生成は Shadow Generator で。この記事は「どの影を使うか」の判断だけ。

即決フロー

┌─────────────────────────────────────────┐
│ 何に影を付けたい？                       │
└─────────────────────────────────────────┘
        ↓
┌─────────────────────────────────────────┐
│ カード、ボタン、モーダル？               │
└─────────────────────────────────────────┘
        ↓ Yes
┌─────────────────────────────────────────┐
│ ✓ box-shadow                            │
│   （99%はこれ）                          │
└─────────────────────────────────────────┘

        ↓ No
┌─────────────────────────────────────────┐
│ SVG / PNG アイコン？                     │
│ clip-pathで切り抜いた要素？              │
└─────────────────────────────────────────┘
        ↓ Yes
┌─────────────────────────────────────────┐
│ ✓ drop-shadow                           │
│   （形状に沿った影）                     │
└─────────────────────────────────────────┘

        ↓ No
┌─────────────────────────────────────────┐
│ テキストに影？                           │
└─────────────────────────────────────────┘
        ↓ Yes
┌─────────────────────────────────────────┐
│ ⚠️ text-shadow                          │
│   （原則使わない、画像上の視認性向上のみ）│
└─────────────────────────────────────────┘

box-shadow：UIコンポーネントの基本

構文

box-shadow: [inset] <offset-x> <offset-y> [blur] [spread] <color>;

実用パターン

/* 控えめ（Subtle） */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

/* 標準（Medium） */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);

/* 浮き上がり（Elevated） */
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);

複数レイヤーで自然な影

/* 単一レイヤー → 「貼り付けた感」 */
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);

/* 複数レイヤー → 自然な立体感 */
box-shadow: 
  0 1px 2px rgba(0, 0, 0, 0.05),
  0 4px 8px rgba(0, 0, 0, 0.08),
  0 16px 32px rgba(0, 0, 0, 0.05);

複数の影を重ねると、光源からの距離感が表現される。

drop-shadow：形状に沿った影

box-shadow との違い

プロパティ影の対象
box-shadowボックス（矩形）
drop-shadow要素の形状（透明部分を除く）

使いどころ

/* SVG / PNG アイコン */
.icon {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}

/* clip-path で切り抜いた要素（親に適用） */
.parent {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}
.child {
  clip-path: polygon(...);
}

機能比較

機能box-shadowdrop-shadow
spread（拡散）✓✗
inset（内側）✓✗
透過部分の除外✗✓
パフォーマンス良いやや重い

spread / inset が必要なら box-shadow 一択。

text-shadow：原則使わない

本文には絶対使わない。見出しでも慎重に。

唯一の有効な使いどころ

画像上のテキスト視認性向上。

.hero-text {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

装飾目的は避ける

ネオン風、レトロ立体文字などは「やりすぎ」になりやすい。デザイン上の強い意図がない限り使わない。

ホバーエフェクト

基本パターン

.card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s, transform 0.2s;
}

.card:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

transform: translateY を併用すると、より自然に「浮いた」感じが出る。

transition の設定

プロパティ推奨値
duration0.15〜0.25s
easingease または ease-out

アクセシビリティ

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}

NGライン：これはやるな

❌ 影の色が濃すぎる

/* ❌ NG: 黒100% */
box-shadow: 0 4px 8px black;

/* ✓ OK: 透明度を下げる */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);

❌ blur と spread の混同

/* 3番目がblur、4番目がspread */
box-shadow: 0 4px 16px black;      /* blur: 16px */
box-shadow: 0 4px 0 16px black;    /* spread: 16px（意図しない） */

❌ 色付きの影を濃くしすぎる

/* ❌ NG: 透明度なし */
box-shadow: 0 4px 12px #3b82f6;

/* ✓ OK: 透明度 0.2〜0.4 */
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);

❌ text-shadow を本文に使う

本文の可読性が下がる。見出し・ヒーローテキストに限定。

❌ Neumorphism を安易に採用

低コントラストでアクセシビリティ問題が発生しやすい。詳細は Neumorphismを採用しない理由 を参照。

よくある間違い

症状原因対処
影が不自然に見える単一レイヤー複数レイヤーで重ねる
PNGに四角い影が付くbox-shadowdrop-shadow に変更
影が濃すぎる透明度なしrgba で 0.1〜0.2 に
ホバーがカクつくtransition未設定0.2s ease を追加

まとめ

やりたいこと使う方法
カード・ボタン・モーダルbox-shadow
SVG / PNG アイコンdrop-shadow
clip-path で切り抜いた要素drop-shadow（親に適用）
画像上のテキスト視認性text-shadow（控えめに）
本文テキストに影使わない
Neumorphism採用しない

基本は box-shadow。迷ったら box-shadow。

影の生成は Shadow Generator で。

関連記事