印象に残る魅力的なホームページを作成するには、ヘッダーデザインが重要です。
「おしゃれなヘッダーデザインを知りたいけど探し方がわからない……」
「ホームページにおけるヘッダーデザインの役割を知りたい」
このような悩みを持つWeb担当者は多いでしょう。
そこで本記事では、ヘッダーデザインの参考事例10選を紹介します。ヘッダーデザインが持つ5つの役割や作成ポイントも紹介しますので、ぜひ参考にしてみてください。
【無料お役立ち資料】
お問い合わせを増やすWEBサイトの作成方法
資料内容
- WEBサイト作成の流れと説明
- 各フェーズでの重要ポイント
- 問い合わせを増やすための最終チェックリスト
- 制作後の運用方法
- 制作の進め方と注意すべき点
サイト制作を依頼する際に知っておくべき内容になっていますのでぜひ無料でご覧ください。
この記事の内容
ヘッダーが持つ3つの役割
ヘッダーとは、ホームページの上部に表示される「帯状の部分」のこと。Webサイトを訪れた読者が最初に目にするものであり、ヘッダーデザイン次第でホームページの印象を左右すると言っても過言ではありません。
それでは、ヘッダーが持つ3つの役割について解説します。
- どのようなサイトなのかを理解してもらう
- ユーザーの興味関心を掻き立てる
- 重要ページへのアクセス導線になる
どのようなサイトなのかを理解してもらう
まずヘッダーは、読者にどのようなサイトなのかを理解してもらう役割があります。
ホームページを見た読者の目に付きやすいよう、ページ上部に表示します。
ヘッダーを見た読者が一目でサイト構成を把握できるよう、ファーストビューで訴えるものです。
ユーザーの興味関心を掻き立てる
そして、ユーザーの興味関心を掻き立てる役割もあります。
ユーザーは、キーワード検索や広告を見て自分が知りたい情報を入手できるサイトを選びます。しかし、ヘッダーを見て興味関心が掻き立てられないと判断すれば、そこで離脱してしまうでしょう。
ヘッダーは、ユーザーの興味関心を掻き立てるようデザインする必要があります。
重要ページへのアクセス導線になる
重要ページへのアクセス導線になるのも、ヘッダーの役割です。
ヘッダーは、グローバルナビゲーションと呼ばれることもあるように、全ページで表示されるよう設定します。
仮に読者が目的とは違うページにアクセスしても、ヘッダーを見れば目的のページにすぐアクセスできます。
自社サイトで重要視するページにアクセスできるようデザインを考えれば、アクセス導線になりコンバージョンアップにもつながるでしょう。
パソコンサイトのヘッダーデザイン参考例5選
パソコンサイトのヘッダーデザイン参考例5選を紹介します。
- カシオ計算機株式会社
- 株式会社SmartHR
- 株式会社CyberAgent
- 任天堂株式会社
- 株式会社電通エルフトアーキテクト
カシオ計算機株式会社
カシオ計算機株式会社が手掛ける「G-SHOCK」のホームページは、タフネスの概念に合わせて黒を基調としたデザインを採用しています。
5つのメニューで構成されており、知りたい情報を一目で確認できます。ヘッダーデザインには、黒い背景に白い文字を使用しコントラストをはっきりさせているのが特徴です。
株式会社SmartHR
株式会社SmartHRは、人事データを可視化する「SmartHR 」の企画から販売までを行なっています。
ヘッダーデザインには、商品のテーマカラーを使用し、サイト全体のデザインとも統一感を持たせているのが特徴です。
ヘッダーを活用すれば、画面を下にスクロールしなくても見たいメニューにアクセスできます。
また、ヘッダーの一番右には、日本語と英語の切り替えボタンがあるのも特徴といえるでしょう。
株式会社CyberAgent
株式会社CyberAgent（サイバーエージェント）は、メディア・インターネット・ゲーム・投資育成事業を手掛ける会社です。
ヘッダーデザインは、白をベースに黒い文字で見やすいようデザインされています。
ヘッダーの右端には、日本線のハンバーガーメニューがあり、クリックするとサイト内の全コンテンツが表示されるのもポイントです。
任天堂株式会社
任天堂株式会社のホームページは、ゲームを活かした楽しいデザインです。
ヘッダーには、扱うゲーム機やソフトの情報の他、トピックスや人気キャラクター情報にも素早くアクセスできます。
他にもサポートやサイト内検索、オンラインストアやマイページへのアクセスが可能。ヘッダーデザインには、アイコンを使用しており、カーソルを当てるだけで内容を確認できます。
株式会社電通エルフトアーキテクト
株式会社電通エルフトアーキテクトは、ECコンサルティング・CRMコンサルティング・WEB制作・WEB広告代理店業務を手掛ける会社です。
サイトにアクセスすると動画が流れますが、ヘッダーデザインはシンプルで見やすく、画面を下にスクロールしなくても見たいメニューにアクセスできます。
右端には黒い四角の背景を採用した「Contact」メニューがあり、問い合わせ先をわかりやすくしているのが特徴です。
スマホサイトのヘッダーデザイン参考例5選
続いて、スマホサイトのヘッダーデザイン参考例5選を見ていきましょう。
- 合同会社 P.P.CORPORATION
- ライソン株式会社
- 緑の森どうぶつ病院
- 株式会社東亜不動産
- 幕張ベイパーク耳鼻咽喉科
合同会社 P.P.CORPORATION
合同会社 P.P.CORPORATIONは、放課後デイサービスを主軸に、福祉関連サービスを展開する会社です。
放課後デイサービスとは、児童福祉法に基づく福祉サービスのこと。発達に課題を抱える小中高生が利用できる通所支援は、放課後だけでなく、夏休みや冬休みなど長期休暇でも使用できます。
子どもをテーマにした、シンプルながらおしゃれなホームページです。白を基調にヘッダーは黒い文字で見やすくデザインされています。
右端にはハンバーガーメニューがあり、クリックするとサイトの全体像を確認できるのも魅力でしょう。
ライソン株式会社
ライソン株式会社は、家電を扱う会社です。
ホームページには社員を採用し、商品の魅力を伝えています。
ヘッダーデザインにはハンバーガーメニューが採用されており、クリックするとコンセプトや会社情報を確認できます。
メニューの中には、「過去の偉大なる発明品」「ボツになったアイデア」なども紹介されているのがポイント。ユーザーの興味関心を引く楽しいデザインです。
緑の森どうぶつ病院
緑の森どうぶつ病院は、株式会社グリーンフォレストが展開しているグループ動物病院です。
北海道を拠点に、「やさしさのある森のような動物病院でありたい」をコンセプトにしています。
ホームページは、緑と白を基調に動物の写真やイラストを使用した可愛いデザインです。
ヘッダーデザインは緑をベースに白い文字で、コントラストがはっきりしています。
病院紹介や診療案内、よくある質問など、飼い主さんが知りたい情報に素早くアクセスできるのが特徴といえるでしょう。
オンラインストアでは、ペットフードやグッズの販売も行っており、ヘッダーからアクセスできるようになっています。
株式会社東亜不動産
株式会社東亜不動産は、熊本に拠点をおく不動産業者です。
ヘッダーは左側に配置されており、目的別に見たい情報に素早くアクセスできます。
ヘッダー最下部には、メールでの問い合わせ先や無料査定、お気に入り物件を登録しておけるメニューもあります。
画面の右上には、家を売りたい方に向けた「無料査定」の案内も設置。そのまま無料査定の申し込みフォームに飛べるので便利でしょう。
幕張ベイパーク耳鼻咽喉科
幕張ベイパーク耳鼻咽喉科のホームページは、白を基調としたシンプルなデザインです。
アクセスすると、院内や診察の様子を紹介する動画が流れます。
ヘッダーデザインもサイトの雰囲気に合わせて、白に黒い文字を使用。病院紹介や診療案内、アセスや予約の案内など、初めてサイトを訪れた方にもわかりやすいよう配慮されています。
初診の方に向けた情報もヘッダーから素早くアクセスできるのが魅力です。
ヘッダーデザインを作成する5つポイント
では最後に、ヘッダーデザインを作成する5つのポイントについて解説します。
- ターゲット層やニーズから逆算した構成にする
- ユーザーファーストのデザインを心がける
- サイト全体のデザインと統一する
- 視線の動きを意識する
- スマホやパソコンなどデバイスごとの見え方を意識する
ターゲット層やニーズから逆算した構成にする
ターゲット層やニーズから逆算した構成を意識しましょう。
まずは、ターゲットを明確化することが大切です。
扱う商材による違いはあるものの、20代の女性なら「トレンドカラーを取り入れた明るいデザイン」40代以上の大人の女性なら「落ち着いた高級感のあるデザイン」が適しているでしょう。
ユーザーファーストのデザインを心がける
ヘッダーは、ユーザーファーストのデザインを心がけてください。
商材をアピールする際、印象に残りやすいデザインにするのも有効です。しかし、派手すぎて目がチカチカするようなデザインでは、見るのが嫌になり途中で離脱する恐れがあります。
誰が見てもわかりやすく、シンプルなデザインにすることも意識しましょう。
サイト全体のデザインと統一する
ヘッダーはサイト全体のデザインと統一しましょう。
サイトのデザインが白を基調としたシンプルなデザインなのに、ヘッダーだけカラフルだとアンバランスな印象を与えます。
ヘッダーに色を使いアクセントにしたいなら、商材のテーマカラーを取り入れるといいでしょう。
ヘッダーデザインは、サイト全体とのバランスを考え統一感を持たせるのがポイントです。
視線の動きを意識する
視線の動きを意識することも大切です。
視線には以下の3つのパターンが想定されます。
- Zパターン
- Fパターン
- グーテンベルクダイアグラム
Zパターンは、「左上から右下」「右下から左上」のようにZの動きを表します。
商品を陳列するときにも採用されており、初めてホームページを訪れるユーザーはZパターンでサイトをチェックする傾向があるのも特徴です。
Fパターンは、視線の横方向を維持しながら下がっていく方法です。リピーターに多いパターンとされており、右下に行くほどスライド幅が減るため最上部に重要コンテンツを設置する必要があります。
グーテンベルクダイヤグラムは、斜めにざっくり見るパターンです。多くの場合、左上から右下へと視線を動かすので、左上に重要コンテンツを設置するのが有効とされています。
スマホやパソコンなどデバイスごとの見え方を意識する
スマホやパソコンなど、デバイスごとの見え方も意識してください。
スマホなら、ハンバーガーメニューの活用がおすすめです。ハンバーガーメニューとは、三本線のボタンのこと。メニューをクリックすると、さらにメニューが表示されます。
メニュー項目をスッキリ収容できるので、スマホで見てもデザインが崩れにくく見やすいのがメリットです。スマホの普及に伴い、スマホでホームページを見るユーザーが多いことも意識しましょう。
どのデバイスで見ても、ヘッダーデザインが崩れないようにすることが大切です。
まとめ：魅力的なヘッダーデザインでユーザーをホームページへ引き込もう
ヘッダーは、読者がホームページを訪れたときにどのようなサイトかを伝える役目があります。
どんなに凝ったデザインでも、ユーザーの興味関心を惹けなければその時点で離脱してしまうでしょう。
コンバージョンアップを図りたいなら、本記事で紹介したポイントや参考例を見ながら、魅力的なヘッダーデザインを作成してください。
【無料お役立ち資料】
初心者でもよくわかるお問い合わせを増やすWEBサイトの作成方法
資料内容
- WEBサイト作成の流れと説明
- 各フェーズでの重要ポイント
- 問い合わせを増やすための最終チェックリスト
- 制作後の運用方法
- 制作の進め方と注意すべき点
サイト制作を依頼する際に知っておくべき内容になっていますのでぜひ無料でご覧ください。
