- 投稿日：2026/02/25
- 更新日：2026/02/25
「ブログに比較表を入れた方がクリックされやすいの？」
「スマホで見た時に縦横スクロールしない比較表を作りたい」
どうやって比較表を作ったらいいか分からないブロガーのあなた！
お待たせしましたー！
この記事では、こだわって作った比較表を入れることで、やっとこさ6桁ブロガーになれた私が、コピペするだけで簡単に作れる比較表の魔法のプロンプトを紹介します。
↓こんな比較表をブログに入れることができるようになります！
比較表をチャッピーと作ったけど喧嘩してできなかったそこのあなた！
ぜひ最後まで読んでみてください。
（きっとブロガーのマニアックな方しか読まないと思うので、、、いいね頂けると嬉しいです）
※これ読んでもお手上げの方がいらっしゃったら、比較表のスキルマーケット検討します😁
こちらもよかったら読んでください！
ブログで6桁稼ぐ7つのコツ ブロガー歴20年でも0円だった私が月15万稼いだ方法
なんで比較表が必要なの？
ブログで商品を紹介する記事を書くとき、必ず出てくるのが「比較」です。
文章だけでも説明はできますが、読者の本音はシンプルです。
・間違いたくない
・損したくない
・後悔したくない
だからこそ比較表があると、
・違いが一瞬で分かる
・情報を全部見た気になれる
・自分で選んだ感が出て安心して申し込める
ようになります。
ボタン一つだと「買う？買わない？」と悩みますが、
比較表があると「どれにしようかな」と選ぶモードに切り替わり、自然にボタンを押しやすくなります。
今回は、そんな比較記事に欠かせない
スマホでも横スクロールにならない見やすい比較表が作れる！
HTML＋CSSのコピペで作る方法を紹介します。
① まず最初にCSSを貼ります
この比較表は、最初にCSSを1回貼れば、その後はずっと使い回せます。
⚠ CSSは慎重に扱いましょう
CSSはサイト全体のデザインに影響する部分です。
コピペで使えるように作っていますが、
・貼る場所を間違えない
・既存のCSSを消さない
・エラーが出たらすぐ保存しない
この3つは守ってください。
もしエラーが出たら、
慌てずにChatGPTに
「このCSSでエラーが出ました」
と、そのままコードを貼って相談しましょう！
WordPressの場合
管理画面 → 外観
カスタマイズ
追加CSS
ここに下のCSSをそのまま貼って保存してください。
↓ここから
.cmp-name{font-size:12px;}
.cmp-btn{
display:inline-block;
padding:10px 12px;
border-radius:8px;
background:#06C755;
color:#fff;
font-size:13px;
font-weight:700;
text-decoration:none;
text-align:center;
box-shadow:0 3px 0 rgba(0,0,0,.1);
transition:background .2s ease;
}
.cmp-btn:hover{background:#05b34c;}
.cmp-btn:active{background:#049a42;}
.cmp-table{
width:100%;
table-layout:fixed;
border-collapse:collapse;
font-size:15px;
background:#fff;
}
.cmp-table th,
.cmp-table td{
border:1px solid #ccc;
padding:10px;
white-space:normal;
word-break:break-word;
overflow-wrap:anywhere;
vertical-align:top;
}
.cmp-table tbody td:first-child{
background:rgba(0,169,165,.05);
color:#006f6c;
font-weight:bold;
width:8em;
}
.cmp-table td.center{
text-align:center;
vertical-align:middle;
}
.cmp-table .cmp-btn{
display:block;
width:100%;
box-sizing:border-box;
}
@media(max-width:768px){
.cmp-table{font-size:9px;}
.cmp-table th,
.cmp-table td{padding:8px 6px;}
.cmp-table .cmp-btn{font-size:10px;padding:9px 10px;}
.cmp-table tbody td:first-child{width:7em;}
}
↑ここまで
② HTMLを記事本文に貼ります
次に、記事本文の「カスタムHTMLブロック」にこれから作成するHTMLを貼ります。
HTMLは毎回少しだけ変更しますが、
CSSは基本ずっと同じでOKです。
③ バナー（アフィリエイトリンク）の入れ方
比較表のロゴ部分は、自分で画像を作成するのがおすすめですが、ここでは簡単な方法をお伝えします。
ASP（A8など）で取得した
アフィリエイトのバナーコードをそのままコピーして、チャッピーにこれが私のA社のアフィリエイトだよと貼り付ける
で大丈夫です。
・表のロゴ位置に入れる
・サイズ調整する
・クリックできるようにする
ところまで自動で整えてくれます。
つまり、
👉 バナーコード取得
👉 HTMLテンプレと一緒にチャッピーに貼る
👉 完成HTMLが返ってくる
でOKです。
※バナーコードは後から追加するより、最初にまとめて渡す方がズレや計測漏れを防げます。
※なるべく小さめのバナーを選んでください。
④ 比較表の内容はどうやって作ってるの？（私のやり方）
比較表の中身は、まずはAIで作って後から自分でも確認します。
私は次の流れで作っています。
① 各商品の公式サイトURLを集める
比較したい商品の公式サイトのURLを用意します。
② NotebookLMにURLを読み込ませる
次に、NotebookLMにそのURLを読み込ませて、
「この商品を比較表にまとめて」
「料金・特徴・違いを整理して」
と指示します。
すると、
・料金
・特徴
・違い
などを整理したテキストを作ってくれます。
③ その文章をチャッピーに貼る
NotebookLMが作った比較内容を、今度はチャッピーに貼って
「この内容で比較表でHTMLを作って」
「このCSSに合う形で作って」
とお願いすればOKです。
つまり、
👉 公式URLを集める
👉 NotebookLMで内容整理
👉 チャッピーでHTML化
この流れにすると、比較表がかなり楽に作れます。
⑤ 比較表を作るときのプロンプト例（バナーコード込み）
比較表は、テンプレートHTML・CSS・バナーコードをまとめてチャッピーに渡すと、ほぼコピペだけで完成します。
魔法のプロンプト（コピペOK）
比較表を作りたいです。
下のCSSを使う前提で、
このHTMLテンプレートの構造を崩さずに、
内容だけ書き換えて比較表を作ってください。
【CSS】
.cmp-name{font-size:12px;}
.cmp-btn{
display:inline-block;
padding:10px 12px;
border-radius:8px;
background:#06C755;
color:#fff;
font-size:13px;
font-weight:700;
text-decoration:none;
text-align:center;
box-shadow:0 3px 0 rgba(0,0,0,.1);
transition:background .2s ease;
}
.cmp-btn:hover{background:#05b34c;}
.cmp-btn:active{background:#049a42;}
.cmp-table{
width:100%;
table-layout:fixed;
border-collapse:collapse;
font-size:15px;
background:#fff;
}
.cmp-table th,
.cmp-table td{
border:1px solid #ccc;
padding:10px;
white-space:normal;
word-break:break-word;
overflow-wrap:anywhere;
vertical-align:top;
}
.cmp-table tbody td:first-child{
background:rgba(0,169,165,.05);
color:#006f6c;
font-weight:bold;
width:8em;
}
.cmp-table td.center{
text-align:center;
vertical-align:middle;
}
.cmp-table .cmp-btn{
display:block;
width:100%;
box-sizing:border-box;
}
@media(max-width:768px){
.cmp-table{font-size:9px;}
.cmp-table th,
.cmp-table td{padding:8px 6px;}
.cmp-table .cmp-btn{font-size:10px;padding:9px 10px;}
.cmp-table tbody td:first-child{width:7em;}
}
【HTMLテンプレート】
<!-- 比較表テンプレ（公開用・汎用クラス） -->
<div style="margin-bottom: 30px;">
<table class="cmp-table">
<thead>
<tr>
<th> </th>
<!-- サービスA -->
<th style="text-align:center; vertical-align:top;">
<div style="height:90px; display:flex; align-items:center; justify-content:center;">
<a href="#" target="_blank" rel="nofollow noopener">
<img src="sample-logo.png"
alt="サービスA"
style="width:90px; height:auto; display:block;">
</a>
</div>
<div class="cmp-name">
<a href="#" rel="nofollow">サービスA</a>
</div>
</th>
<!-- サービスB -->
<th style="text-align:center; vertical-align:top;">
<div style="height:90px; display:flex; align-items:center; justify-content:center;">
<a href="#" target="_blank" rel="nofollow noopener">
<img src="sample-logo.png"
alt="サービスB"
style="width:90px; height:auto; display:block;">
</a>
</div>
<div class="cmp-name">
<a href="#" rel="nofollow">サービスB</a>
</div>
</th>
<!-- サービスC -->
<th style="text-align:center; vertical-align:top;">
<div style="height:90px; display:flex; align-items:center; justify-content:center;">
<a href="#" target="_blank" rel="nofollow noopener">
<img src="sample-logo.png"
alt="サービスC"
style="width:90px; height:auto; display:block;">
</a>
</div>
<div class="cmp-name">
<a href="#" rel="nofollow">サービスC</a>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>手数料</td>
<td class="center">○%〜</td>
<td class="center">○%〜</td>
<td class="center">○%</td>
</tr>
<tr>
<td>費用</td>
<td class="center">0円</td>
<td class="center">0円</td>
<td class="center">0円</td>
</tr>
<tr>
<td>特徴</td>
<td class="center">特徴を書く</td>
<td class="center">特徴を書く</td>
<td class="center">特徴を書く</td>
</tr>
<tr>
<td> </td>
<td class="center">
<a href="#" class="cmp-btn" rel="nofollow" target="_blank">公式サイト</a>
</td>
<td class="center">
<a href="#" class="cmp-btn" rel="nofollow" target="_blank">公式サイト</a>
</td>
<td class="center">
<a href="#" class="cmp-btn" rel="nofollow" target="_blank">公式サイト</a>
</td>
</tr>
</tbody>
</table>
</div>
【バナーコード】
（ここにASPから取得したアフィリエイトバナーコードをそのまま貼る）
※1px画像も削除せずそのまま入れてください
【比較内容】
（NotebookLMで整理した料金・特徴などを貼る）
条件：
・スマホで横スクロールしないようにする
・文字量は詰め込みすぎない
・改行位置を見やすく調整する
・ロゴ位置にバナーコードを入れる
・完成したHTMLのみ出力する（説明文なし）
⑥ 表の中の文字を一部分だけ小さくする方法（CSS不要）
比較表を作っていると、
・補足説明だけ小さくしたい
・注意書きを控えめにしたい
・「※条件あり」だけ目立たせたくない
こんな場面が出てきます。
その場合は、小さくしたい文字を span で囲むだけです。
書き方
<td>
最大2個 <span style="font-size:12px; color:#777;">（条件あり）</span>
</td>
これだけで、
👉 指定部分だけ小さく表示
👉 CSS追加なし
👉 スマホでも崩れない
初心者の方は、この方法が一番かんたんです。
他にも中央に寄せたり、色を変えたりと色々できます。
こだわると沼です。
⑦ この比較表がスマホでもスクロールしない理由
この比較表は、
・列数を増やしすぎない（4列もできましたが、選択肢は3つぐらいが良いと思います）
・文字を詰め込みすぎない
・CSSで幅を自動調整
という設計にしているため、
✔ 横スクロールなし
✔ 1画面で比較できる
ようになっています。
スマホ読者はスクロールが増えるほど離脱しやすいので、
「1画面で比較できる」だけでクリック率はかなり変わります。
まとめ
・比較表があると読者は安心して選べる
・CSSは最初に1回貼れば使い回せる
・HTMLは文字だけ変更すればOK
・バナーはアフィリエイトコードをそのまま貼ってOK
・内容整理はNotebookLM → HTML化はチャッピーが楽
・文字サイズは span で部分調整できる（CSS不要）
どうしても比較表の中の言葉を長く書いてしまいたくなりますが、できるだけシンプルにするのがポイントです。
プレビューをすると「あれ？シンプルすぎない？」と思うかもしれませんが、ブラウザで表示すると良い感じにできてると思います。
比較表が作れるようになると、
サーバー記事・商品レビュー・おすすめ記事など、
ブログの説得力が一段上がります。
私は、リード文の下やまとめの下にも比較表をつけてます。
ぜひあなたの記事にも取り入れてみてください。
もっと比較表こうしたらいいよ！とかありましたら教えていただけると嬉しいです！
