KAIZEN REPORTブログ
2025.12.23 | LPデザイン制作の改善
【CVX活用講座Vol.41】HTML/CSS編集機能を使って背景色を変更する方法とGoogle GeminiでLPの配色パターンを自動生成する方法
インハウスLP作成／LPO支援ツール「CVX（シー・ブイ・エックス）」の活用講座は本記事で41回目となります。
今回は「HTML/CSS編集機能を使って背景色を変更する方法」と「Google GeminiでLPの配色パターンを自動生成する方法」についてご紹介します。
CVXでは、HTMLやCSSを直接編集することで、ページ全体や特定セクションの配色を自由にカスタマイズできます。
また、最近ではAIツールの活用により、配色のアイデア出しも効率化できるようになっています。
この記事では、実際にCVXで背景色を変更する手順と、Google Geminiを活用して配色パターンを自動生成する方法をわかりやすく解説します。
デザインを整えたい方や、より効率的にLPをブラッシュアップしたい方はぜひ参考にしてください。
目次
HTML/CSS編集機能を使って背景色を変更する方法
CVXでは、ページ全体の背景色や特定セクション・要素の色を自由に変更することができます。
CVXの編集画面上の「HTML編集」や「CSS編集」機能を活用することで、ブランドカラーや季節に合わせたカラーカスタマイズが簡単に行えます。
「HTML編集」と「CSS編集」は、それぞれ設定の手順が異なります。
この記事では例として、FV（ファーストビュー）部分の背景色を変更する方法を解説します。
前半の手順（色を確認するまで）はどちらの方法でも共通です。
その後の反映ステップから、「HTML編集」と「CSS編集」に分けてそれぞれ説明しています。
【背景色の変更手順】
①ページ編集画面を開く
編集したいテンプレートのページ編集画面を開きます。
②検証ツールを開く
背景を変更したい箇所の上で右クリックし、「検証」を選択します。
すると、画面の下または右側に「検証ツール（デベロッパーツール）」というウィンドウが表示されます。
💡検証ツールとは？
Webページの仕組み（HTMLやCSS）を確認できるブラウザの機能です。
「この部分の色や画像はどこで設定されているのか？」を調べるときに使います。
画面上で確認できる「class（クラス）」とは、ページ内の特定の部分に名前をつけるための目印のようなものです。
たとえば、
<div class="article01-bg">〜</div>という記述があれば、article01-bgが“背景を管理しているエリア”を指しています。
③背景を指定しているクラスを確認する
検証ツール左上の矢印マーク（要素選択アイコン）をクリックして有効化します。
矢印マークに色がついていれば「有効」、グレーなら「無効」です（クリックで切り替え可能）。
矢印を有効にした状態で、FV（ファーストビュー）の背景部分にカーソルを当てると、右側に該当箇所のHTMLとCSSが表示されます。
今回の例では、article01-bg というクラスがFVの背景として使われていることがわかりました。
.article01-bg {
background-image: url(../img/pt1.article01-sp-bg.jpg);
}
💡背景を設定しているクラスには、
「background」「background-image」「background-color」といった記述があるのが目印です。
④検証ツール上で色を試しに変更してみる
検証ツール内で、.article01-bg のCSSに以下のコードを追加します。
.article01-bg {
background: #00acac;
追加すると、FVの背景色がリアルタイムで変わるのを確認できます。
#以降のカラーコードを変更すると、自由に色をカスタマイズできます。
例：#fff（白）／#000（黒）／#f5f5f5（グレー）など。
⑤カラーパネルで色を微調整する
検証ツール内で「background: #00acac;」の前にある色付きの■（四角アイコン）をクリックすると、カラーパネルが開きます。
パネルから好きな色を選ぶことで、実際の見た目を確認しながら調整できます。
⚠️ここからは「HTML編集」「CSS編集」それぞれの反映方法を説明します。
ご自身のやりやすい方を選んでください。
【HTML編集からの設定】
⑥HTML編集画面に反映させる
検証ツールで確認した色を、実際のページに反映します。画面右上の「HTML編集」ボタンをクリックすると、以下のようなHTMLが表示されます。
<div class="article01">
<div class="article01-bg">
<div class="article01-contents">
（以降の記述省略）
この article01-bg の右側に、先ほど検証で確認したスタイルを追記します。
<div class="article01">
<div class="article01-bg" style="background:#00acac;" >
<div class="article01-contents">
（以降の記述省略）
⑦「反映する」ボタンをクリックして保存
右下の「反映する」ボタンをクリックします。
これで、FVの背景色が指定したカラーに変更されました。
【CSS編集からの設定】
⑥ページ編集画面の右上のハンバーガーメニューから「CSS / JavaScript」を選択
右上のハンバーガーメニューをクリックし、「CSS / JavaScript」を選択します。
⑦「Headの最後」にコードを追記
以下のコードを貼り付けてください。
<style>
.article01-bg {background: #00acac;}
</style>
⑧「反映する」ボタンをクリックして保存
右下の「反映する」ボタンをクリックします。
これで、FVの背景色が指定したカラーに変更されました。
💡応用ポイント
この方法を応用すれば、特定のセクション（例：.cv-box や .section01）など、要素単位での配色変更も可能です。
複数セクションを異なる色で区切ることで、LP全体の印象をより整理されたデザインにできます。
Google GeminiでLPの配色パターンを自動生成する方法
「どんな配色にすれば良いか分からない」「時間をかけずに複数案を出したい」
そんなときに便利なのが、Google Geminiを活用した配色パターンの自動生成です。
Geminiでは、テーマや印象などをテキストで伝えるだけで、LPに最適なカラーの組み合わせを提案してもらうことができます。
特にファーストビュー（FV）のような重要なセクションでは、色選びがLPの成果を大きく左右するため、AIを使った効率的な配色提案が有効です。
ここでは、実際の活用例とともに、画像とプロンプトを組み合わせた使い方をご紹介します。
【プロンプトの入力方法（例）】
まずは、Google Geminiに以下のようなプロンプトを入力してみましょう。
今回はファーストビューのワイヤーフレームやデザインテンプレートの画像も併せて提示することで、より具体的で精度の高い配色提案が得られます。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
以下の画像は、ランディングページ（LP）のファーストビューのレイアウトテンプレートです。
このレイアウトに合う、効果的な配色パターンを提案してください。
【依頼内容】
- 使用箇所は「ファーストビュー（FV）」のみ
- 以下4種類の色をそれぞれ提案してください
【配色カテゴリ】
1. ブランドカラー：サイトの印象を決定づけるメインカラー
2. サブカラー：背景や装飾に使う補助的な色
3. アクションカラー：CTAボタンや目立たせたい要素に使う色
4. エモーショナルカラー：感情的な印象を与える装飾やアクセントの色
【目的】
- 新商品「○○」の印象づけと購入喚起
【ターゲット】
- 20〜30代女性、ナチュラル・トレンド志向
【印象】
- やさしさ、信頼感、安心感、おしゃれ
カラーコード（例：#FF9900）付きで3パターン提案し、それぞれの色の使い方も簡単に説明してください。
※画像はこちらです：［←ここに画像を添付］
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
【配色パターンのやりとりの流れ】
プロンプトを入力すると、以下のような流れで配色パターンを得ることができます。
・最初に3パターン程度の配色と説明が提案される
↓
・画像生成が含まれていない場合、「画像も生成して」とリクエスト
↓
・「他の配色パターンも見たい」と追加リクエスト
このように3ラリー程度のやりとりで、かなり完成度の高い配色とビジュアルが得られます。
【実際に得られた配色パターン（例）】
以下は、Google Geminiで生成されたファーストビューの配色イメージです。
【やさしさ＆安心感】のイメージ
→ ペールトーンのブルー系とベージュを組み合わせた、柔らかく女性らしい印象
【ミントグリーン系】のイメージ
→ 清涼感とトレンド感のある明るめのグリーン系配色
【イエロー系】のイメージ
→ 明るくポジティブ、健康的な印象を与えるカラーリング
【薄い紫のグラデーション系】のイメージ
→ 透明感・高級感を演出するグラデカラー
【LP全体への応用も可能】
今回はファーストビューに特化して配色を生成しましたが、Geminiの使い方次第では以下のような出力も可能です。
・LP全体のセクションごとの配色パターン
・CTAだけの色設計
・トーンに統一感を持たせた複数案の比較
用途に応じて柔軟に使い分けることで、デザインの効率性とクオリティを同時に高めることができます。
配色変更に関するまとめ
CVXのHTML/CSS編集機能を活用すれば、配色を自由にカスタマイズすることが可能です。
さらに、ChatGPTやGoogle GeminiなどのAIツールを組み合わせることで、デザインの方向性を短時間で複数パターン検討できるようになります。
「配色変更 × AI活用」によって、効率的かつ高品質なLP制作が実現できます。
特にGoogle Geminiを活用すれば、配色を“考える”作業をAIに任せつつ、CVXのCSS編集機能ですぐにビジュアルへ反映可能です。
「トーンを決めたいけど時間がない」「複数案を比較したい」といった場合にも非常に有効です。
-
2013.11.29 LPデザイン制作の改善
-
2014.10.2 LPデザイン制作の改善
-
2021.1.28 LPデザイン制作の改善
-
2013.7.1 LPデザイン制作の改善
