料金表コード生成用
シンプルな料金カード
プランの違いが一目でわかる、すっきりした料金表。
用途・説明
2〜3プランを横並びで比較できる料金カードを作ります。おすすめプランの強調、機能リストのチェックマーク、月額・年額の表記まで含めた実用的な料金セクションになります。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[プラン情報]- プラン名・価格・含まれる機能を各プランごとに
[おすすめプラン]- 強調したいプラン名
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはSaaSサイトの制作経験が豊富なWebデザイナー兼エンジニアです。 以下のプランを比較できる料金表セクションを実装してください。 ## プラン情報 [プラン情報] おすすめプラン：[おすすめプラン] ## レイアウト - PC：プランを横並び（3プランなら3列）、カード間 24px、最大幅 1080px - タブレット・スマホ：1列の縦並び。おすすめプランを一番上に表示 - 各カードの高さを揃え、ボタンの位置をカード下端に揃える ## カードのデザイン - 背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 32px - 上から：プラン名 → 価格 → 短い説明 → 区切り線 → 機能リスト → ボタン - プラン名：16px、font-weight 700 - 価格：40px、font-weight 700、色 #1B2A44。「円 / 月（税込）」は14pxで #5F6D84 - 機能リスト：14px、各行の先頭に #1463F0 のチェックアイコン、行間 12px - ボタン：幅100%、高さ 48px、角丸 10px ## おすすめプランの強調 - 枠線を 2px solid #1463F0 にし、カード上部に「おすすめ」ラベル - ボタンは塗りつぶし（背景 #1463F0、文字 #FFFFFF）。他のプランは枠線ボタン - 拡大や強い影など、過度な装飾はしない ## アクセシビリティ - セクション見出しは h2、プラン名は h3 - 機能リストは <ul>。チェックアイコンは aria-hidden="true" - 価格は読み上げで分かるよう、「月額1,980円（税込）」のようなテキストを含める - おすすめであることを色だけでなくテキストでも示す ## 出力形式 - [使用技術]のコードを1つ出力 - プランを追加・削除しやすいよう、データ（配列）とマークアップを分けて記述する
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。