スクロールできることを効果的に示す6つのデザイン(Web・アプリ)

Webサイトやアプリなどでスクロールによりコンテンツがさらに表示されるようなデザインにする場合、スクロールが可能であることをしっかりと表現するべきです。今回は、スクロールできることを示す6つの表現を紹介します。それぞれの特徴を押さえたうえで最適なデザインを選びましょう。

1. 部分的に隠す

コンテンツを部分的に隠すMaterial design Guideline

最も一般的な表現かと思います。画像や文字などのコンテンツを一部分だけ隠すことで、その方向にスクロールができることを伝えることができます。ただし、レスポンシブデザインなど、ページや閲覧端末のサイズによってコンテンツの大きさが異なる場合には、ちょうど一部分だけ隠れるようにするのが難しかったりしますね。

2. スクロールバーを常に表示

google developerGoogle Developers

こちらはGoogleのデベロッパー向けブログのデザインです。レスポンシブ対応でボックス内の一部が隠れると、スクロールバーが表示されるようになります。このようなオリジナルのスクロールバーを作るときには、「CSSを使ってスクロールバーを表示させる方法」や「スクロールバーを常に表示させる」が参考になりそうです。

3. 矢印で表現

矢印でスクロールできることを表現88and90lex

下向きの矢印や「」を配置するのも1つの手です。縦長のシングルページでよく見かける表現ですね。

スクロールできることを明確に示すApple.com

こちらはAppleの公式サイトです。右向きの矢印を表示することで、右側に他のコンテンツが隠れていることを表しています。

4. グラデーションのカバーをかける

グラデーションのカバー CSS masks

文字や画像をフェードで隠すのも、スクロール可能であることを表すのに有効でしょう。具体的には「透明→白」のグラデーションをかければ、続きがあるように見せることができます。

Webデザインの場合、「CSSでテキストなどにグラデーションをかける」が参考になるかと思います。

5. スクロール可能であることをテキストやアイコンで伝える

いっそのこと「スクロールしてください」というようにテキストや画像で表示してしまっても良いかと思います。

dena ランニングクラブDeNA Running Club

こちらのサイトの場合、オシャレなアニメーション付きのマウスのアイコンでスクロール可能なことが表現されています。

また、レスポンシブデザインで「◯◯px以下になるとスクロールが可能になる」ということが決まっている場合には、テキストもレスポンシブで表示↔非表示を切り替えれば良いですね(display:noneにしておき、画面が一定の幅以下なら表示するようにする、など)。

6. 現在の位置を表す点を表示

iphoneのホーム画面Apple.com

カルーセルで使われるようなポチ(点)を使って、現在の位置を表示するのも1つの手でしょう。これにより左右に他のコンテンツが存在していることが分かります。

サルワカ