質問者さん
キタデジさん
質問者さん
キタデジさん
比較表は、同じ項目を横に見比べる必要がある場合に向いています。スマホで無理に縮小せず、比較項目を減らす・目的別に表を分ける・ラベル付きの縦並びにする方法から選びます。どの表示でも、対象名・単位・適用条件が分かることを優先してください。
- 1つの表で答える疑問を決め、異なる目的の情報を詰め込まない。
- 重要な条件は対象の項目の近くに置き、色や記号だけで伝えない。
- スマホの読みやすさと、見出しとデータの関係を両方確認する。
対象は、自社サービスやプランを比較するページを準備している事業者です。以下は編集上の設計提案であり、問い合わせ増加やアクセシビリティ規格への適合を保証するものではありません。情報確認日：2026年10月29日。
まず「何を比べて決める表か」を1文にする
表を作る前に、「訪問サポートとオンラインサポートの利用方法を比べる」など、読者が決めることを1つ書きます。会社紹介、実績、料金、手続きの流れを全部並べると、比較の軸が見つけにくくなります。
各列は同じ種類の対象、各行は同じ条件の項目にそろえます。例えば片方を「電話対応あり」、もう片方を「担当者が丁寧」とすると、対応手段と印象の比較になってしまいます。「連絡手段」という同じ行に、確認できる方法を書きましょう。
比較内容の根拠をAIで整理する場合は、別記事のAIで比較表を作る際の出典・条件の確認手順も参照してください。本記事は、確認済みの内容をどう表示するかに絞ります。
表・分割した表・カードはどう選ぶ？
同じ行を左右に見比べたいなら表、各サービスの内容を順に読みたいならカードを候補にします。項目が多いときは、文字を小さくする前に「利用方法」「サポート」など目的で表を分けられるか検討してください。
- 表：対象間の差を同じ項目で探す。行見出しを短く明確にする。
- 目的別に分けた表：項目は多いが、検討する順序が分かれている。表ごとに目的を付ける。
- カード：対象ごとに説明を読む。項目名を各カードにも付け、掲載内容と順番をそろえる。
W3C WAIのTables Tutorial「Tips and Tricks」は、複雑な表の分割や、画面に合わせて表示を変える際も構造上の関係を保つことを説明しています。単に縦に並べ替えて行見出しを消す方法は避けてください。
条件・単位・未確認をどこに置く？
判断を変える条件は、表の下の小さな文字だけに追いやらず、該当するセルやすぐ近くに書きます。料金なら税込・税別、初期・月額、課金の対象、対象期間を区別します。全対象に共通する条件は表の直前にまとめる方法もあります。
次は表示方法を考えるための架空の比較例です。キタデジのサービス仕様ではありません。費用は比較していません。
| 項目 | 訪問サポート | オンラインサポート |
|---|---|---|
| 対応場所 | 事前合意した事業所 | インターネット接続がある場所 |
| 事前準備 | 相談資料を用意 | 相談資料と接続端末を用意 |
| 対応時間 | 要確認 | 要確認 |
空欄や「―」だけでは、対象外・未調査・追加費用のどれか伝わりません。「対象外」「確認中」「別途見積もり」のように状態を明示します。丸とバツを使うときも、「対応」「非対応」などの文字を添えます。
制作会社には見た目と構造の両方を依頼する
「スマホで見やすく」だけでなく、表の目的、残したい項目、重要条件、想定する表示を渡します。実装は既存のテーマや編集機能に合わせて制作担当者と決めましょう。
HTMLのデータ表は、見出しセルとデータセルの対応が重要です。W3C WAIのTables Tutorialでは、見出しを表すthとデータを表すtdの区別、必要に応じたscope等による関係付けを説明しています。またCaption & Summaryでは、表の目的を識別するcaptionを扱っています。
制作依頼の例（自社の内容に置き換えて使用） 目的：訪問とオンラインの利用条件を比較してもらう 重要項目：対応場所／事前準備／対応時間 注記：「要確認」を空欄や記号に置き換えない 表示：スマホでは項目を消さず、読める文字サイズを保つ 実装確認：表の見出しとデータの対応、表題、拡大時の表示 横スクロールを使う場合：横に動かせる案内と、キーボードでも内容を読める操作を確認したい
横スクロールは、すべての表に必要な機能ではありません。採用する場合は、表の右側が存在することを読者が気付けるか、本文全体まで横にずれないかを実機で確認します。操作が難しい場合は、単純な表への分割を先に検討します。
公開前は同じ質問をPCとスマホで解く
「対応場所はどこか」「準備するものは何か」「未確認の項目は何か」を、表だけで答えられるか確認します。読みやすさは端末幅だけでは決まらないため、文字の拡大と長い日本語が入る場合も試してください。
- 表題と列・行の見出しを読み、比較対象が分かるか見る。
- 右端・長い説明・注記が途中で切れていないか確かめる。
- 縦並びになった表示でも、各値の項目名と条件が残るか見る。
- 元資料と照合し、PCとスマホで異なる内容が残っていないか確認する。
- 更新後も同じ確認を行う担当者を決める。
最初に直す表を1つ選ぶ
まず、相談前によく読んでもらいたいページの表を1つ選び、比較の目的と読み落としたくない条件を書き出しましょう。表の項目整理やホームページの表示改善を相談したい方は、対象ページと気になる端末の状態を添えてキタデジのWeb制作・改善について問い合わせることができます。
ホームページの比較表についてよくある質問
比較表は画像にしてはいけませんか？
画像が必要な場面もありますが、重要な比較内容は本文でも読めるようにします。画像だけでは文字の拡大や更新が難しい場合があるため、表や説明文のHTMLテキストを用意してください。
スマホでは必ずカード表示にしますか？
必ずカードにする必要はありません。左右の差を比べる用途なら、項目を絞った表や目的別の表を先に検討します。カードにするときも、各値の項目名と条件を残します。
横スクロールにすれば確認は終わりですか？
横スクロールを付けた後も確認が必要です。右側の存在が伝わるか、全項目を読めるか、キーボードでも扱えるかを確認します。難しい場合は表を単純にする方法を検討してください。
未確認の欄は空白でよいですか？
未確認の欄は「要確認」など状態が分かる文字にします。空白は対象外や記載漏れとの区別が付きにくく、比較結果を誤解させるためです。
表を作り直すと検索順位は上がりますか？
表の変更だけで検索順位が上がるとはいえません。読者が条件を理解できるかを先に確かめ、公開後は検索流入や相談に関する既存の計測を、十分な期間で見直します。
福岡県出身、大学生時代からWEBデザインのフリーランスとして活動。
卒業後、WEBデザイン・コンサルティング会社で経験を積み、2013年に独立し「goap」を設立。
WEBデザインやマーケティング、コンサルティング業務を展開し、WEBサイトがホームページ大賞で最優秀賞を受賞。
2023年にAI・メタバース事業を追加した株式会社goapを設立。
現在まで300社以上のWEBサイトのデザイン・ディレクション・システム構築に携わらせていただきました。
Web制作・マーケティング業界のプロがお客様の悩みに寄り添って丁寧にヒアリングしますので、初心者の方でも安心してご相談ください！
Categories
株式会社goap 代表取締役 相牟田 昂大
福岡県出身、大学生時代からWEBデザインのフリーランスとして活動。 卒業後、WEBデザイン・コンサルティング会社で経験を積み、2013年に独立し「goap」を設立。 WEBデザインやマーケティング、コンサルティング業務を展開し、WEBサイトがホームページ大賞で最優秀賞を受賞。 2023年にAI・メタバース事業を追加した株式会社goapを設立。 現在まで<strong>300社以上</strong>のWEBサイトのデザイン・ディレクション・システム構築に携わらせていただきました。 Web制作・マーケティング業界のプロがお客様の悩みに寄り添って丁寧にヒアリングしますので、初心者の方でも<strong>安心してご相談ください！</strong>
