調べる機会があったのでまとめました。
方法はPCでChromeのDeveloperツールを利用してポチポチと調べてみました。
結果
サービス | ヘッダー高さ ※下段はモバイルページ |
ロゴ(PC) | 検索窓(PC) |
---|---|---|---|
42px 44px |
左寄せ | 高さ:25px、左寄せ、ロゴとの余白5px | |
46px 105px スクロール時36px |
中央 | 高さ:32px、右寄せ | |
122px(64px+58px) 144px(64px+80px) |
左寄せ(余白13px) | 高さ:49px ロゴとの12px+ | |
Apple | 44px 48px |
左寄せ | 高さ:44px 入力時に中央寄せ |
amazon | 99px(39px+60px) 139px(44px+50+45px) |
左寄せ | 高さ:35px、左寄せ |
Yahoo!Japan | 137px(背景の変更箇所までは105px) 88px(34px+44px) |
右寄せ | 高さ:28px、左寄せ |
楽天 | 68px メインは156px(38px+77px) 47px メインは109px(48px+61px) |
左寄せ | 高さ:36px、左寄せ |
はてなブックマーク | 34px 44px |
左寄せ | 高さ:30px、ヘッダーになし |
Naverまとめ | 44px 45px |
中央寄せ | 高さ:26px、左寄せ |
Airbnb | 106px(64px+42px) 106px(64px+42px) |
左寄せ | 高さ:40px、左寄せ |
UBER | 86px 63px |
中央寄せ | 検索なし、アカウント名の高さ:36px |
AWS | 41px PCページのみ |
左寄せ | 検索なし、アカウント名の高さ:16px |
HEROKU | 50px 50px |
左寄せ | 高さ:34px、中央寄せ |
Microsoft Azure | 40px PCページのみ |
左寄せ | 高さ:28px、中央寄せ |
Google Cloud Platform | 48px 48px |
左寄せ(最左部はハンバーガーメニュー) | 高さ:36px、中央寄せ |
Salesforce | 90px(50px+40px) 44px |
左寄せ(余白16px) | 高さ:34px、左よりの中央 |
Firebase | 48px 48px |
左寄せ(余白20px) | 検索なし、アカウント名の高さ:32px |
Google Drive | 48px 56px |
左寄せ(余白24px) | 高さ:46px、中央寄せ |
Google Analytics | 64px PCのみ |
左寄せ | 検索なし、アイコン領域の高さ:48px |
Twitter Bootstrap(navbar) | 56px 56px |
左寄せ | 高さ:38px、右寄せ |
React | 60px 40px |
左寄せ | 高さ20px、右寄せ |
Slack | 53px(チャンネル内のHeader) アプリのみ(ページヘッダーは70px) |
左寄せ(チャンネル名) | 高さ:34px、右寄せ |
Todoist | 44px 40px |
左寄せ | 高さ:28px、中央寄せ |
GitHub | 54px 86px(50px+36px) |
左寄せ | 30px、左寄せ |
Stack Overflow | 57px 44px |
左寄せ | 高さ:36px、左寄せだが中央あたりに表示 |
Qiita | 48px 48px |
左寄せ | 33px |