frontend-design

フロントエンドデザイン

ありきたりな AI らしさを避け、独自性のある本番品質の Web インターフェースを作成します。

インストール

git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/frontend-design ~/.claude/skills/

デザイン思考のプロセス

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

コードを書く前に、次の質問に答えます。

• 目的： このインターフェースはどのような問題を解決しますか？誰が使いますか？
• 対象ユーザー： 技術的な習熟度、期待、訪問時の心理状態
• 制約： フレームワークの要件、ブラウザーのサポート、パフォーマンスの予算、アクセシビリティのニーズ

2. 美的方向性を決める

「すっきりしてモダン」ではなく、具体的な視点を選びます。

方向性	特徴
徹底したミニマル	モノクロ、システムフォント、明確な余白、装飾なし
マキシマリスト	情報量が多い、重層的、複数の文字サイズ、豊かな質感
レトロフューチャー	ネオンのアクセント、暗い背景、グリッド線、等幅フォント
オーガニック／ナチュラル	柔らかな形、アースカラー、手描きの要素、温かみ
ラグジュアリー／洗練	細いセリフ体、ゆったりとした余白、落ち着いた配色、控えめな表現
遊び心／おもちゃのような印象	丸みのある形、明るい原色、弾むようなアニメーション
エディトリアル／雑誌風	強いグリッド、印象的な文字の階層、引用文
ブルータリスト／飾り気のない表現	むき出しの構造、等幅フォント、生の HTML のような印象
アールデコ／幾何学的	対称性、メタリックなアクセント、装飾的な縁取り、角張った形
ソフト／パステル	明るい配色、穏やかなグラデーション、丸み、親しみやすさ
インダストリアル／実用本位	むき出しのグリッド、ステータス表示、情報量の多さ

3. 印象に残る要素を特定する

どのインターフェースにも、見る人の記憶に残る要素をひとつ取り入れます。

• 意外性のあるインタラクション
• 独特な文字表現
• 大胆な配色
• 驚きをもたらすアニメーション
• 定石を破るレイアウト

4. 意図を持って仕上げる

大切なのは強さではなく、方向性を貫くことです。マキシマリズムも徹底して実践すれば効果的です。ミニマリズムも精密に実践すれば効果的です。中途半端な表現は効果的ではありません。

タイポグラフィ

原則

• 個性のあるフォントを選び、デフォルトは使わないでください（見出しには Arial、Inter、Roboto を避けてください）
• ディスプレイフォント（個性）と本文フォント（読みやすさ）を組み合わせます
• サイズの階層：ディスプレイ（48-96px）、見出し（24-36px）、本文（16-18px）、小さい文字（12-14px）
• 大きなディスプレイテキストでは文字間隔を詰めます（-0.02～-0.04em）
• 本文の文字間隔は通常、またはやや広めにします

無料フォントの提供元

提供元	最適な用途
Google Fonts	選択肢が最も豊富で、CDN を簡単に利用可能
Fontshare	高品質なディスプレイフォント
Fontsource	セルフホスト可能で、npm からインストール可能
Atipo Foundry	個性的なディスプレイ書体

組み合わせの方針

ディスプレイ	本文	雰囲気
セリフ体（印象的）	サンセリフ体（すっきり）	エディトリアル、ラグジュアリー
ジオメトリック・サンセリフ	ヒューマニスト・サンセリフ	モダン、親しみやすい
等幅フォント	システム・サンセリフ	技術的、ブルータリスト
スラブセリフ体	ニュートラルなサンセリフ	大胆、構造的
手書き風／ディスプレイ	ジオメトリック・サンセリフ	遊び心、創造的

色とテーマ

配色を作る

1. 主役となる色（ムードを決める色）をひとつ選びます
2. アクセントカラーを1～2色加えます（操作や強調に使用）
3. ニュートラルカラーの階調を定義します（背景、境界線、テキスト）
4. セマンティックカラーを加えます（成功、警告、エラー）
5. すべて CSS カスタムプロパティに保存します

:root {
  --color-primary: #...;
  --color-accent: #...;
  --color-bg: #...;
  --color-surface: #...;
  --color-text: #...;
  --color-text-secondary: #...;
  --color-border: #...;
}

ルール

• 主役の色とアクセントカラーを使い、均等には配分しません
• WCAG AA の最低コントラスト比を満たします（テキストは4.5:1、大きなテキストは3:1）
• ダークかライトかを明確に決めます。曖昧にしないでください
• Lorem Ipsum ではなく、実際のコンテンツでテストします

モーションとアニメーション

CSS トランジション（マイクロインタラクション）

.button {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

CSS @keyframes（環境的なアニメーション）

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.floating-element { animation: float 3s ease-in-out infinite; }

スクロール連動（IntersectionObserver）

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));

段階的な表示

.stagger-item { opacity: 0; transform: translateY(20px); transition: all 0.5s ease; }
.stagger-item.visible { opacity: 1; transform: translateY(0); }
.stagger-item:nth-child(1) { transition-delay: 0s; }
.stagger-item:nth-child(2) { transition-delay: 0.1s; }
.stagger-item:nth-child(3) { transition-delay: 0.2s; }

パフォーマンス

• アニメーションには transform と opacity のみを使用します（GPU で合成されます）
• レイアウトの再計算を引き起こす width、height、margin、padding のアニメーションは避けます
• will-change は控えめに使い、アニメーションする要素にのみ適用します
• 単純なアニメーションには JS より CSS を優先します
• アクセシビリティのため、prefers-reduced-motion メディアクエリを使用します

空間構成

• コンテンツを中央に配置したカラムが基本という発想から脱却します
• 意図的に非対称性やグリッドを崩す要素を取り入れます
• z-index で要素を重ね、奥行きを出します
• 広々としたネガティブスペースか、計算された高密度のどちらかに徹します
• 複雑なレイアウトには CSS Grid、コンポーネントの配置には Flexbox を使います

コード品質

• セマンティックな HTML（nav、main、article、section、aside、footer）
• アクセシビリティへの配慮：ARIA ラベル、キーボード操作、フォーカス管理
• レスポンシブ対応：モバイルファーストまたは流動的なレイアウトとし、320～1440px でテストします
• パフォーマンス：画像の遅延読み込み、効率的なセレクター、最小限の JS
• 必須でない限り外部依存関係を追加しません（CDN のフォントは問題ありません）

アンチパターン

• ありきたりな AI 風のデザイン（どこもかしこも紫のグラデーション、何にでもグラスモーフィズム）
• カスタマイズせずに使う既製品のコンポーネントライブラリ
• 予想どおりのレイアウト（ヒーロー → 3 列 → お客様の声 → CTA）
• デザインの方向性が「クリーンでモダン」だけ
• 使われすぎているフォント（ディスプレイ用の Inter、Poppins）
• 意味のない装飾要素
• 何もかも角丸にすること（意図的な選択なら問題ありませんが、デフォルトで角を丸くするのは安易です）
• ネオンカラーをアクセントにしたダークモード（使われすぎています）

タイポグラフィの組み合わせ、配色の構築、アニメーションライブラリ、アクセシビリティのチェックリストについては、REFERENCE.md を参照してください。

ブランドの背景情報（任意）

作業ディレクトリに brand-profile.json がある場合は、デザインを始める前に読み込んでください。色（primary、secondary、background、text）はデザインシステムに、タイポグラフィ（見出し用と本文用のフォント）はフォント選定に、美的要素（ムードを表すキーワード、テクスチャ、ネガティブスペース）はレイアウトの判断に、画像（スタイル、構図）はヒーローセクションやビジュアル要素に活用してください。このプロファイルは brand-dna スキルによって生成されます。