ブーム到来も？ 横方向スクロールのアプリデザインは研究する価値アリ！

縦方向スクロールが台頭する時代

現在、多くのアプリは縦方向スクロールを想定してデザインされている–あなたが毎日、最初に開くであろうアプリも、縦方向スクロールデザインを採用していることかと思います。私はそのことに気づいてからというもの、縦方向スクロールと横方向スクロールの役割について、新しい原則を見出したいと考えるようになりました。

今回は、UI ,UXの視点から横方向スクロールについてリサーチした結果を、みなさんにご紹介します。

縦横のスクロールに、違いはない？

まずはじめに、2つのスクロールの違いを探しました。どちらのスクロールを用いても、使用可能なスペースはほとんど同です。

しかし大きな違いは細部にあります。次項目からは、メニューの表示方法にどのような違いを生みだせるか、ご説明しましょう。

横方向スクロールならメニューのスペースを節約できる

現在主流となっている縦方向スクロールを採用したインターフェイスでは、メニューが画面の上下に設置されていることが多いです。
モバイルアプリケーションが普及したときから縦方向スクロールのデザインが一般的だったので、現在でも多くのデザインとプロトタイピングソフトが縦向きのアートボードに基づいて作られています。
そして、縦方向スクロールの範疇で設計されたメニューは大量のスペースを使いがちです。下のスケッチの左側は縦方向スクロールの、右側は横方向スクロールのメニュースペースを示しています。

縦方向スクロールの場合、上部にはナビゲーションバーがあり、下部には昔ながらのタップバーがありますが、これらはユーザーがスクロールをしたときに、消えたり小さくなったりします。私はもっと良い表示方法があるはずたど思い、この問題に取り組みました。

メニューが占領するスペースを減らすためには、ハンバーガーメニューなどの簡単なサインだけを用いるのが良いでしょう。

すると「ハンバーガーメニューではメニュー項目が分かりづらい」という問題が発生しますね。それは、ラベル付きのナビゲーションメニューを左側に表示させ、画面をスワイプするとメニューへ遷移できるようにする、という方法で解決できます。

下のスケッチはナビゲーションメニューの案です。
左下隅のアイコンをタップするとオフキャンバスメニューが現れ、アプリ情報、通知、アイコンなどの情報が表示されます。検索、連絡先などの機能を追加することもできます。
別の画面に切り替えると、ナビゲーションは消えます。

基本のレイアウトをチェック！

考察とスケッチが完了しました！ いよいよレイアウトを組みます。

上記のビデオは実際の要素を表現しています。オフキャンバスメニューは、グリッドシステムをベースに、4枚のページで構成しました。オフキャンバスメニューは、検索ボックス、共有や編集など、他の機能へのクイックアクセスに似た要素を6つ入れてあります。

このルールを導きだしたあと、私はそれを実際のケースで応用し、ブラウジングやフルスクリーンコンテンツのプレゼンテーションがスムーズに行えるようなアプリを作成しました。

横方向スクロールの活用例

とあるキュレーションマガジンでは、横方向スクロールを採用しています。
モバイル機器でプレビューしてみたところ、とても自然な使い勝手だと思いました。まるで雑誌のように、フィードを移動することができます。

とても動きのある表示方法で、常に内容へフォーカスされています。
ユーザーがフィードをスクロールすると、ほぼすべてのメニューが消え、ユーザーエクスペリエンスはさらに向上します。

特筆したいのは写真が見やすいこと。フルスクリーンで写真をスライドさせることができれば、ストーリー性を高められます。
また、スクロールを停止するアンカーは、長いフィードをナビゲートするのに役立ちます。このようなフィードをスクロールすることは体感的にもとても魅力的でした。

しかし、文章を読むという行為自体は、横方向スクロールだと少々不自然です。その反面、テキストの段落を分かりやすく配置できるので、ユーザは記事の内容により意識を集中させることができます。

この問題についての解決策は、縦横のスクロールを混合させることでしょう。

まとめ

『Snapchat』が登場したことで、新しいUIのアプローチをユーザーが求めていることがわかりました。横方向スクロールも、ユーザーのニーズに応える手法のひとつかもしれません。コンセプトがユーザーに受け入れられるか把握するのに便利な方法であるライブプロトタイプを活用していきたいですね。

私は今回のリサーチと考察を経て、この分野をさらに学びたいと思いました。この記事をきっかけに、みなさんのUI,UXについての学びが促進されますように。

（翻訳：Yuri Tanaka）