料金表コード生成用
中央を強調した3プランの料金表
おすすめのプランを真ん中で大きく見せる、定番の3列。
用途・説明
3つのプランを横に並べ、中央のおすすめプランだけを色と大きさで強調する料金表を作成します。迷ったときに中央を選びやすくなる、もっとも一般的な構成です。SaaS、オンラインサービス、スクール、サブスクリプションの料金ページに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[プラン情報]- プラン名・月額・含まれる内容を3つ
[おすすめのプラン]- 例：スタンダード
[ボタン文言]- 例：このプランではじめる
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「中央を強調した3プランの料金表」を実装してください。 ## 表示内容 [プラン情報] - おすすめのプラン：[おすすめのプラン]（「いちばん人気」のラベルを付ける） - 各プランのボタン：[ボタン文言] ## レイアウト - PC：3列。カードの間隔 24px。おすすめのカードだけ上下に 16px 大きくする - スマホ：1列。おすすめのプランを最初に表示する - カード内は上から プラン名 → 対象の一言 → 価格 → ボタン → 含まれる内容 ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 16px、padding 32px 24px - おすすめのカード：背景 #1463F0、文字 #FFFFFF、影 0 16px 40px rgba(20, 99, 240, 0.25) - 「いちばん人気」のラベル：12px、font-weight 700、背景 #FFFFFF、文字 #1463F0、角丸 999px - プラン名：16px、font-weight 700。価格：36px、font-weight 700。「/ 月（税込）」は 13px - 含まれる内容：14px、line-height 2、行頭にチェックマーク - ボタン：幅 100%、高さ 48px、角丸 999px。通常は枠線、おすすめは背景 #FFFFFF・文字 #1463F0 ## アクセシビリティ - 各カードのプラン名は h3、含まれる内容は ul / li - 「いちばん人気」は色だけでなく文字で示す - おすすめのカードの白い文字と #1463F0 のコントラスト比 4.5:1 以上 - ボタンの aria-label に「スタンダードプランではじめる」のようにプラン名を含める ## 出力形式 - [使用技術]のコードを1つ出力 - プランを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。