web-design-methodology

Web デザインの方法論

本番環境に対応した HTML/CSS を構築するための汎用パターンです。このスキルでは実装方法を扱います。具体的なコンポーネントのデザインについては、web-design-patterns と組み合わせてください。

作成するもの

本番環境に対応した HTML/CSS のプロトタイプ。以下を含みます。

• 意味のある CSS カスタムプロパティ（トークン）
• BEM で命名したコンポーネント
• モバイルファーストのレスポンシブデザイン
• アクセシブルなマークアップ
• 任意の3状態ダークモード

ファイル構成

prototype/
├── index.html
├── about.html
├── services.html
├── contact.html
├── favicon.svg
├── css/
│   ├── variables.css     # Tokens: colours, typography, spacing
│   ├── styles.css        # All component styles (BEM)
│   └── mobile-nav.css    # Mobile menu styles
├── js/
│   ├── theme.js          # Dark mode toggle (only if requested)
│   └── mobile-menu.js    # Hamburger menu
└── media/
    └── images/

構築順序：

1. variables.css — 最初にトークンを定義
2. favicon.svg — ブランドカラーを使ったシンプルな SVG
3. styles.css — すべての BEM コンポーネント
4. mobile-nav.css — レスポンシブナビゲーション
5. JS ファイル — assets/ のテンプレートから作成
6. index.html — 最初にホームページを作成
7. 内部ページ — 会社概要、サービス、お問い合わせ
8. モバイルで確認 — 375px で検証

BEM の命名規則

Block-Element-Modifier の命名を使用します。例外はありません。

/* Block */
.hero { }
.card { }
.nav { }

/* Element (child of block) */
.hero__title { }
.hero__subtitle { }
.hero__cta { }
.card__image { }
.card__content { }

/* Modifier (variation) */
.hero--split { }
.hero--minimal { }
.card--featured { }
.btn--primary { }
.btn--lg { }

ルール：

• ブロックは独立したコンポーネントです
• 要素は子要素で、__ でつなぎます
• モディファイアはバリエーションで、-- でつなぎます
• 1階層より深くネストしないでください。.hero__content__title は誤りです
• ブロックなしで要素を使用しないでください。.card__image は .card の内側でのみ使用します

CSS カスタムプロパティ

意味のあるトークンを使用します。色、間隔、タイポグラフィの値をハードコードしないでください。

トークンの完全なテンプレートについては、references/css-variables-template.md を参照してください。

/* Always this */
.card {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

/* Never this */
.card {
  background: #ffffff;
  color: #333333;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  padding: 24px;
}

ダークモード（任意）

ダークモードは任意です。依頼で指定されている場合のみ追加してください。多くのビジネスサイトは、ライトモードのみのほうが速く公開できます。

含める場合：

• 依頼で明示的に指定されている
• テクノロジー系／開発者向けのユーザー層（期待される）
• ポートフォリオ／クリエイティブ系サイト（美的な選択肢）

省略する場合：

• 建設業、ホスピタリティ、専門サービス
• シンプルさと迅速な公開を重視する場合

ダークモードを追加する場合

クラスベースの切り替えを使用し、CSS メディアクエリは使わないでください。

/* Light mode (default) */
:root {
  --background: #F9FAFB;
  --foreground: #0F172A;
  --card: #FFFFFF;
  --card-foreground: #1E293B;
}

/* Dark mode (via .dark class on html) */
.dark {
  --background: #0F172A;
  --foreground: #F1F5F9;
  --card: #1E293B;
  --card-foreground: #F1F5F9;
}

ルール：

• <html> に .dark クラスを付け、JavaScript で切り替えます
• @media (prefers-color-scheme: dark) は絶対に使用しないでください。システム設定の処理は JS が行います
• すべての背景トークンに対応する前景トークンが必要です
• ダークモードではブランドカラーを明るく、より鮮やかにします
• 背景は #0F172A から #1E293B の範囲にします（完全な黒は使いません）
• 背景上のすべてのテキストの組み合わせで、WCAG AA（4.5:1）に準拠する必要があります

3状態切り替えの実装には assets/theme-toggle.js を使用してください。

レスポンシブデザイン

モバイルファーストで設計します。375px 向けにデザインし、そこから大きい画面に対応させます。

ブレークポイント

/* Base: 375px (mobile) — no media query needed */
@media (min-width: 640px) { /* sm — large phone */ }
@media (min-width: 768px) { /* md — tablet */ }
@media (min-width: 1024px) { /* lg — small desktop */ }
@media (min-width: 1440px) { /* xl — standard desktop */ }

モバイルでの優先事項

1. 電話番号をスクロールせずに表示し、タップできるようにする
2. 主要な CTA をスクロールせずに表示する
3. ハンバーガーメニューでナビゲーションを操作できる
4. タッチターゲットは最小 44x44px
5. 横スクロールを絶対に発生させない
6. 画像を適切に拡大縮小する（はみ出しなし）

ワイド画面の制約

.prose { max-width: 65ch; }
.hero__content { max-width: min(640px, 45vw); }
.container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.section { padding: clamp(3rem, 6vw, 6rem) 0; }

ハンバーガーメニューの実装には assets/mobile-nav.js を使用してください。

タイポグラフィのルール

1. サイズに大きなコントラストを付ける。 見出しは本文の3～4倍のサイズにします。ヒーロータイトルには clamp(2.5rem, 6vw, 5rem) を使用します。
2. ウェイトに変化を付ける。 300 と 800 のウェイトを組み合わせます。ウェイトが一律だと退屈になります。
3. ページごとに見せ場は1つ。 大きな単語を1つ、印象的な見出しを1つ、引用文を1つ。3つではありません。
4. 本文は左揃えにする。 中央揃えはヒーローと短い文言のみにします。段落は中央揃えにしないでください。
5. 大文字表記には字間を設定する。 最低でも letter-spacing: 0.05em を指定します。

色の使い方

80/20 の法則：

• 80% はニュートラルな色調（背景、テキスト、カード）
• 15% はセカンダリ／控えめなブランドカラー
• 5% はプライマリブランドカラー（CTA、ビューポートごとにアクセント1つ）

すべての見出し、境界線、アイコンにプライマリカラーを使うと、何も目立たなくなります。

間隔のシステム

パディングを一律にするのではなく、セクションごとに余白を変えます。

/* Tight section (service list, FAQ) */
.section--compact { padding: clamp(2rem, 4vw, 4rem) 0; }

/* Standard section */
.section { padding: clamp(3rem, 6vw, 6rem) 0; }

/* Breathing room (editorial break, testimonial) */
.section--spacious { padding: clamp(4rem, 8vw, 10rem) 0; }

シャドウのシステム

要素	シャドウ
通常時のカード	--shadow-sm
ホバー時のカード	--shadow-md
ドロップダウン	--shadow-lg
モーダル	--shadow-xl

すべてにシャドウが必要なわけではありません。控えめに使用してください。

アイコン

インライン SVG で Lucide アイコンを使用します。

• サイズ：インラインでは 24px、フィーチャーブロックでは 32～48px
• 線の太さ：1.5 または 2（全体で統一）
• 色：currentColor（テキストの色を継承）
• 各アイコンは具体的な内容を伝えるものにします

アクセシビリティ

妥協できない要件：

• セマンティック HTML：<header>、<nav>、<main>、<section>、<footer>
• 代替テキスト：コンテンツ画像には意味のあるテキストを設定し、装飾画像は空にします
• コントラスト：最低 4.5:1（7:1 を推奨）
• フォーカススタイル：すべての操作可能な要素で視認できるようにします
• スキップリンク：最初にフォーカス可能な要素にします
• フォームラベル：入力欄と関連付けます
• ARIA：切り替え要素には aria-expanded を、必要な箇所には aria-label を設定します

パフォーマンス

• ファーストビューより下の画像に loading="lazy" を設定します
• ヒーロー画像に loading="eager" を設定します
• head に <link rel="preconnect" href="https://fonts.googleapis.com"> を設定します
• CSS の合計サイズを 50KB 未満に保ちます
• JavaScript フレームワークは使わず、バニラ JS のみを使用します

AI 生成らしさを避けるパターン

次のパターンは「AI が生成した」と感じさせるため、避けてください。

• ヒーロー → 信頼性を示すバー → 3 枚のカード → 機能 → 統計 → CTA → フッター（定型構成）
• すべてのセクションで同じ余白を使う
• すべてのカードが同じサイズで、整然とした 3 列グリッドになっている
• すべてを中央揃えにする
• すべてのセクションを「見出し＋サブ見出し＋コンテンツ」の同じ流れにする
• 目的のない装飾要素
• すべての CTA に「詳しく見る」を使う
• タイポグラフィに個性のない Inter／Arial／システムフォント

品質チェックリスト

完了とする前に確認してください。

• 方向性が明確 — 美的な特徴をひと言で説明できる
• タイポグラフィに主張がある — Inter／システムフォントではない
• 色使いが控えめ — プライマリカラーを必要な箇所にだけ使っている
• 隣り合うセクションの見た目が同じではない
• CTA が具体的 — 「詳しく見る」を使っていない
• モバイルで問題なく動作する — 375px でテスト済み
• ダークモードが有効な場合に問題なく動作する — すべてのセクションを確認済み
• 架空の画像を使っていない — 実在するファイルパスのみを使用している
• デザイナーが自分の作品だと胸を張って言えるか