Appleウェブサイトのレスポンシブなナビゲーションが「うまい！」と思う4つの理由

こんにちは。Appleも好きだけどAppleウェブサイトも大好きなRriverの渡辺です。

最近レスポンシブなナビゲーションについて考えていて良いアイディアを探しているんですが、結局Appleのウェブサイトにたどり着きました。Appleのウェブサイトは良く出来ていると思うところがたくさんあって、ナビゲーションも良く考えて作られているんですね。

ということで、今回はAppleウェブサイトのナビゲーションの検証を通して、マルチデバイス時代のレスポンシブなナビゲーションについて考えてみたいと思います。より良いナビゲーション構築の参考になれば幸いです！

目次

• マルチデバイス時代のナビゲーション
• 理由1： 3段階の「ナビゲーション」で確実にユーザを誘導している
• 理由2： 見せられるときは、しっかり見せている
• 理由3： コンテンツ内の「さらに詳しい」コンテンツの見せ方が絶妙
• 理由4： その時必要なナビゲーションがメインに表示されている
• まとめ

マルチデバイス時代のナビゲーション

Appleウェブサイトは、スマホサイズの画面で見てもデスクトップサイズの画面で見ても「なるほどね」「そうだよね」とうなずけるデザインと設計になっています。スマホで見てもデスクトップで見ても、ユーザをスムーズに誘導しながら製品の魅力を巧みに訴求しています。一般的に「ナビゲーション」と呼ばれるナビゲーションバーやフッター、パンくずリンクだけでなく、コンテンツもナビゲーションの役割をしっかり果たしているんですね。

ユーザがメインに使う端末がタッチスクリーンになり、デスクトップでもトラックパッドなどのインプットデバイスが発達したことで、ウェブページを閲覧する際の行動が変わってきています。Appleウェブサイトは、そういったユーザの行動の変化にも対応したサイト構成、ページ構成とナビゲーションになっています。基本を押さえてやるべきことをしっかりやっています。それが一番難しいことなので感心します。

では、Appleウェブサイトのナビゲーションが「うまい！」と思う4つの理由、行ってみましょう！

理由1： 3段階の「ナビゲーション」で確実にユーザを誘導している

トップページを例に見てみます。

これって基本中の基本なんですけど、Appleウェブサイトでは上にあるよう3段階の「ナビゲーション」を用意することで、漏れなくユーザを誘導しています。

ユーザがメインのナビゲーションをスルーしてもメインコンテンツで。ユーザがメインコンテンツでも求めるものを見つけられない場合、またはスルーしてしまった場合は、サイトマップ的なフッターナビゲーションで確実に誘導できるように設計されています。

スマホがメインの端末になって起こった変化

スマホが普及してメイン端末になった ことで様々な変化が起こっています。たとえば、ユーザにとってスクロールすることへの技術的な負担が下がっていて、長いページでも楽に見られるようになっています。タッチスクリーンだとス〜ッとスクロールできますからね。

それに加えてFacebookやTwitterなどの長いシングルページのウェブサイトでユーザがスクロールすることに慣れ、そういったトレンドから長いページのウェブサイトが増えたというのも、スクロールへの心理的負担を下げていると思います。

参考：「Why long scrolling sites have become awesome（なぜ、長いスクロールのウェブサイトがよくなったのか） 」

さらに、2014年3月の記事ですけど、10のメディアサイトで100万ユーザから集めたデータによると、ユーザの65.7%のエンゲージメントが最初に表示される画面より下で行われていた という結果だったそうです。確かに、言われてみれば、ページ上部の企業目線の「宣伝」的なコンテンツは素通りしてメインのコンテンツ部分に直行することってよくありますね。納得です。

また、技術的な観点から、スマホなどの小さい画面ではコンテンツの邪魔をせずにすべてのナビゲーションアイテムを表示するのが難しいという、どうしようもない事実もあります。

これらの変化を考慮して、メインのナビゲーションだけではカバーしきれないところをメインコンテンツ、さらには、ページ最下部のフッターでキャッチするような複数のナビゲーションを持ったページ構造がマルチデバイス時代のウェブサイトに最適だと言えます。余談になりますが、そういう意味ではフッターは最後の砦としてナビゲーションの役割が大きくなっていますね。

完璧というわけではない

ただ、もちろんAppleウェブサイトも完璧というわけではなくて、たとえば「iPodの情報を探してください」というユーザテストをやったら、たぶん、6〜8割の人が見つけられないんじゃないかなぁと思います。その辺は戦略的にやってるのかもしれませんけど。iPodを買いたい、または、iPodの情報が見たいユーザにはかなり不親切なウェブサイトになっています。もうiPodは売りたくないのかな、的な。

理由2： 見せられるときは、しっかり見せている

Appleウェブサイトでは、デスクトップサイズではメインナビゲーションですべてのアイテムを表示しています。

これも「まぁ、普通だよね」と思う方が多いと思いますが、意外とデスクトップ画面でもハンバーガーメニューだけというサイトを見かけるんですよね。それほどは多くないのかもしれないですけど。

制作側にとってハンバーガーメニューはすごく便利で都合の良いツールですが、ユーザにとっては負担のかかるものです。タップしないとメニューが見えなくて自分が求めるものがそこにあるのかわからないというのは、ユーザへの心理的負担が大きくて、必要でなければタップしないというユーザが多いと思います。過去に自分が担当するウェブサイトでユーザテストを実施した際も、想像以上にハンバーガーメニューが無視されていたのを思い出します。2016年6月のニールセン博士のAlertboxの記事 でも、そういったユーザ行動が実証されています（179名に対して6つのサイトでテストをしたそうです）。やっぱり隠れているナビーゲションは発見しにくい。。。って、当然ですね。

三本線のアイコンではユーザが求めるコンテンツの「匂い」がしないので、素通りしてしまうんですよね。Appleウェブサイトのアイコンは二本しかないし（本数の問題じゃない？笑）。

BBC.comのナビゲーション

ちなみに、Alertboxの調査結果 などを考慮すると、BBC.com のナビゲーションがもしかしたら最適解なのかなぁとも思っています。

理由3： コンテンツ内の「さらに詳しい」コンテンツの見せ方が絶妙

これ、すごくいいなぁと思ってるんですけど、たとえば、iPhone 7のページ に行くと以下の「+」ボタンがあって「●●についてさらに詳しく」という誘導テキストが提示されています。

この方法の3つの利点

このやり方が気に入っている点は3つほどあって、まず、なにより閲覧中のユーザ体験が中断されないのが良いです。さらに詳しい情報が知りたかったら、ボタンをタップしたらすぐに情報が出てくるので非常にスムーズな体験です。また、ページを移動しないで追加情報が見られるので、ページを行ったり来たりする必要がなく、ユーザを迷わせなくてすみます。さらに、コンテンツの階層が増えないので行き来をするための追加のナビゲーションを構築する必要がないのも大きなメリットになります。

この方法のデメリット

考えられるデメリットとしては、再度ページを訪れた際に、あの「詳細」どこだったけ？というのが探しにくいところですね。メニューではなく、ざーっと長いページをスクロールしないと見つけられないというのは、場合によっては不便かもしれませんね。ナビゲーションの利点は一覧性にもありますからね。この辺はさらなる工夫の余地がありそうです。

理由4： その時必要なナビゲーションがメインに表示されている

これもすごくシンプルな実装なんですけど、すごく上手だなと感心します。ページ最上部ではメインナビゲーションが表示されているのですが、下にスクロールするとメインが隠れてローカルナビゲーションが常に表示されるようになります。どういうことかというと、たとえばiPhone 7のページの最上部は下のキャプチャのようになっています。

まとめ

以上、Appleウェブサイトのレスポンシブなナビゲーションが良くできている4つの理由をまとめてみました。Appleウェブサイトのナビゲーション、良くできてますよね。もちろん、改善できるところはあると思いますが、基本的なナビゲーションのシステムとしてはすごく良く考えらえていて、スマホでも、タブレットでも、デスクトップでも違和感なく使えるものになっていると思います。

今回まとめた以下の4つのようなことをベースにさらに工夫を重ねれば、レスポンシブなナビゲーションの標準型みたいなものが作れそうです。

1. 3段階の「ナビゲーション」で確実にユーザを誘導している
2. 見せられるときは、しっかり見せている
3. コンテンツ内の「さらに詳しい」コンテンツの見せ方が絶妙
4. その時必要なナビゲーションがメインに表示されている

では、今回はこの辺で。

Enjoy ウェブ制作！

2016年10月3日に公開され、2020年2月17日に更新された記事です。

この記事をシェアする

• ツイート
• シェアする
• ブックマーク
• Pocketに保存