2026.04.08
こんにちは。アントアントのメルマガ担当です。
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
WEBサイトの印象は「配色」でほぼ決まります。しかし実際には「何色をどう組み合わせればいいのか分からない」と悩む方が非常に多いポイントです。
実は「色」の選択は、プロでも非常に頭を悩ませるポイントでもあります。
ant2 CMSでWEBサイトを制作する場合、「サイトカラー変更」機能の設定項目に複数の色があり、
は、どの色をどう決めればよいか迷ってしまう方も多いのではないでしょうか。
そこで今回は、「バランスのよいカラーパレットを簡単に作る方法」をAIの活用方法も含めて分かりやすく解説いたします。
WEBサイトを訪れた人が、その会社を「信頼できる」と感じるか「なんだか不安だ」と感じるか。
その判断は、わずか数秒のうちに行われると言われています。
配色がバラバラだと、せっかくの良いコンテンツも「素人っぽさ」によって打ち消されてしまいます。
逆に、ルールに基づいた配色が設定されているサイトは、それだけで「清潔感」や「プロフェッショナリズム」を感じさせ、成約率やお問い合わせ率の向上にもつながります。
ant2 CMSの「サイトカラー変更」機能には、以下の9色の設定項目がありますが、「多すぎて選べない！」という方もおられるのではないでしょうか。
そんな時にはプロがお勧めする「色の決め方」を参考にしてください。
すでに会社のロゴやテーマカラー（例：誠実なネイビー、情熱的な赤など）が決まっている場合は、それを「メインカラー（濃い）」に設定してその色を軸に「同系色」でまとめていくのが最も失敗の少ない方法です。
メインカラーと同じ色味の色を薄くして少しグレーを混ぜたものを「メインカラー（ライト）」に、逆に明度を落として濃くしたものを「サブカラー」に設定して濃淡で色を決めるとサイト全体に統一感が生まれます。
また、メインカラーが鮮やかな青や緑、赤などの色の場合、カチッとした印象のコーポレートサイトを作成したい場合は「メインカラー（ライト）」には色味を足さずに薄いグレーに、「サブカラー」を黒に近い濃いグレーにすると引き締まった印象になります。
すべて同系色だとボヤけてしまうので、「アクセントカラー」だけは、「メインカラー（ダーク）」の反対色（補色）を選ぶのがポイントです。
青がメインなら、黄色やオレンジが映えるため「アクセントカラー」として用いられることが多いです。
ただし、どうしても派手になってしまいますので暖色系は使用したくない場合は同じ程度の明るさの同系色（「メインカラー（ダーク）」が青なら緑）を選ぶと良いでしょう。
| bodyの背景色 | bodyの背景色は基本は白、もしくは薄いグレーやベージュなどがテキストが読みやすくメインカラーなども映えるのでお勧めです。 逆に濃い黒などにしたい場合はメインカラーも明るめの色にするなど調整をしてください。 |
|---|---|
| bodyのテキストの色 | テキストカラーは黒（#000000）よりも少しグレーがかった色の方がモニターを通した場合に目に負担をかけず読みやすいとされています。 WEBデザインでよく使用されるのは#333333ですがもう少しハッキリした色が良い場合は#222222、逆に背景がベージュなどで文字にも温かみを出したい場合などは少しオレンジ系を混ぜた色#2F2820などを使用してみても良いでしょう。 |
| 基本のリンクテキストの色 | リンクテキストの色は背景色と同化せず、なおかつテキストの色とは異なる色を設定する方が見る人にもわかりやすくて良いでしょう。 お勧めは配色の統一感を出すために「サブカラー」と同じ色にするなど既に配色が決まっている色と同じ色にすることです。 サブカラーが少し淡くてテキストにすると読みにくい場合は少し明度と彩度を落として暗めにすると文字が読みやすくなります（同じ色でも、背景のような大きな面積で見る時と、細いテキストで見る時では、テキストの方が薄く感じられる性質（面積効果）があるため、テキストで使用すると読みづらい場合は少し濃い目の色にするのがポイントです）。 |
| 基本の線の色 | 迷ったら#CCCCCCなどの淡いグレー、少しモダンな印象にしたい場合はメインカラーをわかるかわからないかくらいの少しだけ混ぜたカラーにするのがお勧めです。 濃すぎると表内のテキストよりも罫線が目立ちすぎてしまいますので、目立たず薄すぎない色になるように調整してください。 |
| エラーメッセージの色 | 基本的にはエラーメッセージは赤系がベストです。 真っ赤ではなく、少し明度を落として#BF0202くらいの暗めの赤にすると目に優しく読みやすい色味になります。 後は背景色に合わせて読みやすい色味になるように調整してください。 |
上記の流れで9色の基本設定の色を決めた場合の配色パレットになります。
「そもそも何色が自社に合うのかわからない」という方は、最初からAIに「色のコンセプト」を丸投げしてしまうのが近道です。
AIを活用することで、配色の失敗を減らす、作業時間を短縮する、デザインの統一感を出すことができるといったメリットがあります。
AIに配色を決めてもらうには作成するWEBサイトについてまずは下記を洗い出します。
上記が決まれば下記のようなプロンプトをAIに投げます。
［ ］の部分は作成したい内容に合わせて変更してください。
【プロンプト例】
私たちは、［20代～30代の若い夫婦・家族］をターゲットにした、［優しくて安心感のある家づくりを提案する工務店］です。
［シンプルでモダンで爽やかさと安心感］のあるWEBサイトを作成したいと思います。
そのWEBサイトのカラー設定に必要な以下の9色の配色パレットを、カラーコード（#ffffff形式）で作成してください。
・メインカラー（ダーク）
・メインカラー（ライト）
・サブカラー
・アクセントカラー
・bodyの背景色
・bodyのテキストの色
・基本のリンクテキストの色
・基本の線の色
・エラーメッセージの色
なお、メインカラー(ダーク)、サブカラー、アクセントカラーはこの色を背景にしても白いテキストが読めるような色合いに、メインカラー(ライト)は背景色にしてもbodyのテキストの色が読めるような薄い色合いにしてください。
AIで生成されたカラーコード
| 項目 | カラーコード | 色の役割・解説 |
|---|---|---|
| メインカラー（ダーク） | #546E7A | ブルーグレー。誠実さと安心感、モダンな洗練さを表現。見出しや目立たせたい背景に。 |
| メインカラー（ライト） | #E1E8ED | ライトスカイグレー。メインカラーの淡いトーン。セクションの背景などで可読性を保ちつつ変化を。 |
| サブカラー | #A3B18A | セージグリーン。優しさと自然、安らぎを演出。サブボタンや装飾的な背景に。 |
| アクセントカラー | #8D6E63 | ウォームブラウン。安心感と土、木の温もりを表現。コンバージョン（お問い合わせ）ボタンに最適。 |
| bodyの背景色 | #F9F9F7 | オフホワイト。真っ白よりも目に優しく、紙や塗り壁のようなナチュラルな質感を与えます。 |
| bodyのテキストの色 | #333333 | チャコールブラック。コントラストを抑えつつ、読みやすさを確保した深いグレー。 |
| 基本のリンク色 | #455A64 | スレートブルー。メインカラーに近い色味で統一感を出し、リンクであることを示します。 |
| 基本の線の色 | #D1D1D1 | ライトグレー。セクションの区切りや枠線など、主張しすぎず空間を整理します。 |
| エラーメッセージの色 | #C62828 | ソフトレッド。警告を伝えつつも、サイトの雰囲気を壊さない少し落ち着いた赤色。 |
AIに提案された色を確かめたい時は「Coolors」というツールを使用すると便利です。
Coolorsのサイトにアクセスして「Start the Generator」というボタンをクリックします。
5色のカラーパレットが表示されますので、画面の右端にマウスを移動させ、「+」ボタンを4回押して9色にし、各カラーのカラーコードをAIから提案したカラーコードに変更します。
特定の箇所だけ色を変更したい場合はカラーコードを選択することで色を変更することができます。
また、変更したくない色はカラーコードの上のカギアイコンをクリックしてロックをかけた状態で「spaceキー」を押すと、ロックをしていない箇所がお勧めのカラーに自動で変更されます。
※「spaceキー」での色変更は色数が多い場合は有料プランに変更する必要がありますので、カラーの上の×アイコンをクリックして5色に減らしてから行ってください。
作成したカラーをWEBサイトに適用した例
違うカラーパレットをWEBサイトに適用した例
メインカラーが淡い色（パステルカラーやペールトーン）の場合、WEBサイト全体の印象は「優しく」「柔らかく」「洗練された」ものになります。
しかし、サイトカラー設定の基本設定にある9色の役割を正しく理解して使い分けないと、全体がぼやけてメリハリのない、読みづらいサイトになってしまう危険性があります。
その場合はサブカラーを同系色、同一トーンの明度が濃い色にし、アクセントカラーに同じトーン、明度の補色をもってくるか、高級感を出すなら「落ち着いたゴールド」をアクセントに1色入れるのがお勧めです。
Coolors以外にも、直感的に色を選べる便利なツールがあります。
これらのツールで「いいな」と思った配色を見つけたら、そのコード（#から始まる6桁の英数字）をカラー設定の各設定項目に貼り付けるだけで、WEBサイトは見違えるほどオシャレになるでしょう。
Adobe Color
Color Hunt
ColorMagic
美しいWEBサイトを構築するためには、単に好きな色を並べるのではなく、戦略的なアプローチが不可欠です。
もし、すでに会社のロゴなどでメインカラーが決まっているのなら、無理に新しい色を増やす必要はなく、そのメインカラーの「濃淡」を使い分けることで、洗練されたデザインにすることができます。
同じ色味の中で明るさを変えた色をサブカラーに据えることで、WEBサイト全体に深い統一感が生まれ、プロが作り込んだような安定感を演出できます。
また、それでも「どの色が相性がいいのか確信が持てない」と立ち止まってしまったら、AIを専属の「カラーコーディネーター」として活用してみましょう。
具体的なブランドイメージを添えたプロンプトを一つ送るだけで、ant2 CMSの設定に必要な9色すべてのカラーコードを提案してくれます。
最後に忘れてはならないのが、ant2 CMSにある9色の設定項目それぞれの「役割」を明確に意識することです。
背景色や文字色は「情報の読みやすさ（可読性）」を最優先し、アクセントカラーは「クリックを促す目立ちやすさ」に特化させる、このメリハリこそが、ユーザーを迷わせない「使いやすいサイト」を作るための最大の秘訣となります。
WEBサイトの配色に迷った場合はぜひ一度、今回の方法を活用した配色パレット作成を試してください。
配色に迷う時間が減り、WEBサイト制作のスピードも大きく向上すると思います。
