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

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

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

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

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

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

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

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

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

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

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

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