料金表コード生成用
対象で切り替えるタブ付き料金表
「個人」「法人」のタブで、表示するプランを入れ替える。
用途・説明
「個人向け／法人向け」「学生／一般」「平日／土日祝」のように、対象によってプランが変わる料金表を作成します。上のタブを切り替えると、下のプランのカードが入れ替わります。一度に見せる情報を減らせるので、自分に関係のあるプランだけを比べられます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[タブ名]- 例：個人の方、法人の方
[タブごとのプラン]- タブごとに、プラン名・価格・内容を2〜3つ
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「対象で切り替えるタブ付き料金表」を実装してください。 ## 表示内容 - タブ：[タブ名] - タブごとのプラン： [タブごとのプラン] ## レイアウト - タブは中央揃え。その下にプランのカードを横に並べる（スマホは1列） - タブとカードの間隔 32px ## デザイン - タブ：下線型。各タブは左右padding 24px・高さ 48px・文字 16px・色 #5F6D84 - 選択中のタブ：文字 #1463F0・font-weight 700、下に 3px の #1463F0 の線 - タブの下に、全幅の 1px solid #E2E8F0 - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 16px、padding 28px 24px - プラン名 16px・font-weight 700、価格 32px・font-weight 700、内容 14px（チェックマーク付き） - ボタン：高さ 48px、角丸 999px、枠線 1px solid #1463F0、文字 #1463F0 ## 動作 - タブを切り替えると、カードが 0.15秒のフェードで入れ替わる - 選択中のタブをURLのパラメーター（?for=business）に反映し、そのURLを開いたときに同じタブが選ばれる ## アクセシビリティ - role="tablist"、role="tab"、role="tabpanel" を使い、aria-selected と aria-controls を正しく設定する - 左右の矢印キーでタブを移動できる - 非表示のタブの内容は、検索エンジンにも読まれるよう、HTMLには残して hidden 属性で隠す - 切り替えの動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力 - タブとプランを、入れ子の配列で渡せるようにする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。