フロントエンドWeb戦略室

第2回 スクロールとページングのUIを考える(2)

この記事を読むのに必要な時間:およそ 3 分

スクロールするUI

UIの基本を見てきましたが,Web UIの世界では,今まで当たり前だったものが,時代の変化に伴って廃れていったり,新しいものに置き換えられていくということが頻繁に起きます。今回のテーマであるスクロールとページングを例に,まずはスクロールバーの歴史を紐解いていきましょう。

スクロールバーとは

スクロールバーは上下または左右にスクロールするために使用されるGUIGraphical User Interfaceの代表的なUIコンポーネントの一つで,近年,役割が変化しつつある部品です。

スクロールバーの役割としては次のようなものが挙げられます。

  • ページ全体の分量がどの程度なのか把握する
  • 現在の位置がどこなのか把握する
  • 指定位置にジャンプする
  • 細かいスクロールをする

最初に登場したスクロールバーは,直接操作して画面を上下または左右に動かすものでした図1・注3)⁠

図1 伝統的なスクロールバー

図1 伝統的なスクロールバー

注3)
スクロールバーが誕生した当時,マウスにホイールが搭載されていなかったため,スクロールバーを直接つまんでスクロールする挙動が当たり前でした。

スクロールバーを隠す試み

スマートフォンの登場により,ユーザはタッチパネルによって画面を直接スクロールできるようになりました。そのため,スクロールバーをマウスカーソルで直接ドラッグするという操作は不要になり,より直感的に画面をスクロールできるようになりました。

AppleがiPhoneにて採用したiOSでは,スクロールバーを隠す試みがとられています。何も触らなければ図2のようにスクロールバーが隠されていますが,画面をスクロールした瞬間,図3のようにスクロールバーが表示されます。

図2 普段は非表示

図2 普段は非表示

図3 タッチした瞬間,右端に表示されるiOSのスクロールバー

図3 タッチした瞬間,右端に表示されるiOSのスクロールバー

もしスクロールバーを常に表示していたならば,わずかではありますが画面の表示領域を占有することになります。これは画面解像度が高くない携帯端末にとって致命的なことです。

AppleはiOSのみならず,Mac OSX Lion(以下Lion)においてもスクロールバーをデフォルトで非表示,普段は隠しておいてスクロールするときにだけ表示するように変更しています注4)⁠この傾向はたいへん興味深いことです。キーボード操作,ホイールつきデバイスや,トラックパッド上のジェスチャ操作によって,スクロールは「いつでも」行うことができますので,普段は表示する必要がありません。Apple側は画面の表示領域を狭めるだけでデメリットのほうが大きいと判断したわけです。もちろん,スクロール操作をしているとき以外であっても,現在表示している位置がページ全体のどこであるのかを把握するという役割は残りますが,タッチパネルデバイスとの統一性を優先した,ということになります。

注4)
Lionでは,スクロールの方向が今までの「逆」に変更されました。初めてLionを触ったときに,今までとは違うスクロール方向に違和感を覚えた方もいるのではないでしょうか(環境設定→トラックパッド→スクロールとズーム→スクロールの方向→ナチュラル)⁠それ以前,トラックパッドによるスクロールジェスチャ操作は,マウスホイールと同じように「スクロールバーをどこからでも操作するもの」というイメージに基づいていましたが,Appleはタッチパネルデバイスのように,ページ全体をつかんでスクロールするイメージを採用しました。

変化するスクロールバーの役割

タッチパネルの登場で,スクロールバーはユーザが直接操作するものから単に現在位置を視覚化するためのパーツになりました。あるいは,現在進行形でそのように変化しつつあります。

この傾向は,キーボードではカーソルキー,マウスではホイール,トラックパットではジェスチャといった,⁠モードに依存せずにどの状態からでもスクロールすることができる機能」の存在によってもたらされていると考えられます。

というわけで,タッチパネルデバイスの台頭と共にスクロールバーは徐々に役割を失い,不要なときは隠される部品になりました。

完全になくなってしまうかというとそういうわけではなく,環境の変化に伴って新しい役割が与えられている例も見ることができます。Google ChromeとPathの例を次に挙げます。

検索にヒットした位置を示す

Google Chromeでは,ページ検索でヒットした位置のハイライトにスクロールバーが使われています。

Firefoxでも,同等の機能が拡張機能で提供されていました。

検索とスクロールはセットで語られることが多くあります。これらは,曖昧検索によるフィルタリングとなめらかなズーミング機能を備えたスクロールバー,LensBarの影響を受けているのではないかと推察します。

時刻を示す

図4はSNSSocial Networking Serviceサービス,Pathのスクロールバーです。スクロールバーで投稿時刻の表示が行われています。あとで詳しく解説しますが,無限に継ぎ足されるタイムライン表示において,スクロール位置は何の情報も持たない状態になりました。

この点で,⁠自分がどの場所を見ているのか」を可視化する役割を持っていたスクロールバーに,時刻表示機能が加わることは,自然な流れと言えます。

図4 Pathのスクリーンショット

図4 Pathのスクリーンショット

著者プロフィール

mala(マラ)

NHN Japan所属。livedoor Readerの開発で知られる。JavaScriptを使ったUI,非同期処理,Webアプリケーションセキュリティなどに携わる。

Twitter:@bulkneets

コメント

コメントの記入