frontend-design

ブランドの一貫性と実装品質を保ちながら、個性が際立つ本番品質のフロントエンドインターフェースを作成します。

フロントエンドのコンポーネント、ページ、またはインターフェースの構築やスタイリングが依頼され、主にビジュアル／UXの実装が求められる場合に、このスキルを使用します。

プロジェクトのデザイン基盤

ビジュアルに関する判断を行う前に、プロジェクトのデザイン資料を確認してください。

• docs/design.md — トークン、タイポグラフィ、余白、角丸、シャドウ、ダークモード、コンポーネントのパターンに関する信頼できる情報源です。
• docs/sales.md — 対象ユーザー、ポジショニング、メッセージのトーンに関する信頼できる情報源です。

以下の制約を適用してください。

• プライマリーカラー：Trust Bold Blue #2563eb（Confluenceより彩度を高くします）
• フォント：デフォルトのUI／本文書体にはInterを使用します（意図的なブランド上の選択です）
• トーン：プロフェッショナルな自信。現代的でありながら、企業のビジネスアナリストに威圧感を与えないこと
• 角丸：デフォルトは8px。Linear／NotionのSaaSらしい美観に合わせます
• ライトモードとダークモードの両方で動作すること

デザインの検討

コーディングの前にコンテキストを定め、明確なビジュアルの方向性を1つ選んでください。

• 目的：このインターフェースはどのような問題を解決しますか？誰が使いますか？
• トーン：主軸となるスタイルの方向性を1つ選び、すべてのコンポーネントで統一してください。
• 制約：技術要件（フレームワーク、パフォーマンス、アクセシビリティ）。
• 差別化：このインターフェースを忘れられないものにする要素は何ですか？使う人の記憶に残る唯一のものは何ですか？

ブランドルールの範囲内で試行してください。

• 本文／UIテキストとフォームにはInterを使用してください。
• アクセント／ディスプレイ書体は、見出し、コールアウト、またはヒーロー要素に限って使用してください。
• プロジェクトですでに別のパターンが定義されている場合を除き、アクセント／ディスプレイ用のフォントファミリーはサーフェスごとに1つまでにしてください。
• 既存の製品パターンに合わせて、コンポーネントの基本要素（余白のリズム、角丸、密度、インタラクションのパターン）を統一してください。
• インターフェースごとに主となるムードを1つ、補助的なモチーフを1つ選び、無関係な美的要素を混在させないでください。

特に指示がない限り、プロジェクトで既に使用されているスタックを使って動作するコードを実装してください。

• リポジトリで既に使われているフレームワーク、スタイリングシステム、コンポーネントの基本要素を再利用してください。
• 明示的に求められていない限り、新しいフレームワークやスタイリングのパラダイムを導入しないでください。

成果物は次の条件を満たすようにしてください。

• 本番品質で、機能すること
• 視覚的に印象的で、記憶に残ること
• 明確な美的視点があり、全体に統一感があること
• 細部まで入念に磨き上げられていること

フロントエンドの美観に関するガイドライン

以下のデザインルールを適用してください。

• タイポグラフィ：デフォルトの本文／UI書体にはInterを使用してください。選択したムードを強める場合に限り、個性的なアクセント／ディスプレイ書体を導入してください。読みやすさと階層を保ってください。
• 色とテーマ：統一感のある美観を徹底してください。一貫性を保つためにCSS変数を使用してください。控えめで均等に配分された配色より、支配的な色と鮮明なアクセントを組み合わせた方が効果的です。
• モーション：階層や操作の手がかりを明確にする、意図的なモーションを使用してください。実用的な場合はCSSを優先してください。フレームワーク標準のモーションライブラリは、既に導入されている場合、または明示的に求められた場合に限り使用してください。すべての要素にモーションを加えるのではなく、重要なトランジションに集中させてください。
• 空間構成：視線の追いやすさと操作の明確さを保ちながら、意図的な変化（非対称、重なり、密度の変化）を取り入れてください。
• 背景とビジュアルの細部：選択したムードを支え、読みやすさ、コントラスト、パフォーマンスを損なわない場合に限り、奥行きを加えてください。

繰り返し使われる既定の美観や、文脈にそぐわない視覚的な陳腐表現は避けてください。ブランド、対象ユーザー、製品の目的に基づいた判断を優先してください。

制御された範囲内で、タスクごとに美観に変化をつけてください。アクセント／ディスプレイの扱い、構成のモチーフ、モーションの特性には変化をつけつつ、ブランドの基本要素は安定させてください。

選択した方向性に応じて、実装の複雑さを調整してください。効果の複雑さは、コミュニケーションやブランド表現を実質的に向上させる場合にのみ高めてください。ミニマルまたは洗練された方向性では、控えめにしてください。

創造的な選択は規律を持って実行してください。目新しさそのものを追求するのではなく、一貫性、使いやすさ、アクセシビリティ、保守性を優先してください。