おそらく固定ナビゲーションという仕組みはよく目にするものだと思います。固定ナビゲーションとはユーザーがスクロールしても、ナビゲーションバー（またはその一部の要素）が画面に表示されたまま残る状態のことです。
「スティッキーナビゲーション」として紹介されることもあるこのUXデザインのトレンドは、2010年の初期に初めて現れました。それ以来、近代Webデザインの１つの象徴となっています。UXデザインのトレンドのような移り変わりのはやい世界においては、かなり長い間流行し続けていると言えます。
さらに、固定ナビゲーションは、すぐにスタイルが崩れてしまうようにも思われていません。今日のWeb上で最も先進的なPC体験の一部として知られている機能だからです。Awwwards.comのSiteoftheDays Winnersのサイト評価を見てみると、固定ナビゲーションがどれほど人気があるかがわかります。
そのサイトに必要かどうか考える
固定ナビゲーションバーを実装する最適な方法を理解する前に、一度立ち止まり本当にそれが必要であるかを自問してみましょう。固定ナビゲーションが必要かどうかを示す指標を見つけるためには、Webデザインの起源を振り返ることが有効です。
Webデザインの初期の時代に戻ってみると、サイト上には複雑なサイトマップがあり、さまざまな機能や機能が複数のページに散在していました。ユーザーはわけがわからず堂々巡りの状態に陥り、探していること自体が無駄になることもありました。
固定ナビゲーションの例Anchor&Orbit
これに対処するため、よりシンプルにできるだけ少ないページにWebサイトを統合することを選択しました。極端な例ですが、すべてを１枚のスクロール可能なページに入れ込んだサイトも登場しました。
結果として、Webページが長くなればなるほど、スクロール時間が長くなっていきました。ユーザーはページの１番下まで行ってしまい、こんなことをせずにナビゲーションバーの項目をクリックしておくべきだったと感じ、またページの下から上まで戻って来るのです。この場合の解決策とはなんでしょうか？ ページの下へと流動的に動くナビゲーションバーです。
デザインしているプロジェクトが長いページになり、ユーザーがページをすばやく上下できるような機能が無いとしたら、固定ナビゲーションが答えになるかもしれません。
業界の観点から見ると、固定ナビゲーションは小売やECサイトで最も普及しています。研究によると、この機能はカートを空にすることを抑制するのに大変有効であるとされています。
ある調査では、オンラインブランドの小売業者が固定ナビゲーションを導入したところ、約３％コンバージョンが増加したとのことです。次にオンラインストアをデザインするときは、買い物客がスクロールしてもナビゲーションバーが見える状態にすることを心がけてください。
同調査では固定ナビゲーションに対し、異なる種類の人がどのように対応したかの調査も行われていました。結果として高齢層と若年層の人たち、つまり人口統計学上２つの両極端の人たちの間で評判が良かったとのことです。
Clicktaleはこの理由として、これらの年代層のユーザーは、デジタルに対しあまり信用を置いていないのではないか、という推測をしています。固定ナビゲーションは、ユーザーが困惑しないようにするための便利な道具です。次回あなたがインターフェースをデザインするときは、このことを心に留めて置いてください。
「トップ」ボタンの長所と短所
固定ナビゲーションを批評する人の間では、それがあまりに邪魔で絶えず動くので、ユーザーがページの実際の内容に意識が向かなくなると主張されています。
この人たちは、代わりにシンプルな代替案を提示しています。固定された「トップに戻る」ボタンです。この方が邪魔にならず、それほどユーザーの気をそらすこともなく、画面の全長にまたがるバーより少ない面積で済みます。さらに、PCのナビゲーションをモバイルに変換するのは難しそうだとも言います。（回避する方法もあります）。
これらは確かに正論です。しかし、すべてのUXに通ずるようにこの方法にも長所と短所があります。「トップに戻る」ボタンはあまり邪魔ではないし使い方も簡単ですが、ユーザーは１回ですんだかもしれないクリックを２回もしなければならなくなります。ユーザーがページをスクロールしている時にナビゲーションバーをクリックしたい場合は、「トップに戻る」をクリックしてから、自分が本来ほしいものを選択しなければなりません。
これ自体は大したことではないかもしれませんが、UXデザインの会社やユーサビリティの研究者は、ユーザー体験をどれだけ合理化できるか熟考するものです。１回クリックが多くなることは、とくにECの世界では重要です。
加えてユーザビリティ調査では、固定ナビゲーションの方がより早く誘導されることがわかりました。研究結果によれば、固定ナビゲーションバーでは、５分間のサイト訪問において36秒の時間短縮ができました。
固定ナビゲーションのベストプラクティス
ここまで、いつ、そしてなぜ固定ナビゲーションを使用するかについて触れてきました。では、問題の核心に入りましょう。スクロールするナビゲーションバーをデザインする際に、留意しなければならないことがいくつかあります。
すべてを動かさなくてよい
もしユーザーがほんの少ししかスクロールしないのにナビゲーションバー全体が下に降りていく事に対し、煩わしさを感じるのではないかと心配であれば、次のことを覚えておいてください。固定ナビゲーションバーは全体の一部だけに適用し、残りはトップにそのまま置いておくということです。HopDecoの例を見てください。
ナビゲーションバーとサイドバーがページトップの右上のところに固定されおり、ここをスクロールします。
上のほうのナビゲーションバーは消え、サイドナビゲーションバーは残ります。右上のハンバーガーアイコンを選択するとメニューがスクリーン全体に表示されますが、ここにはページトップにあるナビゲーションバーの要素も含まれています。
色に注意を払う
もしページが完全にモノクロでない限り、固定ナビゲーションと付随するコンテンツ間の色彩の衝突を避けることは大切です。色が合わないと、見た目が悪いだけではなく、ページの読みやすさにも深刻な影響を与えます。しかし、ユーザーがスクロールするたびにナビゲーションバーの色を変えるようなことをしたくないでしょう。
では、この点うまく行っているOceanSchoolの例を見てみましょう。
この比較的まばらなナビゲーションバーは、少ししかオプションを置かないことで、固定ナビゲーションバーの候補になり得ます。しかし、Ocean Schoolのウェブサイトは大変カラフルで、何色かの異なる青、緑、そして紫色が映っています。
Ocean Schoolは新しいセクションごとにナビゲーションバーを変更させる代わりに、下にスクロールし始めるとすぐに、ナビゲーションバーを白い背景の中に溶け込ませます。そうすれば、ナビゲーションバーとコンテンツの間に不一致が生じることはありません。
まとめ
固定ナビゲーションはとても用途の広いツールなので、デザイナーがそれぞれ持ってしまい込んでいるのはもったいありません。動的であり、PC上で新しいインタラクションの体験を生み出します。
そして何よりも、デザインするのがそこまで難しくはありません。もしまだお持ちでなければ、今度デザインする機会に固定ナビゲーションバーを実装することを考えてみてください。
