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

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

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

ここでは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を指定してしまうと、スクロールがぎこちない感じになってしまいます。