編集してコピーできるWebサイトのヘッダー例
Webサイトのヘッダー例
Webサイトのヘッダー例：HTMLとCSSで作る10のライブデザイン | We.Inc
ライブで編集できるオリジナルのヘッダーデザイン10種。ロゴとナビの配置、CTAの位置、固定ヘッダー、JavaScriptなしのモバイルメニュー、ヘッダーのチェックリストを紹介します。
Webサイトのヘッダーとは、すべてのページの上部にある帯状の領域で、ロゴ、メインのナビゲーション、そして通常は1つのアクションボタンを配置します。優れたヘッダーはリンクを5〜7個に抑え、ロゴを左に置いてトップページにリンクし、スマートフォンではラベル付きのメニューに折りたたみます。以下に、編集できるコード付きのオリジナルヘッダーデザインを10種類紹介します。
ヘッダーのレイアウトと使いどころ
- ロゴが左、リンクが右
- ほとんどの企業サイト
- リンクが多すぎてCTAが画面外に押し出される
- ロゴが左、リンクが中央、CTAが右
- SaaSやサービス業のサイト
- 十分な幅が必要。早めに折りたたむ
- ロゴが中央、リンクがその下
- ショップ、飲食店、メディア
- ヘッダーが高くなり画面を多く使う
- メインバーの上にユーティリティバー
- 電話での問い合わせが中心の地域ビジネス
- モバイルでバーが2本になる。1本にまとめる
- コンパクトな固定バー
- 長いページ
- アンカーの移動先やコンテンツを覆ってしまう
ヘッダーのギャラリーは、たいてい画像を見せるだけです。ここにあるのは、架空のブランドを使って素のHTMLとCSSで作った実際に動くヘッダーです。フレームのサイズを変え、コードを書き換え、自分のサイトに合うものをコピーできます。
- レイアウトで例を絞り込むか、10種類すべてをスクロールして見ます。
- どの例でもコードを編集できます。サンドボックス化されたフレームが入力に合わせて再描画されます。
- HTMLとCSSをコピーし、ロゴ、リンク、ボタンのテキストを差し替えます。
- 公開する前に、最後のチェックリストを確認します。
- リンクはaria-label付きのnav要素で囲み、現在のページにはaria-current="page"を付けましょう。
- header要素がページのバナーランドマークとして扱われるのは、article、aside、main、nav、sectionの中にない場合だけです。
- 固定ヘッダーにはtop: 0のようなtopの値が必要です。指定しないと、position: stickyはrelativeと同じ動きになります。
- ヘッダーを固定する場合は、見出しにscroll-margin-topを追加しましょう。ページ内リンクで移動したときに、見出しがバーの下に隠れなくなります。
- WCAG 2.2のレベルAAのターゲットサイズを満たすため、タップできる領域はすべて24×24 CSSピクセル以上にしましょう。44ピクセルあるとより押しやすくなります。
よくある質問
Webサイトのヘッダーには何を入れるべきですか？
トップページにリンクするロゴ、メインのナビゲーション、そして多くの企業サイトでは「予約する」や「見積もりを依頼」のようなメインボタンを1つ入れます。地域ビジネスでは電話番号を加えることもよくあります。訪問者がすべてのページで必要としないものは入れないようにしましょう。
ヘッダーの高さはどのくらいにすべきですか？
決まったルールはありません。デスクトップで1本のバーなら56〜80ピクセル程度が一般的で、スマートフォンではもっと細くします。固定ヘッダーは常にコンテンツを覆うので、できるだけ低くしましょう。
JavaScriptなしでモバイルメニューを作れますか？
作れます。summaryをメニューボタンにしたdetails要素を使えば、リンクの開閉がブラウザーの標準機能で行われ、キーボードでも操作できます。このページの例6はこの方法を使っています。aria-expanded付きのJavaScriptボタンなら、アニメーションや閉じる動作をより細かく制御できます。
ヘッダーは固定すべきですか？
メニューやCTAを頻繁に使う長いページでは、コンパクトな固定ヘッダーが役立ちます。短いページでは、主にスペースを取るだけです。使う場合は細く保ち、ページ内リンクの移動先がヘッダーの下に正しく表示されるか確認しましょう。
ロゴ、ナビゲーション、CTAの配置
- 人はロゴを左上で探し、クリックするとトップページに戻ると考えます。ブランドとして中央に置く強い理由がない限り、この慣習を守りましょう。アクションボタンは、バーを見渡す視線が最後にたどり着く右端に置きます。
- リンクは社内の組織図ではなく、訪問者が必要とする順に並べましょう。通常は、サービスや料金を会社概要より先に置きます。
スマートフォンでのヘッダー
- 幅がおよそ768ピクセルを下回ると、ほとんどのリンク列は収まらなくなります。わかりやすいラベルの付いたメニューボタンの中に折りたたみ、その横にメインのCTAを表示したままにしましょう。それこそがスペースを使う価値のある唯一のリンクだからです。
- 幅375ピクセルでテストしましょう。横にスクロールするものがあれば、ラベルを短くするか、もっと早い段階で折りたたみます。
Webサイトのヘッダーのチェックリスト
公開前にこれらを確認しましょう
- ロゴがトップページにリンクしている
- ヘッダーで最も期待される動作だから
- リンクがラベル付きのnavの中にある
- スクリーンリーダーがナビゲーションとして一覧にするから
- 現在のページにaria-currentが付いている
- 訪問者がどこにいるかを読み上げるから
- メインボタンが1つで、他と違うスタイルになっている
- 主要なアクションがひと目でわかるから
- メニューボタンに見えるテキストラベルがある
- アイコンだけでは見落とされやすいから
- すべてのリンクにフォーカスのアウトラインが見える
- キーボード利用者が今どこにいるかわかるから
- 375 pxで横スクロールが発生しない
- ヘッダーが最初に崩れるのはスマートフォンだから
- 固定バーがページ内リンクの移動先を隠さない
- scroll-margin-topで修正できる
1. 定番：ロゴが左、リンクとボタンが右
企業サイトの標準的なレイアウトです。ボタンが最後の項目なので、視線の終着点になります。
2. 3分割：ロゴ、中央のリンク、CTA
ソフトウェア企業のサイトでよく見られます。グリッドを使うと、ロゴの幅に関係なくリンクが正確に中央に配置されます。
3. 中央のロゴと下に並ぶリンク
ブランド名が主役になるショップや飲食店に向いています。狭い画面ではリンクが2行目に折り返されます。
4. メインバーの上に電話番号入りのユーティリティバー
電話での問い合わせが中心の地域ビジネス向けです。番号は本物のtel:リンクなので、スマートフォンからそのまま発信できます。
5. コンパクトな固定ヘッダー
フレームの中でスクロールしてみてください。position: stickyとtop: 0でバーが表示され続け、半透明の背景はコンテンツの上でも読みやすさを保ちます。
6. detailsとsummaryを使ったJavaScriptなしのモバイルメニュー
summaryがメニューボタンになり、開閉とキーボード操作はブラウザーが処理します。広い画面ではリンクが横並びで表示されます。
7. 検索付きのダークなヘッダー
検索欄には視覚的に非表示のラベルがあるため、スクリーンリーダーでは読み上げられます。
8. ヒーローの上に重ねた透明なヘッダー
ヘッダーはヒーローの色の上に配置されます。背景が何であっても、文字のコントラスト比を4.5:1以上に保ちましょう。
9. お知らせバー付きのショップ用ヘッダー
バーの上の短いお知らせ行で1つのオファーを伝えます。カートの点数はリンクのテキストに含まれているので、読み上げられます。
10. CTAを表示したままにするモバイルヘッダー
スマートフォンではリンクが折りたたまれますが、重要なアクションである予約ボタンはメニューの横に残ります。
- すべて
- ロゴが左
- ロゴが中央
- ユーティリティバー
- 固定
- モバイルメニュー
- ヒーローに重ねる
Webサイトのヘッダー例10選
レイアウトで絞り込む
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る