ファーストビューコード生成用
お知らせを添えたファーストビュー
写真の下端に、最新のお知らせを1行で添える。
用途・説明
大きな写真のファーストビューの下端に、最新のお知らせを1行で表示する帯を重ねます。臨時休業、営業時間の変更、新しいメニューなど、来る前に知ってほしい情報を最初の画面で伝えられます。店舗、クリニック、施設、学校のサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：からだにやさしい、毎日のごはん。
[お知らせ]- 日付とタイトル。例：5/1 ゴールデンウィークの営業について
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「お知らせを添えたファーストビュー」を実装してください。 ## 表示内容 - 背景の写真（仮の画像を置く） - 見出し：[見出し] - お知らせの帯：「お知らせ」のラベル、[お知らせ]、右端に「一覧へ」 ## レイアウト - 写真はセクション全体に敷く。高さは画面の 80%（最低 480px） - 見出しは左下寄り（左から 8%、下から 120px） - お知らせの帯は、セクションの下端に重ねる。左右に 24px の余白をとり、下端から 24px 浮かせる ## デザイン - 写真の上に、下から上へ薄くなる暗いグラデーション（rgba(17, 28, 48, 0.6) → 透明）を重ねる - 見出し：PC 44px / スマホ 28px、font-weight 500、line-height 1.5、色 #FFFFFF - お知らせの帯：背景 #FFFFFF、角丸 12px、高さ 56px、左右padding 20px、影 0 8px 24px rgba(27, 42, 68, 0.12) - ラベル：11px、font-weight 700、背景 #1463F0、文字 #FFFFFF、padding 2px 10px、角丸 999px - 日付：13px、色 #5F6D84。タイトル：15px、色 #1B2A44、1行で省略 - 「一覧へ」：13px、font-weight 700、色 #1463F0 ## 動作 - お知らせが複数ある場合は、5秒ごとに上へスライドして切り替える。マウスを載せている間とフォーカス中は止める - お知らせがないときは、帯を表示しない ## アクセシビリティ - 帯の全体をリンクにして、そのお知らせのページへ移動できるようにする - 自動で切り替える場合は、停止ボタンを用意する。prefers-reduced-motion のときは切り替えない - 日付は time 要素 - 見出しは h1 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。