バナーパーツ

バナーは、特定のプロダクト、サービス、お知らせなどを目立つ形で表示し、他のページへ案内するために使います。非常に使い勝手が良いので、一時的なキャンペーンなどで活躍します。

トップバナー型

ページトップに、幅いっぱいの細いバー(バナー)を表示することで、別ページへ案内するパーツを作ることで、キャンペーンや、今推しているプロダクトへのリンクを案内することができます。

以下のプロンプトを参考に、作成を行い、修正を行なってみてください。

バナーをページトップに挿入してください。

- 幅いっぱいの細長いバーです
- 2025年11月2日に開催する「CWMミートアップの募集」を知らせるためのものです
- CWMミートアップの案内ページは、 /2025meetup です
- カラーは、黄色を基調としたグラデーション背景を使ってください
- アイコンなどを入れて、カジュアルなものにしてください

以下のような情報を入れるようにします

  • なんのためか?
  • どんなデザインが良いのか?
  • 具体的なプロダクト名や、イベント名、お知らせなど
  • カラーや、雰囲気、スタイルについて

セクションにバナー

ヒーローセクションのすぐ下に、イベントを知らせるためのバナーセクションを用意してください。

- 2025年11月2日 に開催のイベント(Claude Webmaster ミートアップ)
- カウントダウンタイマー
- 詳しくは、こちらボタンで別ページにリンク
- 角丸、シャドウ、カード型(幅広)で目立たせる
banner パーツ 告知 通知 案内 announcement notification キャンペーン campaign イベント event セール sale トップバー top bar 幅いっぱい full width カード型 card カウントダウン countdown タイマー timer プロモーション promotion お知らせ notice ミートアップ meetup 募集 recruitment グラデーション gradient tailwind css floatui flowbite プロンプト prompt 作成方法 作り方 how to create デザイン design カジュアル casual スタイル style コンポーネント component ui parts ヒーロー hero 角丸 rounded shadow シャドウ リンク link ボタン button 目立つ stand out 注目 attention