記事内に商品プロモーションが含まれる場合があります
Webサイトやアプリなどでスクロールによりコンテンツがさらに表示されるようなデザインにする場合、スクロールが可能であることをしっかりと表現するべきです。今回は、スクロールできることを示す6つの表現を紹介します。それぞれの特徴を押さえたうえで最適なデザインを選びましょう。
1. 部分的に隠す
最も一般的な表現かと思います。画像や文字などのコンテンツを一部分だけ隠すことで、その方向にスクロールができることを伝えることができます。ただし、レスポンシブデザインなど、ページや閲覧端末のサイズによってコンテンツの大きさが異なる場合には、ちょうど一部分だけ隠れるようにするのが難しかったりしますね。
2. スクロールバーを常に表示
こちらはGoogleのデベロッパー向けブログのデザインです。レスポンシブ対応でボックス内の一部が隠れると、スクロールバーが表示されるようになります。このようなオリジナルのスクロールバーを作るときには、「CSSを使ってスクロールバーを表示させる方法」や「スクロールバーを常に表示させる」が参考になりそうです。
3. 矢印で表現
下向きの矢印や「」を配置するのも１つの手です。縦長のシングルページでよく見かける表現ですね。
こちらはAppleの公式サイトです。右向きの矢印を表示することで、右側に他のコンテンツが隠れていることを表しています。
4. グラデーションのカバーをかける
文字や画像をフェードで隠すのも、スクロール可能であることを表すのに有効でしょう。具体的には「透明→白」のグラデーションをかければ、続きがあるように見せることができます。
Webデザインの場合、「CSSでテキストなどにグラデーションをかける」が参考になるかと思います。
5. スクロール可能であることをテキストやアイコンで伝える
いっそのこと「スクロールしてください」というようにテキストや画像で表示してしまっても良いかと思います。
こちらのサイトの場合、オシャレなアニメーション付きのマウスのアイコンでスクロール可能なことが表現されています。
また、レスポンシブデザインで「◯◯px以下になるとスクロールが可能になる」ということが決まっている場合には、テキストもレスポンシブで表示↔非表示を切り替えれば良いですね（display:noneにしておき、画面が一定の幅以下なら表示するようにする、など）。
6. 現在の位置を表す点を表示
カルーセルで使われるようなポチ（点）を使って、現在の位置を表示するのも１つの手でしょう。これにより左右に他のコンテンツが存在していることが分かります。
