スクロールに追従するナビゲーションの工夫と実装（1/2）

スマホにおける「利便性の高い」ナビゲーションとは

「利便性の高いナビゲーション」を目指してサイトの構成を考える際、ユーザーが「どんな情報を求めているのか」を理解し、「どのようにコンテンツを移動しているのか」の導線を把握することが重要だ。そして、ナビゲーションを配置する際に注意すべき点が、画面の狭いスマホではクローム（サイトの利用に役立つインターフェイス要素）に割ける面積比率がPCと異なることだ。PCサイトならば、常に表示されているロゴや検索窓はノイズになりにくいだろう。しかし、スマホサイトではその分コンテンツ領域が狭くなり、ユーザーがストレスを感じ、結果、離脱率の高いサイトとなってしまう。

一般的な追従要素としては、サイトロゴ、グローバルナビへの導線、検索への導線、ページトップへ戻る、などがある。どれも使う場面が限られるものだけに、必要とされたときに表示することで「画面を占有する邪魔なもの」から「ユーザーの利便性を高めるもの」に変化する。

スマホサイトの追従要素において考慮すべきポイントは次の三つにまとめられる。一つ目は、ユーザーが求めているタイミングで適したナビゲーションを表示させること。二つ目は、誤ってタップする位置への配置を避けること。三つ目は、タップした後の動作を直感的に理解できないものは追従させないことだ。

事例に学ぶ、スマホサイトでの追従要素の工夫

追従要素は画面の狭いスマホサイトにおいて利便性を上げる重要なUIだが、表示され続けることでユーザーにストレスを与える要因となる。また不要なものと判断された場合、ユーザーの意識から追い出され認識されなくなる可能性が高い。実際のサイトで使われている追従要素のUI表現を見てみよう。

スクロール方向を利用した工夫

追従要素を活用するには、ユーザーが何を表示し、何をしようとしているのかを判断する必要がある。その際に役立つのがスクロールの「方向」と「位置」だ。一般的にWebページは上から下へ向かって読むように構成されている。つまり、下方向へスクロールしている間はコンテンツを読んでいる可能性が高い。これをうまく利用しているのが「WIRED」（01）や「ハフィントンポスト」（02）のサイトだ。

WIREDでは、記事ページで下方向へスクロールを開始すると、追従するヘッダに表示されている内容が「グローバルナビへの導線、ロゴ、定期購読への導線」から「シェアボタン、グローバルナビへの導線」に変化する。そして、上方向に戻るときには再度ロゴへと切り替わる。狭い画面を効率的に活用し、ユーザーの利便性と制作側が表示したい要素をシンプルに両立させている。

スクロール位置を利用した工夫

スクロールで隠れるナビゲーションを画面に残し、ページの一覧性を保つこともできる。

「Yahoo! JAPAN」のスマホサイトでは（03）、タブを横移動することでカテゴリを横断できるように設計されている。

Yahoo!トピックスのエリアまでスクロールすると、タブ内のコンテンツ領域が画面縦幅に収まらないため、カテゴリの見出しを兼ねたタブをヘッダに固定し、ユーザーがページ内での現在位置を見失わないよう工夫されている。このとき検索窓とタブだけが追従し、その他のグローバルナビやロゴは隠れて見えなくなる。提示する導線を絞ることで、追従するナビゲーションをユーザーにとって利便性が高いものにしている。