WordPressで商品やサービスを比較するとき、「普通の表だと少し地味」「おすすめ商品をもっと分かりやすく見せたい」「でもHTMLやCSSを一から作るのは難しそう」と感じることはありませんか？
ChatGPTを使えば、比較する商品や項目を伝えるだけで、WordPressのカスタムHTMLブロックに貼り付けて使える比較表を作ることができます。色や枠線、ボタン、強調表示なども調整できるため、一般的な表作成プラグインとは少し違った、デザイン性のある比較表に仕上げることも可能です。
この記事では、実際に1つの比較表をゼロから作りながら、次の流れを順番に解説します。
- 比較する商品や項目の決め方
- ChatGPTに比較表HTMLを作ってもらう方法
- WordPressのカスタムHTMLへ貼り付ける手順
- 表示崩れやスマホ表示を確認するポイント
- 気になる部分をChatGPTで修正する方法
上の比較表も、この記事で紹介する手順に沿って実際に作成したものです。最初からこの形になるとは限らず、WordPressへ貼り付けて確認しながら調整していくのがポイントです。
それでは、ChatGPTを使ってWordPressに表示できる、おしゃれな比較表HTMLを作る方法を順番に見ていきましょう。
ChatGPTを使えばWordPressのおしゃれな比較表を自分でも作れる
WordPressで比較表を作る方法はいくつかありますが、ChatGPTを使えば、HTMLやCSSを自分で一から書かなくても、デザインを指定した比較表を作ることができます。
たとえば、商品名や料金を並べるだけのシンプルな表ではなく、
- おすすめの商品を目立たせる
- 商品ごとに特徴や料金を整理する
- ボタンを付けて詳細ページへ誘導する
- 枠線や背景色を変えて見やすくする
- スマホでは横スクロールできるようにする
といった調整も可能です。
既存の表作成プラグインでも比較表は作れますが、ChatGPTでHTMLとCSSを生成すると、決められたデザインだけに縛られず、記事の内容やサイトの雰囲気に合わせて細かく調整できるのがメリットです。
今回の記事では、実際に比較する商品と項目を決め、ChatGPTにHTMLとCSSを作ってもらいます。そのコードをWordPressのカスタムHTMLブロックへ貼り付け、表示を確認しながら気になる部分を修正していきます。
流れは次のとおりです。
- 比較する商品・項目を決める
- ChatGPTにHTMLとCSSを作ってもらう
- WordPressへ貼り付ける
- PC・スマホで表示を確認する
- 気になる部分をChatGPTで修正する
- 完成
ただし、ChatGPTに「比較表を作って」と頼むだけで、最初から狙ったデザインになるとは限りません。実際には、比較する情報の整理やWordPress上での表示確認、細かな修正が必要になることがあります。
まずは、比較表を作り始める前に用意しておきたいものから確認していきましょう。
比較表を作る前に決めておきたいこと
ChatGPTに比較表を作ってもらう前に、まずは「何を比較するか」と「どんな表にしたいか」を決めておきます。
といっても、商品の特徴や料金を細かく調べて一覧にする必要はありません。今回はこちらで比較する商品と項目を決め、各商品の情報確認や比較、HTML・CSSの作成はChatGPTに任せていきます。
1. 比較する商品・サービスを決める
まずは、比較表に載せる商品やサービスを決めます。
比較する数が多すぎると表が横に長くなり、特にスマホでは見づらくなりやすいため、最初は3〜4件程度に絞ると作りやすいです。
今回は作例として、3つのレンタルサーバーを比較します。
- エックスサーバー
- CONOHA WING
- ロリポップ！
この段階では、それぞれの特徴や料金まで細かく調べておく必要はありません。
まずは「どの商品・サービスを比較したいか」を決めておき、特徴や料金などの情報確認と整理は、あとでChatGPTに任せます。
2. 比較項目と必要なリンクを用意する
今回は比較項目もシンプルにして、次の2つだけにします。
- 特徴
- 料金
さらに表の一番下には、それぞれのレンタルサーバーの詳細ページへ移動できるボタンを付けます。
完成イメージは次のような形です。
| 比較項目 | サーバーA | サーバーB | サーバーC |
|---|---|---|---|
| 特徴 | 特徴を表示 | 特徴を表示 | 特徴を表示 |
| 料金 | 料金を表示 | 料金を表示 | 料金を表示 |
| 詳細 | ボタン | ボタン | ボタン |
ボタンにアフィリエイトリンクを設定する場合は、あらかじめ3社分のURLを用意しておきます。
今回はアフィリエイト記事を想定しているため、各レンタルサーバーのアフィリエイトURLを使います。 アフィリエイトを使わない場合は、公式サイトなど任意のURLでも構いません。
料金や特徴についてはChatGPTに確認してもらいますが、リンク先だけは自分で指定したURLを使った方が確実です。特にアフィリエイトリンクは、ChatGPTに探してもらうのではなく、ASPなどで発行したものをそのまま渡します。
ASPのメール素材からアフィリエイトURLを取得する
例としてA8ネットを使ってボタン用のアフィリエイトリンクを取得する方法を解説します。
広告リンクの「メール」タイプの素材を選択し、その中のURL部分だけをコピーしましょう。
取得したURLは、あとでChatGPTへ比較表を作ってもらうときに、それぞれの商品・サービス名とセットで渡します。
アフィリエイトを利用しない場合は、この手順は必要ありません。公式サイトなど、ボタンから移動させたいURLを用意しておけば大丈夫です。
3. メインカラーや参考にしたいデザインを決める
最後に、比較表のデザインをざっくり決めます。
細かなCSSまで考える必要はありません。たとえば、
- 青系で爽やかにしたい
- オレンジ系で明るくしたい
- 白をベースにシンプルにしたい
- おすすめの商品だけ少し目立たせたい
といった程度でも十分です。
参考にしたい比較表がある場合は、スクリーンショットをChatGPTに添付して、
「この雰囲気を参考に、青系で見やすくおしゃれな比較表にしてください」
のように伝える方法もあります。
もちろん、参考画像がなくても問題ありません。
「青をメインカラーにして、WordPressの記事内で見やすい、おしゃれな比較表にしてください」
くらいの指示から始めることもできます。
今回は、比較する3社、比較項目、アフィリエイトリンク、デザインの希望が決まれば準備完了です。
次は、実際にChatGPTで比較表を作る前に、使用するモデルや思考レベルについて確認しておきます。
比較表作成ではモデル選びと「思考レベル」も重要
比較する商品や項目、使いたいリンク、デザインのイメージまで決まったら、次はいよいよChatGPTに比較表を作ってもらいます。
その前に、もう1つ確認しておきたいのが、使用するAIモデルと「思考レベル」です。
今回の比較表作成では、単にHTMLを書くだけでなく、
- 商品・サービスの情報を整理する
- 特徴や料金を比較する
- HTMLとCSSを組み合わせる
- WordPressで使いやすい形にする
- スマホ表示まで考える
- 修正内容を反映しながら仕上げる
といった複数の処理をまとめて行います。
無料プランでも比較表作成を試すことはできますが、こうした少し複雑な作業では、使用するモデルによって出力内容や指示の反映具合に差が出ることがあります。
そのため、できればPlus以上の有料プランを使い、その時点で利用できる高性能なモデルを選ぶのがおすすめです。
また、ChatGPTで思考レベルを選択できる場合は、「高（High）」など、しっかり考えて回答する設定にしておくと進めやすくなります。
なお、ChatGPTで利用できるモデル名や設定は今後変わる可能性があります。この記事では特定のモデル名に固定せず、実際に作る時点で利用できる高性能なモデルを選ぶ、という考え方で進めます。
これで比較表を作る準備は整いました。
次は、先ほど決めた商品・サービスや比較項目をChatGPTに伝えて、実際に比較表のHTMLとCSSを作っていきます。
ChatGPTに比較表HTMLを作ってもらう
比較する商品・サービスや項目、リンク、デザインの方向性まで決まったら、実際にChatGPTへ比較表を作ってもらいます。
HTMLやCSSを自分で書く必要はありません。まずは「何を比較したいか」「どんな表にしたいか」を普通の言葉で伝えて、最初の比較表を作ってみましょう。
今回は作例として、次の3つのレンタルサーバーを比較します。
- エックスサーバー
- ConoHa WING
- ロリポップ！
比較項目は「特徴」と「料金」の2つ。さらに、一番下には各サービスの詳細ページへ移動するボタンを付けます。
STEP1：比較する商品と希望するデザインを伝える
ChatGPTには、比較する商品・サービスと必要な項目をまとめて伝えます。
今回は青系をメインカラーにして、一般的な表より少しデザイン性のある比較表を作ってもらうことにしました。
最初の指示は、それほど難しく考えなくても大丈夫です。
以下の3つの商品またはサービスを比較する表を作ってください。
・【商品・サービス名①】
・【商品・サービス名②】
・【商品・サービス名③】
比較する項目は「特徴」と「料金」です。
それぞれの特徴と料金は公式サイトの最新情報を確認して整理してください。
表の一番下には、それぞれのサービスへ移動できるボタンを付けてください。
リンク先はあとで指定するURLを使ってください。
WordPressのカスタムHTMLブロックに貼り付けられるHTMLとCSSで作成してください。
メインカラーは青系で、見やすく少しおしゃれなデザインにしてください。
おすすめの商品が分かりやすいように強調し、スマホでも見やすくしてください。
このように、最初からCSSの細かな数値やレイアウトまで指定する必要はありません。
「青系」「見やすく」「少しおしゃれに」「おすすめを分かりやすく」といった希望を伝え、まずはChatGPTがどのような表を作るか確認します。
STEP2：参考にしたいデザインがあれば画像も添付する
文章だけでデザインを説明しにくい場合は、参考にしたい比較表の画像を一緒に送る方法もあります。
たとえば、
「この画像のような雰囲気を参考にして、青系の比較表を作ってください」
と伝えれば、色の使い方やボタン、商品の見せ方などを考える材料になります。
もちろん、参考画像がなくても比較表は作れます。まずは色や雰囲気だけ指定して、生成されたものを見ながら調整しても問題ありません。
STEP3：商品の特徴や料金の整理もChatGPTに任せる
今回はこちらでレンタルサーバー3社の特徴や料金を一覧にしてから渡すのではなく、情報の確認と整理もChatGPTに任せます。
ユーザー側で決めるのは、
- 何を比較するか
- どの項目を比較するか
- どのURLをボタンに設定するか
- どんなデザインにしたいか
といった部分です。
その条件をもとに、ChatGPT側で各サービスの情報を確認し、比較表に収まりやすい文章へ整理してもらいます。
ただし、料金やキャンペーン、契約条件などは変更されることがあります。ChatGPTに公式サイトを確認するよう指示していても、そのまま公開せず、最終的には自分でも内容を確認しておきましょう。
STEP4：最初に生成された比較表を確認する
指示を送ると、ChatGPTから比較表を表示するためのHTMLとCSSが生成されます。
そして、今回最初に作られたのが次の比較表です。
比較表として必要な「特徴」「料金」「ボタン」は入っていますし、青系のデザインやおすすめ商品の強調も反映されています。
ただ、これで完成というわけではありません。
実際に見てみると、細かなレイアウトや情報の見せ方など、もう少し整えたい部分があります。ChatGPTで比較表を作る場合は、このように最初の出力をたたき台にして、実際の表示を見ながら修正していく方が進めやすいです。
次は、このHTMLとCSSをWordPressのカスタムHTMLブロックへ貼り付けて、実際の記事上でどのように表示されるか確認してみます。
生成した比較表HTMLをWordPressへ貼り付ける
ChatGPTからHTMLとCSSが出力されたら、次は実際にWordPressへ貼り付けて表示を確認します。
ここで大切なのは、WordPressの編集画面だけで判断しないことです。
カスタムHTMLブロックでは、編集画面上の見え方と、実際の記事を表示したときの見え方が異なることがあります。テーマ側のCSSやレイアウトの影響も受けるため、必ずプレビュー画面まで確認しましょう。
STEP1：カスタムHTMLブロックを追加する
WordPressの記事編集画面を開き、比較表を入れたい位置でブロックを追加します。
「＋」ボタンからカスタムHTMLを選択してください。
ChatGPTが生成したコードは、通常の段落ブロックではなく、このカスタムHTMLブロックへ貼り付けます。
今回のようにHTMLとCSSがまとめて出力されている場合も、そのまま同じブロック内へ貼り付けて構いません。
STEP2：ChatGPTが生成したHTMLとCSSを貼り付ける
カスタムHTMLブロックを追加したら、ChatGPTが出力したコードを最初から最後までコピーして貼り付けます。
コードが長くても、途中だけを抜き出さず、比較表に必要なHTMLとCSSをまとめて貼り付けます。
今回のコードには、
- 比較表のレイアウト
- 背景色や枠線
- おすすめ商品の強調
- 特徴欄のチェックマーク
- 料金表示
- ボタン
- スマホ表示用の設定
などが含まれています。
ここではコードを細かく編集せず、まずChatGPTが出力した状態のまま表示を確認してみます。
STEP3：編集画面ではなくプレビュー画面で確認する
カスタムHTMLブロックへコードを貼り付けると、編集画面でもある程度の内容は確認できます。
ただし、編集画面で見えている状態が、そのまま実際の記事表示になるとは限りません。
WordPressでは、
- 使用しているテーマのCSS
- 記事本文の横幅
- 見出しやリストのデザイン
- 表やボタンに対するテーマ側の装飾
- PCとスマホでの表示幅
などが影響するため、最終的な見え方はプレビューで確認する必要があります。
編集画面で問題なさそうに見えても、そのまま完成と判断せず、画面右上などにある「プレビュー」から実際の記事表示を開いてください。
今回、最初の指示だけで作った比較表をプレビューすると、次のように表示されました。
比較表としては問題なく表示されていて、
- 3つのレンタルサーバーが横並びになっている
- 特徴と料金を比較できる
- おすすめ商品が強調されている
- 各サービスのボタンが付いている
という、最初に指定した内容はおおむね反映されています。
一方で、プレビューで実際の表示を確認すると、いくつか気になる部分も見つかりました。
たとえば、「人気レンタルサーバー3社を比較」という文字がWordPressのH2見出しとして装飾されていたり、特徴欄ではチェックマークの横に通常の箇条書きマークまで表示されています。また、「おすすめ」の文字も上側が少し見切れています。
このような問題は、ChatGPTが生成したコードだけを見ていても気づきにくく、WordPressへ貼り付けてプレビューしたことで初めて分かります。
そのため、比較表を作るときは、
- ChatGPTでHTML/CSSを生成
- WordPressへ貼り付け
- プレビューで確認
- 気になる部分を修正
という流れで進めるのがおすすめです。
次は、この最初の比較表を見ながら、どこを修正したいのかを具体的に整理していきます。
最初に作った比較表の修正したいところを確認する
WordPressのプレビューで実際の表示を確認すると、比較表としては使えるものの、このまま完成とするには少し気になる部分がありました。
今回は、特に次の4点を修正していきます。
1. 比較表のタイトルがH2見出しとして表示されている
表の上には「人気レンタルサーバー3社を比較」というタイトルが表示されています。
HTMLを見ると、この部分は次のようにH2タグで出力されていました。
<h2 class="server-compare__title">
人気レンタルサーバー3社を比較
</h2>そのため、WordPressテーマ側のH2デザインが適用され、比較表とは別に大きな見出しのように表示されています。
記事本文にはすでに見出しがあるため、比較表の中に新しいH2を入れる必要はありません。今回は、このタイトル自体を削除してもらいます。
2. チェックマークの横に箇条書きの「・」も表示されている
特徴欄を見ると、各項目の先頭に青いチェックマークが付いています。
ただし、その左側には通常の箇条書きで使われる黒い「・」も表示されており、マークが二重になっています。
ChatGPTが生成したCSSには、通常の箇条書きマークを消す指定も入っています。それでもWordPress上では表示されているため、使用しているテーマ側のCSSが影響している可能性があります。
ここは、黒い「・」を消して、青いチェックマークだけが表示されるように修正してもらいます。
3. 「おすすめ」の文字が途中で見切れている
エックスサーバーの上には「おすすめ」というバッジが付いていますが、上側にはみ出してしまい、文字の一部が見切れています。
HTMLでは、おすすめバッジを表の上方向へずらして配置しています。
デザインとして目立たせようとした結果ですが、実際のWordPress上では表示領域からはみ出してしまいました。
今回は、バッジが表の中にきちんと収まり、「おすすめ」の文字がすべて見える位置へ修正します。
4. 特徴を入れすぎて表が縦に長くなっている
今回の表では、各レンタルサーバーに6つずつ特徴が入っています。
詳しい情報が分かるというメリットはありますが、比較表として見ると情報量が多く、3社の違いをひと目で確認しにくくなっています。
比較表の役割は、商品のすべての情報を載せることではなく、重要な違いを短時間で比較できるようにすることです。
そこで今回は、それぞれの特徴を代表的な3項目程度に絞って、表全体をもう少しコンパクトにします。
詳しい特徴については、必要であれば比較表の下にある本文で補足できます。
そのほかの細かな部分も完成前に確認する
今回まず直したいのは上の4点ですが、最終的には次のような部分も確認します。
- 3社の料金表示に大きなばらつきがないか
- ボタンの文言が分かりやすいか
- 「公式サイト」などの項目名がリンク先と合っているか
- アフィリエイトURLが正しく設定されているか
- スマホでも比較しやすいか
一度に完璧な比較表を作ろうとするより、まず表示してみて、気になるところを具体的に直していく方が進めやすいです。
次は、今回見つけた問題点をそのままChatGPTへ伝えて、比較表をまとめて修正してもらいます。
気になる部分をChatGPTにまとめて修正してもらう
最初の比較表で直したいところが整理できたら、その内容をChatGPTへ伝えて修正してもらいます。
HTMLやCSSを自分で書き換えなくても、「どこが気になるのか」「どう直したいのか」を普通の言葉で伝えれば修正を依頼できます。
今回は問題が複数あったため、1つずつ直すのではなく、まず4つの修正をまとめて依頼しました。
STEP1：修正したい部分を具体的に伝える
今回、最初に修正を依頼したのは次の4点です。
- 比較表の上に表示された不要なH2タイトルを削除する
- 特徴欄のチェックマーク横に出ている黒い「・」を消す
- 「おすすめ」バッジが見切れないようにする
- 特徴を各サービス3項目程度に絞る
実際には、WordPressのプレビュー画面のスクリーンショットも添付して、次のように伝えました。
この比較表をWordPressのプレビューで確認したところ、いくつか修正したい部分がありました。
以下を修正してください。
1. 表の上にある「人気レンタルサーバー3社を比較」というH2タイトルは不要なので削除してください。
2. 「特徴」の各項目で、青いチェックマークの左側にWordPress側の黒い箇条書きマーク「・」も表示されています。
黒い箇条書きマークを完全に消して、青いチェックマークだけが表示されるようにしてください。
3. エックスサーバーの「おすすめ」バッジが上にはみ出し、文字が見切れています。
表の中にきれいに収まり、「おすすめ」の文字がすべて見えるように修正してください。
4. 特徴が各サービス6項目あり表が縦に長いので、それぞれ代表的な特徴3つ程度に整理してください。
内容は公式サイトの情報を確認し、重要な特徴を選んでください。
現在のデザインや青系の配色はできるだけ維持してください。
修正箇所だけではなく、WordPressのカスタムHTMLブロックへそのまま貼り直せるように、修正後のHTMLとCSSを最初から最後まで全文出力してください。
修正を依頼すると、ChatGPTから新しいHTMLとCSSが出力されました。
部分的なコードだけを差し替えるよりも、修正内容を反映したコード全体を出してもらった方が、HTMLやCSSに詳しくない場合でも扱いやすくなります。
STEP2：修正版をWordPressへ貼り直して確認する
修正版が出力されたら、WordPressのカスタムHTMLブロックに入っている古いコードを削除し、新しいHTMLとCSSへ入れ替えます。
貼り直したら、前と同じように編集画面だけでは判断せず、プレビューで実際の表示を確認します。
1回目の修正後は、次のようになりました。
最初の表と比べると、かなり見やすくなっています。
不要だったH2タイトルは消え、特徴欄も青いチェックマークだけになりました。「おすすめ」も表の中に収まり、特徴も各サービス3項目に整理されています。
最初に気になっていた部分は、1回の修正でかなり改善できました。
ただし、ここでもう一度プレビューをよく確認すると、別の気になる部分が見つかりました。
STEP3：残った違和感をもう一度ChatGPTへ伝える
1回目の修正後の表では、ConoHa WINGとロリポップ！の料金欄に薄い緑色の背景が残っていました。
今回の比較表では指定していない色だったため、WordPressテーマ側のテーブルデザインが影響している可能性があります。
また、罫線の色や表の下にある注釈の大きさも、もう少し統一したいところです。
そこで、2回目は次のように追加修正を依頼しました。
かなり見やすくなりました。
WordPressのプレビューで確認すると、さらにいくつか調整したい部分があります。
1. ConoHa WINGとロリポップ！の料金欄に、WordPressテーマ側の影響と思われる薄い緑色の背景が付いています。
比較表内の通常セルの背景色をCSSで明示し、WordPressテーマ側のテーブル背景色が入り込まないようにしてください。
おすすめ列の背景色は現在のまま残してください。
2. 表の罫線にもWordPressテーマ側の色が影響しているように見えます。
比較表内の罫線は、現在の比較表用CSSで指定している色に統一してください。
比較表以外のテーブルには影響しないようにしてください。
3. 表の下の注釈文が少し大きく見えるので、比較表内の注釈だけ小さく表示されるようにしてください。
4. 最下段の左側にある「公式サイト」を「詳細」に変更してください。
現在の青系デザインや、1回目の修正で直した部分は維持してください。
修正箇所だけではなく、WordPressのカスタムHTMLブロックへそのまま貼り直せるHTMLとCSSを全文出力してください。
今回のように、最初の修正で別の部分まで完璧に仕上がるとは限りません。
一度WordPressで表示し、まだ気になるところがあれば、その画面を見ながら追加で修正を頼めば大丈夫です。
STEP4：2回目の修正版をプレビューする
2回目も、出力されたHTMLとCSSをWordPressへ貼り直し、プレビューで確認しました。
今度は料金欄に残っていた背景色もなくなり、表全体の色や罫線がそろいました。
「公式サイト」も「詳細」に変わり、注釈も比較表より目立たない大きさになっています。
最初にChatGPTへ指示しただけの表と比べると、かなりすっきりした比較表になりました。
このように、ChatGPTで比較表を作る場合は、一度の指示ですべてを完成させようとするより、
- 最初の表を作る
- WordPressでプレビューする
- 気になる部分をまとめて伝える
- 修正版を貼り直す
- もう一度プレビューする
という流れで調整すると進めやすくなります。
CSSの細かな書き方が分からなくても、「この色を消したい」「文字が見切れている」「箇条書きの点を消したい」といった見たままの状態を伝えれば、ChatGPTに修正方法を考えてもらえます。
比較表の見た目はこれでかなり整いました。
次は完成とする前に、スマホでの表示やリンク先、料金・特徴などの内容を確認していきます。
完成前にPC・スマホ・リンクを確認する
比較表の見た目が整ったら、最後に実際の使い勝手と内容を確認します。
PCではきれいに見えていても、スマホでは横幅が足りずに文字が詰まったり、ボタンが押しにくくなったりすることがあります。
また、アフィリエイトリンクや料金情報に間違いがあれば、そのまま公開することはできません。
比較表を完成とする前に、次の4点を確認しておきましょう。
1. PCで表全体の表示を確認する
まずはPCのプレビュー画面で、比較表全体を確認します。
今回の表では、特に次の部分を見ています。
- 商品名やプラン名が途中で切れていないか
- 特徴の文章が読みやすいか
- 料金が比較しやすく表示されているか
- 「おすすめ」バッジが正しく表示されているか
- ボタンの位置や大きさに違和感がないか
- 表の罫線や背景色がそろっているか
修正前と修正後の両方を残しておくと、どこが改善されたのかも分かりやすくなります。
2. スマホで横スクロールや文字の見え方を確認する
3商品を横並びにした比較表は、スマホの画面幅には収まりません。
そのため、今回の表ではスマホ時に横スクロールできるようにしています。
実際にスマホ表示で確認し、
- 横方向へスムーズにスクロールできるか
- 商品名や料金が読めるか
- 特徴の文章が極端に細くなっていないか
- ボタンが押しにくくなっていないか
- 表の一部が途中で切れていないか
を確認します。
可能であれば、スマホ実機で確認するのがおすすめです。
WordPressのプレビューやブラウザのスマホ表示でも確認できますが、実際の端末で横スクロールやボタン操作まで試すと、より確実です。
3. ボタンとリンク先を実際にクリックして確認する
見た目に問題がなくても、ボタンのURLが間違っていれば使えません。
今回のHTMLでは、最初は次のような仮のURLが入っていました。
XSERVER_URL
CONOHA_URL
LOLIPOP_URLこの部分を、実際に使用するURLへ差し替えます。
アフィリエイトを利用する場合は、ASPで取得したアフィリエイトURLを使用します。
取得方法についてはこちらを参照してください。
今回の作例では、A8.netで取得したリンクを各ボタンに設定します。
現在の比較表HTMLに入っている仮URLを、以下のURLへ差し替えてください。
【エックスサーバー】
現在：XSERVER_URL
差し替え先：
【ここにエックスサーバーのアフィリエイトURL】
【ConoHa WING】
現在：CONOHA_URL
差し替え先：
【ここにConoHa WINGのアフィリエイトURL】
【ロリポップ！】
現在：LOLIPOP_URL
差し替え先：
【ここにロリポップ！のアフィリエイトURL】
URL以外のデザイン、料金、特徴、文章、CSSは変更しないでください。
WordPressのカスタムHTMLブロックへそのまま貼り直せるように、URLを差し替えたHTMLとCSSを最初から最後まで全文出力してください。
URLを差し替えたHTMLが出力されたら、WordPressのカスタムHTMLブロックへ貼り直します。
その後、プレビュー画面から各ボタンを実際にクリックして、
- 正しいサービスのページへ移動するか
- 各サービスのURLを取り違えていないか
- ボタン自体が正常にクリックできるか
を確認してください。
アフィリエイトURLは長い文字列になることが多いため、HTMLを目で見て確認するだけでなく、実際にクリックして確かめる方が確実です。
4. 料金や特徴の内容も公開前に確認する
最後に、比較表に掲載している情報そのものも確認します。
今回の表では、
- 料金
- プラン名
- ストレージ容量
- WordPress関連機能
- 独自ドメイン特典
- キャンペーン
など、変更される可能性のある情報を扱っています。
ChatGPTに公式サイトを確認してもらっていても、公開前には自分でも各サービスの公式ページを確認しておきましょう。
特に料金やキャンペーンは、契約期間や適用条件によって表示金額が変わることがあります。
比較表のデザインがきれいでも、情報が間違っていれば読者にとって役立つ表にはなりません。
- 見た目の確認
- スマホ表示の確認
- リンク確認
- 掲載情報の確認
まで終わったら、比較表は完成です。
次は、最初に生成された表と完成した表を見比べながら、今回どこを修正したのかを振り返ってみます。
ChatGPTで作った比較表が完成
表示崩れの修正、PC・スマホでの確認、リンク先や掲載情報のチェックまで終われば、比較表は完成です。
今回、最初にChatGPTへ比較表作成を依頼したときは、次のような状態でした。
比較表として必要な情報は入っていましたが、WordPressへ貼り付けてプレビューすると、
- 不要なH2見出しが表示される
- チェックマークと箇条書きの「・」が重なる
- 「おすすめ」の文字が見切れる
- 特徴が多く、表が縦に長くなる
- WordPressテーマ側の背景色や罫線が一部反映される
といった部分が気になりました。
そこで、プレビュー画面を確認しながらChatGPTへ2回修正を依頼し、最終的に次のような比較表になりました。
最初の表と比べると、特徴が整理され、チェックマークや「おすすめ」表示もすっきりしました。WordPressテーマ側のデザインが入り込んでいた部分も調整され、3社の特徴と料金を比較しやすくなっています。
今回行った作業を振り返ると、比較表そのものを作る流れは次のようになります。
- ChatGPTへ条件を伝える
- HTMLとCSSを生成してもらう
- WordPressのカスタムHTMLへ貼り付ける
- プレビューで問題点を確認する
- ChatGPTへ修正を依頼する
- もう一度WordPressで確認する
- リンクや掲載情報を確認して完成
HTMLやCSSを一から自分で書いていなくても、ここまでの比較表を作ることができました。
一方で、実際に作ってみると、最初のHTMLを生成してもらうことよりも、WordPress上で狙った見た目になるまで調整する作業の方が時間がかかります。
次は、今回の比較表作りを通して実際に感じた「ChatGPTで比較表を作るときに手間がかかる部分」を整理してみます。
実際に作って分かったのは「HTML生成より調整に手間がかかる」こと
今回、ChatGPTに比較表を作ってもらって感じたのは、HTMLやCSSを生成すること自体はそれほど難しくないということです。
比較する商品や項目、デザインの希望を伝えれば、最初の比較表はすぐに作ってもらえました。
ただし、実際にWordPressへ貼り付けてみると、
- WordPressテーマのデザインが入り込む
- 箇条書きのマークが二重に表示される
- バッジの文字が見切れる
- 情報を入れすぎて表が読みづらくなる
- 背景色や罫線が想定と違う
といった問題が見つかりました。
気になる部分をChatGPTへ伝えて修正。もう一度確認すると別の違和感が残っていたため、さらに修正を依頼しました。
最終的にはかなり見やすい比較表になりましたが、最初のHTMLを作る作業より、その後の表示確認と微調整の方が手間はかかっています。
WordPressへ貼ってみないと分からない問題もある
特に厄介なのが、ChatGPTが作ったHTMLやCSSだけを見ても問題が分からないケースです。
今回も、通常の箇条書きマークを消すCSSは最初から入っていました。それでもWordPressへ貼ると、テーマ側のスタイルが影響して黒い「・」が表示されました。
料金欄に意図していない背景色が付いたのも同じです。
このように、比較表単体では問題がなくても、実際に使用しているWordPressテーマとの組み合わせによって見え方が変わることがあります。
そのため、
ChatGPTで生成したコードを見るだけではなく、実際に使うWordPressへ貼って確認する
という工程は省かない方がよいでしょう。
修正自体は専門用語を使わなくてもできる
一方で、HTMLやCSSに詳しくなくても修正できるのはChatGPTを使うメリットです。
今回も、
「おすすめの文字が見切れている」
「黒い箇条書きの点を消したい」
「料金欄の緑色をなくしたい」
といった、画面を見たままの言葉で修正を依頼しています。
どのCSSを書き換えればよいのかを自分で調べなくても、問題の状態と希望する見た目を伝えれば、ChatGPT側で修正方法を考えてくれます。
スクリーンショットも一緒に送れば、文章だけでは説明しにくい表示崩れも伝えやすくなります。
おしゃれな比較表ほど細かな調整が増えやすい
シンプルな罫線だけの表であれば、それほど多くの調整は必要ないかもしれません。
しかし、
- おすすめ商品を強調する
- バッジを付ける
- ボタンを目立たせる
- 商品ごとに背景色を変える
- スマホでも見やすくする
- WordPressテーマの影響を受けにくくする
といった要素を増やすほど、確認するポイントも増えていきます。
私自身、比較表を作る専用AIツールを作成したときも、WordPress上で狙った表示になるまで何度も生成と修正を繰り返しました。
「ここを直したら別の部分が崩れる」といったこともあり、現在の形に落ち着くまでにはかなり細かな調整が必要でした。
もちろん、今回紹介した方法でも、自分でChatGPTとやり取りしながら比較表を完成させることはできます。
ただ、比較表を作るたびに、
生成 → WordPressへ貼り付け → プレビュー → 修正 → 再確認
を繰り返すのは、それなりに手間がかかります。
次は、こうした調整作業を毎回繰り返したくない場合に使える、比較表作成に特化したAIツールについて紹介します。
比較表を毎回調整するのが大変なら専用AIツールを使う方法もある
ここまで紹介してきたように、ChatGPTを使えば、HTMLやCSSを自分で一から書かなくてもWordPress用の比較表を作れます。
今回も、最初に生成された比較表にはいくつか問題がありましたが、WordPressでプレビューしながら修正を重ねることで、実際に使える形まで仕上げることができました。
そのため、比較表をたまに作る程度であれば、この記事の手順を参考にしながら自分で調整していく方法でも十分だと思います。
一方で、比較表を何度も作る場合は、
- WordPressテーマのCSSが入り込まないようにする
- おすすめ商品の表示を整える
- 特徴や料金を見やすく配置する
- ボタンのデザインを整える
- スマホで横スクロールできるようにする
- 表示崩れがあれば再度ChatGPTへ修正を依頼する
といった作業を、そのたびに繰り返すことになります。
そこで私は、こうした調整をできるだけ減らすために、WordPressの比較表作成に特化したAIツールも作っています。
このツールでは比較表だけでなく、比較表の内容に則した比較記事まで一気通貫で書けちゃいますよ。
WordPressで使いやすい形になるよう細かなルールをあらかじめ入れている
このツールでは、単純に「比較表のHTMLを作る」というだけではなく、これまで実際にWordPressへ貼り付けて確認しながら調整してきた内容を反映しています。
たとえば、
- WordPressテーマ側のCSSとぶつかりにくくする
- 表の中に不要な見出しを入れない
- 箇条書きマークが二重になりにくい構造にする
- おすすめ表示が見切れにくい配置にする
- スマホでは横スクロールできるようにする
- ボタンや料金、特徴を比較しやすく配置する
といった部分です。
今回の記事でも、最初の比較表を作ってから2回修正しました。
専用ツールを作る過程では、それよりもさらに多くの表示確認と修正を繰り返しています。
「このテーマではここが崩れる」
「この書き方だと余計な余白が入る」
「おすすめ表示を変えると別の部分が崩れる」
といった細かな問題を一つずつ調整しながら、現在の形にしています。
自分で試行錯誤する時間を減らしたい人向け
もちろん、専用ツールを使わなくても、この記事で紹介した方法で比較表は作れます。
むしろ、一度自分で作ってみると、
「ChatGPTがどこまでやってくれるのか」
「WordPressではどんなところが崩れやすいのか」
が分かるので、比較表作成の仕組みを理解するには良い方法です。
ただ、
「毎回プレビューして何度も修正するのは面倒」
「できるだけ最初から整った比較表を作りたい」
「HTMLやCSSの細かな修正には時間をかけたくない」
「なんなら比較記事もまとめて書いてほしい」
という場合は、比較表作成に特化したAIツールを使う方法もあります。
専用ツールについては、以下のサイト「AI活用ナビ」で詳しく紹介しています。
自分でChatGPTと相談しながら作る方法と、専用ツールで作業を短縮する方法のどちらが合うかは、比較表を作る頻度や、調整にかけられる時間に合わせて選んでみてください。
まとめ：ChatGPTでWordPressの比較表HTMLを作る方法
ChatGPTを使えば、HTMLやCSSを一から書けなくても、WordPressで使える比較表を作成できます。
今回の流れをまとめると、次のとおりです。
- 比較する商品・サービスと項目を決める
- ChatGPTに比較表のHTMLとCSSを作ってもらう
- WordPressのカスタムHTMLブロックへ貼り付ける
- 編集画面だけでなくプレビューで表示を確認する
- 崩れや気になる部分をChatGPTに修正してもらう
- PC・スマホ表示、リンク先、掲載情報を最終確認する
実際に試してみると、比較表HTMLそのものは比較的簡単に作れました。
一方で、WordPressテーマのCSSが影響したり、おすすめ表示が見切れたりと、実際に貼り付けてみないと分からない部分もあります。
そのため、ChatGPTで生成 → WordPressでプレビュー → 気になる部分を修正という流れで仕上げていくのがポイントです。
比較表だけでなく、ChatGPTやAIを使ってWordPressの記事作成そのものを効率化したい場合は、Brainでも実践方法をまとめています。
