テーマとシャドウの深度
読了 5分 ＋ 実践 15分
テーマの選択
Section titled “テーマの選択”ライトテーマ
Section titled “ライトテーマ”明るい背景に暗いテキスト。明るい環境での読みやすさに最適。
ライトテーマを使用する:
background #FFFFFF, surface cards #F9FAFB,
primary text #111827, secondary text #6B7280,
border color #E5E7EB.使用場面:
- 読書中心のアプリ（ドキュメント、ブログ、ニュース）
- プロフェッショナルまたはエンタープライズツール
- 屋外や明るい環境でのユースケース
- 信頼性と明瞭さが優先される場合
ダークテーマ
Section titled “ダークテーマ”暗い背景に明るいテキスト。暗い環境での目の疲れを軽減する。
ダークテーマを使用する:
background #111827, surface cards #1F2937,
primary text #F9FAFB, secondary text #9CA3AF,
border color #374151.使用場面:
- 開発者ツールやコードエディタ
- エンターテインメントおよびメディアプラットフォーム
- ゲームや没入型アプリケーション
- OLEDデバイスの最適化（バッテリー節約）
自動テーマ（システム設定に連動）
Section titled “自動テーマ（システム設定に連動）”オペレーティングシステムの現在のテーマ設定に適応する。
システム設定に応じて切り替わるアダプティブテーマを使用する:
ライトモード: background #FFFFFF, text #111827, borders #E5E7EB
ダークモード: background #111827, text #F9FAFB, borders #374151
CSSカスタムプロパティと prefers-color-scheme メディアクエリを使用する。使用場面:
- 多様なユーザーを持つ汎用アプリ
- 手動トグルなしにユーザー設定を尊重したい場合
- SaaSプロダクトや生産性ツール
| 要素 | ライト | ダーク | 自動 |
|---|---|---|---|
| 昼光下での読みやすさ | ✅ 最良 | ❌ 低い | 適応 |
| 夜間の目の疲れ | ❌ 高い | ✅ 少ない | 適応 |
| OLEDバッテリー | ❌ 節約なし | ✅ 節約 | 適応 |
| ユーザーの親しみやすさ | ✅ 最も親しみやすい | 増加中 | 両方 |
| 信頼性とプロフェッショナル感 | ✅ 高い | 中程度 | 両方 |
シャドウの深度
Section titled “シャドウの深度”シャドウはエレベーション（サーフェスが背景からどれだけ浮いて見えるか）を伝える。階層を確立するために使用する。エレベーションが高いほど、より重要またはインタラクティブな要素であることを示す。
シャドウレベル
Section titled “シャドウレベル”なし
シャドウなし。フラットデザインや背景に使用する。
シャドウなし。区切りにはボーダー（#E5E7EB）のみを使用したフラットデザイン。スモール — box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)
最小限の深度。目立たない要素のわずかな浮き上がりに使用する。
セカンダリカードや非アクティブなタブにスモールシャドウを適用する:
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)ミディアム — box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)
標準的な深度。インタラクティブなカードやボタンのデフォルト。
インタラクティブなカードにミディアムシャドウを適用する:
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)
ホバー時はラージシャドウに切り替える。ラージ — box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1)
目立つ深度。フローティングパネル、フィーチャーカード、強調コンテンツに使用する。
メインのダッシュボードパネルにラージシャドウを適用する:
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1)エクストララージ — box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1)
高いエレベーション。ヒーロー要素やフィーチャーコンテンツエリアに使用する。
ヒーローセクションのカードにエクストララージシャドウを適用する:
box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1)2XL — box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25)
最大の深度。フォーカス要素へのドラマティックなフローティング効果に使用する。
料金プランのフィーチャーカードに2xlシャドウを適用する:
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25)インナー — box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05)
くぼんだ/押し込まれた効果。入力フィールド、押されたボタン、インセットパネルに使用する。
テキスト入力に押し込まれた感じを出すためにインナーシャドウを適用する:
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05)
フォーカス時は削除し、フォーカスリングに置き換える。エレベーション階層
Section titled “エレベーション階層”シャドウレベルをコンポーネントタイプに一貫してマッピングする。
| レベル | シャドウ | コンポーネント例 |
|---|---|---|
| 0 | なし | ページ背景、フラットセクション |
| 1 | スモール | セカンダリカード、非アクティブ状態 |
| 2 | ミディアム | ボタン、入力フィールド、標準カード |
| 3 | ラージ | ドロップダウン、ツールチップ、ポップオーバー |
| 4 | エクストララージ | モーダル、フローティングアクションボタン |
| 5 | 2XL | ヒーロー要素、プライマリCTA |
シャドウのベストプラクティス
Section titled “シャドウのベストプラクティス”方向の一貫性 — 常に右下または中央下方向を使用する。光源は上から来る。
すべてのコンポーネントで一貫したシャドウ方向を使用する:
シャドウは下向き（正のY方向）にわずかに右（正のX方向）へ落とす。テーマへの適応 — ダークテーマでは、くすんだ見た目を避けるために透明度を高くするか、色付きのシャドウを使用する。
ダークモードでは、ミディアムシャドウに rgba(0, 0, 0, 0.1) の代わりに rgba(0, 0, 0, 0.4) を使用する。
または色付きシャドウを使用する: box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3)
青みがかった深度を表現するのに適している。インタラクティブフィードバック — ホバー状態やアクティブ状態でシャドウを大きくして、インタラクティブであることを示す。
カードはミディアムシャドウから始める。ホバー時は 200ms ease でラージシャドウに切り替える。
押された状態は 100ms 間インナーシャドウを使用し、その後ミディアムに戻る。このページの外部仕様・背景情報は、参考文献を参照してください。[1][2]
- W3C Web Accessibility Initiative, WCAG 2 Overview
- MDN Web Docs, Learn web development