frontend-ui

フロントエンド UI デザイン

ありきたりな「AI 生成らしさ」を避け、見た目に個性があり、美しいフロントエンドインターフェースを作成します。

使用する場面

次のような場合に、このスキルを使用します。

• ユーザーがフロントエンド UI の作成（HTML、CSS、JavaScript、React）を依頼したとき
• ユーザーがウェブページ、ランディングページ、ウェブインターフェースの構築を依頼したとき
• ユーザーがビジュアルコンポーネントやレイアウトの作成を希望したとき
• ユーザーがデザインや美しさについて言及したとき、または「見栄えをよくして」と依頼したとき
• ユーザーがダッシュボード、ポートフォリオ、アプリケーション UI を依頼したとき

基本原則

重要：美的な指針が明示されていない場合、Claude はありきたりで保守的なデザイン（白い背景、紫のアクセント、Inter／Roboto フォント、予測可能なレイアウト）を選びがちです。このスキルでは、調査に基づいた手法を用いて、個性があり、視覚的に魅力的なインターフェースを作成します。

4 つのデザイン領域

フロントエンド UI を作成する際は、必ず次の 4 つの領域に取り組みます。

1. タイポグラフィ

使いすぎに注意するフォント：

• Inter、Roboto、Arial、Helvetica、システムフォント

個性のある代替フォントを使います：

• 等幅：JetBrains Mono、Fira Code、IBM Plex Mono、Space Mono
• ディスプレイ／ジオメトリック：Space Grotesk、Clash Display、Epilogue、Syne
• セリフ：Playfair Display、Crimson Pro、Libre Baskerville、Merriweather
• モダンなサンセリフ：Outfit、Manrope、General Sans、Satoshi

タイポグラフィのベストプラクティス：

• コントラストの強い組み合わせを使います：ディスプレイ＋等幅、セリフ＋ジオメトリックなサンセリフ
• 極端なウェイトの差を活用します：100／200 と 800／900（400 と 600 の組み合わせだけにしない）
• サイズに大胆な差をつけます：1.5 倍ではなく、3 倍以上
• コーディング前に Google Fonts からフォントを読み込み、選択したフォントを明示します

組み合わせの例：

Heading: Clash Display (800 weight, 4rem)
Body: JetBrains Mono (300 weight, 0.9rem)
Accent: Space Grotesk (700 weight, 1.2rem)

2. 色とテーマ

ありきたりな配色は避けます：

• 白い背景に紫のグラデーション
• ありきたりな青と白の企業向け配色
• 控えめで、均等に配分された色
• 控えめなアクセントを添えた、予測可能なライトモード

CSS 変数を使い、統一感のある美しさを実現します：

• テーマを徹底します：サイバーパンク、ソーラーパンク、ブルータリズム、ネオ東京、レトロフューチャー、ターミナル、ヴェイパーウェイヴ
• 主役となる色に、鮮烈なアクセントを加えます：すべての色を均等に使わない
• IDE のテーマを参考にします：Dracula、Nord、Gruvbox、Tokyo Night、Monokai
• 文化的な美意識を取り入れます：日本のミニマリズム、スイスデザイン、メンフィススタイル

配色の方針：

1. 一貫性を保つため、CSS カスタムプロパティを定義します
2. 主役となる色を 2～3 色、鮮烈なアクセントを 1～2 色選びます
3. ダークテーマもライトテーマと同じように検討します
4. グラデーションは控えめに使い、使う場合は大胆にします

テーマの例（サイバーパンク）：

--bg-primary: #0a0e27;
--bg-secondary: #16213e;
--accent-neon: #00ff9f;
--accent-pink: #ff006e;
--text-primary: #e0e0e0;
--text-muted: #8892b0;

3. モーション

実装方法：

• HTML の場合：CSS のみでアニメーションを実装します
• React の場合：利用可能であれば Framer Motion ライブラリを使います
• ばらばらなマイクロインタラクションよりも、効果の高い演出に集中します
• 小さなアニメーションをたくさん使うより、ページ読み込み時に連動して段階的に表示する演出を 1 つ丁寧に作ります

モーションのベストプラクティス：

• 段階的な演出には animation-delay を使います
• インパクトを与えるため、マウント時／ページ読み込み時にアニメーションを再生します
• アニメーションを滑らかにします（ease-out、ease-in-out）
• ほとんどのトランジションの長さは 0.4s～0.8s にします

段階的に表示する演出の例：

.fade-in {
  animation: fadeIn 0.6s ease-out forwards;
  opacity: 0;
}

.fade-in:nth-child(1) { animation-delay: 0.1s; }
.fade-in:nth-child(2) { animation-delay: 0.2s; }
.fade-in:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeIn {
  to { opacity: 1; transform: translateY(0); }
  from { opacity: 0; transform: translateY(20px); }
}

4. 背景

避けるもの：単色の白背景、または単色の背景

雰囲気と奥行きを加えます：

• 重ね合わせた CSS グラデーション：不透明度を変えた複数のグラデーション
• 幾何学模様：グリッド線、ドット、斜線
• 文脈に合った効果：ノイズテクスチャ、粒子感、控えめなアニメーション
• テーマに沿った要素：全体の美しさに合わせます（テクノロジーなら回路、自然なら有機的な形）

背景の手法：

/* Layered gradients */
background:
  radial-gradient(circle at 20% 50%, rgba(120, 0, 255, 0.3) 0%, transparent 50%),
  radial-gradient(circle at 80% 80%, rgba(0, 255, 200, 0.2) 0%, transparent 50%),
  linear-gradient(135deg, #0a0e27 0%, #16213e 100%);

/* Grid pattern */
background-image:
  linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 50px 50px;

/* Dots pattern */
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 20px 20px;

重要な警告：「AI スロップ」を避ける

型にはまらない発想をしてください！ 次の点は非常に重要です。

• ✅ ライトテーマとダークテーマを使い分けてください（デフォルトでライトテーマにしないでください）
• ✅ 毎回異なるフォントを使ってください（Space Groteskに偏らないようにしてください）
• ✅ さまざまな美的スタイルを試してください（サイバーパンク、ブルータリズム、レトロ、ミニマリスト）
• ❌ 次のフォントは使用しないでください：Inter、Roboto、Arialをメインフォントにする
• ❌ 次のデザインをデフォルトにしないでください：紫のアクセントを使った白い背景
• ❌ 避けてください：ありきたりなレイアウト、予測可能なコンポーネントのパターン
• ❌ 作成しないでください：文脈に応じた個性に欠ける汎用的なデザイン

ワークフロー

フロントエンド UI を作成する場合は、次の手順に従ってください。

Step 1: コンテキストを理解する

次の点について、確認の質問をします。

• インターフェースの目的
• 対象ユーザー
• 希望するムードや印象
• 特定の美的スタイルの希望

Step 2: 美的な方向性を選ぶ

コンテキストに基づいて、一貫性のあるテーマを選びます。

• テック／開発：ターミナル、サイバーパンク、ハッカー風
• クリエイティブ：ヴェイパーウェイヴ、メンフィス、ブルータリズム
• プロフェッショナル：スイスデザイン、ミニマリスト、エディトリアル
• オーガニック：ソーラーパンク、自然から着想を得たスタイル、暖色系

Step 3: デザインの決定事項を明確に示す

コードを書く前に、次の内容を宣言します。

Theme: [chosen aesthetic]
Fonts: [heading font], [body font], [accent font]
Colors: [dominant colors and accents]
Motion: [key animations planned]
Background: [approach chosen]

Step 4: ベストプラクティスに従って実装する

技術要件：

• 要望に応じて、バニラ HTML、CSS、JavaScript、または React を使用します
• 適切であれば Tailwind CSS を含めます
• 単一ファイルで納品する場合は、すべての CSS と JavaScript をインラインにします
• Google Fonts からフォントを読み込みます
• テーマ設定には CSS カスタムプロパティを使用します
• レスポンシブデザインを確保します（モバイルファーストのアプローチ）

Step 5: 強い印象を残す演出を作る

• ページ読み込み時のアニメーションを演出します
• コンテンツを段階的に表示します
• 反応のよさを感じさせるホバー状態を追加します
• スクロールをきっかけとしたアニメーションは控えめに検討します

例

例 1：開発者ポートフォリオ（ダークテーマ）

明示したデザイン：

• テーマ：緑のアクセントを使ったターミナル／ハッカー風
• フォント：JetBrains Mono（すべてのテキスト）、ウェイトの違いで階層を表現
• 色：ダークな背景（#0d1117）、緑のアクセント（#39ff14）、落ち着いたグレーのテキスト
• 動き：ヒーローテキストのタイピングアニメーション、プロジェクトの段階的なフェードイン
• 背景：走査線のエフェクトを加えた控えめなグリッドパターン

主な特徴：

• 全体にわたる等幅フォントのタイポグラフィ
• 走査線を使った CRT モニター風のデザイン
• 緑色の蛍光体の発光エフェクト
• ターミナル風のナビゲーション

例 2：クリエイティブエージェンシーのランディングページ（ライトテーマ）

明示したデザイン：

• テーマ：大胆なタイポグラフィを使ったスイス・ブルータリズム
• フォント：Clash Display（見出し、ウェイト 900）、Space Grotesk（本文、ウェイト 300）
• 色：オフホワイト（#f5f5f0）、黒、鮮やかな赤のアクセントを 1 色（#ff0000）
• 動き：ページ読み込み時に大胆な要素が端からスライドイン
• 背景：控えめなノイズテクスチャを加えたオフホワイト

主な特徴：

• 極端に大きな文字サイズ（ヒーロー部分は 6rem 以上）
• 非対称のグリッドレイアウト
• アクセントとして使うシャープな幾何学図形
• 赤は控えめに使った、コントラストの高い黒と白

例 3：アプリのダッシュボード（ダークテーマ）

明示したデザイン：

• テーマ：ピンクとシアンのアクセントを使ったネオ・トーキョーの夜
• フォント：Outfit（見出し、ウェイト 700）、IBM Plex Mono（データ／数値）
• 色：ダークネイビー（#0a1128）、ピンク（#ff006e）、シアン（#00f5ff）
• 動き：カードのホバー時のスムーズな遷移、データのカウントアップアニメーション
• 背景：控えめな放射状グラデーションとグリッドを加えたダークな背景

主な特徴：

• インタラクティブな要素にネオン風のアクセント
• 背景ぼかしを使ったグラスモーフィズムのカード
• すべての数値データに等幅フォントを使用
• フォーカス状態で光る境界線

特定の要素に絞ったプロンプト

対象を絞って制御するには、単一の要素を個別に指定できます。

タイポグラフィのみの調整

「他のデザイン要素はすべてそのままにして、タイポグラフィのみを変更してください。見出しには Crimson Pro、本文には Fira Code を使用し、ウェイトに大きな差をつけてください。」

テーマのみの調整

「美的スタイルをソーラーパンクに固定してください。暖かみのあるアースカラー、有機的な形、自然から着想を得たパターン、緑と金のアクセント、楽観的な未来感を取り入れてください。」

モーションのみの改善

「ページ読み込みのシーケンスを適切に演出します。まずヒーローがフェードインし（0.5s）、次にナビゲーションが順番に表示され（0.2sの遅延）、最後にコンテンツカードが下から上へと現れます。」

フォントのローテーション戦略

同じフォントに収束しないよう、以下の個性的な組み合わせをローテーションしてください。

セット 1 - ターミナル風:

• JetBrains Mono + IBM Plex Mono

セット 2 - モダンなエディトリアル風:

• Playfair Display + Space Grotesk

セット 3 - 幾何学的で大胆:

• Clash Display + Manrope

セット 4 - レトロフューチャー:

• Space Mono + Outfit

セット 5 - エレガントなテック風:

• Crimson Pro + Fira Code

セット 6 - ネオ・ブルータリズム:

• Syne + General Sans

品質チェックリスト

納品前に、以下を確認してください。

• フォントに Inter、Roboto、Arial、システムフォントを使用していない
• 配色が、白い背景に紫のアクセントという組み合わせではない
• タイポグラフィに極端なウェイトの差（100～200と800～900）がある
• 階層的なコントラストを生むため、サイズに3倍以上の差がある
• 背景に奥行きがある（グラデーション、パターン、エフェクトなど）
• モーションが意図的に演出されている（順次表示、目的のある動き）
• テーマに一貫性があり、文脈に適している
• 一貫性を保つため、CSS カスタムプロパティを使用している
• ありがちな、画一的なパターンを避けている
• 美的表現に独自性があり、印象に残る

注記

• 出典: Anthropic の「Prompting for Frontend Aesthetics」に関する調査に基づいています
• 多様性が重要: プロジェクトごとに、テーマ、フォント、アプローチを意識的に変えてください
• 文脈が大切: 用途に合わせて美的表現を選んでください（遊び心のあるものかプロフェッショナルなものか、技術的なものかクリエイティブなものか）
• 大胆な選択: 無難でありきたりなものより、個性的なものを選びましょう
• パフォーマンス: アニメーションのパフォーマンスを維持してください（レイアウト変更ではなくCSSのトランスフォームを使用）
• アクセシビリティ: 十分なコントラスト比と読みやすいフォントサイズを確保してください

参考資料

詳しくは、REFERENCE.md を参照してください。内容は以下のとおりです。

• フォントの組み合わせに関する拡張ライブラリ
• 詳細なカラーパレットの例
• アニメーションのレシピ集
• 背景パターンのレシピ
• テーマのアーキテクチャ例