web-design-patterns

Web デザインパターン

AI が生成したようではなく、人がデザインしたと感じられる Web サイトのセクションを設計するための、原則に基づいたパターンです。各パターンでは、単にコピーするテンプレートではなく、「なぜ」と「いつ」を学びます。

作成するもの

ビジネスの状況に合い、「AI の骨組み」のような見た目を避けた、よく設計された Web サイトのセクションです。ヒーロー、カードレイアウト、CTA、信頼の証、推薦文などが含まれます。

どのリファレンスを読むか

作成するもの...	読むリファレンス
ホームページのヒーロー、ページヘッダー、ランディングページ	references/hero-patterns.md
サービスカード、チーム一覧、料金プラン、ポートフォリオ	references/card-patterns.md
コンバージョンセクション、ボタン、バナー CTA	references/cta-patterns.md
信頼性：バッジ、ライセンス、レビュー、保証	references/trust-signals.md
顧客レビュー、ソーシャルプルーフ、引用セクション	references/testimonial-patterns.md

必要に応じて読み込んでください。すべてのプロジェクトで5つすべてを読む必要はありません。現在のセクションに関連するものを読んでください。

横断的な原則

これらはすべてのパターンに当てはまります。リファレンスファイルを読む前に、これらを理解しておいてください。

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

テンプレート生成のデザインを感じさせる「AI の骨組み」：

1. お決まりの流れ：ヒーロー → 信頼バー → 同一デザインのカード3枚 → 特徴 → 統計 → CTA → フッター
2. 民主的なデザイン：すべての要素が同じ視覚的な強さで、階層がない
3. 完璧な対称性：すべてが中央に配置され、完璧に整列し、意図的な非対称性がない
4. 同一パターンの繰り返し：すべてのカードが同じサイズ、構造、パディング、影
5. ありきたりなコピー：すべての CTA が「詳しく見る」、すべての見出しが「信頼できる高品質なサービス」
6. 目的のない装飾：浮遊する図形、ランダムなグラデーション、抽象的なブロブ

デザインを人間らしく感じさせる要素

1. ひとつの要素が明確に際立つ — 民主性ではなく、階層性
2. 非対称性に意図がある — すべてを中央に配置したり、均衡させたりしない
3. 具体的で、意見のはっきりしたコピー — 「詳しく見る」ではなく「屋根の無料点検を予約する」
4. 視覚的な強さが視線を導く — どこを最初に、次に、最後に見るかがわかる
5. 抑制する — あらゆるテクニックを使うのではなく、目的にかなうものだけを使う
6. 状況に合っている — 緊急対応の配管工と高級ホテルでは、見た目が異なる

倫理的なルール

すべてのパターンで必ず守ること：

実際のビジネスデータがないリード獲得サイトでは、以下を絶対に捏造しないでください。

• 星評価やレビュー件数
• 具体的な創業年数
• ライセンス番号や ABN 番号
• 個人名やチームメンバーの名前
• 正確な顧客数

リード獲得サイトで使える安全な代替表現：

• 「経験豊富なチーム」（「25年の経験」ではなく）
• 「高評価」（「4.9つ星（127件のレビュー）」ではなく）
• 「ライセンス取得済み・保険加入済み」（「QBCC ライセンス番号 #1234567」ではなく）

ビジネスの状況がすべてを左右する

同じ種類のセクションでも、ビジネスによって見た目はまったく異なります。

ビジネスの種類	デザインの印象
緊急サービス	直接的、迅速、電話を最優先
高級サービス・ホスピタリティ	ゆとりがあり、洗練され、雰囲気を重視
職人・地域密着型サービス	信頼できる、有能、誠実
専門職・企業向け	自信に満ち、すっきりとして、構成が整っている
クリエイティブ・代理店	個性的、大胆、独自の雰囲気がある

パターンの簡単な例

ヒーローのアプローチ

画像主体（印象的な写真を利用できる場合）：

• 画像に表現を委ね、テキストは最小限にする
• 明確な注目点をひとつ設ける
• 画像の構図に合わせてテキストを配置し、上からただ載せるだけにしない

タイポグラフィ主体（印象的な画像がない場合）：

• フォントの選択、サイズ、太さ、間隔そのものがデザインになる
• 余白を積極的なデザイン要素として十分に活用する
• ストック写真の代わりに、色面や控えめなテクスチャを使う

分割・バランス型（力強いコピーと画像の両方がある場合）：

• 片側をわずかに優位にする — 完全な50対50では決断力に欠ける印象になる
• モバイルでは順序が重要 — 縦に並べたとき、どの要素を先に表示するか

カードレイアウトの決定

1. まず項目数を数える — グリッドの計算を誤ると、孤立したカードが生まれます
2. 階層を確認する — 重要度の高い項目はありますか？ その項目を2倍のサイズで目立たせます
3. コンテンツの密度 — 画像が多い場合は列数を減らし、テキストが多い場合は列数を増やします
4. 孤立カードへの対処 — 1枚だけのカードが行に残らないようにします

CTAの階層

ビジネスの状況に合わせてCTAの緊急度を調整します。

• 緊急サービス：電話番号そのものがCTAです。大きく、コントラストを高くし、タップできるようにします。
• 専門サービス：まずはハードルの低いアクションを促します。「相談を予約する」
• クリエイティブ／エージェンシー：関係構築を重視します。「実績を見る」

鉄則：まず価値を示してから、行動を促します。CTAは価値を伝えた後に配置します。

信頼シグナルの階層

Tier	種類	例
1（最も強い）	具体的で検証可能	「QBCC License #1234567」
2	第三者による評価	「4.8つ星（Google レビュー127件）」＋リンク
3	自己申告	「適切なライセンスを取得し、保険にも加入済み」
4（最も弱い）	一般的な保証	「品質を保証します」

Tier 1のシグナル1つは、Tier 4のシグナル3つを上回ります。信頼シグナルはページ全体に配置し、1つのセクションだけにまとめないでください。

お客様の声へのアプローチ

状況	アプローチ
力強いお客様の声が1件ある	引用を1つだけ大きく目立たせます
良質なお客様の声が3～6件ある	バリエーションを持たせたグリッドにし、1件を目立たせます
実際のお客様の声がない	サービスの約束、保証、プロセスの説明を使います

カルーセルは使わないでください — ユーザーが見られるのは5件中1件で、操作ボタンをクリックするユーザーは1%未満です。すべてを表示するか、最良の3件を選んでください。

リファレンスファイル一覧

各リファレンスは、原則、アンチパターン、実装パターン、ビジネス固有のガイダンスを網羅した詳細な解説（300～470行）です。

ファイル	行数	内容
hero-patterns.md	~470	アプローチの選択、制約に基づく創造性、オーバーレイの手法、レスポンシブ時の動作、ページ固有のヒーロー
card-patterns.md	~550	レイアウト決定のフレームワーク、単調さを避ける方法、グリッドの計算、孤立カードへの対処、CSSパターン、ビジネスの状況
cta-patterns.md	~420	アクションの階層、配置戦略、コピーの原則、ビジュアルデザイン、モバイルでの考慮事項、状況に応じたCTA
trust-signals.md	~490	信頼の心理学、信頼の階層、状況に応じた信頼、リード獲得か顧客獲得か、配置戦略、アンチパターン
testimonial-patterns.md	~350	社会的証明の心理学、リード獲得における倫理、デザインアプローチの選択、コンテンツの原則、配置、代替案