MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
【Webデザイン検証.その1】ホームボタンってグローバルナビ に必要なの?

【Webデザイン検証.その1】ホームボタンってグローバルナビ に必要なの?

公開日:2019年03月26日
最終更新日:2019年05月28日
オンスタ運営
デザイン
Webデザイン
ホーム > 全記事一覧 > 制作 > デザイナー > デザイン > 【Webデザイン検証.その1】ホームボタンってグローバルナビ に必要なの?

こんにちは!Grow Groupデザイナーのさとおです!

突然ですが、皆さんはWebサイトを閲覧する際、ホームボタンって押しますか?

弊社の行動指針にもあるのですが、私たちは常に挑戦し、新しい方法を模索し続けています。

そこで今回は、デザイン業務の中でふと疑問に思ったことを検証し、その結果とともに個人的な見解をまとめてみたいと思います!

トップページの役割とホームボタンの必要性

そもそもホームボタンとは、そのWebサイトのトップページへ移動するリンクボタンのことを指します。
そして、ホームボタンのリンク先であるトップページの役割としては主に以下のことがあげられます。

  1. (サイトの顔として)イメージを訴求する役割
  2. ユーザーを目的の情報が得られるコンテンツへ誘導する役割

 

通常、ホームボタンはグローバルナビ に配置されており、「ホーム」や「トップページ」、家の形をしたアイコンなどで示されています。
また、ホームボタンが設置されるグローバルナビには、以下のような基本的につけるべき機能や原則があります。

  1. 主要なページに対してリンクを置くのが基本(対象者別のメニューなど例外もあり)
  2. 一列に並べる数は5~7つまでがよい
  3. ロゴマークはトップページへリンクする

 

これらの機能や原則を目の当たりにして、改めてユーザーがWebサイトを訪れる理由を考えてみたときに、そもそも調べたい情報があってそのページを開いた時って、そのサイトの下層ページであることも意外と多いのではないでしょうか。

また、よくよく考えてみるとトップページに戻ってまた欲しい情報を探さなければならない状況というのは、ユーザーの行動を1つ増やすことにもなり、 ホームボタンを押す前の時点で離脱率アップにもつながるため、UI設計的には良いとは言えないのではないのでしょうか。

グローバルナビには主要なページだけをおくという原則を考えると、 たとえサイトの顔といえど、それほど重要な誘導先にはならないのでは!?

日本の主要サイトランキングTOP50を調べてみました!

ということでホームボタンはグローバルナビ として必要なのか、この疑問を検証すべく、Google Analyticsの権限がなくても、ある程度そのサイトのアクセスに関する細かい情報が閲覧できるサービスSimilarWebで、日本の主要サイトランキングTOP50までを調べてみました!

対象からSNSサービス、アダルトコンテンツなどは除いた、グローバルメニュー的な要素が存在する全ジャンル上位10サイトで検証します。(2018年3月時点)

You Tube

You Tube。ホームボタンありました。ハンバーガーメニューを採用しており、メニューごと閉じることもできるようになっています。

 

amazon

amazon。ホームボタンないです。検索窓がメインに配置されており、ネットショップならではの形ですね。

 

docomo

docomo。ホームボタンなしです。ヘッダー内でボタンに優先順位をつけて大きさを変えて配置されていますが、ホームボタンはありません。

 

楽天

楽天。ホームボタンなし。こちらもネットショップのため検索窓がメインですが、誘導のための検索カテゴリやサービスへのリンクボタンがたくさん配置されています。amazonとは違い、日本人仕様なのがとても伝わります。

 

ニコニコ動画

ニコニコ動画。ホームボタン…よく見ると左端にロゴの形をしたマークがありますが、シンボルマークをホームボタンにしたパターンですので無しとします。

 

小説家になろう

小説家になろう。ホームボタンありました。

 

LINE

LINE。ホームボタンなし。

 

クックパッド

クックパッド。ホームボタンありませんでした。

 

ameba

アメーバ。こちらもホームボタンはありませんでした。

 

 

ゾゾタウン

ゾゾタウン。ホームボタンなし。

 

ということで、検証結果としては、日本の主要サイトでは10サイト中2サイトがホームボタンあり 8サイトがホームボタンなしということがわかりました。

少し前までは当たり前だったホームボタンが、 気がついたらもうほとんどのサイトについていないんですね…!!

UI・UXの注目度がさらに増してきている今、考え直す必要があったUIの一つとして 「ホームボタンの必要性問題」がさりげなくあったのではないでしょうか。

ここまで全ジャンルで検証してみましたが、ポータルサイトやサービスサイトを除いた、コーポレートサイトのみで検証してみたいと思います。

日本の売上高ランキングTOP50のコーポレートサイトを調べてみました!

日本経済新聞が提供している日本の売上高ランキングをもとに、コーポレートサイトも調査してみました。(2018年1月時点)

トヨタ

トヨタ。ホームボタンなし。

 

ホンダ

ホンダ。ホームボタンなし。

 

日本郵政

日本郵政。ホームボタンあり。グローバルナビがメインビジュアルの下にあり、ロゴマークのあるヘッダーと分かれているパターンでした。

 

日産

日産。ホームボタンなし。

 

NTT

NTT。ホームボタンなし。

 

日立

日立。ホームボタンなし。

 

ソフトバンク

ソフトバンク。ホームボタンなし。

 

イオン

イオン。ホームボタンなし。

 

ソニー

ソニー。ホームボタンなし。

 

パナソニック

パナソニック。ホームボタンなし。

 

ということで、日本のコーポレートサイトでは、なんと10サイト中8サイトにホームボタンがついておらず、ついていたのは1社のみとなりました!

ホームボタンがなくなった理由

コーポレートサイトではほとんどのWebサイトにホームボタンがついていませんでした。

その理由として考えられることとして、

  1. ロゴマークでトップページへ戻れることのリテラシーがある人が増えた
  2. メニューの多いサイトにとっては7つをオーバーし、UI・UXに欠ける構造になってしまう
  3. 単純にホームボタンのクリック率が低い

以上を推測しております。

逆に、ホームボタンがついているサイトにも共通点があることに気がつきました。

先ほど挙げた日本郵政のようにホームボタンがついているサイトには、文字の大きさを変えられる機能がついており、アクセシビリティが考えられた設計になっていることが多くありました。

アクセシビリティとは、特にWebサイト上における、情報やサービスへのアクセスのしやすさのことである。 アクセシビリティは、高齢者や障害者なども含めたあらゆる人が、どのような環境(うるさい場所や、暗い場所、逆に明るい場所など)においても柔軟にWebサイトを利用できるように構築することを考慮する場合に使われる。

ホームボタンをつけない場合の対応策

いくらホームボタンの必要性が薄いからと言って、どこにもつけないということはいけません。
ホームボタンをつけない場合の対応策もきちんとなされている必要があり、上記に挙げたホームボタンのついていないWebサイトにはそれが満たされておりました。

それが何かと言うと、

  1. 下層には必ずホームボタンを含んだパンくずリストをつける
  2. ホームボタンがない分、適切でわかりやすい他ページへの導線(ナビゲーションリンク)をつくる
  3. コンテンツの多いサイトにはキーワード検索窓をヘッダーあたりに設置する

ナビゲーションリンクにはローカルナビや関連ナビなどたくさんの種類があり、また新たに今までにない形を追求することもできます。

ナビゲーションの種類と特徴をきちんと理解すれば、ホームボタンがなくても設計やデザインをより論理的に、効果的に実践できるようになるのではないでしょうか。

まとめ

長くなりましたが、今回の検証まとめ!

アクセシビリティの必要なWebサイト以外のホームボタンは基本いらない

もちろんサイトによってあった方が良い場合、なくても良い場合という部分は考えることが大前提ですが、個人的にはホームボタンはグローバルナビに設置せず、トップページに行きたい場合はロゴマークをクリックしてもらうという考えで良いのかなと感じました。

時代に置いて行かれないよう、私たちも常に新しい視点を持って良いWebサイトを作っていくぞー!

以上、Grow Groupデザイナーのさとおでしたー!

 

関連コンテンツ

デザイン制作で、色を選ぶのに困っていませんか?
デザイン
デザイナー
公開日: 2019年03月13日
最終更新日: 2019年05月28日
デザイン制作で、色を選ぶのに困っていませんか?
オンスタ運営
知っておきたい!Photoshopを使ってできることを大公開
Webデザイン
公開日: 2019年06月14日
最終更新日: 2019年06月18日
知っておきたい!Photoshopを使ってできることを大公開
  • # Photoshop
  • # pickup
  • # できること
オンスタ運営
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
マークアップ
デザイン
公開日: 2019年03月30日
最終更新日: 2019年09月02日
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
オンスタ運営
【ホームページ制作】~ターゲット設定はしない方がいい!?~
コンサルティング
デザイン
公開日: 2016年12月28日
最終更新日: 2019年05月28日
【ホームページ制作】~ターゲット設定はしない方がいい!?~
オンスタ運営
パンフレット・リーフレットの違いと活用方法
デザイン
パンフレット
公開日: 2018年09月06日
最終更新日: 2019年05月28日
パンフレット・リーフレットの違いと活用方法
オンスタ運営
デザイナーとしてのプロ意識(デザイナーがキャリアアップするための道のり-其の1)
デザイナー
デザイン
公開日: 2016年12月19日
最終更新日: 2019年05月28日
デザイナーとしてのプロ意識(デザイナーがキャリアアップするための道のり-其の1)
オンスタ運営
修正サクサク!校正記号を正しく覚えよう!
デザイン
公開日: 2019年04月29日
最終更新日: 2019年06月15日
修正サクサク!校正記号を正しく覚えよう!
オンスタ運営
デザイナーのキャリアアップ(デザイナーがキャリアアップするための道のり-最終章)
デザイナー
デザイン
公開日: 2017年01月29日
最終更新日: 2019年05月28日
デザイナーのキャリアアップ(デザイナーがキャリアアップするための道のり-最終章)
オンスタ運営
Webデザイナー、DTPデザイナーが取れる資格まとめ
デザイン
公開日: 2019年03月30日
最終更新日: 2019年06月21日
Webデザイナー、DTPデザイナーが取れる資格まとめ
オンスタ運営
なんか物足りない…デザインにひと工夫!簡単テクニック10選
Webデザイン
デザイン
公開日: 2019年01月25日
最終更新日: 2019年05月28日
なんか物足りない…デザインにひと工夫!簡単テクニック10選
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。