料金表コード生成用
料金シミュレーター
項目を選ぶと合計がその場で変わる、かんたん見積もり。
用途・説明
オプションを選ぶと合計金額がその場で変わる、かんたんな料金シミュレーターを作成します。サイト制作、撮影、リフォーム、イベントなど、内容によって金額が変わるサービスの料金ページに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[基本料金]- 例：基本プラン 30,000円
[オプション]- 名前と金額を4〜6件
[ボタン文言]- 例：この内容で相談する
[使用技術]- 例：HTML/CSS/JavaScript、React + Tailwind CSS
プロンプト全文
あなたはアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「料金シミュレーター」を実装してください。 ## 表示内容 - 基本料金：[基本料金]（常に含まれる） - オプション：[オプション]（チェックで追加） - 合計金額と、ボタン：[ボタン文言] ## レイアウト - 1枚のカード（最大幅 560px、背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 16px、padding 28px） - 上から 基本料金 → オプションの一覧 → 区切り線 → 合計 → ボタン - 各行：左にチェックボックスと名前、右に金額 ## デザイン - 名前：15px、色 #1B2A44。金額：15px、font-weight 700、等幅の数字 - チェックボックス：20px 四方、角丸 5px。チェック時は背景 #1463F0 に白のチェック - 合計：ラベル 14px・font-weight 700、金額 28px・font-weight 700・色 #1463F0 - ボタン：幅100%、高さ 52px、背景 #1463F0、文字 #FFFFFF - 注記「表示は目安です。正式な金額はお見積もりでご案内します」を 12px・色 #5F6D84 で添える ## 動作 - チェックを切り替えるたびに合計を再計算し、3桁区切りで表示する - 金額は数値のデータとして持ち、表示用の文字列から計算しない - ボタンを押したとき、選んだ内容を次の画面やフォームに引き継ぐ方法を併記する ## アクセシビリティ - オプションは fieldset と legend でまとめ、各項目は label 付きの checkbox - 合計は aria-live="polite" で、変わったときに読み上げる - キーボードだけですべて操作できること ## 出力形式 - [使用技術]のコードを1つ出力 - 基本料金とオプションを配列で渡す形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。