料金表コード生成用
横長の行で並べる料金リスト
プランを1行ずつ並べて、名前と価格を見比べやすく。
用途・説明
プランを横長の行として縦に並べる料金リストを作成します。1行にプラン名・説明・価格・ボタンを収めるので、プランが4つ以上ある場合や、カードを横に並べる幅がないページに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[プランの内容]- プラン名・ひとこと説明・価格を3〜5件
[おすすめのプラン]- 目立たせるプラン名
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「横長の行で並べる料金リスト」を実装してください。 ## 表示内容 [プランの内容] （各行：プラン名、ひとこと説明、価格、「選ぶ」ボタン） [おすすめのプラン] には「おすすめ」のラベルを付ける ## レイアウト - 全体を1枚のカード（背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px）にし、行の間を 1px の線で区切る - PC：左から プラン名と説明 → 価格（右寄せ）→ ボタン - スマホ（640px未満）：プラン名と説明 → 価格とボタン の2段にする ## デザイン - 行の padding：20px 24px - プラン名：16px、font-weight 700、色 #1B2A44。説明：13px、色 #5F6D84 - 価格：20px、font-weight 700、色 #1B2A44。「/ 月」は 12px で #5F6D84 - ボタン：高さ 40px、枠線 1px solid #1463F0、文字 #1463F0。おすすめの行だけ背景 #1463F0・文字 #FFFFFF - おすすめの行：#1463F0 の5%の背景 ## アクセシビリティ - リストは ul / li、プラン名は h3 - 「おすすめ」は色だけでなく文字のラベルで伝える - ボタンには「（プラン名）を選ぶ」のラベルを付け、どのプランのボタンか分かるようにする ## 出力形式 - [使用技術]のコードを1つ出力 - プランを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。