料金表コード生成用
無料と有料の2列比較
無料でできること・有料でできることを、左右に並べて示す。
用途・説明
無料プランと有料プランを左右に並べ、できることの違いを同じ項目で比べられる料金表を作成します。まず無料で使ってもらい、必要になったら有料へ進んでもらうサービスに向いています。無料の側にも十分な内容があることを見せると、はじめる不安が減ります。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[無料でできること]- 項目ごとに。例：プロジェクト3件まで
[有料でできること]- 無料と同じ項目について。例：無制限
[有料プランの価格]- 例：月額 980円
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「無料と有料の2列比較」を実装してください。 ## 表示内容 - 無料プラン（¥0）： [無料でできること] - 有料プラン（[有料プランの価格]）： [有料でできること] - それぞれのボタン：「無料ではじめる」「有料プランを試す」 ## レイアウト - PC：左右2枚のカードを並べる（間隔 0。中央で接するようにし、1つの表に見せる） - スマホ：縦に並べる（無料が上） - 2枚のカードで、項目の行の高さをそろえる（左右で同じ行に同じ項目が来る） ## デザイン - 無料のカード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 16px 0 0 16px - 有料のカード：背景 #FFFFFF、枠線 2px solid #1463F0、角丸 0 16px 16px 0。上部に #1463F0 の帯（高さ 6px） - プラン名：16px、font-weight 700。価格：32px、font-weight 700 - 項目：15px、行の上下 padding 12px、行の間は 1px solid #E2E8F0 - できること：行頭に #1463F0 のチェックマーク - できないこと：行頭にグレーの「−」、文字色 #8A96AA - ボタン：高さ 48px、角丸 999px。無料は枠線、有料は #1463F0 の塗り ## アクセシビリティ - それぞれのカードのプラン名を h3 にする - 「できる／できない」を記号だけでなく、読み上げ用の文言（「利用できます」「利用できません」）でも伝える - 色だけで違いを示さない ## 出力形式 - [使用技術]のコードを1つ出力 - 項目を配列（項目名・無料の値・有料の値）で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。