Alius デザインシステムにおけるシャドウは、レイヤー間の空間的関係を表現するために控えめに使用されます。装飾要素ではなく機能的ツールです。

デザイン原則

• ドキュメントページは強いシャドウを最小限に — 読書体験はフラットで構造的に感じるべきで、レイヤードで散漫ではない
• ツールインターフェースはボーダーとレイヤリングを優先 — シャドウは明確なボーダーと背景色の差別化に次ぐ
• シャドウは空間的関係を表現し、装飾ではない — シャドウは「この要素は下のコンテンツの上にある」ことを意味する
• 過度な使用を避ける — 過剰なシャドウ深度はビジュアルノイズを作り出し、本当にエレベーテッドされた要素のインパクトを低下させる

シャドウスケール

レベル 0 — シャドウなし（ボーダーのみ）

• 用途： ページ上のカード、テーブル行、リスト項目、コンテンツセクション
• 処理： エッジを定義するためにボーダー（1px、ニュートラルカラー）を使用
• 根拠： ほとんどのコンテンツはページと同じ標高に存在 — ボーダーが十分な分離を提供

レベル 1 — わずかな浮き

• 用途： ホバーされたカード、ハイライトされた項目、控えめな CTA コンテナ
• 処理： 非常に控えめなシャドウ、ほとんど知覚できない — 要素がわずかに浮き上がったことを示すのに十分な程度
• 根拠： ゆるやかな浮上はレイアウトを圧倒せずにインタラクティブ性または強調を示す

レベル 2 — ドロップダウン / ツールチップ

• 用途： ドロップダウンメニュー、ツールチップ、ポップオーバーパネル、オートコンプリート候補
• 処理： 控えめだが明確に可視なシャドウ — ページの上に浮遊するレイヤーを示す
• 根拠： コンテンツをオーバーレイする一時的 UI 要素は、ベースレイヤーからの明確な分離が必要

レベル 3 — モーダル

• 用途： モーダルダイアログ、確認ダイアログ、大型オーバーレイ、ドロワーパネル
• 処理： モーダルと背景を明確に分離する目立つシャドウ
• 根拠： モーダルはユーザーの注意を要求し、背後のページコンテンツから視覚的に離れる必要がある

レベル 4 — 重要オーバーレイ

• 用途： クリティカル通知、システムレベルアラート、フルスクリーンオーバーレイ、スポットライト要素
• 処理： システム内で最も強いシャドウ — 最大のエレベーションと緊急度を伝える
• 根拠： 即座の注意を要求し、他のすべてのコンテンツの上に位置する要素に予約

使用ガイドライン

• ほとんどのページ要素にはデフォルトでレベル 0（シャドウなし）
• 分離にはシャドウの前にボーダーを使用
• シャドウを一貫して適用 — 同じコンポーネントタイプは常に同じシャドウレベルを使用
• シャドウはライト/ダークモード間で一貫性を保つ（構造ではなく不透明度を調整）
• ネストされた要素に複数のシャドウレベルを組み合わせない — ビジュアル混乱を生む