料金表コード生成用
ケース別の料金例
「こんな場合はいくら」を、具体的な例で見せる。
用途・説明
「5ページのサイトなら」「月に2回通うなら」のように、よくあるケースごとの料金例をカードで並べます。料金表だけでは総額が分かりにくいサービスで、「自分の場合はいくらくらいか」を想像しやすくなります。制作、工事、教室、撮影などの見積もり型のサービスに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[料金例]- ケース名・内訳・合計を2〜3つ
[注記]- 例：内容によって金額は変わります。正式なお見積りは無料です
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「ケース別の料金例」を実装してください。 ## 表示内容 [料金例] （各カード：ケースの番号、ケース名、内訳の一覧、合計金額） - 注記：[注記] ## レイアウト - PC：カードを横に並べる（2〜3列）。スマホ：1列 - カード内は上から ケースの番号 → ケース名 → 内訳 → 区切り線 → 合計 - 内訳の行数が違っても、合計の行がカードの下端でそろうようにする ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 16px、padding 28px 24px - ケースの番号：「CASE 01」。12px、font-weight 700、letter-spacing 0.15em、色 #1463F0 - ケース名：18px、font-weight 700、色 #1B2A44（例：会社案内サイト・5ページ） - 内訳：14px。左に項目、右に金額。あいだを点線でつなぐ - 区切り線：1px solid #E2E8F0 - 合計：左に「合計」（14px）、右に金額（28px、font-weight 700、色 #1463F0）。「税込」は 12px - 注記：13px、色 #5F6D84、一覧の下 16px、中央揃え ## 表示の決まり - 料金例は、実際にあった、または実際にありうる組み合わせだけを載せる - 金額が目安の場合は、合計の横に「目安」と書く ## アクセシビリティ - ケース名は h3、内訳は dl / dt / dd - 金額は tabular-nums で桁をそろえる - 点線は装飾なので、疑似要素で作る ## 出力形式 - [使用技術]のコードを1つ出力 - 料金例を配列で渡し、合計は内訳から自動で計算する
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。