料金表コード生成用
月払い・年払い切り替えつき料金表
3つのプランを、支払い方法を切り替えて見比べる。
用途・説明
3つのプランを横に並べ、月払いと年払いをスイッチで切り替えられる料金表を作成します。おすすめプランの強調、年払いの割引表示、税込・税抜の明記など、料金ページで問い合わせの元になりやすい点を指定しています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[プラン情報]- プラン名・月払い価格・年払い価格・主な機能を3プラン分
[おすすめプラン]- 例：Pro
[税表示]- 例：税込、税抜
[使用技術]- 例：HTML/CSS/JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「月払い・年払いを切り替えられる3プランの料金表」を実装してください。 ## 表示内容 [プラン情報] - おすすめプラン：[おすすめプラン] - 価格の税表示：[税表示] ## 切り替えスイッチ - 料金表の上、中央に「月払い／年払い」の切り替えを置く - 初期状態は年払い。年払いの横に割引の内容（例：2か月分お得）を小さく表示する - 切り替えると、各プランの価格と「/月」「/年」の表記が変わる - 年払いのときは「月あたり ¥○○（年額 ¥○○）」のように、月換算と実際の請求額の両方を表示する ## レイアウト - PC：3列。スマホ：1列（おすすめプランを先頭に） - カード間隔 24px、各カードの高さを揃え、ボタンは下端に揃える - カード内：プラン名 → 価格 → ひとこと説明 → 機能リスト → ボタン ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 16px、padding 32px - おすすめプラン：枠線 2px solid #1463F0、上部に「おすすめ」ラベル、ボタンは塗り - その他のプラン：ボタンは枠線のみ - 価格：40px、font-weight 700。単位と税表示は 14px で横に添える - 機能リスト：14px、各行の先頭にチェックアイコン（#1463F0） ## アクセシビリティ - 切り替えは2つのラジオボタン（fieldset + legend「お支払い方法」）で実装する - 価格が変わったことを aria-live="polite" の領域で伝える - 各プラン名は h3。おすすめラベルは色だけでなく文字でも示す - チェックアイコンは aria-hidden="true" ## 注意点 - 価格・割引率はすべて[プラン情報]の値を使い、計算で新しい数字を作らない - 無料プランがある場合、年払いに切り替えても「¥0」のまま表示が崩れないようにする ## 出力形式 - [使用技術]のコードを1つ出力 - プランと価格はデータ（配列）として分離し、変更しやすくする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。