MeDo

AI料金表ジェネレーター。

プランを記述し、あとはAIにお任せください。プラン名や機能リストから切り替えスイッチやおすすめプランのハイライトまで — 生成されてすぐに公開可能です。

料金表
料金表

料金表は購入者が決定する前に最後に読むものです

料金表は単に価格を並べるだけではありません。価値を示し、反論に対処し、訪問者を適切なプランへ導きます。雑然とした分かりにくい料金セクションは決定麻痺を引き起こし、見込み客を遠ざけます。レイアウト、階層、コピーを正しく仕上げることは、あらゆるSaaSやプロダクトサイトがコンバージョン率に対して行える最もインパクトの大きい改善のひとつです。

6 個のテンプレート

生成できる 料金表 テンプレート

どのテンプレートもスクリーンショットではなく実際のプロンプトです。任意の AI エディタに貼り付けるか、MeDo で実行して React + Tailwind のコードを受け取れます。

Three tierAcme

Three Cards With a Highlighted Plan

The default for a reason — three prices in one row is the most comparison a visitor will do without scrolling. It fails when all three cards look equal, because then the buyer has to decide instead of being told.

Create a three-tier pricing section with Starter, Growth and Scale as equal-width cards in one row. Raise the Growth card, give it a ring border and a Most Popular badge. Above the cards, a segmented monthly/yearly toggle that swaps the price figure in place and reveals a two-months-free chip when yearly is active; hold the card height constant so nothing reflows on switch. Each card carries a plan name, a one-line note on who it is for, the price with its per-seat per-month unit, a primary button, and six feature rows listed in the same order in every card so the eye can compare across instead of reading down. Collapse to one column on mobile with the highlighted plan first.

MeDoで試す
Comparison gridMega

Full Feature Comparison Matrix

For products where the upgrade reason is a specific limit rather than a vibe. The horizontal scroll on mobile is what kills these — render one plan per accordion instead.

Create a pricing comparison matrix: a header row of four plan columns and a left column of feature names grouped into labelled sections such as Core, Collaboration, Security and Support. Use a filled check for included, an em dash for absent, and a short value string wherever a plan has a numeric limit rather than a boolean. Pin the header row so plan names and CTAs stay visible while the reader scrolls the feature list, and highlight the recommended column its full height. Zebra-stripe rows to keep the eye on one line. On mobile, drop the matrix entirely and render one plan per collapsible panel rather than putting a wide table in a horizontal scroller.

MeDoで試す
Single planShipfast

One Plan, One Price Card

When there is nothing to compare, a row of three cards is theatre. One card removes the decision and makes the feature list read as a promise rather than a diff.

Create a single-plan pricing section: one centred card with a max width of about 32rem holding the plan name, a large price figure, a monthly/yearly toggle inside the card, and an everything-included feature list laid out in two columns so the card stays short enough to read without scrolling. Add a primary Get started button, a muted no-credit-card-required line directly beneath it, and a small text link to contact sales for volume pricing. Above the card, one headline naming exactly who the plan is for. Stack the feature columns and keep the toggle full-width on mobile.

MeDoで試す
Usage basedMeter

Volume Slider With a Live Total

Metered pricing only lands if the buyer can find their own number on it. A slider that recomputes the total as it moves answers the real question — what will this cost me — without a spreadsheet.

Create a usage-based pricing section: a range slider for monthly volume with tick labels at the tier boundaries, a live total that recomputes the price and the effective unit rate as the handle moves, and a plan name that changes as the volume crosses each threshold. Below the slider, a fixed list of what is included at every tier and one line on what happens on overage. Add a primary CTA plus a secondary Talk to sales link for volumes past the top of the range. Announce the computed total in an aria-live region and support arrow-key stepping, so keyboard and screen-reader users get the same feedback as a mouse drag.

MeDoで試す
Enterprise rowLedger

Two Self-Serve Cards Plus a Contact Band

Puts the no-price plan outside the card row, where it stops competing on price. An Enterprise card sitting next to two real numbers just reads as the expensive one.

Create a pricing section with two self-serve cards, Pro and Team, side by side with Team highlighted, followed by a full-width enterprise band beneath them. The band gets a tinted surface, a short heading, three inline value points covering SSO, audit logs and a named contact, and a Contact sales button where a price would be — so it never reads as a third card competing on price. Each card shows a monthly and yearly price with a per-seat unit, five feature rows in matching order, and a primary button. Stack all three blocks vertically on mobile with the band last.

MeDoで試す
Audience tabsSegment

Audience Tabs Over Shared Tiers

One pricing page serving individuals, teams and education without three URLs. Worth it only if the plans genuinely differ per audience — otherwise you have added a click to reach the same table.

Create a pricing section with audience tabs above the cards — Individuals, Teams and Education — where switching a tab swaps in a different set of plan names, prices and feature lists rather than filtering rows in place. Keep the monthly/yearly toggle on the same bar as the tabs so the two controls read as one control group, and preserve the toggle state across tab switches. Use real tab semantics with a tablist, arrow-key navigation and managed focus, and reflect the active tab in the URL so a link can point straight at the Teams view. Highlight exactly one plan inside each tab.

MeDoで試す

料金表 をカスタマイズする方法

おすすめプランを必ずハイライトする

選択肢の多さはコンバージョンを下げます。「最も人気」や「ベストバリュー」としてひとつのプランを色付きボーダー、浮き上がったカード、バッジで視覚的にハイライトすることで認知負荷を軽減し、ほとんどのお客様に最適なプラン（通常は中間プラン）へ訪問者を誘導します。

請求切り替えで年間割引を表示する

月額/年額トグルに割引率を明示（例：「年額で20%お得」）することで、価格を隠すことなく年間プランの選択率を高めます。トグルをカードの上に目立つように配置し、デフォルトを年額にして知覚される価値を高く固定します。

機能行はスキャンしやすく、網羅的にしすぎない

各プラン列をバイヤーペルソナにとって最も重要な6-8行の機能に限定します。未対応機能には行を省略するのではなく、チェックマークとXマーク（またはグレーテキスト）を使用しましょう。視覚的な比較がアップグレード意欲を喚起します。

各CTAボタンにマイクロコミットメント軽減策を添える

「クレジットカード不要」「いつでもキャンセル可能」「14日間無料トライアル」などの短いフレーズをプライマリCTAボタンの直下に配置することで、登録クリック前の最後の躊躇に対処します。ターゲット層が最も感じやすいリスクに合わせてメッセージを調整してください。

料金表 コンポーネントを使うのは誰か

SaaS製品サイト

SaaS料金表は通常3つのプラン、月額/年額トグル、ハイライトされた中間プラン、機能比較行、無料トライアルCTAを含みます。これはサブスクリプションソフトウェアのデファクトスタンダードとなったフォーマットです。

APIまたは開発者ツール

開発者ツールの料金表は、定額プランと並んで従量制プランを含むことが多く、プランごとのリクエスト上限やシート数を表示し、個人開発者の参入障壁を下げるために目立つ無料またはオープンソースオプションを設けています。

エージェンシーまたはサービス事業

サービス事業者は料金表を使って成果物を固定スコープのプランにパッケージ化します。例えばStarter / Professional / Customとし、パッケージごとに含まれるサービスを明確にリスト化し、最上位プランには「相談を予約」CTAを配置します。

Eラーニングまたは会員制プラットフォーム

コンテンツ・会員制サイトは料金表を使って無料アクセスとプレミアムコンテンツを分け、多くの場合シングルのアップグレードCTAとソーシャルプルーフ（会員数やテスティモニアル）をテーブルカード内に直接埋め込んでいます。

サイト種別ごとの 料金表 パターン

同じ 料金表 コンポーネントを、掲載するサイトの種類に合わせて調整します。

01 / 06

SaaS Pricing Table

Three tiers, a yearly toggle, a highlighted middle plan and identical feature ordering across columns. The ordering is the part teams skip — if row four means something different in each card, the buyer cannot compare across and falls back to picking the cheapest.

料金表 のスタイルとバリアント

ページ全体のトーンに合うバリアントを選び、そのまま生成します。

01 / 06

Highlighted Card Row

Three cards, one elevated with a ring and a badge. The elevation is doing real work: choice overload is the failure mode of a pricing section, and a visually recommended plan is the cheapest fix available.

React・Next.js・Vue・Svelte での 料金表

React、Next.js、Vue 3、SvelteKit、Astro、素の HTML — 同じ 料金表 を 6 通りの方法で組み込めます。

01 / 06

React Pricing Table

Keep the plans in a data array and let the billing toggle be the only piece of state. Deriving the price from that one boolean is what stops the yearly and monthly copies of the table drifting apart.

src/components/PricingTable.tsx

const PLANS = [
  { name: 'Starter', monthly: 29, yearly: 290 },
  { name: 'Growth', monthly: 79, yearly: 790, featured: true },
]

export function PricingTable() {
  const [yearly, setYearly] = useState(false)
  return (
    <section>
      <BillingToggle value={yearly} onChange={setYearly} />
      {PLANS.map((p) => (
        <PlanCard key={p.name} plan={p} yearly={yearly} />
      ))}
    </section>
  )
}

料金表 をプロジェクトに追加する方法

料金表 テンプレートを選んで本番に載せるまでの 4 ステップ。

01~30s

Pick a Pricing Layout

Match the layout to what the buyer has to decide — three cards when plans differ by size, a comparison matrix when they differ by a specific limit, one card when there is nothing to compare.

02~10s

Copy the Prompt

Take the prompt into MeDo, or paste it into Lovable, Bolt, v0 or Cursor. Swap in your real plan names, prices and feature rows first, and keep the rows in the same order across every tier.

03~1min

Generate and Refine

You get React + Tailwind back with a live preview. Follow up in plain English — "default the toggle to yearly", "move Enterprise into a band below" — rather than editing class strings by hand.

04~2min

Wire the CTAs to Checkout

Point each plan button at its own checkout session or signup URL and keep the price figures in one data array, so a price change is one edit rather than three cards and a matrix.

料金表に関するよくある質問

AI料金表ジェネレーターとは何ですか？

AI料金表ジェネレーターは、料金プラン、機能、目標の自然言語による説明を受け取り、完全にスタイリングされた料金表コンポーネント（レイアウト、コピー、トグル動作、CTAボタンを含む）を生成します。MeDoはテンプレートではなく、本番対応コードを備えた完全なコンポーネントを生成します。

AIで料金表をどのように作成しますか？

MeDoを開き、料金構造を記述してください：プラン数、名前と価格、各プランの主要機能、どのプランをハイライトするか。例：「月額/年額トグル付きの3段階SaaS料金表を作成し、中間プランを最も人気としてハイライトし、含まれる機能には緑のチェックマークを使用」。MeDoがコンポーネントを生成します。フォローアップのプロンプトで色、テキスト、レイアウトを調整できます。

料金表を生成するのに最適なAIツールは何ですか？

MeDoは料金表を含むUIコンポーネントをプロンプトから生成するために特化して構築されています。汎用AIツールとは異なり、MeDoはコンバージョンパターン（ハイライトされたプラン、トグルインタラクション、機能比較行）を理解しているため、出力は汎用的なコードではなく実際のデザインベストプラクティスに従います。

SaaS料金表にはいくつのプランを設けるべきですか？

3つのプランがほとんどのSaaS製品にとって実証済みの最適解です：小規模ユーザー向けの下位エントリープラン、ターゲット顧客の大多数向けのハイライトされた中間プラン、大口アカウント向けの上位プランまたはカスタムEnterpriseオプション。3つ未満では比較の余地が少なく、4つ以上では決定麻痺を引き起こします。

料金ページに月額/年額切り替えトグルを設けるべきですか？

はい。請求切り替えトグルは年間プランの選択率を高める最もシンプルな方法のひとつです。年間割引を目立つように表示し（例：「20%お得」）、トグルのデフォルトを年額にして価値認識をより高く固定しましょう。トグルは価格の透明性もシグナルし、迷っている購入者の信頼を構築します。

AIはコードだけでなく料金表のテキストも生成できますか？

はい。MeDoはビジュアルコンポーネントとその中のテキスト（プラン名、機能の箇条書き、CTAボタンラベル、信頼シグナル）の両方を生成します。製品、ターゲット層、価値提案を伝えれば、スタイリングされたコードとともにコンバージョン重視のコピーを書きます。フォローアッププロンプトでトーンの調整、特定プランの書き直し、代替見出しのテストが可能です。

料金表を今すぐ生成。

プロンプトを試す — 無料、登録不要。

無料で構築開始料金を見る
CTAセクション

CTAセクション

一文の説明から高コンバージョンのCTAセクションに変換。見出し、サポートコピー、ボタン — すべて生成され、ページにすぐ組み込めます。

関連コンポーネント
機能グリッド

機能グリッド

製品のメリットを日本語で説明するだけで、MeDoが数秒で洗練されたレスポンシブな機能グリッドを生成します。アイコンの変更、カラム数の調整、コピーの微調整 — すべてコードに触れることなく実現できます。

関連コンポーネント
お問い合わせフォーム

お問い合わせフォーム

必要なフィールド、求めるトーン、重要なバリデーションルールを記述するだけで、MeDoがプロンプトを数秒で完全でアクセシブルなお問い合わせフォームコンポーネントに変換します。

関連コンポーネント