【Next.js】比較表セクションの作り方を解説
公開日: 2026年9月12日 · 読了目安 8 分
Next.js で自社と代替手段の比較表を組む方法。料金表との違い、強調列、モバイルでのカード化、完成セクションの流用。
先に結論：比較表は「自社列」を1つ目立たせる
比較表は料金プラン表とは違います。料金表は自社のプラン同士、比較表は自社と外注・内製・他ツールです。料金表は https://design-layer.com/articles/nextjs-pricing-table-guide です。
自社列だけ背景を変え、チェックの意味をアイコンだけにしない。テキストでも「できる／できない」を残します。
動きはほぼ不要です。列の入場より、数字が読めることが先です。
比較が信用されない3つの理由
1つ目は、他社を不当に低く書くことです。公開できる事実だけです。
2つ目は、行が多すぎることです。6〜8行に絞ります。
3つ目は、スマホで横スクロールだけにすることです。カード化か、重要行だけ残します。
方法1：table で組む
見出し行、自社列、代替2列。scope を付け、キャプションを置きます。装飾は Tailwind で足ります。
方法2：モバイルはカード
md 未満では、プラン（または手段）ごとにカードし、行を定義リストにします。同じ情報を2つの DOM に持つなら、片方は visually 切り替えます。
方法3：完成している比較／料金ブロックを載せる
強調列、チェックのリズム、注釈まで揃った塊は、素の table では出ません。
DesignLayer でライブ確認し、行の文言だけ差し替えてください。https://design-layer.com/components
無料コピーは1日3回です。比較の直後に FAQ を置くと、残った疑問を拾えます。