「STUDIOでLP作ってるけど、ボタンの色って何にすればいいの？」
「背景の色で悩む…白がいいの？ベージュとかでもいい？」
「色でCVR（成約率）が変わるって本当？」
こういう不安、めちゃくちゃ多いんですよね。
でも安心してください。
実は「色＝センス」ではなくて、ほとんどが“心理学”と“ルール”で説明できます。
さらにいうと、
STUDIOを使う初心者ほど「色の選び方」だけでLPが一気にレベルアップする。
・見やすい
・迷わない
・押したくなる
この3つをつくれるのが「色の心理学」です。
この記事では、私が実際に使っている
CVR（問い合わせ・購入）を上げる色の決め方 を、
初心者向けにめちゃ噛み砕いてお伝えします。
STUDIOで簡単に再現できる“具体的な色コード”も紹介します。
色選びで迷子になりやすい人は、この記事だけでかなり作業がラクになります。
なぜ色でCVRが変わるのか？（心理学の入口）
色は「感情のスイッチ」を押します。
人は色を見ると脳の中の“無意識のボタン”が押されて、
行動に影響が出ます。
たとえば、
- 赤：緊急、目立つ、強い
- 青：信頼、落ち着き
- 緑：安心、前向き、行動しやすい
- 黄：注意を引く、明るい
- 黒：高級感、重厚
- ピンク：やわらかい、共感
- オレンジ：元気、あたたかい、クリックされやすい
色ごとに「読み手の反応」が変わるんです。
たとえば同じボタンでも、
- 緑ボタン →「まず押してみようかな」
- 赤ボタン →「強すぎる…ちょっと躊躇」
- 青ボタン →「信用できそう。説明を読みたい」
- オレンジボタン →「押したらメリットありそう」
こういう違いが無意識のうちに出ます。
LPは“行動してもらうページ”なので、
色が変われば「押される確率」が当然変わります。
【超重要】色で失敗する初心者の3つのパターン
まず、よくある失敗から。
① 色を多く使いすぎる
3色も4色もバラバラに出てくると、読者が疲れます。
スタバもアップルも、色数は少なめ。
色数は「メイン1色＋アクセント1色＋無彩色（白黒グレー）」が基本。
② 配色の役割がバラバラ
ボタンの色と、装飾の色と、強調の色を全部違う色にすると“どれを見ていいのか”迷います。
読者は迷った瞬間にページを閉じます。
③ 「好きな色」で決める
好きな色と、CVRが上がる色は別モノです。
デザインは「目的」から逆算するもの。
ページの目的は「読んで、理解して、押してもらう」こと。
だから、色は“心理的に押しやすいかどうか”で決めるのが正解。
STUDIO LPの「色の基本ルール」はたった3つ
色選びで失敗する人は、ここだけ守ればOKです。
ルール①：背景は白ベースが最強
初心者は背景をベージュやグレーにしがちですが、
白が一番読みやすい。これだけでCVRが上がる。
理由：
- 白だとテキストが読みやすい
- スマホでもくっきりする
- 写真やアイコンが浮きやすい
- 読者の目が疲れない
- CTAボタンの色が映える
背景が白ベースは、プロでもほぼ全員が採用してます。
ルール②：アクセントカラーは1色だけ
アクセントカラーは「強調」や「世界観」を出すための色です。
ただし 1色だけ にしてください。
- ピンク
- 青
- 緑
- オレンジ
どれでもいいけど、ブレると読みにくくなる。
ルール③：CTA（ボタン）はアクセントカラーと絶対に揃える
これ、最重要ポイント。
CTAがアクセントカラーと同じ色だと、
読者の脳が「これは押す色」と認識しやすくなる。
特にSTUDIOはボタンがシンプルなので、
色の統一感がそのままCVRにつながる。
色の心理効果（LPでよく使う色だけまとめ）
ここからは、LPに向いている色だけを、
初心者向けに噛み砕いて説明します。
① 緑（行動しやすい・安心・前向き）
緑のボタンは「押しやすさ」が強い。
Amazonも楽天も緑を使ってる理由は、
緑＝安心して進める色 だから。
こんなLPに向いてる：
- 個人サービス
- コンサル
- 教室
- 美容（落ち着き系）
- 初心者に寄り添うサービス
② オレンジ（反応率が上がる・明るい・メリット感）
「押したら得ありそう」と感じる色。
心理学では「温かさ・行動・好奇心」を誘発する。
広告でもクリック率が高い色として有名。
こんなLPに向いてる：
- LP制作代行
- コーチング
- 食品・飲食
- 勉強系
- SNS関連
③ 青（信頼・誠実・専門性）
青は“信頼”を伝える色。
「落ち着いて説明を読む」モードに入る。
ただし、ボタンにすると弱め。
説明部分の背景や見出しと相性がいい。
こんなLPに向いてる：
- 専門サービス
- 教育
- BtoB
- コンサル
- 堅いジャンル
④ ピンク（共感・やわらかさ・安心感）
共感を呼びやすく、女性向けサービスに強い。
下手に使うと“ゆるい”感じになるのでアクセント限定。
こんなLPに向いてる：
- 美容
- サロン
- メンタル系
- 女性向けサービス
⑤ 赤（強い・緊急・注意）
使い方を間違えると攻撃的に見える。
セールページや「残り◯名です！」など強い訴求以外は避けたほうが無難。
STUDIO LPでは赤は使わない人がほとんど。
【超具体的】STUDIOでCVRを上げる“色の決め方”
ここが一番大事。
心理学より“実務でどう使うか”が重要なので、
完全に初心者向けに手順化しました。
ステップ1：まず「ボタンの色」を決める
色選びの中心はボタンです。
ボタンの色を先に決めると、
あとの配色が全部整う。
おすすめは緑かオレンジ。
ステップ2：アクセントカラーをボタンと同じにする
ボタンとアクセントを揃えることで、
ユーザーの視線が迷わなくなる。
例：
- ボタン：#2ecc71（緑）
- 見出し横のライン：#2ecc71
- 図解の一部：#2ecc71
全部同じ色コードにするだけで“統一感”が生まれる。
ステップ3：背景は白＋薄いグレーだけにする
背景に色を入れるとプロでも破綻しやすい。
初心者は「背景＝白ベース」が絶対正解。
サブの背景だけ薄いグレーにするのはOK。
例：
- #ffffff
- #fafafa
- #f5f5f5
ステップ4：テキストの色は真っ黒にしない
黒より濃いグレーのほうが読みやすい。
例：
- #333333
- #444444
これを使うだけで「プロ感」が出る。
ステップ5：写真と色を合わせる（一番抜ける人が多い）
たとえば緑のLPなのに、
写真が赤系・青系・オレンジ系とバラバラだと違和感が出る。
選ぶ写真のトーンは以下を意識する：
- 明るめなら全部明るめ
- 暖色なら全部暖色
- 白が多い写真なら白で揃える
Canvaで写真に「薄い透明の緑フィルター」をかけると統一感が出る。
【実例】テーマカラー別 STUDIO LPの鉄板配色
ここからは“そのまま使える”レベルの配色セットにしてあります。
★ 緑ベース（万人受け・CVR安定・初心者向け）
- ボタン：#2ecc71
- 見出し下線：#2ecc71
- 背景：#ffffff
- サブ背景：#fafafa
- テキスト：#333333
LPで最も無難かつ成果が出やすい配色。
初めてのLPならほぼこれでOK。
★ オレンジベース（元気・行動促進・勢いがある）
- ボタン：#ff9800
- 強調枠：#ffe0b2
- 背景：#ffffff
- 見出し横ライン：#ff9800
- テキスト：#333333
行動させたいLPに強い。
個人サービス・飲食・SNS系に相性良し。
★ 青ベース（信頼・専門性・落ち着き）
- ボタン：#2196f3
- 見出し：#1976d2
- 背景：#ffffff
- テキスト：#333333
BtoB、学校、士業、コンサル向け。
【注意】初心者が絶対にやらないほうがいい色の使い方3つ
① グラデーション多用
プロでも難しい。
色管理が崩れる。
② 黒背景
オシャレだけど読みづらい。
確実にCVRが下がる。
③ アクセントカラーを2色以上
初心者は破綻しやすく、世界観が壊れる。
STUDIOで色を効率よく設定する方法（超初心者向け）
① “デザインシステム”に色を登録
1回登録すれば、ページ全体がブレなくなる。
② ボタンの色は2種類だけ作る
・メインCTA
・サブCTA（白背景＋枠線）
③ セクションごとに「背景色ルール」を作る
- 白
- 薄いグレー
の2種だけで十分。
最後に：色はセンスじゃなく「ルール」です
色の相談ってよく受けますが、
実はほとんどのケースで“センス”の問題じゃありません。
色は「心理＋ルール」で決まる。
そして、LPの目的は
「読んで、押してもらうこと」 です。
STUDIOと相性のいい配色は、
- 背景白
- アクセント1色
- CTA＝アクセントカラー
- 写真と色を合わせる
これだけ。
もし
「自分のLPの色、この方向で合ってる？」
「配色を直したほうがいいか見てほしい」
というのがあれば、
スクショかURLを貼ってくれれば色だけでも整えます。
まずは色を変えるだけで、
あなたのLPはもっと“押されるページ”になります。
自作LPを“なんとなく不安なまま”にしないために。プロ目線で、一度だけ整えてみませんか？
「デザインは整えたつもりだけど、本当にこれで伝わっているのか自信がない」
「どこを直せば反応が上がるのか、人に見てほしい」
そんな方のために、LP無料診断を行っています。
以下のポイントを中心に、あなたのLPを確認し、具体的な改善案をお返しします。
- ターゲット設定は適切か？
- ファーストビューで「読む理由」が伝わっているか？
- 共感 → 原因 → 解決策 → 実績 → CTA の流れになっているか？
- もったいない離脱ポイントがどこにあるか？
「ここをこう直すと、伝わり方が変わります」という形で、
すぐ実行できるアドバイスだけをお伝えします。
※営業前提ではありません。
「自分で作ったLPを、もう一段レベルアップさせたい方」のための診断です。
