既成概念を覆す!?水平スクロールのモバイルサイトが持つメリットと実装方法

更新日: 2018年05月28日

イノベーションというのは、大抵の場合、従来持っていた既成概念を壊す形でやってきます。
例えば、仮想通貨の場合、実体のある媒体としての通貨を持ったり、発行元の中央政府がなければならないという既成概念を崩し、Amazon Goや韓国のセブンイレブンのように現金を持たなくともスマホや身体だけで決済を行うのは、有人のレジに並ばなければならないという固定観念を覆すものです。

それでは、UX/UIの世界では、どうでしょうか？

残念ながら、iPhone 5がリリースして以降からは、モバイルアプリやモバイルWebデザインに関しては、そこまで大きなイノベーションは実際のところ起こってはいなかったのではないでしょうか。
パララックスエフェクトやWebフォントといった当時であれば革新的な技術が、現代風にアレンジされて何度も登場しているに過ぎない、といっても過言ではないでしょう。

しかし、UX/UIの既成概念を崩すかもしれない、新しいインターフェイスの形が今後定着するかもしれません。
それが水平スクローリングです。

スマートフォンは、その縦長の形から、縦に(つまり垂直に)スクロールしなければならないという既成概念があります。
横幅は固定し、縦にスクロールしていくのです。
しかし、縦幅を固定し、横に(つまり水平に)スクロールするモバイルサイトがあったらどうでしょうか。
新しいモバイルユーザー体験を生み出すのではないでしょうか。

今回は、水平スクロールのモバイルサイトが持つメリットや実装方法についてまとめていきます。

水平スクロールのモバイルサイトのメリット

デザインをするときにまず考えてみたいのは、「当たり前」だと思っていることを疑うことです。
モバイル’デザインの場合は、縦に(垂直に)スクロールする、というのが当たり前になり過ぎているようにも思えます。

しかし、横に水平にスクロールをするという選択肢は、実際のところあってもいいようにも思えます。
上の図をご覧いただければわかるように、「垂直のモバイルページ」と「水平のモバイルページ」では、実際にはほぼ同じ量のスペースでデザインすることになりますが、若干水平のモバイルページのほうが作業領域が広く見え、余裕を持ったブラウジングができるようになります。

もちろん、考えなければならないことも同時に発生します。
まずは、ナビゲーションやメニューの表示をどうするかという点です。
ただ、この点は従来型の垂直スクロールのモバイルサイトのホームページでも、頭を悩ませていたのではないでしょうか。

左のように、メニューやナビゲーションのためにヘッダーやフッターを固定してしまうと、結局のところ表示される領域が狭くなってしまいます。
右のようにハンバーガーメニューを使ったり、左から引っ張ってメニューを表示するように、オフスクリーンで表示するようなメニューであれば、表示領域の問題に関しては解決されます。

水平スクロールのモバイルページの活用例

垂直スクロールのホームページについては毎日見かけるのでイメージが湧きやすいとは思いますが、実際のところ水平スクロールのホームページとはどのようなものなのでしょうか。

ここではMuzliで紹介されている2つの事例を紹介させていただきます。

キュレーションマガジン

例えば、Webマガジンのような、写真やイラストなどの画像を多く持つメディアについて考えてみましょう。
横スクロールにすると、画像は横ではなく縦のサイズを固定する形になるので、より大きく画像を表示することができるようになります。
ユーザーがスクロールしてコンテンツを閲覧している時に、メニューを自動的に隠すことができれば、快適なUXを実現することができます。

こうしたレイアウトは、画像を多く持つコンテンツであれば多くが有効です。
例えば、SNSのようなアプリやホームページでも、フィードを横にスクロールして表示してみるというのは、面白い方法かもしれません。

読み物

ブログサイトなどの読み物に関しては、例えば上の図のようになるでしょう。
基本的にWebサイトは横書きでテキストを表示するので、雑誌風に段組を行う形になりますが、段の横幅に関しては、スマートフォンの横幅が基準になるでしょう。

この場合、あまり機能的にはならない可能性もあります。
テキストをパラグラフごとに分けることで、意図する形でユーザーに本文を読ませることはできます。
こうした問題を解決するには、水平スクロールと垂直スクロールを組み合わせて使うのもまた一つの解決策になるでしょう。

水平スクロールの実装方法

水平スクロールの実装方法はさまざまあるようですが、ここではクロスブラウザ対応の、一般的な水平スクロールの実装方法をご紹介いたします。

水平スクロールの実装方法は、いたってシンプルです。
基本的には、高さを100％で固定し、横幅を増やしていけばいいのです。

CSSでは、このように表現していきます。

.scrollcontent{
　　width: 1000px;
　　height: 100%;
　　margin: 0 auto;
　　padding: 0;
　　overflow-x: scroll;
　　overflow-y: hidden;
　　-webkit-overflow-scrolling: touch;
}

最後に入れている「-webkit-overflow-scrolling: touch;」は重要で、これを入れることで、iOS系端末でのブラウザで、スムーズスクロール(慣性スクロール)を実装することができます。
逆にこれを指定せずにoverflowを指定してしまうと、スクロールがぎこちない感じになってしまいます。