ファーストビューコード生成用
イベント告知のファーストビュー
タイトルと日時・場所を大きく見せて、申し込みへつなげる。
用途・説明
セミナー、展示会、ワークショップ、ライブなどのイベントを告知するファーストビューを作成します。イベント名、日時、場所、参加費を最初の画面にまとめ、申し込みボタンを置きます。いつ・どこで・いくらかが一目で分かるので、申し込むかどうかをすぐに判断できます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[イベント名]- 例：はじめてのWebデザイン講座
[日時]- 例：2026年5月24日（日）14:00〜16:00
[場所]- 例：オンライン開催（Zoom）
[参加費]- 例：無料・定員30名
[ボタン文言]- 例：参加を申し込む
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「イベント告知のファーストビュー」を実装してください。 ## 表示内容 - 状態のラベル：「参加受付中」 - イベント名：[イベント名] - 日時：[日時] - 場所：[場所] - 参加費・定員：[参加費] - ボタン：[ボタン文言] ## レイアウト - 中央揃え。上から ラベル → イベント名 → 情報の3項目 → ボタン - 情報は横に3つ並べる（日時・場所・参加費）。それぞれ、線のアイコンと文字を横に並べる - スマホ：情報を縦に並べ、左揃えにする ## デザイン - 背景：#1463F0 の9%の淡い色。右上と左下に、#1463F0 の20%の淡い色の大きな円を置く - ラベル：12px、font-weight 700、背景 #1463F0、文字 #FFFFFF、padding 4px 14px、角丸 999px - イベント名：PC 48px / スマホ 28px、font-weight 800、line-height 1.35、色 #1B2A44 - 情報：15px、font-weight 700、色 #1B2A44。アイコンは 20px、色 #1463F0 - 情報の入れ物：背景 #FFFFFF、角丸 12px、padding 16px 24px - ボタン：高さ 56px、左右padding 40px、角丸 999px、背景 #1463F0、文字 #FFFFFF・17px・font-weight 700 ## 状態の切り替え - 「参加受付中」「残りわずか」「満席」「終了しました」の4つの状態を用意する - 満席・終了のときはボタンを押せない見た目にし、文言を変える ## アクセシビリティ - イベント名は h1、日時は time 要素（datetime 属性付き） - 情報は dl / dt / dd でマークアップする（dt は視覚的に隠してよい） - 状態は色だけでなく文字で伝える ## 出力形式 - [使用技術]のコードを1つ出力 - イベントの構造化データ（Event）を JSON-LD で出力する例をコメントで補足する
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。