記事内に商品プロモーションが含まれる場合があります
掲載画像は2017年の記事作成当時のデザイン例です。リンク先の現在の画面とは異なる場合があります。
Webサイトやアプリなどでスクロールによりコンテンツがさらに表示されるようなデザインにする場合、スクロールが可能であることをしっかりと表現するべきです。今回は、スクロールできることを示す6つの表現を紹介します。それぞれの特徴を押さえたうえで最適なデザインを選びましょう。
1. 部分的に隠す
最も一般的な表現かと思います。画像や文字などのコンテンツを一部分だけ隠すことで、その方向にスクロールができることを伝えることができます。ただし、レスポンシブデザインなど、ページや閲覧端末のサイズによってコンテンツの大きさが異なる場合には、ちょうど一部分だけ隠れるようにするのが難しかったりしますね。
2. スクロールバーで示す
Google Developers（旧ページ）
こちらは当時のGoogle Developersのデザイン例です。ボックス内に収まらない内容があることを、スクロールバーで示しています。以前の実装例として、「CSSを使ってスクロールバーを表示させる方法」や「スクロールバーを常に表示させる」が参考になります。ただし、overflow: scrollを指定しても、OSやブラウザの設定によっては操作中だけバーが表示されます。scrollbar-gutter: stableもバーを常時表示する指定ではありません。常に伝えたい場合は、ほかの手がかりも組み合わせましょう。
3. 矢印で表現
下向きの矢印や山形の記号（∨）を配置するのも１つの手です。縦長のシングルページでよく見かける表現ですね。
こちらは当時のApple公式サイトの例です。右向きの矢印を表示することで、右側に他のコンテンツが隠れていることを表しています。
4. グラデーションのカバーをかける
文字や画像をフェードで隠すのも、スクロール可能であることを表すのに有効でしょう。白い背景なら「透明→白」のカバーを重ねると、続きがあるように見せられます。背景が白以外なら、その背景に合った色を使います。標準のmask-imageで不透明から透明へ変化させる方法もあり、白いカバーを重ねる方法とは仕組みが異なります。
Webデザインの場合、「CSSでテキストなどにグラデーションをかける」は過去の実装例です。出典のCSS masksも古い資料なので、現在の実装では標準のmask-image等の仕様を確認してください。
5. スクロール可能であることをテキストやアイコンで伝える
いっそのこと「スクロールしてください」というようにテキストや画像で表示してしまっても良いかと思います。
DeNA Running Club（当時のサイト）
当時のサイトでは、アニメーション付きのマウスのアイコンでスクロールできることを示していました。マウスを使わない端末でも伝わるように、テキストなども組み合わせるとよいでしょう。
また、レスポンシブデザインで「◯◯px以下になるとスクロールが可能になる」ということが決まっている場合には、テキストもレスポンシブで表示↔非表示を切り替えれば良いですね（display:noneにしておき、画面が一定の幅以下なら表示するようにする、など）。
6. 現在の位置を表す点を表示
カルーセルなど、内容がページやスライドに分かれている場合は、点で現在の位置と前後のページの存在を示せます。点を押して移動できるようにする場合は、キーボードでも操作できるボタン等を使い、移動先や現在位置が分かる名前を付けます。