Webデザイナーは、Webサイトにコンテンツを配置する際に様々な（ある程度定番化した）UIパーツを用います。例えば以下のようなもの。

• タブ
• カルーセル
• アコーディオン
• プルダウン
• ティッカー
• マーキー

ちょっと変わったもの、ピンとこないものをあげていると感じるかもしれませんが、私はこれら全てが持っている大事な役割、共通点があるんじゃないかと思います。

コンテンツの縦幅を稼ぐため？

例えばWebサイトのコンテンツの量が多く、ファーストビューで見せたいものがたくさんあるのでカルーセルを設置しよう！というような判断がよくあります。…そして、Webデザイン業界ではそれが必ずしもよい結果をもたらさないことも散々語られています（もちろんそれっぽいからとか、複数のコンテンツをトップにあるということにしなくちゃいけないときとか、制作者以外の都合が色々あるでしょうけどね）。

その他はじめに挙げたUIパーツは全て、コンテンツの縦幅を詰めてなるべく多くの情報を見せられるようにするという目的で使われていると思います。見方を変えると、この縦幅はそのままそのコンテンツの重要性を表していると言えるんじゃないでしょうか。

重要性の低いパーツは縦幅も小さく

マーキーは、ガラケーサイトの世界で特に重宝された古くからある表現手法です。テキスト1行分のスペースでそれ以上の長さのテキストを表示させることができるので画面の小さいデバイスではそれなりに存在意義があるでしょう。ティッカーは複数行のものを1行ごとに表示させるために使われています。

Imperial Sagaのゲーム画面。ティッカーに多くの小さな情報を閉じ込める

逆に言えばマーキーやティッカーで表示したい内容は、少なくとも設計者の判断においてはさほど重要ではないからこそ小さいスペースに詰め込まれていると言えます。

コンテンツは分類ごとに適度なサイズに

Webサイトのコンテンツは全てが並列情報というわけではなく、主従関係や異なる重みを持っています。それはもちろんサイズの他にも色やマーカー、アイコン、ボーダーなどでも表されます。

タブやカルーセルが情報に複数の軸を与えつつ縦幅を調整する

タブやカルーセルはこうしたコンテンツをグルーピングするとともに、縦方向の面積を適度に保つために役立っています。また、こうすることによってコンテンツは視覚的にも、素直なX方向の1次元的な情報の羅列ではなく、横方向や奥行きを用いた整理された階層を感じさせることになります。

同時に、グルーピングされて下層に追いやられた一つ一つの情報にアクセスされる機会は減ってしまうと思います。自動スクロールやランダム表示など、それに対応する施策は色々ありますが、結局のところ利用者が一度に認識できる情報の多さは限られているので、どのようにそれを提供するかは設計者次第、トレードオフなものだと言えます。

おわりに

以前このブログで画面からはみ出ているUI表現とハマっている表現という記事を書きました。Facebookが横スクロールを暗示するはみ出した横スクロールを採用していますが、今のところスマートフォンサイトならこのやり方がかなりすごく良いなーと思ってます。

タイムライン型のWebサイトやアプリはコンテンツのほとんどは並列に扱われるべきもので、重みづけはアルゴリズム、メインのタイムラインとソートしたタイムラインをユーザーが使い分けるくらいです。長文は折り畳まれるし、画像も2枚以上はサムネイルにしたり、その中で友達のレコメンドや広告もはみ出し横スクロールにしたりと、Facebookは並列なコンテンツの縦幅をしっかりコントロールしているなあと感じます。

このブログでは以前にもデザインを言語化しようよって話という記事を書いていて、Webサイトのデザインに限らずなぜそういうデザインにするのか、ということを言葉で表す試みをときどき行っています。最近あんまりやらなくなっちゃいましたが…っていうかブログ書く回数が減っちゃってるのでもっと頑張りますねw