横スクロールで作るwebデザインや様々なスクロール

近年スマートフォンの普及により、デスクトップユーザーよりもモバイルユーザーの数が多くなり、インターネットが昔よりも身近になって来ています。
モバイルユーザーが増加しているからこそUX/UIを考えてわかりやすく、使いやすいweb
デザインを考えていかなければいけません。

複雑なwebサイトを見やすくするwebデザインを

複雑なwebサイトを見やすくするためのwebデザインを考えるにあたって、デザイナー目線の
難しいwebサイトではなく簡単で操作性が単純なwebサイトを作らなくてはいけないでしょう。

スマートフォンなどモバイルのデバイスでは小さな画面に大量の情報を表示しなければならないため、スクロールが必要不可欠になります。
サイトを閲覧する際に縦スクロールはもちろん、最近では横スクロール、水平スクロール等々が増えてきています。

スクロールの種類紹介

webサイトに使用するスクロールの種類はターゲットやブランドイメージによっても異なっていきます。

そしてスクロール一つで見やすくスマートな美しいサイトに見えたりします。

縦方向のスクロールの中に少し水平方向へ横スクロールするコンテンツを取り入れてみたりアニメーションを取り入れてみたり
スマートフォンだからこそ見やすい、webデザインなども増えてきていて、様々なスクロールの方法がございます。

ロングスクロールや無限スクロール

ロングスクロールや無限スクロールは、ページが通常のWEBサイトより長く、2ページ
3ページなどの概念がないwebサイトのことを指します。
最大のメリットは、ユーザーをサイトに長く留めることができることです。

普段何気なく使っているTwitterやInstagram、Facebookなどが無限スクロールを起用して
いることから、絶対に外せないスクロールの手法の一つと言えます。
ユーザーは縦方向にスクロールするだけでいいのでストレスのない素晴らしい時間が過ごせ
るのではないでしょうか？
デメリットとしては、ページの概念がないからこそブックマークができくなくて後に戻ってくるのが難しいことです。

パララックス

パララックスとは英語で『視差』を意味します。
ユーザーのスクロールに合わせてモーメントを動かしたりアニメーションを見せたりと
視覚的にユーザーを楽しませることができます。

メリットとしては、
情報をアニメーションなどで伝えることができ先進的なwebデザインになるので、ユーザー
にスクロールしてもらいやすくなります。

デメリットは表示速度が重くなり、パララックスを好まない人もいます。
また、通常のwebサイトと違いレスポンシブ対応ができなくなっていて、表示させる端末
ごとにアニメーションを作らなくてはいけないのでコストと時間がかかります。

横スクロールや水平スクロールとは？

横スクロールや水平スクロールとは、内容が多くなってしまい、表示している枠からデバイスの外に出ているコンテンツを
左右のスクロールで水平に動かすwebデザインを指します。

従来は縦方向に垂直スクロールさせるだけのwebサイトが多かったのですが、最近では様々な
webサイトで横スクロールが取り入れられてます。

また、デスクトップで使うときは、カルーセルを使うなどしてわかりやすくしていたりします。
使いどころや、多く使われている場面を紹介していきたいと思います。

webデザインでの横スクロールの使いどころ

webデザインでの横スクロールを使うべきところは、ECサイトや動画配信サービスなどで
おすすめやブランド、ジャンル別に水平方向に並たり、最近では漫画サイト
などでも水平方向にスクロールする場面を見かけたりします。

スクロールは縦方向という先入観が薄れてきているからこそ取り入れられる手法ですね。

横スクロールが多く使われている参考サイト

タイムセールやシーンに合わせた商品を横スクロールさせています。
Amazon
https://www.amazon.co.jp/

見たい動画のジャンルに合わせて水平方向に並べられてあります。
netflix
https://www.netflix.com/jp/browse/genre/83

また、海外では下記のサイトのような横スクロールとパララックスが取り入れられた、新しいwebデザインのサイトも
流行っています。
https://www.mad.studio/

海外では先進的デザインとして横スクロールが使われている

参考サイトでも紹介しましたが、今まで説明してきた横スクロールとは
また違う形で海外では先進的デザインとして横スクロールが使われています。

マウスは縦方向に動かしてるのですが、スクロールされる方向は水平に動くので
初めてサイトを閲覧する際はびっくりしてしまうかもしれません。
一重に横スクロールといっても様々な意味を持っているので興味深いですね。

スクロール種類別メリットとデメリット

スクロール種類別メリットとデメリットです。

ロングスクロール/無限スクロール

メリット

• コンテンツのダウンロードが短くストレスなく見れる。
• 小さなデバイスで時間をかけずに大量の情報を表示することができる。
• 全てシンプルになり、わかりやすいwebサイトになる。

デメリット

• ブックマークができない。

パララックス

メリット

• おしゃれでデザイン性が高い。
• 一つの物語かの如く情報を視覚で入れてもらいやすい。
• ユーザーのスクロール率の上昇

デメリット

• アニメーションを使う分重たくなる。
• パララックスを好まないユーザーの離脱に繋がる。
• ユーザーが慣れていなくて混乱してしまう可能性がある。
• スマホとPCの両方のデザインを作るコストと手間がかかる。

横スクロール

メリット

• 横に並べらるので場所を取らない。
• PCサイトで見せてる表などを途切れることなく見せれる。

デメリット

• ユーザーが慣れていないと見逃してしまう。

まとめ

横スクロールや様々な種類のスクロールがありますが、ユーザーが使いやすい素晴らしいwebデザインを
心掛けなくては
ユーザーの離脱率の上昇に繋ながってしまいます。ターゲットを定めてわかりやすくスクロールできる
方法を選んで、より良いコンテンツを、webサイトを作りましょう