frontend-design

フロントエンドデザイン

anthropics/claude-plugins-official に含まれる Anthropic の frontend-design スキルをベースにしており、Apache License 2.0 のもとでライセンスされています。Codex 向けに、トリガーとなる表現の拡張、ランディングページのルール、UI のアンチパターン、アセットに関するガイダンス、ブラウザーを使ったビジュアル QA を追加しています。

ありきたりな AI らしさを避けた、独自性のある本番品質のフロントエンドインターフェースを作成します。ビジュアルの方向性、レイアウト、タイポグラフィ、アセット、インタラクションデザイン、レスポンシブ対応、検証に細心の注意を払い、実際に動作するコードを実装します。

ユーザーは、コンポーネント、ページ、アプリケーション、インターフェースを依頼することがあります。目的、対象ユーザー、ブランド、フレームワーク、技術的な制約についての情報が含まれる場合もあります。

ワークフロー

1. 方向性を決める前に、依頼内容と既存のコードベースの規約を確認します。
2. 製品、対象ユーザー、分野に合った具体的なビジュアルコンセプトを定めます。例：エディトリアルな金融ターミナル、スイス風の工業系 SaaS、ラグジュアリーなホスピタリティ、遊び心のある学習ラボ、映画のようなゲーム HUD。
3. マーケティング用の外殻をアプリ、ツール、ゲームの代わりにするのではなく、実際に使える画面やフローを先に実装します。
4. 画像によって成果が大きく向上する場合は、実物、生成したもの、または分野に関連するビジュアルアセットを使用します。
5. テキストのはみ出し、読み込み状態、ホバー状態、狭いビューポートへの耐性を備えた、レスポンシブでアクセシブルかつ堅牢なインターフェースにします。
6. 必要に応じてアプリをローカルで実行し、ブラウザーでデスクトップとモバイルのレイアウトを確認します。目に見える問題を修正し、完了とする前にコンソールエラーを確認します。

デザインの考え方

コーディングの前に、背景を理解し、明確な美的方向性を定めます。

• 目的：インターフェースが解決する課題と、利用者を特定します。
• トーン：ブルータリズム的なミニマル、マキシマリスト、レトロフューチャー、有機的、ラグジュアリー、遊び心のある、エディトリアル、ブルータリスト、アールデコ、柔らかい、工業的など、依頼に合う具体的な方向性を選びます。
• 制約：フレームワーク、パフォーマンス、アクセシビリティ、レスポンシブな動作、既存プロジェクトの規約を尊重します。
• 差別化：インターフェースの印象に残る要素を決めます。

具体的なコンセプトを選び、精密に形にします。大胆なマキシマリズムも洗練されたミニマリズムも効果的です。重要なのは強さよりも意図です。

次に、以下を満たす動作するコードを実装します。

• 本番品質で、実際に機能する。
• 視覚的に印象的で、記憶に残る。
• 明確な視点を持ち、一貫性がある。
• タイポグラフィ、余白、色、動き、インタラクション状態が洗練されている。

ランディングページのルール

• 最初のビューポートで、ブランド、製品、会場、人物、またはオファーがひと目で分かるようにします。
• H1 には製品、ブランド、人物、場所、オファー、カテゴリーをそのまま記載します。価値提案は補足のコピーに含めます。
• テキストを片側に、装飾的なカードやモックアップを反対側に置く定番の分割型ヒーローは、その分野に特化した最適な選択だとはっきり言える場合を除き、避けます。
• そのページに視覚的な証拠が必要な場合は、関連する画像、生成したビットマップ、製品のスクリーンショット、没入感のあるシーン、実際のメディアを使用します。
• デスクトップとモバイルのどちらでも、最初のビューポートから次のセクションがほのめかされるようにし、ヒーローが閉じたポスターのように感じられないようにします。
• 具体的で、その分野に即したコピーを書きます。「ワークフローを変革」「可能性を解き放つ」「シームレスな体験」のような中身のない SaaS 風の表現は避けます。

UI の種類に合わせる

• アプリ、ダッシュボード、エディター、CRM、業務用ツールでは、マーケティング向けの構成よりも、情報を素早く読み取れる密度、予測しやすい操作、繰り返し使う際の快適さを優先します。
• ゲーム、クリエイティブツール、ポートフォリオ、会場、消費者向け製品では、より強いアートディレクション、動き、雰囲気、独自のインタラクションを取り入れます。
• 既存製品内の再デザインでは、有用な規約を維持し、目に見える中で最も弱い部分から改善します。

フロントエンドの美的ガイドライン

• タイポグラフィ：意図が感じられ、分野にふさわしいフォントを選びます。既存の製品がすでに依存している場合を除き、Arial、Inter、Roboto、システムフォントを安易に使わないでください。適切な場合は、個性的なディスプレイフォントと洗練された本文用フォントを組み合わせます。
• 色とテーマ：一貫性のある配色を採用します。一貫性を保つために CSS 変数を使います。控えめで均等に配分された配色よりも、明確なメインカラーと際立つアクセントカラーを優先します。
• モーション：意味のある効果やマイクロインタラクションにアニメーションを使います。静的な HTML では CSS のみのモーションを優先します。React では、モーションライブラリがすでに利用可能な場合、または明らかに必要な場合にのみ使います。統一感のある演出を一度加えるほうが、効果をあちこちに散らすより効果的です。
• 空間構成：コンセプトに合う場合は、非対称性、重なり、斜めの流れ、グリッドからはみ出す要素、広い余白、制御された密度などを活用し、意図的にレイアウトを組み立てます。
• アセットと画像：販売、使用、プレイ、調査の対象となるものを明らかにできる場合は、画像、動画、生成したビットマップ画像、製品のスクリーンショット、地図、テクスチャ、分野固有のグラフィックを優先します。実際の画像や生成画像のほうがデザインを効果的に伝えられる場合、装飾目的だけの SVG は避けます。
• 背景とディテール：ありきたりな装飾に頼らず、雰囲気と奥行きを生み出します。テクスチャ、パターン、重ねた透明表現、シャドウ、ボーダー、カーソル、粒子感などは、選んだスタイルを支える場合にのみ使います。
• コントロールとアフォーダンス：操作には、見慣れたコントロールやアイコンを使います。ボタン、タブ、トグル、スライダー、メニュー、ツールバー、カードは、特大の SaaS ブロックを安易に使うのではなく、タスクの密度や分野に合ったものにします。
• レスポンシブ時の仕上げ：固定形式の要素には安定した寸法を定義し、テキストの重なりを防ぎ、モバイルレイアウトを検証します。レイアウトを崩すビューポート連動のフォントサイズは避けます。

よくある AI 生成デザインの美的表現は避けてください。使い古されたフォントの選択、白地に紫のグラデーション、ありきたりなカードグリッド、画一的な SaaS セクション、分野とのつながりがないデザイン上の選択などが該当します。

タスクごとにデザインを変化させます。フォント、配色、レイアウト構成、効果がいつも同じものに収束しないようにしてください。

デザインのアンチパターン

ユーザーから明示的に求められている場合、または既存の製品で必要な場合を除き、次のものは避けてください。

• 白地に紫から青へのグラデーション、装飾的なブロブ、ボケ、浮遊する球体、ありきたりなメッシュ背景。
• 分野固有のコンテンツがないまま使われる、中央揃えの SaaS ヒーロー、3 枚のカードによる機能紹介グリッド、ロゴ一覧、推薦コメントブロック、FAQ セクション。
• Inter だけに頼ったタイポグラフィ、特大の角丸カード、コントラストの低いグレーのテキスト、不自然に折り返されるボタンラベル。
• 意味のないグラフ、仮の名前、製品に合わない数値を使った、偽のダッシュボードスクリーンショット。
• インターフェースだけで自明に伝わるはずの機能、ビジュアルスタイル、キーボードショートカットを説明する、アプリ内テキスト。

実装基準

美的なビジョンに複雑さを合わせます。マキシマリストなデザインには、より凝った効果や重層的な構成が必要になることがあります。ミニマルなデザインや洗練されたデザインには、抑制、正確な間隔、慎重な文字サイズの調整、さりげない状態表現が必要です。

既存のコードベースで作業する場合、依頼内容が明確に再設計を求めているのでなければ、確立されたアーキテクチャとコンポーネントのパターンを維持します。アクセシビリティ、レスポンシブ対応、パフォーマンス、保守性にも配慮します。

ビジュアル QA チェックリスト

大規模なフロントエンド作業を完了する前に、ブラウザーでレンダリング結果を確認してください。

• アプリをローカルで実行できる場合は、幅約 1440px のデスクトップ、約 768px のタブレット、約 390px のモバイルで確認してください。
• コンソールエラー、空白のレンダリング、テキストの切れ、UI の重なり、アセットの読み込み不具合、読みにくいコントラスト、最初のビューポートの不自然な構成、モバイルナビゲーションの不具合を修正してください。
• メイン画像が読み込まれ、意図した構図になっており、実際の製品、場所、状態、ゲームプレイ、または被写体が見えることを確認してください。
• 重要なテキストがすべてコンテナー内に収まり、テストしたすべての幅で読みやすいことを確認してください。
• 作業で変更したコントロールについて、ホバー、フォーカス、アクティブ、空、読み込み中、エラーの各状態を確認してください。