料金表コード生成用
利用量で料金が変わるスライダー
つまみを動かすと、使う量に応じた月額がその場で変わる。
用途・説明
利用量（送信数、ユーザー数、容量など）をスライダーで選ぶと、その量に応じた月額が表示される料金表を作成します。使った分だけ料金が変わる従量課金のサービスで、「自分の場合はいくらか」をその場で確かめてもらえます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[利用量の項目]- 例：月のメール送信数
[段階と料金]- 例：1,000通まで0円、5,000通まで980円、20,000通まで2,980円
[上限を超える場合]- 例：お問い合わせください
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「利用量で料金が変わるスライダー」を実装してください。 ## 表示内容 - 質問：「[利用量の項目]はどのくらいですか？」 - スライダーと、いま選んでいる量 - その量の月額 - 段階と料金：[段階と料金] - 上限を超える場合：[上限を超える場合] ## レイアウト - 1枚のカード（最大幅 640px、中央配置） - 上から 質問 → 選んでいる量 → スライダー → 目盛り → 区切り線 → 月額 → ボタン ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 16px、padding 40px - 選んでいる量：20px、font-weight 700、色 #1463F0 - スライダー：レールの高さ 8px・背景 #E2E8F0。つまみより左は #1463F0。つまみは直径 28px・白・枠線 3px solid #1463F0 - 目盛り：段階の区切りに小さな印と数値（12px、色 #5F6D84） - 月額：44px、font-weight 700、色 #1B2A44。「/ 月（税込）」は 14px - ボタン：高さ 52px、角丸 999px、背景 #1463F0、文字 #FFFFFF ## 動作 - スライダーは段階ごとに止まる（中間の値は選べない） - つまみを動かすと、月額がすぐに変わる - いちばん右を選んだときは、月額の代わりに「[上限を超える場合]」と表示し、ボタンを問い合わせへの導線に変える - 段階と料金は、配列の設定を1か所変えるだけで更新できるようにする ## アクセシビリティ - input type="range" を使い、label と関連付ける - aria-valuetext で「5,000通まで、月額980円」のように読み上げられるようにする - 月額の変化を aria-live="polite" で伝える - スライダーが使いにくい人のために、同じ段階を選べるボタン（またはセレクトボックス）も用意する ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。