料金表コード生成用
料金に含まれるものの一覧
含まれるもの・含まれないものを、左右に分けてはっきり示す。
用途・説明
料金に「含まれるもの」と「含まれないもの（別料金）」を左右に並べる一覧を作成します。あとから「それは別料金です」と言わずに済むよう、申し込みの前に範囲をはっきり伝えられます。制作、工事、ツアー、撮影、コンサルティングなど、範囲が分かりにくいサービスに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[含まれるもの]- 3〜6個
[含まれないもの]- 別料金になるものを2〜4個
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「料金に含まれるものの一覧」を実装してください。 ## 表示内容 - 左：「料金に含まれるもの」 [含まれるもの] - 右：「別料金になるもの」 [含まれないもの] ## レイアウト - PC：左右2枚のカードを並べる（間隔 24px）。高さをそろえる - スマホ：縦に並べる（含まれるものが上） ## デザイン - 含まれるもののカード：背景 #FFFFFF、枠線 2px solid #1463F0、角丸 16px、padding 28px - 含まれないもののカード：背景 #F7F9FC、枠線 1px solid #E2E8F0、角丸 16px、padding 28px - カードの見出し：16px、font-weight 700。含まれるものは #1463F0、含まれないものは #5F6D84 - 項目：15px、line-height 1.7、項目の間隔 12px - 含まれるものの行頭：#1463F0 の丸のなかに白いチェックマーク（20px） - 含まれないものの行頭：グレーの丸のなかに「−」（20px）。文字色 #5F6D84 - 含まれないものには、わかる場合は目安の金額を右に添える（13px） ## アクセシビリティ - それぞれのカードの見出しを h3、項目を ul / li にする - 行頭の記号は aria-hidden="true" にし、見出しで「含まれる／別料金」が分かるようにする - 色だけで区別しない（見出しの文言と記号でも区別する） ## 出力形式 - [使用技術]のコードを1つ出力 - 項目を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。