料金表コード生成用
オプション料金の一覧
基本料金に追加できるオプションを、内容と価格で並べる。
用途・説明
基本プランに追加できるオプションを、名前・説明・価格の一覧で見せる料金表を作成します。制作会社の追加作業、サロンのオプションメニュー、サービスの追加機能など、基本料金とは別に選べる項目がある場合に、料金表の下へ置いて使います。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[オプション]- 名前・説明・価格を3〜6個
[注記]- 例：価格はすべて税込です
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「オプション料金の一覧」を実装してください。 ## 表示内容 - 見出し：「オプション」と、「必要なものだけ追加できます」の一文 [オプション] （各行：アイコン、オプション名、説明、価格） - 注記：[注記] ## レイアウト - 1枚のカードのなかに行を縦に並べ、行の間は 1px solid #E2E8F0 で区切る - 各行：左にアイコン、中央にオプション名と説明、右端に価格 - スマホ：アイコンと名前を1段目、説明を2段目、価格を右上に ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 16px、padding 8px 24px - 各行：上下 padding 20px - アイコンの枠：40×40px、角丸 10px、背景は #1463F0 の9%の淡い色。アイコンは #1463F0 - オプション名：16px、font-weight 700、色 #1B2A44 - 説明：13px、色 #5F6D84 - 価格：先頭に「＋」を付ける。18px、font-weight 700。単位（/ 月、/ 回）は 12px・色 #5F6D84 - 注記：12px、色 #5F6D84、カードの下 12px ## アクセシビリティ - 一覧は ul / li でマークアップする - 価格の「＋」は「追加料金」と読み上げられるようにする - アイコンは aria-hidden="true" - 人気のオプションに「人気」のラベルを付ける場合は、色だけでなく文字で示す ## 出力形式 - [使用技術]のコードを1つ出力 - オプションを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。