比較表の作り方

比較表を作る時のポイント

比較表を作る時に大切なポイントは次の3つです！

このポイントを守れば、精度の良い比較表が作れます。

それぞれ解説しますね。

比較項目を3～5つに絞る

比較表を作る際には、項目数を3～5程度に絞るのがオススメです。

あまりにも多くの項目を並べてしまうと、読者は一つひとつの内容を把握しきれず、かえって混乱してしまいます。

特にスマートフォンで閲覧している場合、横に長い表はスクロールが必要になり、全体像がつかみにくくなります。

読者が一目で違いを理解し、自分に合った選択肢を見つけられるようにするには、

• 最も比較されやすい要素
• 判断の決め手になりやすいポイント

を選び抜いて表にするのが理想です。

多くの情報を詰め込むのではなく、「選ぶために必要な情報だけを載せる」ことが、わかりやすい比較表を作る鍵になります。

軸を統一する

比較する際の基準、いわゆる比較軸を統一することも非常に大切です。

たとえば価格を比較する場合、ある商品は月額料金で、別の商品は年間料金で書かれていると、どっちが安いのかすぐに比較できません。

読者に情報をスムーズに受け取ってもらうためにも、同じ条件・同じ表記方法で並べましょう。

また、「◯」「✕」や「あり」「なし」など記号や言葉を統一すると、視覚的にも理解しやすくなります。

このように、項目の意味や表現方法を揃えると、読者が違いを直感的に判断しやすくなり、結果として表全体の信頼感や説得力も高まります。

スマホ表示に最適化させる（横スクロールの活用）

ブログを訪れる読者の多くは、スマートフォンからアクセスしています。そのため、比較表もスマホでも見やすい設計にするのが大切です。

横に長いテーブルや文字が小さすぎる表は、スマホ画面ではスクロールが必要になったり、情報がうまく読み取れなかったりして、離脱の原因になります。

具体的には次のような設定を調整するのが効果的です！

• 横スクロールの設定
• 列幅の指定
• フォントサイズ

スマホ対応のためには、必要に応じて、縦方向に情報を並べる「縦型比較」も検討するとよいでしょう。

比較表の視認性をあげる2つのコツ

比較表は「情報を並べるだけ」では効果的ではありません。

読者がパッと見て違いを理解できるよう、視覚的な工夫を加えましょう。

ここでは、比較表の視認性を高めるための2つの具体的な方法をご紹介します。

アイコンを使う

◯や✕だけでなく、チェックマークや星マーク、機能を表す小さなアイコンを活用することで、情報の伝わり方が一気にスムーズになります。

アイコンはシンプルで見やすいものや配色を選び、全体のデザインに統一感を持たせるとより効果的です。

WordPressテーマに付属しているアイコン機能を使えば、手軽に実装できます。

ロゴ画像やボタンを使う

比較表でサービスや商品を比較するときは、積極的にロゴ画像やボタンを活用していきましょう。

ただ文字でサービス名を載せるよりも、見慣れたロゴがあるだけで「どの会社か」が瞬時に伝わります。

画像を使う際は、表示が重くならないようにサイズを圧縮する、サイズを統一して掲載するといった工夫も忘れずに。

ロゴ画像は公式サイトのスクリーンショットなどを使いましょう。

サイズは120*60くらいで揃えて用意しておくと使いやすいですよ！

バナー画像を活用する

ASPから提供されているバナーを活用するのも、比較表をリッチコンテンツにする1つの手段です。

なぜなら、実施中のキャンペーン特典や割引情報がバナーを通して配信できるからです。

小さなバナー画像やラベルを追加し、視認性と情報を追加し注目を集めましょう。

比較表作成例

良い例

プラン名	月額料金	無料体験	サポート体制	スマホ対応	おすすめ度
	980円	7日間	チャット・電話対応
	1,200円	14日間	メールのみ
	780円	なし	チャットのみ

悪い例

プラン名	価格	体験	サポート	モバイルで使えるか？	どのくらい良いか
Spees	月980円	有り	電話とチャット	たぶんOK	良い
AQUA	1200円/月	14日	メールだけ	○	普通
Blue Waves	￥780	×	チャット	✖︎	微妙

よくある質問

縦型と横型の比較表どっちがいい？

どちらでも大丈夫です。

特にどっちの方が成果につながりやすいとかはありません。

ただし、比較する商品数や項目に合わせて、見やすい方を選択しましょう。

比較項目の選択に迷う。どれがいいでしょうか？

比較項目に悩んだら次の2つで項目を選んでみましょう

• 競合サイトが共通して載せている項目を選ぶ
• AIに最も重要と思われる比較項目を推測してもらう

掲載情報は公式サイトを参照する

比較表に載せる情報は必ず公式情報を元に掲載してください。

「そんなのあたり前」って思った人もいるかと思いますが、コレマジで注意です。

「競合がみんな無料って書いてるから無料だ」って確認せずに載せると、すでにサービス変更で無料じゃなかったりするケースもあるからです。

必ず公式サイトを確認して情報は載せるようにしましょう！

比較表作成後は表示崩れが無いか必ずチェック

比較表を作成したら表示崩れが起きていないかプレビュー画面で確認しましょう。

特にスマホ表示で崩れてないかは要チェックです。

スマホ画面での見え方を確認するには、「Ctrl+Shift+C」でブラウザをスマホ表示に切替えてください。

よく使う比較表はブログパーツ化しておこう！

複数の記事で使えそうだと思う比較表はブログパーツ化しておくと便利です。

SWELLのブログパーツ機能を使えば、瞬時に比較表を呼び出せます。

また、比較内容に変更があった場合にはブログパーツ管理画面から修正すれば、掲載している全ての記事に反映されるのでとても便利なんです。

SWELL以外のテーマをお使いの方はWordPressの「パターン」機能を活用してみましょう。