料金表コード生成用
チケット風の料金カード
左右に切り欠きのあるチケットの形で、料金を楽しく見せる。
用途・説明
入場券のような、左右に半円の切り欠きがあるチケット型の料金カードを作成します。イベントの参加費、施設の入場料、体験レッスン、ワークショップなど、1回ごとの料金を案内する場面に向いています。大人・子どもなどの区分を横に並べられます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[チケットの種類]- 区分・価格・補足を2〜3つ。例：大人 1,500円
[含まれるもの]- 例：入場料、ワンドリンク
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「チケット風の料金カード」を実装してください。 ## 表示内容 [チケットの種類] （各チケット：区分、価格、補足） - 含まれるもの：[含まれるもの] ## レイアウト - PC：チケットを横に並べる（間隔 20px）。スマホ：縦に並べる - 1枚のチケットは上下2段：上段に区分と価格、点線をはさんで、下段に補足と含まれるもの - 点線の左右の端に、半円の切り欠きを付ける ## デザイン - チケット：背景 #FFFFFF、角丸 16px、影 0 8px 24px rgba(27, 42, 68, 0.08)、幅 240px - 上段：背景 #1463F0、文字 #FFFFFF、padding 24px、中央揃え - 区分：14px、font-weight 700。価格：32px、font-weight 700。「税込」は 12px - 点線：2px dashed #DCE4F0 - 切り欠き：直径 24px の半円。セクションの背景色と同じ色の円を重ねる、または mask で切り抜く（どちらで作ったかを明記） - 下段：padding 20px 24px、13px、line-height 1.8、色 #5F6D84 ## アクセシビリティ - 区分は h3 - 価格は「1,500円、税込」とひと続きで読み上げられるようにする - 白い文字と #1463F0 のコントラスト比 4.5:1 以上 - 切り欠きや点線は装飾なので、疑似要素で作る ## 出力形式 - [使用技術]のコードを1つ出力 - チケットを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。