essence02
横方向のスクロールを効果的に取り入れたWebサイト
Webサイトの常識を覆す「横方向のスクロール」。新鮮な体験を利用者に与えられる代わりに、操作性や見せ方に工夫を凝らさないと、使いやすいサイトにならない。どんな工夫がされているのか紹介しよう。
文＝H2O Space.
| keyword |
| UIの工夫で操作性を向上する |
|
| 全体のボリュームをわからせる |
|
| 縦スクロールさせない工夫をする |
見にくい、操作しにくいを克服する新しい体験
Webサイトは縦スクロールという常識を覆すのが横スクロールのサイトだ。横スクロールは“時間の流れ”を表すのに最適な演出だ。人は“左は過去、右は未来”という感覚をもっているし、雑誌などのメディアでは横方向に読み進めていく行為が身についているため、自然に情報を見ていくことができる。さらに、横を利用する利点として、現代のPCはワイド画面となり、横幅が非常に広いものが多い。これをうまく活用することで画面をいっぱいまで使った、ダイナミックな表現が可能になる。
このとき注意しなければならないのが操作性だ。ホイールが備わっているマウスが多いため、縦スクロールであれば読み進めやすい。しかし、横スクロールは対応していないマウスがほとんどで、ユーザーが操作に慣れていないため、使いづらくなってしまう。そこで画面の左右に矢印ボタンを配置して操作しやすくするなどの手法がとられる。
また、Webサイトでは紙媒体のように“厚み”がわからないため、全体でどのくらいのボリュームがあるのかや、自分がいまどのあたりを見ているのかがわからない。それを解決するために、画面に全体のページ数を表示したり、スクロールバーを表示したりして解決しよう。
最後に気をつけるのは縦スクロールを出さないことだ。縦にも横にもスクロールすると操作が複雑になってしまうため、縦幅は必ず固定しておこう。気をつけることが多いが、ユーザーに新しい体験を提供できる表現だ。
| sitename | au Smart Sports_Green Road Project |
| URL | au-ss.jp/pc/ |
時間の流れを横スクロールで
スタート地点が左端で、ゴールが右端という時間の流れを横スクロールで実現。1日ごとの距離や参加人数を見ることができる。画面の左右にある矢印をクリックして前後に移動できるが、画面下にWebブラウザのスクロールバーに似たコントロールがあり、一気に移動することもできる。画面の大きさに追従してある程度まで伸び縮みするのもよい。
CL：KDDI（株）／DE：（株）葵デジタルクリエーション
| sitename | macla, inc. |
| URL | www.macla.co.jp/ |
自社の実績を、横スクロールで表現
Webサイトを訪れると言語を選んで子ウインドウでコンテンツが展開される。「WORKS」の部分で横スクロールを見ることができる。はじめに一覧を表示し、項目をクリックすると拡大表示になるが、その前後の項目に左右のボタンで移動が可能だ。上下にしないことで、各項目に優先度がつかず同列である印象を与えられ、また画面上部で全体が見えるのもわかりやすい。
| sitename | BLACKOPERATOR |
| URL | www.blackoperator.com/ |
画面をめいっぱい活用
画面下の「Collection」をクリックすると、左右のリンクでカタログを見ることができる。横長のディスプレイで、Webブラウザを最大化してみると、前後の写真が網掛けで表示される。非常に迫力のある画面構成だ。また、Webブラウザの大きさを変えると、少し遅れて各パーツがしかるべき場所に収まるなどの演出もにくい。
［INDEX］
>>> essence02 横方向のスクロールを効果的に取り入れたWebサイト
>>> essence13 異なる素材や動きを使用してインパクトを与えるWebサイト
