CSSだけで実装できる横スクロールUI(スクロールバーなし)

モバイル時のUIで横スクロールのを採用するアプリやWebサービスも増えてきており、デザイナーやコーダーの方は実装する機会もあるかと思います。
今回はCSSだけで横スクロールを実装する方法と気にするべきポイントをご紹介します。

横スクロール(horizontal scroll)とは


上記の画像の様なUIのことです。アプリの方が見る機会は多いと思いますが、WEBサービスでも最近はよく見るかと思います。
横スクロールが見れるWEBサービス(2017/09現在)

Google
Airbnb
TripAdvisor
Bookingtable
zomato

実装時の気をつけるポイント

横スクロールだと画面の横にコンテンツを配置するため、縦のスペースを取らずにコンテンツを配置することができます。ですが、アプリなどでよく使用されるUIだとはいえ、まだまだ横スクロールに慣れていないユーザーもいるかと思いますので、実装する際に気をつけるポイントをご紹介します。

・はみ出させる

「横スクロールがある」とユーザーに認識させるために、コンテンツをはみださせます。この時のポイントは各アイテムの途中で途切れているようにみせ、まだ先にも情報があるということをユーザーに認識してもらうことです。

・カード型レイアウト

各アイテムはカード型レイアウトにするとよりスクロール可能ということをユーザーに認識してもらえます。別にカード型レイアウトにする必要はありませんが、他アプリ、サービスが横スクロールUIを採用する際は、ほぼカード型レイアウトで実装しているため(メニューの横スクロールは除く)、ユーザーにとっては親しみのあるUIかと思います。

・イベントトラッキングで計測

実装後に実際に横スクロールが使用されているのかを計測するためにGAを使用している場合はイベントトラッキングをしこみましょう。横スクロールのイベント発火時と、各アイテムのaタグクリック時にイベントが計測できるようにしていれば十分かと思います。数字で説明できると上層部やデザインの決定権を持っている人に対して説得力のある説明ができるかと思います。

・表示アイテムの数

特にこれといった数字はないのですが3~10の間が良いかと思います。3以下の理由は3つしかないアイテムに横スクロールにするには少なすぎる、10個以下の理由は、それ以上ユーザーが求めている場合は横スクロールではなく一覧ページを作成して飛ばした方が良い(と個人的に思っている)からです。イベントトラッキングを仕込むことで最適なアイテム数や横スクロールの使用頻度がわかるのでリリース後の数値をもとに改善していくのが良いかと思います。

デモ

※モバイルデバイスで確認してください。

コード

CSS

HTML

・white-spaceとinline-blockで横並び

ulにwhite-space:nowrap;、liにdisplay:inline-block;のスタイルをあてることで横並びにしています。注意点としてwhite-space:nowrap;は子要素にも継承されますので、子要素の方でwhite-space:normal;と解除をしないとテキストがカードからはみ出てしまいます。

・paddingとoverflowで横スクロールバーを隠す

ulの親要素のdivheightoverflowを指定し、ulにはpadding-bottomを指定することで、横スクロールバーをulの親要素のdivからはみ出させて見せない様にしています。見せる場合は、height指定しなければ見えます。

よろしければシェアをお願いします。

Keisuke Yamashita

新卒CM制作会社でPM→カナダでWEBデザインを勉強→カナダでWEBデベロッパーとして就職→日本で事業会社でデザイナー デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。

最新情報をお届け

De.からWEBデザインの最新情報を受け取りたい方は、下記のボタンでLIKEしてください。