料金表コード生成用
回数券・コースの料金表
回数が増えるほどお得になることが、1回あたりの金額で分かる。
用途・説明
1回・5回・10回のような回数券や、通い放題のコースの料金表を作成します。合計金額だけでなく「1回あたり」の金額と、どれだけお得かを並べて表示します。ヨガやピラティスの教室、エステ、整体、パーソナルトレーニングなどに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[コース情報]- 回数・合計金額・有効期限を3つほど
[おすすめのコース]- 例：5回券
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「回数券・コースの料金表」を実装してください。 ## 表示内容 [コース情報] （各カード：回数、合計金額、1回あたりの金額、お得になる金額、有効期限） - おすすめのコース：[おすすめのコース] ## レイアウト - PC：3列、スマホ：1列。カードの間隔 20px - カード内は中央揃えで、上から 回数 → 合計金額 → 1回あたり → お得のラベル → 有効期限 → ボタン ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 16px、padding 28px 20px - おすすめのカード：枠線 2px solid #1463F0。上端に「おすすめ」のラベル - 回数：18px、font-weight 700、色 #1B2A44 - 合計金額：28px、font-weight 700 - 1回あたり：15px、font-weight 700、色 #1463F0（例：1回あたり 4,400円） - お得のラベル：12px、font-weight 700、背景は #1463F0 の9%の淡い色、文字 #1463F0、角丸 999px（例：1回券より 3,000円お得） - 有効期限：12px、色 #5F6D84 - ボタン：幅 100%、高さ 44px、角丸 999px ## 計算 - 1回あたりの金額と、お得になる金額は、合計金額と回数から自動で計算する - 割り切れない場合は、1円未満を切り上げて表示する - 1回券には、お得のラベルを表示しない ## アクセシビリティ - 回数は h3 - 金額は「22,000円、税込」とひと続きで読み上げられるようにする - 有効期限は、購入前に必ず目に入る位置に置く（小さくしすぎない） ## 出力形式 - [使用技術]のコードを1つ出力 - コースを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。