アプリ風ヘッダー（検索バー + アバター）

このパーツの使いどころと実装ポイント

このパーツは、左にロゴ、中央に検索バー、右に通知ボタンとユーザーアバターを並べた「アプリ風」のヘッダーです。display:flex で要素を横一列にし、検索欄に flex:1 を与えて中央を伸縮させることで、画面幅が変わっても検索バーが中心に広がります。下線の薄いボーダーと白背景により、コンテンツと操作領域がすっきり分かれて見えるのが特徴です。

向いている場面

SaaS のダッシュボードや管理画面、社内ツール、Web アプリのログイン後画面など、検索とアカウント操作を常に手元に置きたい画面に向きます。会員制サービスのマイページや、データを探す機会が多い業務系アプリでも自然になじみます。

カスタマイズと注意点

• 検索欄は type="search" を使い、対応するラベルや aria-label で役割を補う
• 通知やアバターはアイコンだけで意味が伝わりにくいので、ボタンに説明テキストを持たせる
• アバターはグラデーションのプレースホルダなので、実際のユーザー画像や頭文字に置き換える

狭い画面では検索バーとアイコンが窮屈になりやすいため、スマホではロゴ＋メニューに畳むなどの分岐を検討してください。クリックで開く通知パネルやメニューは、別途スクリプトで挙動を実装します。