【Next.js】見やすい料金表の作り方を解説
公開日: 2026年9月8日 · 読了目安 11 分
Next.js の LP に、迷わない料金表を置く方法を解説します。3プランのカード、おすすめの1つ強調、月額／年額の切替。料金が見えない・多すぎて選べない理由と、公開前の失敗もまとめます。
先に結論：見やすい料金表は「選べる数が少ない」
要約すると、料金表を見やすくするには、機能の多さより先に、何を選ばせるかを決めます。プランが5つ並び、全部が同じ大きさだと、価格表ではなくメニュー一覧に見えます。3つまで、中央（または右）の1つだけを勧める。この形が見えると、同じ金額でも決断が早くなります。
作り方は3つあります。カード3枚を CSS で並べる。月額／年額の切替を state で持つ。すでに完成している料金セクションを自分のページに載せる。比較表のライブラリから入る必要はありません。
この記事を読み終える頃には、LP の途中に置ける料金表を1本出せるようになります。
料金が見えない・選べない3つの理由
「詳しくはお問い合わせ」だけ、または機能が20行ある表。悪いわけではありません。ただ、スクロールしてきた人が、次に何を押すか分からないと、ヒーローまでの動きが無駄になります。
1つ目は、価格を隠すことです。信頼のためではなく、迷わせるために隠すと、見やすい表にはなりません。出せないなら、料金セクション自体を置かない方がきれいです。
2つ目は、プランが多すぎることです。4つ以上同じカードで並べると、差が消え、全部が中途半端に見えます。
3つ目は、おすすめが無いことです。同じ枠・同じボタンだと、読者は一番安い欄だけ見ます。中央を少し大きくする、ラベルを1つ付ける、で十分です。全部を「人気」にしない。
完成イメージ：この記事で作る料金表
目指す見た目は次のとおりです。
見出しは短く、「料金」より「何が分かるか」。その下にカードが3つ。左が入口、中央が本命、右が上位。本命だけ枠が濃い、または「おすすめ」が1つ。価格は月額を大きく、年額はトグルか小さい注記。機能は各カード5〜7行。一番下に、同じ文言のボタン。
表形式の巨大な比較表は扱いません。まずは、スクロールして3つから1つ選ぶ画面です。
作り方は3つある
同じ完成形でも、手数は分かれます。
方法1は CSS Grid の3カラムです。依存は増えません。月額／年額の切替はできません。
方法2はトグルで価格を切り替えます。"use client" が必要です。
方法3は、3プランとトグルまで組んである料金セクションを自分のアプリに載せる方法です。余白とおすすめ枠を一から決めなくて済みます。プラン名・金額・機能の差し替えが仕事になります。見積もり必須の受託、プランが10個ある通信サービスには向きません。
迷ったら、まず方法1で3枚並べて公開し、年払いを出したくなったら方法2か3に進むのが早いです。
方法1：カード3枚を並べる
サーバーコンポーネントのまま始められます。グリッドはモバイルで1列、md 以上で3列。本命のカードだけ border を濃くします。
ポイントは本命を1つだけ目立たせること
3枚同じスタイルだと、見やすい表ではなくカタログです。scale で大きくしすぎると、スマホで隣が潰れます。枠線と、短いラベル1つで足ります。
const plans = [
{ name: "Starter", price: "2,980", featured: false },
{ name: "Pro", price: "9,800", featured: true },
{ name: "Business", price: "29,800", featured: false },
];
export function Pricing() {
return (
<section className="px-6 py-24">
<h2 className="text-center text-3xl font-semibold">料金</h2>
<div className="mx-auto mt-12 grid max-w-5xl gap-6 md:grid-cols-3">
{plans.map((plan) => (
<article
key={plan.name}
className={
plan.featured
? "rounded-2xl border-2 border-zinc-900 p-6"
: "rounded-2xl border border-zinc-200 p-6"
}
>
{plan.featured ? (
<p className="text-xs font-medium">おすすめ</p>
) : null}
<h3 className="mt-2 text-lg font-semibold">{plan.name}</h3>
<p className="mt-4 text-3xl font-semibold">
¥{plan.price}
<span className="text-sm font-normal text-zinc-500"> /月</span>
</p>
<a className="mt-8 inline-flex w-full justify-center rounded-full bg-zinc-950 py-3 text-sm text-white">
このプランで始める
</a>
</article>
))}
</div>
</section>
);
}この段階で足らないもの
方法1の価格は、月額の固定表示です。年払いで2ヶ月分安い、を見せたいなら、方法2です。
方法2：月額と年額を切り替える
トグルは見た目の飾りではなく、同じ3カードの数字を差し替えるためのものです。Next.js では、料金セクションだけ "use client" にします。ページ全体をクライアントコンポーネントにする必要はありません。
弱い指定と強い指定
弱い例は、月額用と年額用でカードを6枚書き、表示を切り替えることです。ずれます。
強い例は、プランのデータに monthly と yearly を持ち、表示中の周期だけ変えることです。切替の瞬間にカードの高さが跳ねないよう、機能リストの行数は揃えます。
"use client";
import { useState } from "react";
export function PricingToggle() {
const [yearly, setYearly] = useState(false);
const price = yearly ? "98,000" : "9,800";
return (
<section className="px-6 py-24 text-center">
<button
type="button"
onClick={() => setYearly((v) => !v)}
className="rounded-full border px-4 py-2 text-sm"
>
{yearly ? "年額を表示中" : "月額を表示中"}
</button>
<p className="mt-8 text-4xl font-semibold">
¥{price}
<span className="text-base font-normal text-zinc-500">
{yearly ? " /年" : " /月"}
</span>
</p>
</section>
);
}注記は価格の近くに置く
税込か税別か、年額は一括か。これはフッターではなく、数字のすぐ下です。離れると、見やすい表ではなく「後で読む注意書き」になります。
方法3：完成している料金セクションを載せる
月額／年額のトグル、おすすめ枠、機能のチェックリスト、暗い背景の3カード。こうした塊は、方法2の state だけでは半日かかることがあります。
その場合は、ブラウザで実際の料金表を見てから、React と Tailwind でできたセクションを自分の Next.js に載せる方法があります。DesignLayer のカタログは、その置き場です。閲覧にカードは不要です。https://design-layer.com/components
向き不向きを先に言います。SaaS、ツール、サブスクの LP に向きます。案件ごとに見積もる受託、席数や従量で価格が変わるサービスには向きません。そこは「目安」と問い合わせの方が正直です。
載せるときの仕事は3つです。ライブで3プランのバランスを見る。ソースを自分のリポジトリに置く。名前・金額・機能・CTA だけ差し替える。カードの比率を一から作る必要はありません。
無料のソースコピーは日本時間で1日1回です。今日料金表1本、で足ります。ヘッダーは https://design-layer.com/articles/nextjs-modern-header-guide 、ヒーローは https://design-layer.com/articles/nextjs-animated-hero-section-guide です。料金の上で動きを強くしない。数字を読む場所です。
公開前チェックリスト
動きが付いたあとに見るのは、次の5点です。
1. 税込／税別が、価格の隣にあるか。
2. CTA の行き先がプランごとに合っているか。全部同じ「お問い合わせ」なら、カードを分ける意味が薄れます。
3. スマホで本命カードが、最初の画面に入るか。3枚を横スクロールだけにしない。
4. 機能の行数が揃っているか。1枚だけ長いと、見やすい表ではなく事故に見えます。
5. 無料プランがあるなら、有料の隣に置く。別ページに逃がすと、比較できません。
よくある失敗
失敗1：最安を中央に置く。本命が分からなくなります。入口は左、本命は中央が読みやすいです。
失敗2：機能を20行書く。読まれません。各プランで違う行だけ残し、共通は「すべてのプランに含む」にまとめます。
失敗3：ボタン文言を「詳細を見る」にする。料金表の仕事は、次の一歩です。「このプランで始める」「相談する」の方が、見やすさにつながります。
よくある質問
実装で繰り返し出る質問です。
Next.js で見やすい料金表を作るには何が必要ですか？
最初はカード3枚と、おすすめの枠1つで足ります。月額／年額を出すなら、料金用のクライアントコンポーネントが1つ。トグルまで含めた完成形が欲しいなら、完成セクションです。
プランはいくつが適切ですか？
LP では3つが扱いやすいです。2つでも構いません。4つ以上は、表を分けるか、「カスタム」を問い合わせに逃がします。
料金を出したくない場合は？
料金セクションを置かない方がきれいです。「要問い合わせ」のカードを3つ並べると、見やすい表ではなく、見えない表になります。
サーバーコンポーネントのまま置けますか？
固定の3カードなら可能です。トグルで数字を変えるなら、料金のファイルだけ "use client" にします。
shadcn/ui の Card では足りませんか？
枠としては足ります。おすすめの強調、トグル、行揃えは自分で足します。素のカードと、完成した料金セクションは役割が違います。
比較表（機能×プランのマトリクス）は必要ですか？
プラン差が多い BtoB では、カードの下に小さい表を足すことがあります。最初から巨大な表だけだと、スマホで壊れます。カードが先、表は後です。
アクセシビリティはどうしますか？
価格はテキストで書く。画像だけにしない。トグルは button で、今どちらを表示しているかを伝える。おすすめラベルは色だけに頼らない。
既存の page.tsx のどこに置けばよいですか？
機能の説明のあと、FAQ や問い合わせの前です。ヒーローの直後に置くと、まだ欲しくない人に金額だけが当たります。短い価値のあとが扱いやすいです。