use-shadows-appropriately

スキル：影を適切に使う

目的

機能上必要な場合にのみ奥行きと高さを加え、装飾的な影は避けます。

適用した主な修正（Autoresearch に基づく）

補足を追加しました。カードの控えめな影は許容されます（境界線より目立ちにくいため）。静的要素に大きな装飾的な影を付けるのは不適切です。

種類

修正＋評価

入力

• UI 要素の一覧
• 要素の用途（静的、インタラクティブ、オーバーレイ）
• 現在の影の仕様

出力

• 影の使用に関する推奨事項
• 合格／不合格の評価

実施した変換

静的要素から装飾的な影を取り除き、重なりのあるレイヤー（コンテンツの上に表示されるモーダル、ページの上に表示されるドロップダウン）に影を限定します。

判断基準

合格（適切な影の使用）

• カードの小さな影（控えめで、境界線より目立ちにくい）✅
• モーダル／ダイアログ：大きな影（すべてのコンテンツより高く見せる）
• ドロップダウン／メニュー：中程度の影（ページより高く、モーダルより低く見せる）
• カード：控えめな影、または影なし（フラットデザインを推奨）
• ホバー状態：クリック可能であることを示すため、影を控えめに強める
• 静的要素：影なし
• 一貫した影のシステム（最大2～3段階）

不合格（不適切な影の使用）

• 静的なカードに大きな装飾的な影を付ける
• 静的コンテンツに濃い影を付ける
• 一貫性のない影の値
• 高さを示さない装飾的な影
• テキストやアイコンに影を付ける

補足（重要なポイント）

カードに小さなぼかしと低い不透明度の控えめな影を付けるのは問題ありません。本書では、境界線の代わりとして推奨されています。静的コンテンツに派手で大きな影を付けるのは不適切です。

影の高さの尺度

レベル	用途	CSS の例（概算）
なし	静的コンテンツ、テキスト、アイコン	none
控えめ	カード（境界線の代わり）	0 2px 4px rgba(0,0,0,0.1)
低	浮き上がったカード、ボタン	0 4px 6px rgba(0,0,0,0.1)
中	ドロップダウン、ポップオーバー、ツールチップ	0 10px 15px rgba(0,0,0,0.1)
高	モーダル、ダイアログ、ドロワー	0 20px 25px rgba(0,0,0,0.15)

影の原則

1. 影は高さを示します - 高いほどユーザーに近く見えます
2. 影はインタラクティブ性を示します - クリックできる要素には影を付けられます
3. 影はレイヤーを分離します - モーダルは背後のページに影を落とします
4. 影は控えめにします - 良い影は、ほとんど気付かれません
5. 一貫性が重要です - 同じ高さには同じ影を使います

よくある失敗パターン

失敗	説明	修正
影のじゅうたん	すべてのカードに影がある	静的なカードはフラットにし、控えめな影は許容します
ドロップシャドウの乱用	静的要素に濃い影を付ける	高さやインタラクションを示す場合に限定します
奥行きの不統一	類似した要素に異なる影を付ける	影を2～3段階に整理し、一貫して適用します
黒い影	純粋な黒の影（きつい印象）	不透明度の低い rgba を使い、ブランドカラーに合わせて色を付けます
モーダルの分離不足	モーダルがページより上に見えない	影の広がりとぼかしを強めます

前提条件

• 視覚的な階層が確立されている
• どの要素がインタラクティブかを理解している

依存関係

• eliminate-visual-clutter（影は視覚的な雑然さを増すことがよくあります）

Refactoring UI の参考資料

• 「影を使って高さを表現する」
• 「くっきりした境界線の代わりに box shadow を使う - 控えめな影は視覚的な雑然さを生まずに輪郭を効果的に示します」
• 「影は控えめにする」

評価例

入力： カードに影（0 4px 6px rgba(0,0,0,0.1)）、ボタンに影（0 2px 4px）、モーダルに影（0 4px 6px）があり、テキストに text-shadow が設定されたページ

評価： 不合格（視覚的に雑然としている）

• 静的コンテンツであるカードに影は不要です
• モーダルの影がカードと同じです（より高い影にする必要があります）
• テキストの影は装飾的です

推奨事項：

• カードの影を削除する、または控えめな影（0 2px 4px）を使う
• テキストの影を削除する
• モーダル：0 20px 25px rgba(0,0,0,0.15)
• ボタン：必要に応じて、ホバー時のみ控えめな影を付ける