web design uiMay 1, 202610 min read

料金ページ問題

ほとんどの料金ページは、ほかのデザインを一度もやったことのないグロースチームが作った「コンバージョン劇場」だ。料金ページはサイトで最も正直な画面である。明快なページが何を押さえ、肥大したページが何を外しているかを解説する。

By Boone
XLinkedIn
the pricing page problem

料金ページとは、何に課金すべきか決められなかったことをチームが白状するページだ。4つのプラン、8列のチェックマーク、真ん中に鎮座する「営業に問い合わせ」の関門、隅に隠れた年額トグル。グロースチームはこれを「コンバージョン実験」と呼び、出荷した。訪問者は一度スクロールして、タブを戻り、なぜ去ったのかを二度と教えてくれない。

ユーザーが見出しを読んでも自分がどのプランに属するか分からないなら、問題はレイアウトではなくプロダクトだ。料金はデザインとして描画されたプロダクト上の決断である。ほとんどの料金ページは、チームが固めきれなかった意見を、レイアウトで埋め合わせているにすぎない。

料金ページはサイトで最も正直な画面だ

料金ページは、チームが誰に・なぜお金を払ってもらっているのかを理解しているかを暴く。 ほかのマーケティングページはコピーの陰に隠れられる。ここだけは隠れられない。

ホームページは雰囲気を売る。機能ページはリストを売る。料金ページは腹をくくらなければならない。プラン、数字、誰向けか、何が違うのか。ほかの場所にあった曖昧さは、ここで4列目や脚注として噴き出す。

これを正しくやるチームは、レイアウトより先に立場を選ぶ。そうでないチームはレイアウトのA/Bテストを回して、それを戦略と呼ぶ。「7パターンをテスト」はプロダクトの明確さの代用品であり、顧客は言葉にできなくても違いを感じ取る。

5つの失敗パターン

弱い料金ページは、必ず見分けのつく5つのどれかで失敗する。5つとも、いま本番環境で動いている。

「同じ列が並ぶ4プランの壁」「行が積み重なるチェックマークの海」「入力欄のある電卓ページ」「閉じた珊瑚色のドアの営業問い合わせ関門」という4枚のラベル付きタイルを並べたボクセルのグリッド
「同じ列が並ぶ4プランの壁」「行が積み重なるチェックマークの海」「入力欄のある電卓ページ」「閉じた珊瑚色のドアの営業問い合わせ関門」という4枚のラベル付きタイルを並べたボクセルのグリッド

4プランの壁。 Hobby、Pro、Team、Enterprise。4列とも同じ高さで、機能リストは重なりだらけ。4プランは、たいてい3つに絞る決断ができず、2つにする根拠も作れなかったという意味だ。選択肢の顔をした逃げである。

機能チェックマークの海。 8列、40行、どのセルも緑のチェックかうっすらしたダッシュ。パワーユーザーには不要で、ふつうの購入者には読めない。視線は4行目で脱落する。

料金ページとしての電卓。 席数のスライダー、使用量のトグル、地域の乗数。ユーザーはいつの間にか、会社のためにプランを設計させられている。電卓が通用するのは、単位そのものが電卓のときだけだ。料金の決断を避けるために持ち出した電卓は失敗する。

真ん中の「営業に問い合わせ」関門。 見えるプランは3つ、真ん中だけ数字ではなくクエスチョンマーク付きのボタン。ユーザーは自分が対象かを確かめに来たのに、ページが先に失格にしてしまった。このパターンは、価値をページで言語化できないから電話で売っているのだと白状している。

誰も読まない比較表。 カードの下に広がる巨大なマトリクスは「透明性」として売り出される。違う。プロダクトチームが料金に落とし込めなかった仕様書だ。本当の透明性とは、明快な意見のことである。

料金はデザインとして描画されたプロダクト上の決断

最も明快な料金ページは、ユーザーが誰で何に対価を払うのかという、明快なプロダクトの意見を映している。意見が短いから、ページも短い。

料金ページは、コンバージョン動線のヒーローセクションだ。 そこに書いたものがオファーになる。訪問者はこのページをプロダクトそのものとして読む。ランディングページがブランドとして読まれるのと同じだ。

ほとんどの料金ページは四半期ごとに重くなる。チームがプランを減らさず増やすからだ。新しいセグメントはすべて列になり、営業からの反論はすべてアスタリスクになる。2年もすれば、そのページは社内の意見対立をチェックマークで展示した博物館になる。

画面を勝ち取った実例

実名で、実際の表面のディテールとともに。

HOBBY、TEAM、BUSINESSとラベルのついた3つの台座のボクセル図。それぞれに珊瑚色のチップが1つ載り、SOLO、SEATS、SCALEという単一の決断を示し、土台にはシアンのボタンがある
HOBBY、TEAM、BUSINESSとラベルのついた3つの台座のボクセル図。それぞれに珊瑚色のチップが1つ載り、SOLO、SEATS、SCALEという単一の決断を示し、土台にはシアンのボタンがある

Linear。 Free、Standard、Plus、Enterprise。席単位の計算、ファーストビューにある実数、列がきちんと別の意味を持つ短い比較表。Plusが誰のためのものかについて意見があり、「マーケティング用ランディングページ」的な寄り道もしない。

Vercel。 Hobby、Pro、Enterprise。席単位は正直で、帯域とビルド分数の数字も見える。電卓は単位に対応する場所にしか現れない。Hobbyは無料、Proは1席20ドル、Enterpriseは電話。3つの決断、3つのボタン、真ん中の関門なし。

Stripe。 電卓こそが料金である、珍しいケース。単位が取引ごとなので、電卓がそのままプロダクトになる。2.9%+30セントは、業界が暗唱できる基準値だ。

Cursor。 席単位でシンプル、AIプランがデフォルトの位置づけ。Freeは更生プログラムではなく本物のプラン。Proには数字があり、アスタリスクはない。BusinessはSSOが必要なチーム向け。

GitHub。 Free、Team、Enterprise。モデルは10年ほぼ変わらず、いまも機能している。個人は無料。Teamは共有プライベートリポジトリ。EnterpriseはSAML、SCIM、監査ログ。各プランが実際の組織の状態に対応している。

Superhuman。 月30ドル、本気で。無料プランなし、おとりプランなし、「スターター」という逃げもなし。その価格でこのプロダクトが必要か、そうでないか。それだけだ。

Figma。 ロール付きの席。エディターは払い、ビューアーは払わない。Dev Modeは脇のチップであり、ProfessionalとOrganizationの間に押し込まれた4つ目のプランではない。

Notion。 席単位に、AIアドオンを別行で。この判断は、AIが本物のコストで本物の機能であり、こっそり束ねた値上げではないと購入者に伝える。

Anthropic。 開発者とビジネスの2分割、それぞれの中に利用量の段階。この分割こそが意見だ。APIを使う個人開発者と、Claude for Workを使うチームは、同じ購入者ではない。

Framer。 多くの読者が思い当たる反例。プランの乱立が、答えより問いを多く生むページを作った。プロダクトは優秀だが、料金ページは、チームが自分たちが何者なのかをまだ決めきれていないように読める。

名前を出さない反例もある。1プランあたり27機能を並べ、4行目で購入者を失うSaaSの料金ページだ。あなたもそのタブを閉じた。見込み客もみんな閉じた。

意見を出荷する料金ページのための5つのルール

これらのルールは複利で効く。4つ満たせばページは機能する。2つなら4プランの壁の出来上がりだ。

ONE PRODUCT OPINION、ONE DECISION PER TIER、REAL NUMBERS UP TOP、NO CALCULATOR UNLESS UNIT IS CALCULATOR、NO SALES GATE BEFORE QUALIFYとラベルのついた、傾いた5本のバーを積み上げたボクセル図
ONE PRODUCT OPINION、ONE DECISION PER TIER、REAL NUMBERS UP TOP、NO CALCULATOR UNLESS UNIT IS CALCULATOR、NO SALES GATE BEFORE QUALIFYとラベルのついた、傾いた5本のバーを積み上げたボクセル図

ルール1:プロダクトの意見を1つ、ファーストビューで言い切る

ページの冒頭には、プロダクトが誰のためのものかを述べる一文を置く。ホームページのタグラインではない。購入者が3秒で自分が対象かを判断できる一文だ。Linearはチームとワークフローで始まる。Vercelは開発者とデプロイで始まる。Superhumanは価格と約束で始まる。

ルール2:1プランにつき1つの決断

各プランは、購入者が下す1つの決断に対応する。個人かチームか。5席か50席か。セルフサーブか契約か。同じ決断に2つのプランがあるなら、2つ多い。プラン名は宝石ではなく、決断を表すべきだ。

ルール3:実数をファーストビューに

ファーストビューに数字がない料金ページは、リード獲得フォームの仮装だ。価格は画面上で最も重要なピクセルである。「料金を見る」というCTAの裏に数字を隠すなら、チームはプロダクト以外の何かを売っている。

ルール4:単位が電卓でない限り、電卓は置かない

Stripeが電卓にふさわしいのは、単位が取引ごとだからだ。AWSは、単位が秒ごとだからふさわしい。席単位の計算はそうではない。プランの決断を避けるために電卓に手を伸ばしているなら、電卓がページを悪くしている。摩擦が報われる場面は意図的にフリクションをデザインするの解説で扱っている。料金ページの摩擦が報われることは、ほぼない。

ルール5:ユーザーが自分で判断できる前に「営業に問い合わせ」を出さない

Enterpriseに問い合わせボタンがあるのはいい。真ん中のプランに「営業に問い合わせ」を置くのは、購入者の時間への課税だ。値付けに電話が必要なら、そのチームはまだ値付けを終えていない。

見つけ次第削除すべきアンチパターン

ほぼすべての料金ページ監査で出てくる5つのパターン。どれも、チームがレイアウトの陰に隠れている証拠だ。

「見積もり依頼」への偽モーダル誘導。 数字を見せる代わりにフォームを開くボタン。ユーザーは、営業担当に選別される特権のためにフォームを埋める。

隠れた年額課金トグル。 隅にある小さなトグルが、すべての価格を月額と年額で切り替える。デフォルトはスクリーンショット映えする方の数字。何を隠すべきかはプログレッシブディスクロージャーの原則が扱っている。これはその正反対だ。

ダークパターンの取り消し線。 「以前は$99、いまは$79」。ずっと。取り消し線は、2年間ずっと実在した過去の価格を指していない。購入者は知っている。信頼は消えた。

チームが売りたいプランに付く「一番人気」バッジ。 実データに基づく本物の人気バッジなら問題ない。利益率が最も高いプランに貼られたバッジは劇場であり、購入者はその手口を逆算する。空の状態こそがプロダクトの解説が当てはまる。売り込みの画面の声は、正直な画面の声と一致していなければならない。

宝石の名前のプラン。 Bronze、Silver、Gold、Platinum。名前はそのプランが誰向けかを何も伝えない。ページが訪問者を一目で選別できる唯一の機会を無駄にしている。

料金ページ監査

珊瑚色の1つの質問チップ「DOES THE PAGE PASS」から、TIERS、NUMBERS、OPINION、GATE、BADGE、AUDITとラベルのついた6枚の小さなボクセルカードへ枝分かれする決定木。各カードにシアンのチェックボックスがある
珊瑚色の1つの質問チップ「DOES THE PAGE PASS」から、TIERS、NUMBERS、OPINION、GATE、BADGE、AUDITとラベルのついた6枚の小さなボクセルカードへ枝分かれする決定木。各カードにシアンのチェックボックスがある

どんな料金ページも、この7つの質問にかけてみよう。すべてに明確に「はい」と答えられないなら、そのページは未完成だ。

  1. 初めての訪問者が10秒以内に自分のプランを選べるか? ツアーなし、スクロールなし、マトリクスなし。見出しと3枚のカードで足りるはずだ。表が必要になるなら、カードが失敗している。
  2. 少なくとも1つのプランに、ファーストビューで実際のドル金額があるか? どこも「お問い合わせ」なら、それは料金ページではなく、仮装したお問い合わせページだ。
  3. 各プラン名は、金属ではなく決断を表しているか? 「Solo」「Team」「Enterprise」は「Bronze」「Silver」「Gold」に勝つ。プラン名を入れ替えても意味が変わらないなら、仕事をしていない。
  4. 比較表は1画面で読めるほど短いか? スクロールが必要なら負けだ。購入者の我慢は1画面、1行につき1秒。
  5. トグルなしでもページは成立するか? 年額と月額は、かくれんぼではなく明確な選択であるべきだ。デフォルトは、チームが文書で擁護できる価格にする。
  6. 「一番人気」バッジは弁護できるか? 裏付けるデータを示せないなら、そのバッジは劇場で、購入者は見破る一歩手前にいる。
  7. 「営業に問い合わせ」はEnterpriseだけに限定されているか? ほかのどこでも、それはページに不要な摩擦だ。

この7つを通るページは、購入者が信頼するページだ。どれか1つでも落ちるページは、購入者が理由も告げずに去ったページだ。同じ規律をプロダクトの画面に適用したのがアンチダッシュボードの解説で、マーケティングサイトのほかの部分がどう続くかはウェブデザインの原則で扱っている。

速度もページの一部

描画に3秒かかる料金ページは、カードが表示される前に訪問者を失っている。パフォーマンスは料金の判断の一部であり、別のエンジニアリング課題ではない。読み込み時間がブランドの属性である理由はスピードこそブランドの解説で扱っている。料金ページは、サイトのどの面よりも遅さを罰する。

最もすっきりした料金ページが速く描画されるのは、やることが少ないからだ。3枚のカード、短い表、CTA。ロゴのマーキーも、自動再生の動画もない。意見そのものがページであり、だからページは軽い。

よくある質問

SaaSの料金プランはいくつが適切?

たいていは3つ、場合によっては2つ。4つにするのは、各プランが明確に異なる決断を表すときだけだ。4つを超えると、列が増えるたびにページ全体が薄まる。5つ目のプランは、たいてい、プロダクトがどの購入者向けなのかをチームが決めきれていないことを意味する。

料金ページは実際の価格を見せるべき?それとも「営業に問い合わせ」の裏に隠すべき?

購入者がセルフサーブで入れるすべてのプランでは、実際の価格を見せる。「営業に問い合わせ」は、契約、調達、カスタム連携が必要な本物のエンタープライズ向けに取っておく。セルフサーブの価格を営業の関門の裏に隠すのは、チームが価格に自信がないというサインだ。

「一番人気」バッジは本当にコンバージョンを上げる?

上がることもあるが、バッジが実際の顧客行動を反映しているときだけだ。利益率の最も高いプランに貼られたバッジは、購入者にこのページを疑うよう教え込む。ブランドアイデンティティのデザインと料金のつながりが重要だ。不誠実なバッジは、コンバージョンで得る以上に信頼を失わせる。

意見を選んでから、ページを出荷せよ

ほとんどの料金ページが失敗するのは、レイアウトが間違っているからではない。プロダクトが何のためにあるのか、チームが決めきれていないからだ。ページはプロダクトの意見の下流にある。どれだけバリエーションをテストしても、そのギャップは埋まらない。

2026年に機能するページは、短く、意見があり、明快だ。Linear、Vercel、Stripe、Cursor、GitHub、Superhuman、Figma、Notion。どれも4プランの壁を出荷していない。どれも数字を隠していない。どれも購入者に自分でプランを設計させていない。彼らは立場を選び、ページがその立場を運んでいる。

料金ページを、グロース実験ではなくプロダクト上の決断としてデザインするチームがほしいなら、Brainyに依頼してほしい。ブランドに合い、10秒以内に購入者を見極める料金画面を出荷する。

Want a pricing page that ships an opinion instead of four indecisive tiers? Brainy designs pricing pages as a product decision, not a growth experiment.

Get Started

More from Brainy Papers

Keep reading