料金表コード生成用
プランの機能比較表
どのプランで何ができるかを、表で一覧に。
用途・説明
プランごとの機能の有無や上限を、行と列で見比べられる比較表として作成します。料金カードの下に置き、細かい違いを確認したい人に応える用途です。スマホでも横に見比べられるよう、項目名の列を固定する指定にしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[プラン名]- 例：Free、Pro、Team
[比較項目]- 項目名と各プランの内容を表や箇条書きで
[おすすめプラン]- 例：Pro
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「プランの機能比較表」を実装してください。 ## 表示内容 - プラン（列）：[プラン名] - 比較項目（行）： [比較項目] - おすすめプラン：[おすすめプラン] ## 構成 - 1列目が項目名、2列目以降が各プラン - 項目が多い場合は「基本機能」「チーム機能」「サポート」などのグループに分け、グループ名の行を入れる - セルの内容は3種類：対応（チェック）、非対応（ダッシュ）、文字（例：3件、無制限） ## デザイン - 表全体：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px - ヘッダー行：背景 #F7F9FC、font-weight 700、スクロールしても上に固定（position: sticky） - 行の区切り：1px solid #E2E8F0。セルの padding は 14px 16px - 項目名：左揃え、色 #47566E。プランのセル：中央揃え - おすすめプランの列：#1463F0の8%の背景を縦に通し、ヘッダーに「おすすめ」ラベル - チェックは #1463F0、ダッシュは #9AA5B8 ## スマホ - 表を横スクロールできるコンテナで包み、1列目（項目名）を左に固定する（position: sticky） - 固定した列の右端に薄い影を付け、スクロールできることを示す - 各プラン列の最小幅は 96px ## アクセシビリティ - table 要素で実装し、caption に表の内容を書く - プラン名は th scope="col"、項目名は th scope="row"、グループ名は th scope="colgroup" か rowgroup - チェックとダッシュは記号だけにせず、視覚的に隠したテキスト「対応」「非対応」を添える - 横スクロールのコンテナに tabindex="0"、role="region"、aria-label を付け、キーボードでもスクロールできるようにする ## 出力形式 - [使用技術]のコードを1つ出力 - 比較項目はデータ（配列）として分離する - [比較項目]に書かれていない機能や数値は追加しないこと
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。