Webデザイントレンド定点観測上スクロール時だけ表示されるナビ「スクロールアップバー」

Webデザイントレンド定点観測

東京都渋谷区でフリーランスWebデザイナーとして働く、黒野明子（くろのあきこ）と申します。

今月は、2014年5月後半に話題になった「スクロールアップバー」をテーマとして取り上げてみましょう。

まず話題の口火を切ったのは、こちらのブログ記事です。

この記事では、Twitterの共同創業者Evan William氏が立ち上げた新サービス「Medium」を例に挙げ、ページを下にスクロールするときは隠されていて、上にスクロールするときは表示されるバー」のことを、「The Scroll Up Bar（スクロールアップバー）」と呼んでいます。

最近は、縦長のWebページを下部まで読み進める際にナビゲーションを見失わないよう、ナビゲーションバーが上部に固定されているケースがよく見受けられます。それはそれで便利なのですが、コンテンツ領域の高さを狭めてしまい邪魔に感じられる場合もありますね。特にモバイル端末では、画面領域は貴重です。

これを読み、同様の実装をしているサイトを筆者もいくつか探してみたところ、Twitter上で「Intridea」というサイトのUIデザインディレクターChris Tate氏の「2013年3月からスクロールアップバーを使っている」という発言を発見。

早速サイトを訪問し動作を確認したところ、確かに画面を下にスクロールする際にはナビゲーションが表示されませんが、

上方向に戻ろうとすると、ナビゲーションがスッと現れますね。

実際の動作は、ぜひIntrideaで確認してください。

確かに、ユーザーがページを下に読み進めている場合はコンテンツ領域の確保を優先し、上に戻ろうとする場合はアクセスしやすい場所にナビゲーションを表示するという実装が、有益になるケースもありそうです。

そこで「スクロールアップバー」を利用しているサイトを、2つ挙げてみましょう。

Locomotive | Web Agency in Montreal

モントリオールのWeb制作会社のサイトです。「スクロールアップバー」内の右側にあるメニューアイコンをクリックすると、さらにメニューが展開されるようになっています。

レスポンシブレイアウトなので、この実装はスマートフォンでの閲覧時の操作を意識したものかもしれません。しかし、PCでの閲覧時には「スクロールアップバー」の中に直接メニューが展開されている方が、使い勝手が良さそうではあります。

JavaScriptの配布ページです。ここから入手できるHeadroom.jsを利用すると「スクロールアップバー」を実装することができるのです。

そして、もちろんこのページ自体でも、「スクロールアップバー」の動作を確認することができます。イギリス出身のNick Williams氏が作成しています。

さて、上記のHeadroom.js以外にも、「スクロールアップバー」を実装できるスクリプトを配布している方が何人かいらっしゃるので、ご紹介していきましょう。

まず、Eduardo Martins Barbosa氏。

冒頭で取り上げたThe Usability Postの記事でも追記で紹介されていますが、GitHubにスクリプトを公開しています。

次は、筆者がTwitterで見つけたJason Mayo氏のこのコメントです。

「The Usability Postの記事を読んでから、jQueryのプラグインを作ることにした」とおっしゃっていて、こちらもGitHubで配布されています。

筆者の手元で展開したデモページのスクリーンショットはこちら。バーが表示されるタイミングがすこしゆっくりで、なめらかに動いています。

最後は、David Simpson氏が作成したスクリプトです。下記で配布されています。

おなじく、筆者の手元で展開したデモページのスクリーンショットも挙げておきます。

UIについて同じ問題意識を持つ様々なエンジニア達が、同時多発的にスクリプトを書いて発表しているところに、インターネット社会の面白さを強く感じますね。

それぞれの実装ごとに、バーが隠れるタイミング、現れる時の動き方などに違いがありますので、比較してみるとよいでしょう。また、JavaScriptが得意な方は、ご自分独自のアレンジを作成してみてはいかがでしょうか？

ということで今回はいままでの記事の書き方とは少し趣を変え、スクリプトを多めにご紹介してみました。

（了）