料金表コード生成用
機能ごとのチェック比較表
機能を行に、プランを列にして、○と−で違いを一覧に。
用途・説明
機能を縦に、プランを横に並べ、使える機能にチェックを付ける比較表を作成します。機能をカテゴリごとにまとめ、プラン名の行は画面の上に固定されるので、長い表でもどのプランの列かを見失いません。機能の多いSaaSの料金ページに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[プラン名]- 例：Free、Pro、Team
[機能と対応]- カテゴリ・機能名・各プランの対応（○、−、または数値）
[強調するプラン]- 例：Pro
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「機能ごとのチェック比較表」を実装してください。 ## 表示内容 - プラン：[プラン名] - 機能と対応： [機能と対応] - 強調するプラン：[強調するプラン] ## レイアウト - 左端の列に機能名、右にプランの列を並べる。プランの列は同じ幅 - 機能はカテゴリごとにまとめ、カテゴリ名の行を入れる - プラン名の行は position: sticky で、スクロールしても上に残す - スマホ：機能名の列を左に固定し、プランの列を横スクロールにする。または、上にプランを選ぶタブを置いて1列ずつ表示する（どちらかを選び、理由を書く） ## デザイン - 表：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px - プラン名の行：背景 #FFFFFF、15px、font-weight 700、下に 2px solid #E2E8F0 - カテゴリ名の行：背景 #F7F9FC、13px、font-weight 700、色 #5F6D84 - 機能の行：高さ 48px、14px、行の間は 1px solid #E2E8F0 - 使える：#1463F0 のチェックマーク（20px）。使えない：グレーの「−」 - 数値の場合（例：3件、無制限）：14px、font-weight 700 - 強調するプランの列：背景は #1463F0 の9%の淡い色 ## アクセシビリティ - table 要素を使い、プラン名は th（scope="col"）、機能名は th（scope="row"）にする - チェックマークと「−」には、読み上げ用の文言（「利用できます」「利用できません」）を付ける - カテゴリ名の行は、th に colspan を指定してまとめる - 機能名に補足が必要な場合は、ツールチップではなく、機能名の下に小さく書く ## 出力形式 - [使用技術]のコードを1つ出力 - 機能を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。