どうしてもタテに長くなってしまう傾向にあるスマホサイト。ユーザーにとってタテの動きはそれほどストレスがないとも言われますが、ページが長いと何となくダラダラした感じになりがちなのと、ページ全体の構成もつかみにくく見通しも悪くなることから、開閉式のアコーディオンを使った回避の仕方などもよく目にします。

そんなときにあわせて検討してもよさそうなのがヨコの動きです。バナーや商品画像などのカルーセルと同じかたちですが、コンテンツを横にスクロールさせるかたちは、横に長い表以外はまだあまり多くは見られません。ただ、横への動き自体はアプリではもよく見られるかたちですし今後はWebでも活用が進みそうです。今回はコンテンツのヨコの動きを使っているサイトをいくつかご紹介します。

じぶん銀行

主に画面ショットを用いた「〇〇の方法」という部分で横スクロールを使っています。画面ショットも縦長なので横移動の方がスムーズに感じます。

立教大学

経済学科の３つの特色を横の移動で見せています。タテにだらだらと受動的に見させられるのではなく、読みたい人が能動的に読むというかたちも良いのかもしれません。

東急電鉄

一覧性はなくなりますが、コンパクトにまとまって良い感じがします。仮に路線が複数ある場合であれば、まずは見たい部分に早くたどり着けることが大事になるので、こういった収め方は良さそう。

オリンパス

コンパクトデジタルカメラのT（Tough）シリーズを開いてTG-5　→　TG-Trackerと見ることができます。こうした商品画像のカルーセルのようなものはよく見かけますが、アコーディオン展開した部分がさらに横スクロールするという構成はあまり見かけません。自分が見たい部分に早くたどり着けて商品を見ることができて、かつ、すぐに別のカテゴリも見ることができます。

言い換えると、まず、そのページの全体の構成やラインナップが分かった状態（見通しがついた状態）で、詳細を見ることができますので、何らかの説明ページにも有効な考え方かと思います。タテ移動が少ないと楽な感じもします。