2014-09-11

横にはみ出すナビゲーション

今回(2014年9月)のAppleのウェブサイトのリニューアルにはいくつもの興味深い点がある。ナビゲーションの二本線とバツ印が共にインラインのSVGなことなどもそうだし、多くのポーションがモダナイズされたにも拘らずPrototype.jsを継続利用したこともすごく気になる。その中でも一番気になったのは狭い画面向けの横にはみ出すナビゲーションだ。

これまでの通常は隠されている狭い画面向けのナビゲーションの多くは、次の3つに大別されていた。

1. ドロップダウン
2. オーバーレイ
3. ドロワー

極稀にアイコンのみのコンパクトに横へ並べたものもあったが、いずれの場合もナビゲーションの項目は縦に並んでいることがほとんどだ。一覧性に富み、アクセス性が高く、ユーザーの学習コストも低い。

これに対して横にはみ出すナビゲーションは、項目を画面外にはみ出すように横に並べ、スワイプでスクロールして探させるという形のものだ。一覧性に欠け、アクセス性が低く、ユーザーの学習コストも高い。タイミングが悪いと項目に続きがあるのか判断しづらいということも欠点に挙げられるだろう。

それぞれのタイプの利点は以上のようなもので、横にはみ出すナビゲーションは実装の簡単さくらいしか利点は見えてこない。多様なビューポート幅への適応という点では悪くはないが、一覧性を維持した形で適応できるわけではない。利点のみを考えると横にはみ出すナビゲーションは実装するに値しないと言っても良いだろう。

それでもこういったナビゲーションがウェブデザインに大きな影響を与えるであろう大手ウェブサイトで採用されたことは、画面いっぱいに広がってるものは横にスクロールできるかもしれないというような認識が広まるきっかけになりそうだと思う。そしてそれは本質的な意味合いの少ないディテール(続きがあることを示す矢印や影)を追加する必要が少なくなることを意味する。

長年タブー視されていた横方向のスクロールが、これでようやく普通の振る舞いとして受け入れられるとすると、ウェブデザイナー達もむやみに忌避しない勇気を持つ必要がありそうだ。