アプリ風ヘッダー（アバター + 通知）
このパーツは、管理画面や SaaS のダッシュボードで定番となるアプリ風ヘッダーです。左にロゴ、中央に検索入力欄、右に通知ベルとユーザーアバターを横並びにし、 display:flex と margin-left:auto で要素を左右に振り分けています。
このパーツの使いどころと実装ポイント
このパーツは、管理画面や SaaS のダッシュボードで定番となるアプリ風ヘッダーです。左にロゴ、中央に検索入力欄、右に通知ベルとユーザーアバターを横並びにし、display:flex と margin-left:auto で要素を左右に振り分けています。通知ベルには小さな赤いドット（hap__dot）を重ね、未読があることをひと目で伝えられる構造です。
向いている場面
- 会員制サービスやツールのログイン後トップ
- 受注管理・予約管理などの社内システム
- 分析ダッシュボードや CMS の上部バー
検索欄は flex:1 で伸縮し、画面幅に応じて自然に広がります。アバターは頭文字を入れたプレースホルダなので、実画像に差し替える際は border-radius:50% を保ったまま object-fit:cover を指定すると顔が崩れません。
実装上の注意
通知ベルや検索のボタンには aria-label を付け、何の操作かを読み上げ環境にも伝えてください。狭い画面では検索欄を隠してアイコン化するなど、要素の優先順位を決めておくと崩れにくくなります。ベルの SVG は currentColor 指定なので、文字色を変えるだけでアイコン色も追従します。
よくある質問
通知ベルの赤いドットを未読数のバッジに変えられますか。
できます。hap__dot の要素にテキストを入れてサイズと角丸を調整すれば数字バッジになります。0件のときは要素自体を非表示にし、件数が増えたら表示する制御をJSで加えると自然です。
スマートフォンで検索欄が窮屈になります。
検索欄はflex:1で伸縮しますが、狭い画面では幅が足りなくなります。一定幅以下では検索欄を虫眼鏡アイコンだけにして、タップで展開する方式に切り替えると収まりが良くなります。