Material 3 Expressive デザインガイド

1. Material 3 Expressive デザインの基本原則

Material 3 (M3) Expressive は、よりパーソナルで、文脈に応じた、表現力豊かなデザインを可能にするためのデザインシステムです。基本的な原則は以下の通りです。

==a==

ダイナミックカラー: ユーザーの壁紙やテーマから色を抽出し、UI全体に調和のとれたカラーパレットを動的に適用します。これにより、よりパーソナルな体験を提供します。
アクセントカラーの強調: アクションを促す要素や重要な情報に対して、より大胆で鮮やかなアクセントカラーを使用します。
トーンの多様性: プライマリー、セカンダリー、ターシャリーといった基本的な色に加え、それぞれの色のトーン（明るさや彩度）を細かく調整し、UIの奥行きや階層を表現します。
サーフェスカラー: 背景やコンポーネントの表面には、ニュートラルな色やわずかに色づいた色を使用し、コンテンツの視認性を高めます。

表現力豊かなフォントファミリー: Google Fonts などで提供される多様なフォントファミリーを活用し、ブランドの個性やコンテンツの雰囲気に合わせて選択します。
可変フォントの活用: ウェイト（太さ）、幅、傾きなどを柔軟に調整できる可変フォントを利用し、より細かいニュアンスの表現や、レスポンシブデザインへの対応を容易にします。
読みやすい階層構造: Display, Headline, Title, Body, Label といった明確なタイポスケール（フォントサイズ、ウェイト、行間の組み合わせ）を定義し、情報の重要度や役割を視覚的に伝えます。
行間と文字間: 適切な行間 (leading) と文字間 (tracking) を設定し、可読性を向上させます。

角の丸みのカスタマイズ: UI要素（ボタン、カード、ダイアログなど）の角の丸みを、円形に近いものから角張ったものまで、ブランドイメージやコンテンツの特性に合わせて調整します。
形状の多様性: 単純な四角形だけでなく、切り欠き (cut corners) や非対称な形状など、より多様な形状を取り入れ、視覚的な面白さや個性を加えます。
コンポーネントごとのシェイプ設定: 各コンポーネントの役割や重要度に応じて、異なるシェイプカテゴリ（例: Small, Medium, Large）を適用します。

アダプティブレイアウト: スマートフォン、タブレット、デスクトップなど、さまざまな画面サイズやデバイスの種類に応じて、レイアウトが最適化されるように設計します。
グリッドシステムの活用: 8dpグリッドシステムを基本とし、要素の配置や間隔を統一することで、視覚的な一貫性と秩序を生み出します。
コンポーネントの配置と間隔: UI要素間のスペース（パディングやマージン）を適切に設定し、情報のグルーピングや視線の流れをコントロールします。
快適な密度: 情報量と余白のバランスを取り、ユーザーが情報を処理しやすい快適な密度を保ちます。

コンセプト: 「学生らしいフレッシュな雰囲気」を Material 3 Expressive で表現する。

プライマリーカラー: 明るく爽やかな青系 (例: #4285F4 - Google Blue や、それを少し明るくした色合い) を基調とし、若々しさや知性を表現します。
セカンダリーカラー: プライマリーカラーと相性が良く、フレッシュさを引き立てる柑橘系の色 (例: #FFBB00 - Amber や #34A853 - Green) をアクセントとして部分的に使用します。
アクセントカラー (Tertiary): 活動的でエネルギッシュな印象を与える暖色系 (例: #EA4335 - Red) を、重要なアクションや通知などに限定的に使用します。
ニュートラルカラー/サーフェスカラー: 白 (#FFFFFF) やごく薄いグレー (#F0F2F5) をベースに、清潔感と軽やかさを演出します。テキストカラーは濃いグレー (#202124) や黒に近い色で可読性を確保します。

フォントファミリー:
- 見出し (Display, Headline, Title): Roboto Flex や Google Sans Text のような、モダンで読みやすく、かつ表現力のある可変フォントを検討します。ウェイトを調整してメリハリをつけます。
- 本文 (Body, Label): Roboto や Noto Sans JP のような、可読性が高く、親しみやすいサンセリフ体を使用します。
タイポスケール: Material 3 のデフォルトのタイポスケールを参考にしつつ、「学生らしい」というテーマに合わせて、全体的に少し大きめのフォントサイズや、遊び心のあるウェイトの組み合わせも検討します。
- 例:
  - Display Large: 57sp
  - Headline Medium: 32sp
  - Title Large: 22sp
  - Body Large: 16sp
  - Label Medium: 12sp
行間: 1.5 程度を基本とし、読みやすさを重視します。

角の丸み:
- ボタンやカードなどの主要なUI要素には、中程度の角丸 (例: 8dp〜16dp) を適用し、親しみやすく現代的な印象を与えます。
- 入力フォームやダイアログなども同様に、適度な丸みを持たせます。
形状: 基本的には標準的な角丸四角形をベースにしつつ、特定のセクションや情報カードなどで、一部アシンメトリーな形状や、一部だけ角丸の度合いを変えるなどの遊び心を取り入れることを検討します（過度にならない範囲で）。

全体構成:
- ヘッダー: サイトタイトルや主要ナビゲーションを配置。シンプルで分かりやすいデザイン。
- コンテンツエリア: グリッドシステムに基づいて情報を整理。カード型レイアウトやセクション区切りを効果的に使用。
- フッター: コピーライト情報や関連リンクなどを配置。
余白: 要素間の余白を十分に確保し、窮屈な印象を与えないようにします。特に、テキストコンテンツの周りには十分なパディングを設けます。
カードデザイン: 情報を整理して見せるためにカードUIを積極的に活用します。カードには適度なシャドウをつけ、立体感を演出します（Material 3 の Elevation を参考）。
レスポンシブ対応: モバイルファーストで設計し、PC、タブレット、スマートフォンで最適な表示になるようにします。

このガイドラインを基に、具体的なCSSの実装を進めます。