比較表のデザインテンプレート16選｜見やすい作り方と例
LPに比較表を入れたいけれど、どの項目を並べればよいのか、縦と横のどちらに並べるのか、スマホでどう見せるのかで手が止まっていませんか。比較表は、作り方しだいで読みやすさが大きく変わります。
この記事では、比較表とは何かと、見やすい比較表の作り方5ステップ、よくある失敗3つをまとめたうえで、Squad beyondで使える比較表のデザインテンプレート（Widget）16選を紹介します。
｜広告運用ノウハウ公開中！
今回教えてくれたのは
目次
Shihori Nakaide
- BizOps チーム
- Assistant Manager
2021年2月よりSIVAにJoinし、 CXチームで活動。ユーザーからのお問い合わせの解決やチームリーダーとしての役割・ユーザーに合わせた機能活用の提案・コミュニティの運営・オフ会の実施などを務めており、大手広告代理店の動向に関する知識を豊富に持っている。
目次
| 01 | 比較表とは？比較表のデザインが人気な理由 |
| 02 | 見やすい比較表の作り方と、よくある失敗 |
| 03 | テンプレートデザインを使えば、時間短縮に |
| 04 | 比較表のデザイン 16選 |
| 05 | FAQ |
| 06 | まとめ |
＼LPの制作から検証まで、ひとつの画面で／
- ・10日間、有料プランの機能を無料でお試しいただけます
- ・LP制作からA/Bテスト、効果測定までワンストップ
01｜比較表とは？比較表のデザインが人気な理由
比較表とは、複数の商品やサービス、プランを、同じ項目で並べて違いを見比べられるようにした表です。LPでは、自社のプランどうしを比べる表や、他社の商品と比べる表としてよく使われています。比較表のデザインがLPで人気なのは、次の2つの理由からです。
- 読者が一目で 情報の整理をできるから
比較表のデザインを利用することで、複数のサービスの特徴を整理することができます。テキストだけではなく、記号や装飾を使用することで情報の視認性を簡単に高めることができます。
- 読者の論理的な整理を手助けするから
他サービスと比較し、意思決定のサポートに役立ちます。類似点や相違点を明確に示すことで、異なる選択肢を比較し、利点や欠点を元に読者が最適な選択を行いやすくなります。
02｜見やすい比較表の作り方と、よくある失敗
比較表は、読者が「どれを選べばよいか」を決めるための表です。見やすい比較表は、次の5つのステップで作れます。
- ステップ1：読者が決めたいことを1つに絞る
「どのプランを選ぶか」「他社と比べて自社を選ぶか」など、表を見たあとに読者が決めることを先に決めます。決めたいことが複数あると項目が増え、どこを見ればよいかが分かりにくくなります。
- ステップ2：比べる項目を、判断に使う順に並べる
価格、できること、サポート、契約の条件など、読者が判断に使う項目を上から順に並べます。どの商品でも同じ内容になる項目は、表から外すと違いが目立ちます。
- ステップ3：縦と横を決める
基本は、比べる対象（商品やプラン）を横に並べて列にし、比べる項目を縦に並べて行にします。読者は1つの行の中で左右を見比べることになり、同じ項目の違いが一目で分かります。スマホで見る人が多いLPでは、比べる対象が多いと表が横にはみ出すため、対象を絞るか、タブで表を切り替える形にします。4章でも、タブで表を切り替えるWidgetを紹介しています。
- ステップ4：記号と色で違いを見せる
文章で書くより、○・△・×などの記号や、おすすめの列の色を変える装飾で示すほうが、違いを読み取りやすくなります。記号を使うときは、それぞれの意味を表の下に書き添えます。
- ステップ5：見出しのセルを、表の見出しとして作る
HTMLで比較表を作るときは、見出しのセルを<th>、データのセルを<td>で作ります。W3Cの表のチュートリアルは、支援技術がこの情報を使って利用者に表の文脈を伝えるとしており、表の全体のテーマを示すキャプションも、たいていの場面で役立つとしています（出典：Tables Tutorial｜W3C WAI）。
- 失敗例1：比べる対象を増やしすぎると、スマホで表が横にはみ出して読まれない
- 症状：パソコンで見やすく作った比較表をスマホで開くと、列が画面からはみ出し、横にスクロールしないと比べられなくなる。
- 原因：比べる対象を全部並べたまま、スマホの画面の幅で確かめていません。
- 対策：比べる対象を、読者が迷いやすいものに絞ります。どうしても多い場合は、タブで表を切り替える形にします。
- 回避策：公開前に、スマホのプレビューで表の端まで読めるかを確認する項目をチェックリストに入れます。
- 失敗例2：根拠のない数字や不公平な比べ方をすると、景品表示法の不当表示になるおそれがある
- 症状：他社の商品と比べる表で、自社に有利な数字や「No.1」を並べたところ、その根拠を説明できなくなる。
- 原因：消費者庁は、比較広告が不当表示にならないためには、主張する内容が客観的に実証されていること、実証されている数値や事実を正確かつ適正に引用すること、比較の方法が公正であることの3つをすべて満たす必要があるとしています（出典：比較広告｜消費者庁）。この要件を確かめないまま表を作っています。
- 対策：他社と比べる項目は、実証できる事実と、その出典がある数字だけにします。調査結果を引用する場合は、調査機関や調査時点なども表示します。
- 回避策：他社と比べる比較表は、公開前に法務の確認を通す流れにしておきます。
- 失敗例3：記号の意味を書かないと、△が何を示すのか読者に伝わらない
- 症状：○・△・×で埋めた比較表を載せたところ、「△は使えるのか使えないのか」という問い合わせが届く。
- 原因：記号の意味を表の中にも外にも書いていません。
- 対策：表の下に「○：標準で使える／△：有料オプション」のように、記号ごとの意味を書き添えます。
- 回避策：△のように意味が分かれやすい記号は、短い文字（「有料」「一部」など）に置き換えることも検討します。
03｜テンプレートデザインを使えば、時間短縮に
| 1 | Squad beyondの管理画面にログインし、beyondページを作成 |
| 2 | Widget管理をクリックし、カテゴリーや検索でお好きなWidgetを追加 |
| 3 | テキストを変更したり、色やサイズを調整して完成 |
Squad beyondでは、「Widget」というLP制作パーツを提供しており、これらを組み合わせることで簡単にLPを作成することができます。特に比較表のデザインを再現する際には、従来は専門知識が必要で制作が困難でしたが、今では「Widget」を活用することで、誰でも素早く簡単に制作することができます。LPを効率的に量産し、コンバージョン率の向上を目指しましょう。
▼ 参考記事
＼LPの制作から検証まで、ひとつの画面で／
- ・10日間、有料プランの機能を無料でお試しいただけます
- ・LP制作からA/Bテスト、効果測定までワンストップ
04｜比較表のデザイン 16選
どの商材でも応用できる万能デザイン
比較表（ランキング有）
/ Widget名
どの商材でも応用できる万能デザイン
ランキングを入れた比較表、左見出し無し
/ Widget名
どの商材でも応用できる万能デザイン
ソート可能な表※要javascript
/ Widget名
どの商材でも応用できる万能デザイン
表 - 評価スターあり・画面幅によりスライド
/ Widget名
どの商材でも応用できる万能デザイン
比較表-絞り込み・並べ替え機能つき ※要JavaScript
/ Widget名
どの商材でも応用できる万能デザイン
カルーセル（チケット風デザイン）※要javascript
/ Widget名
どの商材でも応用できる 万能デザイン
比較表
/ Widget名
BtoB・SaaSサービスでよく見かける
料金比較表 - 横並び
/ Widget名
美容商材にオススメ！
一瞬で複数の選択肢を見せられる
公式とその他価格比較
/ Widget名
美容商材にオススメ！
一瞬で複数の選択肢を見せられる
比較表（列を強調、画面幅にフィット）
/ Widget名
美容商材にオススメ！
一瞬で複数の選択肢を見せられる
ヘッダー固定比較表（3列）
/ Widget名
美容商材にオススメ！
一瞬で複数の選択肢を見せられる
ランキングを入れた比較表
/ Widget名
美容商材にオススメ！
一瞬で複数の選択肢を見せられる
ヘッダー固定比較表2（3列）
/ Widget名
美容商材にオススメ！
一瞬で複数の選択肢を見せられる
ランキング(スクロールで上部固定)
/ Widget名
美容商材にオススメ！
クチコミ付きで信頼度up
タブメニューで商品ランキング※要javascript
/ Widget名
新規ユーザーの
アプリインストールと相性 ◎
アプリ比較表 タブで表を切り替え ※要Javascript
/ Widget名
05｜比較表のデザインについてよくある質問（FAQ）
Q. 比較表とは何ですか？
A.複数の商品やサービス、プランを、同じ項目で並べて違いを見比べられるようにした表です。価格やできること、サポートの内容などを横並びにすることで、文章で読み比べるより早く違いをつかめます。LPでは、自社のプランどうしを比べる表や、他社の商品と比べる表としてよく使われます。他社と比べる場合は、消費者庁が示す比較広告の3つの要件を満たしているかを確認しましょう。
Q. 比較表は縦と横、どちらに並べればよいですか？
A.基本は、比べる対象（商品やプラン）を横に並べて列にし、比べる項目を縦に並べて行にします。読者は1つの行の中で左右を見比べることになり、同じ項目の違いが一目で分かります。ただし、スマホで見る人が多いLPでは、対象が多いと表が横にはみ出します。その場合は、対象を絞るか、タブで表を切り替える形にすると読みやすくなります。
Q. ランディングページ（LP）に比較表を入れると、どのような効果が期待できますか？
A.テキストだけでなく視覚的に複数のサービスの違いや特徴を整理できるため、読者が違いを比べて選ぶ判断を助けます。ただし、比較表を入れればコンバージョン率が上がるとは限らず、商材やLPの内容によって結果は変わります。Squad beyondでは、比較表のある版とない版を複数のVersionとして用意し、同じ配信URLのまま配信割合を決めて出し分けられるので、レポートで成果を比べてから残す版を決められます（出典：Versionの配信割合について｜Squad beyond FAQ）。
Q. 比較表をスマートフォンで綺麗に表示させるにはどうすればいいですか？
A.スマホの画面幅に合わせて表示が変わるレスポンシブ対応のテンプレートを使うか、比べる対象が多い場合は横スクロールやタブで切り替えられる形にすると、表が画面からはみ出しにくくなります。公開前に、スマホのプレビューで表の端まで読めるかを確かめておきましょう。
Q. 複雑な比較表を作るには、やはりプログラミングなどの専門知識が必要ですか？
A.いいえ、必ずしも専門知識は必要ありません。Squad beyondなどの専用のLP制作ツールやテンプレートを利用すれば、HTMLやCSSの知識がなくても、テキストの変更や色の調整など直感的な操作だけで、見た目の整った比較表を作成できます。
Q. LP制作や分析、テストなどに複数のツールを導入すると、コストが高くなりそうで心配です。費用を抑える方法はありますか？
A.まず、LPの制作・ABテスト・効果測定・レポートに、それぞれどのツールやサーバーを契約しているかを洗い出し、同じ役割の契約が重なっていないかを確かめます。そのうえで、まとめて使えるツールの料金と今の契約の合計を比べて判断するのが確実です。Squad beyondは、LPの制作からABテスト、効果測定までを1つの画面で行えるツールで、10日間、有料プランの機能を無料で試せます。
＼LPの制作から検証まで、ひとつの画面で／
- ・10日間、有料プランの機能を無料でお試しいただけます
- ・LP制作からA/Bテスト、効果測定までワンストップ
06｜まとめ
比較表は、ユーザーに素早く選択肢を提示し、比較検討を促す便利なデザインです。読者が決めたいことを1つに絞り、判断に使う項目を順に並べ、対象を列・項目を行にして、記号の意味まで書き添えると見やすくなります。比較表Widgetを活用することで、従来のコーディングに費やしていた時間を短縮できますので、積極的にご利用ください！修正方法を相談したい場合は、 https://service.squadbeyond.com/voice/よりお尋ね下さい。
Squad beyondサービス紹介資料は こちらからダウンロード
▼関連記事
- デザイン紹介 - クチコミ｜説得力のある文言を視覚で表現する
- デザイン紹介 - 診断｜LP内で個別の体験を提供する
- Widgetマスターへの第一歩｜修正相談・新規作成依頼の手順まとめ
- 【ユーザーインタビュー】WordPressの4倍速で記事制作を
Squad beyondのご利用には、アカウント開設が必要です。
お好きな時間を選んで、どんなことでもお気軽にご相談ください。
（商談の設定、お見積もり依頼、サービスの簡単な説明 など）
