frontend-design

フロントエンドデザイン

概要

明確な美的方向性を持つ、印象的で機能的なインターフェースを構築します（汎用的なテンプレートは使いません）。大胆なタイポグラフィ、一貫性のある配色、意図的なモーション、セマンティックな構造、アクセシビリティを重視します。

クイックスタート

• 要件を整理します：目的、対象ユーザー、プラットフォームの制約、フレームワーク、納品形式（HTML/React/Vue）。
• 美的方向性と特徴的な演出（ストライプ、グロー、粒状感、雑誌風のレイヤーなど）を選びます。references/aesthetic-playbook.md を参照してください。
• デザイントークンを定義します：フォント、配色、シャドウ、角丸、余白のスケール。フォントは早い段階で読み込みます。
• レイアウトを計画します：ヒーローと補足セクション、データ／タイムラインのレール、カード。グリッドシステムとモーションの計画を選びます。
• セマンティックなマークアップを構築し、CSS 変数を設定し、段階的な表示アニメーションを加えたら、アクセシビリティとレスポンシブ対応を確認します。

ワークフロー

1) 要件と美的方向性を定義する

• 次の内容を確認します：対象ユーザー、トーン（ブルータリスト、エディトリアル、ネオン、ソフトクラフト、インダストリアルなど）、コンテンツの種類（カード、フォーム、チャート）、パフォーマンス上の制約。
• 印象に残る演出を1つ選び、一貫して使います。スタイル上必要な場合を除き、フォントを混在させすぎないようにします。
• ユーザーの要望が曖昧な場合は、references/aesthetic-playbook.md を参考に、美的方向性を2〜3案提案して確認します。

2) 構造とトークンを計画する

• 配色、シャドウ、角丸、余白、モーションのイージング用に CSS 変数を設定します。アクセントカラーは1〜2色に抑えます。
• フォントの組み合わせ（ディスプレイ用＋本文用、必要に応じて等幅フォント）を選びます。カスタムフォントの後にフォールバックを指定します。
• セクションとマイクロインタラクションを割り当てます。バニラ構成ではセマンティックな HTML から始め、React では再利用可能なパーツ（Hero、FeatureList、Timeline、CTA Rail）に分割します。
• レイアウト、モーション、アクセシビリティ、レスポンシブ対応のパターンについては、references/implementation-patterns.md を参照してください。

3) 構築してアニメーションを加える

• マークアップ：セマンティックな見出し、スキップリンク、インタラクティブ要素の ARIA ラベル、内容を説明する代替テキストを用意します。
• レイアウト：大枠には CSS Grid、要素のまとまりには Flexbox を優先します。読みやすさを保ちながら、非対称や重なりを意図的に取り入れてグリッドを崩します。
• スタイリング：単調な単色を避けるため、カスタム背景（グラデーションメッシュ、粒状感、ハッチング）を使います。ボタンとカードには、意図のある境界線やシャドウを設定します。
• モーション：意味のあるアニメーションをいくつか演出します（ページ読み込み時の段階表示、ホバー時のマグネティックな浮き上がり、スクロール時の表示）。prefers-reduced-motion に対応します。
• データ駆動型 UI：コンテンツ（カード、指標、手順）の配列を定義し、コンポーネントの重複を避けて、スタイル変更を容易にします。

4) 仕上げと QA

• レスポンシブ対応：グリッドを折りたたみ、余白を維持し、モバイルでも CTA が目立つようにします。ホバー時の視覚的な手がかりは、フォーカス時やアクティブ時のスタイルに置き換えます。
• アクセシビリティ：h1 は1つにし、見出しの順序を論理的に保ち、フォーカス時のスタイルを設定し、コントラスト比を AA 以上にし、入力欄にラベルを付け、ステータス変更には aria-live を使用します。
• パフォーマンス：モバイルでは重いシャドウを避け、アセットを圧縮して数を抑え、font-display: swap を使い、JavaScript に依存する重いエフェクトより CSS アニメーションを優先します。

参考資料

• references/aesthetic-playbook.md：フォント、色、レイアウト、モーションの手がかりとともに、印象的な美的方向性を選べます。
• references/implementation-patterns.md：HTML/React のパターン、トークン、モーションのレシピ、レスポンシブ対応とアクセシビリティに関するガイダンスを掲載しています。

アセット

• assets/vanilla-starter/：グラデーション、粒状感、段階的な表示アニメーション、スキップリンク、アクセシブルな構造を備えた、すぐに実行できるバニラ HTML/CSS/JS のコンセプト（avant studio テーマ）です。CSS 変数、フォント、コンテンツを更新してコピーし、テーマを変更してください。