色々なWebサービスのヘッダーデザインまとめ

色々なWebサービスのヘッダーデザインについてまとめ、分類してみました。
分類の主軸は、アクティビティアイコンがどこに配置されているかです。
アクティビティアイコンとは、Facebookでいいねが押されたりメッセージが来たりした時に、赤い数字で通知してくれるアレのことを指しています。

アクティビティとプロフィールアイコンがセットで右側

よく見る配置であり、個人的には一番しっくりくる位置です。

Google

Hatena

KICKSTARTER

nanapi

Qiita

airbnb

Gidsy

Fancy

アクティブアイコン画像がユニーク。プロフアイコン隣のギザギザしているやつです。

アクティビティアイコンの位置が左側

少数派ですが、Facebookで使い慣れているからか、特に違和感はないです。

Facebook

Retty

Sumally

コーヒーミーティング

コーヒーミーティングは提示方法が変わっていて、多くのサービスがアイコンをクリックするとポップアップで内容が提示されるのに対して、画面が右にスライドして、左サイドに通知内容が提示されます。

ココナラ

メッセージのみですが、ロゴの横に提示されています。プロフィールアイコンと離れているのが珍しい配置です。

アクティビティアイコンの位置が真ん中

珍しいデザインです。開いた時のポップアップが画面の中心にかぶるので、少し見にくいかもしれません。

pixiv

fiverr

プロフィールメニューの内容

多くのサービスで、プロフィール画像+ニックネームという形でプロフィールメニューへの導線が設置されています。内容もほとんど統一されており、以下を含んでおけば、今日のWebサービスの使い勝手としては親和性が高くいいと思います。

• マイページ/プロフィール
• プロフィール編集
• アカウント設定（メール受け取るかなど）
• ヘルプ
• ログアウト

サービス固有のアクションが追加されていることも多く、Wantedlyであれば応募履歴、airbnbであれば旅行履歴が追加されています。

その他

プルダウンがあるメニューとないメニュー

Rettyのヘッダーメニューでは、マウスオーバーでプルダウンがでるものとでないものがあります。でるものは「アカウント▼」のように、▼でプルダウンがあることを提示しています。逆に、プルダウンがないメニューは、個別のアイコンをメニュー名の頭に置いています。

アクティビティアイコンクリック時の挙動

ほとんどのサービスが、ポップアップで最新数件の内容を表示してくれますが、airbnbやGidsyは、クリックするとすぐにメッセージ画面等に遷移してしまうので、ビミョーかなと思いました。。。ポップアップ内に「もっと見る」といったリンクを設置し、必要に応じてページ遷移が発生するつくりだとユーザとしてはありがたいです。

未読数の提示方法

数字のみでダイレクトに提示するサービスと、アイコンの上に数字をオーバレイするサービスとがあります。前者はWantedlyやQiita、後者はFacebook等があります。
個人的にはアイコンパターンの方が好きです。数字ドーンだとデザイン的に浮いている感じを受けます。

Facebookの実装で当たり前となったアクティビティ通知。ヘッダー内の要素も増えてきて色々と悩みますが、世の中に広く出回っている = ユーザが慣れ親しんでいるパターンがいくつかあるので、参考になると思います。