料金表・価格一覧をClaude Designで作った話

料金表は地味に作る頻度が高い。SaaSのプライシングページ、印刷用の価格一覧、サービス比較表……毎回Figmaを起動してカラムを並べるのが面倒で、Claude Designに投げてみたら思ったより沼だった話をする。

最初に全部失敗した

「3プランの料金表を作ってください。月額2,980円、9,800円、29,800円で」と送ったら、出てきたのはテキストを縦に並べただけのリスト。カラム構造がなく、プラン間の比較が一切できない代物だった。

次に「横に3カラム並べて」と追加したら、今度はカラム幅がバラバラ。真ん中の「おすすめ」プランも他の2つと同じサイズで、どれを選べばいいかわからないデザインが出てきた。

最初の失敗パターン:

• 「料金表」とだけ書くと縦リストになる
• カラム幅・高さを明示しないとガタつく
• 「おすすめ」の指定を忘れると3プラン均等になる

刺さったプロンプトの書き方

試行錯誤した結果、以下の構造で書くと再現性が出てきた。

料金プラン比較表を作ってください。

レイアウト:
- 3カラム横並び（等幅）
- 各カラムのヘッダー部分に色背景

プラン内容:
- スターター: 月額2,980円、ストレージ10GB、メールサポート
- スタンダード: 月額9,800円、ストレージ100GB、優先サポート ←おすすめ
- エンタープライズ: 月額29,800円、容量無制限、専任担当

強調:
- スタンダードを視覚的に大きく・目立たせる
- 「おすすめ」バッジをスタンダードの上に付ける
- CTAボタンは各プランの下に配置

カラー: ブルー系（#1E40AF）をメインに、ニュートラルグレー背景

これで格段に近いものが出るようになった。「←おすすめ」という表記をインラインで入れるのが地味に効く。

※プロンプト: AIへの指示文。Claude Designでは自然言語でデザインを指示する。※CTA: Call To Action（行動喚起）。ボタンやリンクでユーザーに次の行動を促す要素。

おすすめプランの強調がいちばん難しい

3カラム比較表でユーザーが最初に目に入るのは真ん中のプランだ。ここを「一段大きく」「枠線を太く」「価格フォントを大きく」するだけで成約率が変わるという設計上の常識がある。

Claude Designにこれを指示するとき、「目立たせて」だと弱い。以下の具体的な差分を書く必要がある。

スタンダードプランのカラムを他の2つより：
- 縦に20px高く（上に伸ばす）
- 枠線を2px→4pxに太く
- ヘッダー背景色を濃いブルーに（他のカラムは薄いグレー）
- 価格テキストを36px（他は28px）

ここまで具体的に書けば狙い通りに出る。「強調して」という曖昧な指示だと、色を変えるだけか、何も変えないかの二択になりがちだった。

※Claude Design: Anthropic Labsが開発したAIビジュアルデザインツール。テキストプロンプトからUI・スライド・マーケ資料などを生成する。

更新しやすい構造にする罠

料金表は更新が発生する。「スタンダードを月額9,800円から11,800円に変えた」みたいなケースで、都度デザインから作り直すのは非効率だ。

最初の設計で「価格の数字だけ差し替えやすいレイアウト」を意図して指示するといい。具体的には：

• 価格はプレーンなテキスト要素として配置させる（画像に焼き込まない）
• 機能一覧はバレットリストで出力させる（テーブルセル内の固定テキストにしない）
• 「カラー・フォント・レイアウトはそのままに、数字と文言だけ差し替えられる構造で」 と明示する

これを最初に書いておくと、Claude Codeへのハンドオフ時にも数値差し替えをコードで対応しやすくなる。

※Claude Code: AnthropicのAIコーディングツール。Claude DesignのデザインをそのままコードにするCLIツール。※ハンドオフ: デザインデータを開発者（またはClaude Code）に引き渡すプロセス。

実際に使ってみた結果

今は月1〜2本のペースで料金表系の素材をClaude Designで作っている。Figmaで一から作るより明らかに速い。ただし、精緻な「ピクセルパーフェクト」な整列を求めると限界がある。最終調整にClaude CodeかFigmaが要るケースは残る。

用途別のおすすめ:

用途	Claude Designだけで完結できるか
LP用プライシングセクション	7割は完結できる
印刷用PDFの価格表	厳しい（余白・ブリードの制御が弱い）
提案書に貼る比較表	ほぼ完結できる
スプレッドシート代わりの一覧	そもそも向いていない

印刷物にはやはり注意が要る。印刷用デザインの罠と回避策も読んでおくといい。

※Figma: デザイナーが多く使うUIデザインツール。Claude Designの主要な比較対象。※LP: ランディングページの略。特定のCTAに向けて設計されたWebページ。