料金表コード生成用
1プランだけの料金カード
プランが1つのサービス向けの、迷わせない料金表示。
用途・説明
料金プランが1つだけのサービスに使う料金カードを作成します。価格、含まれる内容のチェックリスト、申し込みボタンを中央の1枚にまとめます。オンライン講座、月額サービス、買い切りの商品などに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[プラン名]- 例：スタンダードプラン
[価格]- 例：1,980円 / 月（税込）
[含まれる内容]- 5〜6項目
[ボタン文言]- 例：申し込む
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「1プランだけの料金カード」を実装してください。 ## 表示内容 - プラン名：[プラン名]、価格：[価格] - 含まれる内容：[含まれる内容] - ボタン：[ボタン文言]、ボタンの下の注記（例：いつでも解約できます） ## レイアウト - カードは中央に1枚。最大幅 440px - カード内は上から プラン名 → 価格 → チェックリスト → ボタン → 注記 ## デザイン - カード：背景 #FFFFFF、枠線 2px solid #1463F0、角丸 16px、padding 36px 32px - プラン名：15px、font-weight 700、色 #5F6D84 - 価格：44px、font-weight 700、色 #1B2A44。「円 / 月（税込）」は 14px で #5F6D84 - チェックリスト：15px、色 #1B2A44、行間 12px。先頭に #1463F0 のチェックマーク - ボタン：幅100%、高さ 52px、背景 #1463F0、文字 #FFFFFF、角丸 10px - 注記：12px、色 #5F6D84、中央揃え ## アクセシビリティ - 価格は「月額1,980円（税込）」のように、読み上げても意味が通る文字にする - チェックリストは ul / li、チェックマークは aria-hidden="true" - 税込・税別、契約期間などの条件を、価格の近くに文字で示す ## 出力形式 - [使用技術]のコードを1つ出力 - 色・角丸・余白をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。