料金表コード生成用
サービス別の料金テーブル
項目・内容・料金を、表でまっすぐに並べる。
用途・説明
サービスの項目、内容、料金を、シンプルな表で一覧にする料金表を作成します。項目が多く、カードでは並べきれない場合に向いています。士業の報酬、修理や工事の料金、制作の料金、クリニックの自費診療など、項目ごとに金額が決まっているサービスで使えます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[料金項目]- 項目名・内容・料金を5〜8行
[区分]- 表を分ける場合の見出し。例：基本料金、追加料金
[注記]- 例：表示はすべて税込です
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「サービス別の料金テーブル」を実装してください。 ## 表示内容 [料金項目] - 区分：[区分] - 注記：[注記] ## レイアウト - 3列の表：項目（幅 30%）、内容（幅 45%）、料金（幅 25%・右揃え） - 区分ごとに、表のなかに見出しの行を入れる - スマホ：表をやめ、1項目ごとに「項目名と料金」を1段目、「内容」を2段目に並べる ## デザイン - 表の全体：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、overflow: hidden - 見出しの行（列名）：背景 #F7F9FC、13px、font-weight 700、色 #5F6D84 - 区分の行：背景は #1463F0 の9%の淡い色、14px、font-weight 700、色 #1463F0 - データの行：上下 padding 16px、左右 padding 20px、行の間は 1px solid #E2E8F0 - 項目名：15px、font-weight 700。内容：14px、色 #5F6D84 - 料金：16px、font-weight 700、数字は tabular-nums で桁をそろえる。「〜」が付く場合は小さく添える - 注記：12px、色 #5F6D84、表の下 12px ## アクセシビリティ - table 要素を使い、列名は th（scope="col"）、項目名は th（scope="row"）にする - caption 要素で表の説明を付ける（視覚的に隠してよい） - スマホ用の並びでも、table の構造は保ったままCSSで見た目を変える方法を説明する - 横スクロールにする場合は、スクロールできることが分かる表示を付ける ## 出力形式 - [使用技術]のコードを1つ出力 - 料金項目を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。