We.Incテンプレートデザインから取得したhexコード付き32種類のウェブサイト配色スキーム、コンバージョンに効く配色の作り方（アクション専用のアクセントを1つ持つ落ち着いたベースパレット）、業種別の例、アクセシビリティ確認を解説します。
どこでも勝つ単一の色はありません。最良のボタンの色とは、ページと強いコントラストを持ち、他の何にも使われていないため、視線が真っすぐそこに向かう色です。
よくあるアプローチは、ニュートラルなベース（白またはオフホワイトと、濃いテキストカラー）、一つのメインブランドカラー、CTA用の一つのアクセントカラー、そして成功・エラーメッセージ用の意味を持つ色（セマンティックカラー）です。それ以上になると、たいてい視覚的な階層構造が弱くなります。
色にまつわる連想は存在しますが、文化、業界、文脈によって異なり、よく言われる主張の多くは誇張されています。コンバージョンに確実に影響するのは、コントラスト、読みやすさ、そして求めるアクションが視覚的に明確かどうかです。
産業系の買い手は、明確さと信頼を重視します。ネイビー、チャコール、スチールグレーに、セーフティオレンジ、イエロー、鮮やかなブルーといった一つの強いアクセントを組み合わせるのが、このカテゴリーに向いています。仕様書、見積もりボタン、電話番号にはアクセントカラーを使い、見つけやすくしましょう。
WebAIMのようなコントラストチェッカーを使いましょう。WCAG 2.2のレベルAAでは、通常のテキストで少なくとも4.5:1のコントラスト、大きなテキストやボタンの枠線、フォームフィールドといった主要なインターフェース要素で3:1のコントラストが求められます。
コンバージョンに効く単一の色は存在しません。重要なのは、ボタンがページの中でどれだけ際立つかです。コンバージョンに効く配色とは、落ち着いた一貫性のあるベースと、人に取ってほしいアクションだけのために取っておかれる、一つの高コントラストなアクセントカラーを持つものです。
だから、「何色が良いか」ではなく、「自分の最も重要なボタンが、ページ上の他の何とも似ていないか」を問いましょう。このガイドでは、その考え方をもとに配色を組み立てる方法を紹介します。
これらのパレットは、We.Inc独自のテンプレートデザインのソースから取得されたものです（各デザインのプレビューで最も使用頻度の高い4色。プレビューフレームの単純なグレーを除く）。これらはテンプレートデザインであり、顧客サイトではありません。コンバージョン率についての主張は一切しません。hexコードをhexカラーピッカーにコピーすると、その色を確認してRGB/HSL値を取得でき、テキストと背景のペアはすべて使用前にカラーコントラストチェッカーで確認してください。
| We.Incテンプレートデザイン | スタイル | カラー（hex） | スキーム |
|---|---|---|---|
| Atlas Builders | 建設・工事 | #101d2c #0b1521 #f2a614 #d18f0a | ディープネイビーベース、アンバーアクション |
| Summit Trades | 工事 | #0e2436 #e4671e #16222e #f6eeec | セーフティオレンジのネイビー |
| Ironpeak Roofing | 屋根 | #e4671e #0e2436 #17415f #16222e | オレンジ主体、ネイビー構造 |
| Ridgewater Plumbing | 配管 | #b08544 #d8401f #f2ede3 #c9a063 | 暖かみのあるクリームにブラスとレッド |
| Sunward Solar | 太陽光 | #0b1f3a #f5a524 #d98a0b #fff6e6 | ミッドナイトブルーとサンゴールド |
| Hookline Towing | レッカー | #0e0e0e #ffc400 #f4f1ea #161616 | 黒と高視認性イエロー |
| Redline Auto Group | 自動車ディーラー | #e3262e #0e0f11 #eeeeee #17191c | ニアブラックにレーシングレッド |
| Maple Street Motors | 自動車修理 | #1f4d3a #1b1b1b #f2b134 #e6efe9 | マスタード入りのフォレストグリーン |
| Freshpile Carpet Cleaning | クリーニング | #ffd23f #0d1b52 #1d3fd8 #dbe2ff | ロイヤルネイビーの鮮やかなイエロー |
| Tideline Pressure Washing | 外壁クリーニング | #0b1b2b #3fd0c9 #f3f6f5 #020617 | アクア入りダークネイビー |
| Mowline Lawn Care | 芝刈り | #eef3e6 #c6f24e #0f1410 #1a2a17 | ペールグリーンベース、ライムアクセント |
| Fairway Lawn Co. | 造園 | #f6f1e7 #1d2b1f #e8c872 #2f5d3a | クリーム、ディープグリーン、ソフトゴールド |
| Brightside Dental | 歯科 | #10312e #3f605c #0e5f57 #0a4841 | 落ち着いたティールグリーン |
| Meadowpaw Veterinary | 動物病院 | #2f6e6a #e9f0ef #c9d7d4 #f7f9f8 | ペールミントのミュートティール |
| Vibrant Wellness | ウェルネスクリニック | #25382c #eef2e6 #7c9a7e #3f6b4a | セージとフォレスト |
| Kinfolk Home Care | ホームケア | #0f3d2e #f4c542 #fffdf6 #0a2e22 | 暖かみのあるイエロー入りパイングリーン |
| Lumora | ヘルスケア | #c8a97e #182c41 #0b1220 #0e1a26 | サンドゴールドのミッドナイトネイビー |
| Sterling & Vance LLP | 法律事務所 | #8a93a2 #b08a4f #0b0e14 #f6eeec | スレート、ブロンズ、インク |
| Harborview Wealth Partners | ファイナンシャルアドバイス | #102a43 #b08d57 #d9bf8f #faf8f4 | アイボリーのネイビーとゴールド |
| Harborline Insurance Agency | 保険 | #0f2742 #5fd3c9 #17a398 #0b1e33 | ティール入りネイビー |
| Larkfield Partners | コンサルティング | #1f4d3f #f4f1ea #14181c #4a5560 | ペーパーのボトルグリーン |
| Keystone Realty | 不動産 | #f6eeec #7a2e2a #59606b #e9f0ef | オックスブラッドのブラッシュベース |
| Lucia Trattoria | レストラン | #e9c9a8 #f7f1e6 #efe6d4 #23301f | オリーブブラックの暖かみのある砂色 |
| Ember & Roast | カフェ・レストラン | #ede6dc #c9642f #14100d #f6eeec | オート、バーントオレンジ、エスプレッソ |
| Kilnhouse Coffee | コーヒーショップ | #2b1d16 #c65d3b #f3ebe0 #fff8ef | ロースターブラウンとテラコッタ |
| Parcel No. 9 Wines | ワイナリー | #3a0a15 #fbe9e3 #b8324b #f4a7a0 | ローズのクラレット |
| Petalry Florist | 花屋 | #3e1f2b #b4546c #fbf5f2 #f3e3dd | プラムとダスティピンク |
| Hollow Oak Farm Shop | ファームショップ | #24301f #f6f1e4 #5e7f3a #e3a33b | モス、クリーム、ハニー |
| Suds & Scruff | ペットグルーミング | #3b1740 #ffd84d #ff8fab #fff8e7 | オーバージーン、イエロー、ピンク |
| Datacore SaaS Hero | SaaS | #7b39fc #a484d7 #6a2ce0 #f87b52 | バイオレットとコーラル |
| Mast Security | セキュリティ | #1e2628 #34e0a1 #e7ede9 #8d9a97 | ミント入りグラファイト |
| Afterglow Sound | イベント・音楽 | #efeaff #f472b6 #ec4899 #8b5cf6 | ラベンダー、ピンク、パープル |
これらに共通するパターン：多くが暗いまたは淡いベースと、1つの彩度の高いアクセント（アンバー、オレンジ、イエロー、ライム、コーラル）を組み合わせています。これは以下で説明する「静かなベース、1つのアクションカラー」と同じ構造です。
色彩心理学の記事は、しばしば「青は信頼」「赤は緊急性」「緑は成長」を意味すると主張します。一般的な連想にはある程度の真実がありますが、文化、業界、文脈に大きく左右されます。赤は、ある場面では警告ですが、別の場面ではお祝いです。緑は「進め」「エコ」「お金」を意味することがあります。
よく裏付けられているのは、孤立効果、別名フォン・レストルフ効果です。周囲と異なる要素は、より気づかれやすく、記憶されやすいというものです。青と白のページの中で唯一オレンジ色のボタンは気づかれます。オレンジだらけのページの中の同じオレンジは気づかれません。
ここから、業界を問わず通用する2つのルールが導かれます。
インテリアデザイナーは60-30-10の配分を使いますが、これはウェブサイトにもよく当てはまります。
| 割合 | 役割 | 典型的な選択 |
|---|---|---|
| 約60% | 背景とベース | 白、オフホワイト、ごく薄いグレー、またはダークテーマなら濃い暗色 |
| 約30% | ブランドと構造 | ヘッダー、ナビ、セクション背景のメインブランドカラー |
| 約10% | アクセント・アクション | ボタン、主要なリンク、クリックしてほしい一つのもの |
濃いテキストカラー（純粋な黒よりも、黒に近い色や濃いグレーが一般的です）と、成功には緑、エラーには赤、警告にはアンバーといった意味を持つ色（セマンティックカラー）を加えましょう。「今すぐ購入」ボタンがエラーと混同されないよう、これらのセマンティックカラーはメインボタンから離しておきましょう。
ロゴがあるなら、そのメインカラーをプライマリカラーにしましょう。なければ、自分のカテゴリーに合い（下の表を参照）、長く付き合っても気に入る色を選びましょう。
カラーホイールを見てみましょう。補色（互いに反対側にある色）が、最も強いポップ感を生み出します。青とオレンジ、紫と黄色、ティールとコーラルなどです。ブランドカラーが青なら、オレンジや暖かみのある黄色のアクセントの方が、別の青系の色よりもはるかに目立ちます。
背景、カード用のサーフェスカラー、ボーダーのグレー、テキストカラーを選びましょう。これらが作業の大部分を担うため、控えめであるべきです。
すべてのテキストとボタンの組み合わせを、コントラストチェッカー（WebAIMのものは無料）にかけましょう。WCAG 2.2のレベルAAでは、次が求められます。
白地に低コントラストのグレーテキストは、ウェブで最もよくある可読性の問題の一つです。オファーが読みづらければ、ボタンの色はほとんど関係なくなります。
屋外でのスマートフォン、安価なノートパソコンの画面、そしてサイトがダークモードに対応しているならダークモードでも、パレットを確認しましょう。デザイナーのモニターでは洗練されて見える色も、他の環境では色褪せて見えることがあります。
これらはルールではなく、妥当な出発点です。それぞれ、控えめなベースと、コントラストのある一つのアクセントを使っています。
| 業種 | ベースとプライマリ | アクションのアクセント | うまくいく理由 |
|---|---|---|---|
| 製造業・工業 | ネイビー、チャコール、スチールグレー | セーフティオレンジまたはイエロー | 真面目で頼れる印象で、「見積もり依頼」が目立つ |
| 医療・歯科 | 白、ソフトブルーまたはティール | 暖かみのあるコーラルまたはグリーン | 清潔で落ち着いた印象で、予約ボタンが際立つ |
| 法律・金融 | ディープネイビーまたはフォレストグリーン、クリーム | ゴールドまたは鮮やかなブルー | 伝統的な信頼の合図と、明確な連絡アクション |
| レストラン・飲食 | 暖かみのあるニュートラル、ディープレッドまたはオリーブ | 鮮やかなイエローまたはオレンジ | 食欲をそそり、「注文」や「予約」が明確 |
| SaaS・テック | 白または黒に近い色、インディゴまたはブルー | 鮮やかなグリーン、オレンジ、またはピンク | シャープで、高コントラストの「無料で始める」 |
| 美容・ウェルネス | ブラッシュ、セージ、クリーム | ディープパープルまたは黒 | 柔らかなブランドと、自信を感じさせる予約ボタン |
| 住宅サービス（配管、空調、屋根） | 白、ダークブルー | 赤またはオレンジ | 緊急時に電話したくなる通話ボタン |
| Eコマース・ファッション | ほぼ白と黒 | 1つのブランドアクセント | 商品写真に色を語らせる |
製造業に特有の点として、買い手はしばしば製品ページや対応能力のページにたどり着き、仕様書や見積もりを求めています。「見積もり依頼」「仕様書をダウンロード」、そして電話番号を、そのページで唯一アクセントカラーを使う要素にしましょう。
緑のロゴ、緑の見出し、緑のアイコン、緑のヒーロー背景、そして緑の「無料見積もりを取得」ボタンを持つ造園会社のサイトを想像してください。すべてがブランドに沿っているのに、ボタンが埋もれてしまいます。
修正方法：
ブランドは何も変わっていませんが、アクションが今や画面上で最も目立つものになりました。
十分なトラフィックがあれば、ボタンやアクセントカラーでA/Bテストを実施しましょう。ただし、一度に一つだけ変更し、意味のある結果が出るまで十分な期間走らせてください。トラフィックの少ないサイトでは、信頼できる結果に到達できないことが多いので、よりシンプルな確認方法が有効です。
色は、ページのコンバージョンを左右する要素の一つに過ぎません。残りの部分については、コンバージョンするランディングページの例の解説をご覧ください。We.Incでは、「ネイビーとグレーに、オレンジの見積もりボタン」のように、欲しい見た目をチャットで説明したり、テンプレートを閲覧したりでき、その後ビジュアルまたはコードで色を微調整できます。
無料で始める · クレジットカード不要