料金表コード生成用
早期割引の料金カード
締め切りまでの段階ごとに、いまの料金がどれかを示す。
用途・説明
申し込みの時期によって料金が変わる、早期割引の料金カードを作成します。「超早割」「早割」「通常」のような段階を横に並べ、いま適用される料金を強調します。イベント、講座、ツアー、先行予約など、早く申し込むほどお得になる募集に向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[段階]- 名前・期限・価格を3つ。例：超早割 4/30まで 8,000円
[いまの段階]- 例：早割
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「早期割引の料金カード」を実装してください。 ## 表示内容 [段階] （各段階：名前、期限、価格） - いまの段階：[いまの段階] - いまの段階の下に、ボタン「この料金で申し込む」 ## レイアウト - PC：3つの段階を横に並べ、あいだを右向きの矢印でつなぐ - スマホ：縦に並べ、矢印は下向きにする - いまの段階のカードだけ、少し大きくする（上下に 12px） ## デザイン - 終了した段階：背景 #F7F9FC、文字 #8A96AA、価格に取り消し線。右上に「終了」のラベル - いまの段階：背景 #FFFFFF、枠線 2px solid #1463F0、影 0 12px 32px rgba(20, 99, 240, 0.15)。上端に「受付中」のラベル（背景 #1463F0、文字 #FFFFFF） - これからの段階：背景 #FFFFFF、枠線 1px solid #E2E8F0 - 共通：角丸 16px、padding 24px 20px、中央揃え - 名前：14px、font-weight 700。期限：12px、色 #5F6D84。価格：28px、font-weight 700 - いまの段階には、通常料金との差額を「通常より 4,000円お得」と添える（12px、#1463F0） ## 動作 - 各段階の期限を設定に持ち、現在の日時から「いまの段階」を自動で判定する - 期限は日本時間（+09:00）で扱う - 判定を手動で上書きできる設定も用意する ## アクセシビリティ - 段階の並びは ol / li でマークアップする - 「終了」「受付中」は色だけでなく文字で示す - 期限は time 要素にする - 取り消し線の価格は、読み上げで「終了した料金」と分かるようにする ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。