ユーザー目線を捉える！使いやすいホームページのヘッダーを作るコツ

「ホームページのヘッダーにはどんな役割があるの？」

「ホームページのヘッダーを作りたいけどコツとかあるの？」

ホームページのトップ画面にアクセスした時に、真っ先に目に入るのがヘッダーです。ヘッダーを見てこのままこのホームページを読み進めるか、もっといいサイトがあるかもしれないと別のサイトに移動してしまうかを決めると言っても過言ではありません。

そこで、

をご紹介します。

これを読めば、ヘッダーの重要な役割がわかり、「このホームページは読む価値がありそうだ」と思わせることができるヘッダーを作ることができます。

ホームページ作りに初めて挑戦するという方には、楽々、高機能なヘッダーも作れるホームページ作成サービス：ジンドゥー（Jimdo）もご紹介します。

ホームページを訪問してくれた人が使いやすく親しまれるようなヘッダーが作れるように、ぜひこの記事をお役立てください。

ネット検索しているとき、何気なく見ているホームページのヘッダーですが、その役割は実はとても重要です。

海外のデザイン会社がネットユーザーがウェブページをチェックした時の、最初の数秒間の目の動きを解析した研究によると、

参考：Webデザインで超大事な3つの視線誘導パターン

という結果が出ています。この結果から導き出されたのがヘッダーの重要性です。上記の2点に注目してホームページの重要な役割をくわしく紹介します。

ホームページのヘッダーは、ホームページ全体の戦略的な役割を担う重要なパーツです。ヘッダーは、ホームページに訪れた人が最初に目をする部分だからです。ヘッダーはホームページを家に例えれば玄関のようなものです。玄関が散らかっていたり、玄関に入ったら行き止まりだったら、お客様はすぐに帰ってしまうでしょう。

前章で挙げましたが、

• ユーザーが初めてホームページを訪れたとき、ページ内を慎重かつ細かくチェックしない

という分析結果があります。

そこでヘッダーに「このホームページ内に何があるのか」「どこに行けば自分が求めている情報があるのか」が一目でわかるように「メニュー」を載せます。一冊の本に例えれば、目次のような役割です。

ヘッダーを戦略的に作成することで、ユーザーに有用な情報があることをすばやくわからせて、印象づけ読み進ませることができます。ヘッダーで、このホームページはおもしろそうだ、探していた情報が見つかりそうだ、と思わせることで、ホームページ全体のさまざまなページを読んでもらうことができるのです。

目につきやすい場所で、パッと見ただけで「商品・サービス内容」をわからせるという役割もあります。

• ユーザーはまずページデザインの上部に目を奪われ、そこから目線はジグザグに下に降りていく

という分析結果から、ヘッダーを置く位置は、アクセスしたユーザーが一番最初に目にするエリアであり、非常に重要な場所だということがわかります。

ホームページの上部にヘッダー部分に画像やコピーを配置してしっかりと自社の商品やサービス内容を告知することで、訪れた人にパッと直感的に理解してもらうという役割をするのです。

ホームページのどのページにもヘッダーを表示させて統一させたものを固定ヘッダーと言います。ヘッダーを固定させることで、ホームページ全体の統一感が出せます。

固定ヘッダーがないと、訪れた人は自分がどのホームページを見ているのかがわかりづらくなります。

複数のサイトを同時に開いて情報を検索する人は多く、Aのサイト、Bのサイト、Cのサイトと同時に開いていた時に、固定ヘッダーがない場合、今自分はBのサイトを見ているのか、Aを見ているのか混乱してしまうこともあります。

固定ヘッダーは地味な機能ですが、自分がどのホームページを見ているのか、今どのページを見ているのかがわかるので、ユーザーにとっては迷子にならずにネット検索できる非常にありがたい役割なのです。

ホームページのヘッダーを作る際の4つのコツをご紹介します。

1章でご紹介した重要な役割を最大限に発揮させるためにも、訪れた人がパッと見てすぐにわかりやすいデザインを心がけることが重要です。

ホームページ全体を作成することにも言えますが、ユーザーが使いやすい、見やすいことを第一に心がける「ユーザーファースト」を忘れないようにしましょう。

ユーザーのことを優先して第一に考えることを「ユーザーファースト」と言います。閲覧者である潜在顧客（ユーザー）の目線でデザインされているためストレスなく使えます。

ユーザーファーストのホームページの主な特徴は、

等です。

ヘッダーは、特に目立つもので、ユーザーが一番最初に目にするものですから、見やすくわかりやすいデザイン構成をする必要があります。

ユーザーファーストで作られたヘッダーは必要とする情報や探している情報に最短でたどり着くことができるため、ユーザーからの評価も高くなり、場合によっては何度もアクセスしてくれるファンを作り出すことに貢献してくれます。

ヘッダー部分に入れる要素は厳選するようにします。シンプルでわかりやすいユーザーファーストのヘッダーにするためです。

ヘッダーに入れるものは下記の3つ程度に絞りましょう。

 ヘッダー部分に入れるもので、一番重要なものはグローバルメニューです。グローバルメニューとは、グローバルナビゲーションとも呼ばれており、ウェブサイトの全てのページに共通して設置された案内リンクのことを指します。たとえば、企業の概要やサービス紹介など、ホームページ内の主要なページに対応したリンクが設置されていて、ショートカット機能として活用することができるものです。

複雑で使いにくいヘッダーはユーザーから嫌われてしまいますので、シンプルでわかりやすいデザインのためにも要素を厳選するようにしましょう。

テーマカラーを決めてホームページ全体の統一感を出すことも大切です。統一感を出すためにはテーマカラーを

にするのが一般的です。

コーポレートカラーとロゴの色が同じ場合が多いと思いますが、違う場合もあると思いますので、どちらで統一するかは社内で検討したり、外部にデザインを依頼するのであれば外部のデザイナーと検討しましょう。

商品ごとにホームページを開設する場合には、商品のイメージカラーに統一することも考えられます。ヘッダーを固定ヘッダーにすることで、さらに統一感が出せます。

パソコン、スマートフォン、タブレット等、各デバイスごとにどう見えるかも確認をするようにしましょう。特に画面の小さいスマートフォンから見づらいヘッダーは、ユーザーから嫌われてしまうからです。

最近ではパソコンを持たず、スマートフォンしか持っていない人も増えているので、特にスマートフォンからアクセスした場合のヘッダーの見え方、使いやすさは非常に重要視されています。スマートフォンからアクセスしたホームページのヘッダーが見づらく使いづらかったら、すぐに別のサイトに移動されてしまいます。

新たにホームページを作成する際には、必ずスマートフォン対応するようにしましょう。すでにホームページを持ってる方は、自社サイトがスマホ対応できているか確認してください。

スマホ対応の確認はこちらのサイトでできます。

→モバイル フレンドリー テスト - Google Search Console

ホームページのヘッダー作成は初めてだから自信がないという方や、ヘッダーだけでなく、昔作ったホームページ全体を作り直したいと考えているのであれば、簡単にホームページが作れるホームページ作成サービス：ジンドゥー（Jimdo）を利用することをおすすめします。

ホームページ自体も簡単に作れますが、ヘッダーも簡単に、ユーザーファーストでシンプルなものを作ることができます。

グローバルメニューも簡単な操作で作成できます。ホームページ作成に必要なCSSなどの知識も必要ありません。タイトルのほか、文字は入れたい箇所にカーソルを合わせればできます。

以下は実際にジンドゥーで作成されたサイトのヘッダーです。こちらのヘッダーは優れたデザインのホームページを選ぶ「Jimdo Best Pages」において受賞したクオリティの高いものばかりです。

ジンドゥー（Jimdo）は作成アシスタント付きで初心者向けの「ジンドゥー AI ビルダー」と、ブログやショップ機能を搭載し、コーディングも可能な「ジンドゥークリエイター」の2つのホームページ作成プランが選べます。あなたのデザインスキルや状況に合わせて、2つのサービスから選んでください。

どちらかというと、ジンドゥー AI ビルダーは個人事業主やフリーランス向け、ジンドゥークリエイターは企業や団体向けです。

すでにホームページを開設しているが新しく作り直したいという場合には、ジンドゥークリエイターがおすすめですが、簡単にリニューアルしたいのであれば、ジンドゥー AI ビルダーもおすすめです。

ホームページのヘッダーは、アクセスしたユーザーが一番最初に目にする注目度が高く、ホームページ全体を読ませるための重要な役割をしているものです。

最後にホームページのヘッダーを作る際の4つのコツを復習しておきましょう。

簡単にシンプルで使いやすいヘッダーが作れるジンドゥー（Jimdo）もおすすめです。ハイクオリティにホームページ全体を作ることが簡単にできますので、初めてホームページを開設する方だけでなく、リニューアルを考えている方にもおすすめです。ぜひご利用ください。