モーダル・通知・タブコード生成用
ページ上部のお知らせバー
ヘッダーの上に、大切なお知らせを1行で。
用途・説明
ヘッダーのさらに上に表示する、1行のお知らせバーを作成します。休業日、メンテナンス、新機能、キャンペーンなどを、どのページでも目に入る場所で伝えます。閉じたら、同じお知らせは再び表示しません。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ラベル]- 例：NEW、重要、お知らせ
[お知らせの文]- 例：年末年始の営業について
[リンク先]- 詳細ページのURL
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「ページ上部のお知らせバー」を実装してください。 ## 表示内容 - ラベル：[ラベル] - お知らせ：[お知らせの文] - リンク：「詳しく見る」（[リンク先]） - 右端に閉じるボタン（✕） ## レイアウト - ページのいちばん上、ヘッダーの上に、画面の幅いっぱいで表示する - 内容は中央揃えで横1行。閉じるボタンだけ右端に置く - スマホで1行に収まらないときは、2行まで折り返す（省略しない） - 上下padding 10px。左右は、閉じるボタンと重ならないよう余白を取る ## デザイン - 背景：#1463F0 - お知らせ：14px、色 #FFFFFF - ラベル：11px、font-weight 700、背景 #FFFFFF、文字 #1463F0、角丸 999px、padding 2px 10px - リンク：font-weight 700、色 #FFFFFF、下線つき - 閉じるボタン：32×32px、アイコン 16px、色 rgba(255,255,255,0.8) ## 動作 - 閉じたら、高さを 0.2秒で縮めて消す（下のヘッダーががたつかないように） - 閉じたことを localStorage に保存する。お知らせごとに id を持たせ、内容が変わったら再び表示する - 表示する期間（開始と終了の日時）を指定できるようにする - ヘッダーが position: sticky の場合に、バーの高さぶんずれないよう配慮する ## 種類 - 重要なお知らせ（障害、休業など）用に、背景 #FDF2F2・文字 #C9343A の色違いも用意する。このときは閉じるボタンを付けない ## アクセシビリティ - role="region" と aria-label="お知らせ" を付ける - 閉じるボタンに aria-label="お知らせを閉じる" - #1463F0 の背景と白い文字のコントラスト比 4.5:1 以上を確認する - 動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。