今回の出力は、テンプレートを適当に使うのと何が違うのか？
最大の違いは、視覚的階層が「3プラン」という具体的な入力に基づいて判断された点であり、固定テンプレートを適用してから手動でコンテンツを調整したわけではない点だ。テンプレートは通常、カラム数が固定されていることを前提とする（常に3カラムまたは4カラムなど）が、今回の出力プロセスでは実際に5階層版と3階層版の両方をテストし、視覚的焦点の分散度合いに基づいてトレードオフを判断した——この「まずテストし、それから収束させる」プロセスはテンプレートには真似できない。
年払い/月払い切り替えの価格アンカリング表現（取り消し線+アクセントカラー）も、テンプレートによくあるデフォルトスタイルではなく、今回の具体的な要件に合わせて生成されたものだ。
なぜ中間プランをわざわざ拡大し、3プランを同じサイズにしないのか？
これは視覚デザインにおける「注意を誘導する」基本的な手法だ。3プランが完全に同じ大きさであれば、訪問者の目には明確な着地点がなく、機能リスト全体を読んでからでないとどれを選ぶべきか判断できず、意思決定の時間が延び、離脱の可能性が高まる。推奨プランを拡大することは、訪問者がコンテンツを読み始める前に、視覚的な重みで「多くの人がこれを選んでいる」と伝えることに等しく、意思決定の認知的負荷を下げる。
この手法の背景にある心理学的基盤はアンカリング効果だ——人は複数の選択肢に直面すると、特別に印がついたものが、明言されていなくても何らかの社会的合意や公式な推奨を表していると考えがちである。
価格アンカリング（取り消し線＋割引価格）は具体的にどう機能するのか？
メカニズムは単純だ：まず高めの「元の価格」を提示し、取り消し線で消し、その直後に隣で目立つ色で「割引後」の実際の価格を表示する。訪問者の脳は最初に見た数字を処理し、それを基準点として扱う。その後、より低い2つ目の数字を見ると、「絶対的な金額がお得かどうか」を冷静に評価するのではなく、「元の価格に比べて安くなった」という感覚が生まれる。
これが、年払いプランがほぼ常にこの表現方法を使い、割引後の月換算価格を単独で表示しない理由でもある——単一の数字には比較の基準がなく、アンカリング効果が発生しないため、お得感も大きく損なわれる。
この出力を自分の製品の出発点として使いたい場合、テンプレート然として見えないようにするにはどう調整すべきか？
3カラム構造、推奨プランの拡大、価格アンカリングは汎用的な構造判断であり、そのまま流用してよい。しかし、ページを「テンプレートの使い回し」に見せない本当の鍵は、機能リストの取捨選択にある——どの機能をメインカードに残し、どれを詳細比較表に移すかは、自社製品の実際の差別化ポイントに基づいて決めるべきで、この例のリスト内容をそのままコピーしてはいけない。
さらに、配色やイラストのスタイルは自社ブランドのトーンに合わせて差し替えることを勧める。構造は参考にしてよいが、視覚的なディテールを直接コピーすると、複数のサイトが同じテンプレートから量産されたように見えてしまう。
料金ページは、サイト全体の中でコンバージョン圧力が最も集中するページである——訪問者はすでに製品を見て興味を持っており、このページが決済に進むか離脱するかを決定する。Claude Designで料金ページを生成することは、「見た目が良いかどうか」ではなく、視覚的階層が数秒以内に「どれを選ぶべきか」という答えを訪問者に手渡せるかどうかのテストである。
今回の出力の出発点は比較的シンプルな説明だった：3つのプラン（Starter、Pro、Team）、中間プランに「最も人気」のラベル、年払いの割引切り替え、各プランの下に機能リストをチェックマークと×マークで区別して表示。色やフォント、間隔の数値は指定しなかった——これらはClaude Design自身の判断に委ねた。これこそが出力品質をテストする核心である：良い生成結果は、明確に要求されていない部分でも合理的な選択をするべきだ。
結果として得られたのは標準的な3カラムのカードレイアウトで、中央のProプランのカードがわずかに拡大され、強調枠が付けられている。これは料金ページデザインで最も一般的かつ効果的な手法の一つ——サイズの視覚的な違いだけで、一言も書かずに「これが推奨オプションです」と暗示できる。
記録に値するのは階層数そのものの影響だ。当初の草案はより複雑で、一時は5つのプラン（Free、Starter、Pro、Business、Enterprise）を検討していたが、出力をテストした結果、選択肢が増えると視覚的焦点が分散し、「最も人気」の強調効果が明らかに薄まることがわかった。3階層に戻すと、中間プランの視覚的優位性が再び明確になった。これは外部のケーススタディの方向性とも一致する——あるSaaSチームがプラン数を5つから3つに絞り込んだ後、有料転換率が2倍以上に伸びたという記録があり、その核心的な理由はまさに選択肢が減ることで意思決定の経路がより直接的になることにある。
今回の出力でもう一つ注目すべき点は、年払い/月払い切り替えトグルの配置と表現方法だ。Claude Designはトグルを3枚のカードの真上、中央に配置し、月額価格に取り消し線を引き、その横にアクセントカラーで年払い後の割引価格を表示した——これは価格アンカリングの標準的な応用で、訪問者にまず「元の価格」を見せてから「割引後の価格」を見せることで、単一の数字だけを表示するよりもお得感が強く伝わる。切り替えのインタラクションロジック（クリック後に3枚のカードの価格が同期更新される）は静的な出力ではあるが、レイアウトはすでにその状態変化に必要な余白と整列を確保しており、フロントエンドエンジニアが引き継ぐ際にレイアウトを設計し直す必要がない。
3プランの機能リストは一貫したチェックマーク（✓）と×マーク（✕）のアイコンシステムを使用し、ProとTeamプラン間の差異行数を一目でスキャンできる範囲（8行以内）に意図的に抑えている。これは過小評価されがちな料金ページデザインの原則を反映している——機能リストは「網羅すること」が目的ではなく、「意思決定に関わる差異を提示すること」が目的だ。副次的な機能はページ下部の「機能比較表」リンクに移し、メインカードには購入判断に実際に影響する項目だけを残す。
自分の製品の料金ページをAIツールで生成しているなら、今回の出力が示した3つの判断はそのまま流用する価値がある——プラン数を3つ以内に抑える、テキストだけでなくサイズの違いで推奨オプションを示す、価格アンカリングに必要な視覚的対比を作り込む。これらは美的な問題ではなく、コンバージョン率の数字に直接反映される構造的な選択だ。言い換えれば、料金ページデザインに費やす一分一分は、サイトの他のどのページのデザイン時間よりも直接的な収益インパクトをもたらしうる。