コンバージョン率の高いランディングページのためのカラー心理学

色は、訪問者がコピーを読む前に最初に処理するものです。色は、業界、信頼性、トーンをミリ秒単位で伝えます。また、テキストが読みやすいかどうかにも直接影響し、人々がページに留まるかどうかにも影響します。

この記事では、PAGEnzaのパレットシステムがどのように機能するか、そして色の選択に課す制約が、AIに無制限の自由を与えるよりも実際に優れた結果を生み出す理由を説明します。

AIに「きれいな色を選んで」と頼むことの問題点

LLMにウェブサイトの配色を選ぶように頼むと、16進コードが得られます。時にはそれらが一緒にうまく機能することもあります。時にはそうでないこともあります。モデルには、色が実際に機能するかどうか — テキストが読みやすいか、パレットが業界に適しているか、組み合わせが偶然の一致ではなく視覚的に一貫しているか — を評価する信頼できる方法がありません。

初期テストでこの問題を明確に確認しました。制約のない色の生成は、優れたものから完全に使い物にならないものまで、さまざまなパレットを生み出しました。一貫性がありませんでした。

解決策は、色の選択を完全にLLMの手から外し、特定のプロパティを保証するアルゴリズムシステムを構築することでした。

4色システム

すべてのPAGEnzaサイトは、正確に4つの名前付き色を使用します。

ink — プライマリテキストカラー。常に暗い（背景に対して高い輝度コントラスト）。見出し、本文、読み取りが必要なUI要素に使用されます。

bg1 — プライマリ背景。通常、パレットの中で最も明るい色。メインページ背景や明るいセクションに使用されます。

bg2 — セカンダリ背景。セクション間に視覚的な多様性を生み出します。bg1とは異なる色温度を持つ必要があります — bg1がウォームクリームの場合、bg2はクールグレーまたは青みがかった白になります。

accent — ブランドカラー。ボタン、リンク、ハイライト、装飾要素に使用されます。通常、パレットの中で最も彩度の高い色です。

この制約 — 任意の16進コードではなく、4つの名前付き役割 — がパレットシステムを機能させるものです。AIはどの色がどこに配置されるかを決定することはなく、事前に監査されたセットからどのパレットを選択するかだけを決定します。

パレットの構成方法

私たちは、それぞれがアーキタイプを中心に構築された20以上のパレットグループを維持しています。

• Bold: ハイコントラスト、彩度の高いアクセント — テック、SaaS、フィンテック
• Soft: 控えめな、彩度の低い — ウェルネス、コーチング、クリエイティブサービス
• Luxury: メタリックまたは宝石のようなアクセントを持つほぼ黒の背景 — プレミアムサービス、高級小売
• Earthy: テラコッタまたはセージのアクセントを持つウォームニュートラル — 食品、持続可能性、クラフト
• Dark: ダークモードファーストのパレット — 開発者、エージェンシー、ゲーム
• Neutral: 安全でプロフェッショナル — 法務、金融、ヘルスケア

各グループ内には、異なる色温度、彩度レベル、アクセントの色合いを持つ複数のパレットがあります。システムは、業界とアーキタイプに基づいてグループを選択し、次にグループ内の特定のパレットを選択します。

WCAGコントラスト：デザインを向上させる制約

WCAG AAは、通常のテキストが背景に対して少なくとも4.5:1のコントラスト比を持つことを要求します。大きなテキストには3:1が必要です。インタラクティブな要素には、隣接する色に対して3:1が必要です。

当社のシステムのすべてのパレットは、含まれる前にこれらの比率に対して検証されます。具体的には：

• inkは、bg1、bg2、およびテキストが表示されるすべてのサーフェスカラーに対して≥4.5:1のコントラストを達成する必要があります
• accentは、bg1およびbg2に対して≥3.0:1を達成する必要があります（ボタンの背景として使用する場合）
• 検証は、近似ではなく、実際の輝度計算 — ガンマ補正後のL = 0.2126R + 0.7152G + 0.0722B — を使用します

これにより、生成されたすべてのサイトはデフォルトで読みやすくなります。しかし、二次的な利点があります。高コントラストのデザインはより多くコンバージョンします。はっきりと見えるボタンは、背景に溶け込むボタンよりも多くのクリックを獲得します。アクセシビリティ要件は、コンバージョン要件であることが判明しました。

セクション間の色温度コントラスト

見落としがちな詳細：bg1とbg2は、コントラストのある色温度を持つ必要があります。両方の背景がウォームの場合、交互のセクションは単調に感じられます — ページは、個別のコンテンツ領域ではなく、1つの連続した塊のように見えます。

当社のシステム内のルール：bg1がウォームな色合い（オレンジ/黄色方向、またはクリームのようなウォームニュートラル）の場合、bg2はクール（青/グレー方向）でなければなりません。bg1がクールホワイトの場合、bg2はウォームなオフホワイトになる可能性があります。

これが、重い区切り線やドロップシャドウなしでも、セクションが区別される理由です — 背景の色温度のシフトだけで明確な視覚的な区切りが作成されます。

業界固有のカラーロジック

一部の色選択は、業界によって強くコード化されています。訪問者は、特定のカテゴリのウェブサイトに長年触れてきた経験から構築された期待を持っています。

ヘルスケアとウェルネス: 青と緑は信頼と落ち着きを示します。この文脈では、彩度の高い赤とオレンジは警告として読み取られます。

法律と金融: ダークネイビー、チャコール、保守的なグレー。明るいアクセントは許容されますが、控えめにする必要があります。遊び心のあるパレットは信頼性を損ないます。

食品とホスピタリティ: ウォームトーン — テラコッタ、アンバー、クリーム — は食欲をそそる連想を活性化します。クールで臨床的なパレットは不適切に感じられます。

テクノロジーとSaaS: 青は支配的ですが、より広い範囲があります。エレクトリックブルー、インディゴ、さらにはバイオレットは、テクノロジーをリードするものとして読み取られます。純粋な黒の背景は、開発者ツールに適しています。

ラグジュアリーとプレミアム: キーは抑制です。限られた色の範囲、プライマリカラーとしてのほぼ黒またはディープネイビー、ゴールドまたはプラチナのアクセント。高コントラスト、決して彩度が高すぎない。

デザイン指示書におけるアーキタイプ選択は、業界とビジネスタイプを適切なパレットグループにマッピングするため、ウェルネスコーチが「プロフェッショナル」と説明されていても、法律事務所と同じパレットになることはありません。

クライアントが変更できること

生成後、クライアントはGutenbergでサイトを編集できます。エディタのカラーピッカーには、4つのブランドカラーのみが表示され、それ以外は表示されません。これは意味します：

• セクションの背景をbg1、bg2、およびサーフェス間で変更できます
• ボタンとリンクの色をaccentとink間で変更できます
• パレットを壊す任意の5番目の色を導入することはできません

この制約は意図的です。クライアントがプロフェッショナルにデザインされたサイトを壊す最も一般的な方法は、フルスペクトルカラーホイールから色を選択することです。パレットを4つの名前付き色に制限することで、コードにアクセスせずにそれを不可能にします。