料金表コード生成用
キャンペーン価格の料金カード
通常価格に線を引き、割引後の価格と期限を見せる。
用途・説明
期間限定の割引や初月無料などのキャンペーンを伝える料金カードを作成します。通常価格に取り消し線を引き、割引後の価格を大きく見せ、期限を添えます。誤解を招かない表示のための注意点も含みます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[プラン名]- 例：スタンダードプラン
[通常価格]- 例：2,980円
[キャンペーン価格]- 例：1,980円 / 月
[キャンペーン名と期限]- 例：春の30%OFF・5月31日まで
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「キャンペーン価格の料金カード」を実装してください。 ## 表示内容 - キャンペーンのラベル：[キャンペーン名と期限] - プラン名：[プラン名] - 通常価格：[通常価格]（取り消し線）、キャンペーン価格：[キャンペーン価格] - 適用条件の注記、申し込みボタン ## レイアウト - カードは中央に1枚。最大幅 420px、中央揃え - 上から ラベル → プラン名 → 通常価格 → キャンペーン価格 → 注記 → ボタン ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 16px、padding 32px - ラベル：12px、font-weight 700、背景 #1463F0、文字 #FFFFFF、角丸 9999px - 通常価格：16px、色 #5F6D84、取り消し線 - キャンペーン価格：44px、font-weight 700、色 #1463F0。「円 / 月」は 14px で #1B2A44 - 注記：12px、色 #5F6D84（例：2か月目以降は通常価格になります） - ボタン：幅100%、高さ 52px、背景 #1463F0、文字 #FFFFFF ## 表示の注意 - 通常価格は、実際にその価格で提供していた（または提供する）ものだけを書く - 期限と適用条件は、価格のすぐ近くに文字で示す - 税込・税別を明記する ## アクセシビリティ - 取り消し線の価格には「通常価格」、割引後には「キャンペーン価格」の文字を、見えない形でもよいので付ける（del / ins 要素の利用を検討） - ラベルの白い文字と #1463F0 のコントラスト比 4.5:1 以上 ## 出力形式 - [使用技術]のコードを1つ出力 - 価格と期限を差し替えやすいよう、変数や定数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。