WebアプリのUI論:時間は縦軸、切り替えは横軸

最近、またいろいろなインターフェースを研究していたのですが、ひとつ気づいたことがありました。
特にWebサービス、Webアプリケーション全般がそうなのですが、縦スクロールするものと横スクロールするものについて、ちょっと気になったのです。

要するに、Webサービスは横軸方向に並べる場合と、縦軸方向に並べる場合で意味が変わるのではないかと。

言うまでもありませんが、普通のサイトは時間軸が上から下へ、縦軸方向に流れるようになっています。
これが自然です。

なぜかというと、英語がそもそも横方向に書かれるものだからです。
日本語も、いまでは横書きがすっかり定着してしまったので、英語に準じて横書きが当たり前ですが、日本語や英語の場合、ページを読むとき、時間は左上から右下へ流れていきます。

そのうえ、横幅というのは読みやすい横幅というのがあって、際限なく横に延びていくとぜんぜん読めません。
そこで先日のエントリにも書いた、「リキッドデザイン」というのが大切になってきます。

つまり、ウィンドウの幅に合わせて文字が折り返されることが重要なのです。

これは、Windowsのエディタを使っている場合にもよく気になるのですが、折り返しをするモードとしないモードがあるとき、折り返ししないエディタはもう地獄のように使いにくいので本当に使いたくありません。いまどき折り返しもまともにできないような困ったエディタはWindowsのデフォルトの「メモ帳」くらいしか思いつきませんが。

では、横方向に時間軸を配置してはマズイのでしょうか?
たとえば本や雑誌などは横方向に時間が流れます。「ページをめくる」という感覚です。

そんな感覚で作られたのが、たとえばグッチのサイトなのですが、見てください。

僕なんかが天下のグッチオ・グッチの末裔に文句を言う筋合いはないと思いますが、これはどう考えても最低のデザインです。

コレを見て、瞬時に先をみる方法が解る人がいるでしょうか?

実は、カバンのならんだ写真の真ん中にある、小さな「 < 」マークをクリックすることで自動的に横スクロールしていく仕組みになっているのです。

でも、普通はそれも面倒なので、下のスクロールバーを操作するでしょう。
しかし、PCはやっぱりもともと横方向にスクロールするものを上手く扱うようにはできてないのです。

Windowsの人は特にそうだと思いますが、マウスのスクロールホイールは縦方向にしかスクロールしません。
Macでも、MightyMouseはタテヨコナナメの全ての方向にスクロールできますが、横方向に中指を滑らすのはものすごく苦痛です。

最もマシだと思えるのはノート型Macで、これは二本指スクロールになっているので、例えば右手の親指と人差し指をさっと右へずらせばスクロールできるのですが、こんな特殊な操作を要求すること自体が困った特徴と言わざるを得ません。

それでもグッチは、グッチであるという特別感を出したいのだという好意的な解釈もできなくはないですが、そもそもグッチのユーザーがコンピュータリテラシーに長けてる人ばかりとはとても思えず、やはりわかりにくいだけなのではないかと思います。

ただ、ブランド系のサイトは、陳列するのが好きらしく、カルティエのサイトもタテヨコならびになっています。

ティファニーのサイトも横並びですが、グッチよりはずっとマシです。横方向のスクロールバーという、全く難しいものが出てこないからです。意味的には小さい「 < 」をクリックする必要があるという点で一緒ですが、実際の使用感は雲泥の差です。

ブランド系のサイトが横並びを多く使っているのは、おそらく宝石棚の陳列方式に影響を受けているのではないかと思います。

宝石やバッグというのは、横方向に見て回るものだから、横方向に並べるのが自然なのだと、宝石屋さんたちは考えているのかも知れません。

ただ、やはりこういう考え方はWebのスタイルとあわないと思います。

Webページの基本は縦長です。
なぜかというと、マルチウィンドウの基本が縦長だからです。

例えば、書類でも同じです。

長い文章が書かれた書類は縦長で、パッと見てわかりやすい絵を強調したものは横長です。

なにかの報告書とか、論文とか、そういうものは必ず縦長で書きます。本も、文章量に関わらず、ほとんどが縦長の判型になっています。

しかしときどき、横長の方がいい場合もあります。
絵を強調したい場合です。

パワーポイントで作った企画書や、スライドなどは全て横長です。
なんとなく、書類が横長であるということは、相手の意識を奪い取りたい、その書類に集中させたい、という意識の裏返しなのではないかと思っています。

人間の目は横に長く、しかも横に二つついて居ます。
ですから、人間の視界というのも横方向に広いのです。

その広い視界を全て埋め尽くしてやろうという意思を、横長のものからはなんとなく感じます。

昔、縦長のディスプレイというものがありましたが、全く流行しませんでした。
たとえ全く同じ解像度でも、横長のディスプレイの方がうまく使えるような気がしたのでしょうか。

横長のディスプレイで縦長の文章を沢山扱うと、同時に三つ、四つとならべて見ることが出来ます。
これがマルチウィンドウであることの大きな利点です。

縦に長い文章を扱う癖があるということは、いまのコンピュータを使っている人間の意識の中には、時間軸は縦方向に流れるというイメージがあるのではないかと思います。

たとえば、ラジオ・テレビ欄も縦方向が時間軸で、横方向がチャンネルになっています。

似た話で言うと、Webサイトの基本デザインである、サイドバーメニューも関係してくるのではないかと思いました。

左はZAKZAKのメニューバーですが、縦に並んでいます。

ですが、このメニューバーはほとんど使うことがありません。
実際には白い部分だけを見ていればこのサイトは全体が見渡せるようになっていて、サイドバーのメニューはあくまで補助的な役割を持っているに過ぎません。

左にメニューバーを置くというのは、Windowsのエクスプローラと似たようなインターフェースなので、一見取っつきやすい感じがするのですが、この方式では、よほど階層が深くならないと意味はないのではないかと思います。

反対に圧倒的に多くのサイトで使われているのは、横に並んだタブ方式のメニューバーです。

これはテレビ欄でチャンネルが横に並んでいるように、ジャンルが横にならび、さらに詳細なメニューが下に表示されていく、という方式です。

Microsoft Office2007では同様のインターフェースが「リボン」として登場しています。

縦スクロールのゲームと、横スクロールのゲームは、実は似たようなゲーム性だけどぜんぜん違うという話を聞いたことがあります。

縦スクロールのゲームと横スクロールのゲームでは、まずスクロール速度が全く違うのです。

縦スクロールのゲームは圧倒的にスクロール速度が速い場合が多いです。少なくとも背景の流れるスピードは速いハズです。

横スクロールの場合、スクロールはかなり遅めです。強制スクロールよりもスーパーマリオのような半強制スクロールの方が多い気がします。

これはなぜかというと、やはり人間の目が横長であることに関係しているのだそうです。

人間の目は横長なので、横方向にものがあると、それを目で追いかけてしまう性質があります。
そうすると眼球がもの凄く移動するので、かなり疲れます。

反対に、縦方向の変化に関しては、人間はある程度諦めているのだそうです。

電車に乗っていて、窓の外の景色をじっとみていると、目が回るような気がしませんか?
反対に、シースルーのエレベータで高層階にあがるようなとき、目が回ったりはしないはずです(高所恐怖症の人は別として)。
目は縦方向に変化するものを最初から追いかけないからです。

同じように、画面上で横方向になにかがスクロールすると、どうしてもそれを目で追いかけたくなってしまいます。
でも、縦方向にスクロールすると、ぼうっと見ることが出来ます。

ですから横方向へのスクロールをするとしたら、本当に場面転換とか、そういう場合に限定した方が良さそうです。テレビのチャンネルを切り替えるような場面では横方向への切り替えというのは意識が働きやすいのですが、同じ情報が横方向にずっとつながっている、昔の巻物方式だとやっぱり疲れるのではないかと思います。

逆に、巻物に文章を書いていた頃は、日本語が縦書きだったので、ちょうどよい高さで文章を読むことが出来たのだと思いますが、横書きで慣れてしまったなかに突然縦書きのような方向性が入ってくると戸惑います。

横方向=意識の切り替え、という意味では、縦長の書類を机に並べたときなどにもあてはまります。
ふたつ以上の情報を見比べるとき、ふつうは横に並べて見比べます。やはり、人間の視界は横長だからだと思います。

昔は左にメニューがあるサイトが多かったような気がするのですが、最近はタブ方式が増えてきたというのも、実はそんなところに原因があるのかもしれません。