ブログ用の比較表・ランキング表の作り方
このページは、ブログ記事に載せる比較表とランキング表を無料で作るツールです。★評価・◎○△×・価格・商品画像・公式サイトへのボタンを表に入れられ、スマホでは表を横にスクロールして読めるHTMLを出力します。同じデータのまま、比較表とランキングを切り替えられるのが特徴です。
3ステップで比較表を作る
- 表の種類を選ぶ：「比較表」か「ランキング」を選びます。比較表は、商品を横に並べるか縦に並べるかも選べます。
- 商品と項目を入力する：列に商品名、行に比較する項目を入れます。項目ごとに「テキスト・価格・★評価・◎○△×・画像・ボタン」から種類を選ぶと、入力欄がその種類に合わせて切り替わります。
- デザインを整えてコピーする：テーマカラーやボタンの色を選び、「コピー」を押して記事に貼ります。
ExcelやGoogleスプレッドシートから読み込む
すでに表計算ソフトで比較表を作っている場合は、表の範囲をコピーして「CSVを貼り付けて読み込む」に貼るだけで取り込めます。1行目が商品名、1列目が項目名として読み込まれ、「◎○△×」「★4.5」「〇〇円」「画像のURL」「リンクのURL」は、それぞれ合う種類の項目として自動で判定されます。
作った表は「CSVで保存」でファイルに保存できます。記事を更新するときにCSVを読み込めば、前回の続きから編集できます。
比較表とランキングの使い分け
| 種類 | 向いている記事 | 特徴 |
|---|---|---|
| 比較表 | 「AとBとCの違い」「料金比較」 | 項目ごとの違いがひと目で分かる |
| ランキング | 「おすすめ〇選」「人気ランキング」 | 1位から順に、画像・評価・ボタンを大きく見せられる |
ランキングでは、左の商品から1位・2位・3位になり、上位3つには金・銀・銅の色の順位ラベルが付きます。最初の「画像」項目が商品画像、最初の「★評価」と「価格」が目立つ位置に表示され、そのほかの項目はスペック表にまとまります。
読まれる比較表にするコツ
- 比較する項目は5〜8個程度にしぼり、読者が一番気にする項目（料金・評価など）を上に置きます。
- 一番すすめたい商品は「★」ボタンで「おすすめ」に設定すると、列に色が付いて目立ちます。
- 料金やキャンペーン内容は変わることがあるので、注記に「〇年〇月時点」と書いておくと親切です。
- スマホでは横にスクロールして読むことになります。「横スクロール時に1列目を固定」をオンにすると、項目名が見えたままになります。
アフィリエイトリンクを入れるときの注意
ボタンにアフィリエイトリンクを入れる場合は、「ボタンに rel="sponsored" を付ける」をオンにしてください。Googleは、広告やアフィリエイトのリンクに rel="sponsored" を付けることを推奨しています。また、記事内で広告を含むことが分かるように、PR表記も忘れずに入れましょう。
スマホでの見え方
比較表は横に長くなりやすいため、スマホでは表全体を横にスクロールして読む形になります。プレビューの「スマホ」ボタンで、実際の見え方を確認できます。商品が多い場合は、「商品を縦に並べる」に切り替えるか、ランキング形式にすると、スマホでも読みやすくなります。
ブログへの貼り方
- WordPress：ブロックエディタで「＋」から「カスタムHTML」ブロックを追加して貼り付けます。
- はてなブログ：記事の編集画面で「HTML編集」タブに切り替えて貼り付けます。
よくある質問
- 無料で使えますか？
- はい、すべての機能を無料で使えます。会員登録も必要ありません。
- 商品や項目はいくつまで追加できますか？
- 上限はありません。ただし、スマホで読みやすいのは商品3〜5個程度です。
- 入力した内容は保存されますか？
- このブラウザの中にだけ自動で保存されます。別のパソコンで続きを作りたいときは「CSVで保存」を使ってください。