ScrollHintの使い方｜スマホで横スクロールに気づかせるUIの実装方法

ScrollHintの使い方｜スマホで横スクロールに気づかせるUIの実装方法 JavaScript
ScrollHintの使い方｜スマホで横スクロールに気づかせるUIの実装方法
スポンサーリンク

Webサイトをコーディングしているときに、テーブルや横長の画像は、スマホのような画面幅が狭いブラウザで閲覧するときに、縮んでしまってみづらくなったりデザインが崩れてしまうことがありますよね。

そんな時は、CSSでoverflow-x: auto;を指定すれば横スクロール自体は可能になりますが、それだけでは「横にスクロールできる」ということがユーザーに伝わらない可能性があり、サイトをキチンと見てもらえず機会損失になってしまいます。

実際の制作案件でも、以下のようなコンテンツをコーディングしたときに、横スクロールに気づきにくいと感じる場面がありました。

  • 製品の性能表
  • 料金表
  • 比較表
  • 申込フローなどの横長画像

そんなときに便利なのがScrollHintというJavaScriptライブラリです。

ScrollHintを使うと、横スクロール可能なコンテンツに「スクロールできます」というヒントを表示することができ、ユーザーにとって親切なサイトになりますね！

この記事では、ScrollHintの基本的な使い方と導入方法、さらに実務で使う際の注意点について解説します。

本記事の執筆者：マサトラ

フリーランス歴4年のWebエンジニア。現在は20社以上のWeb制作会社社様と提携し、WordPress構築やLP制作を中心に月3～5件のペースでサイト制作を手がけています。
このブログでは、実務で得た知識やノウハウ、制作現場での気づきを、フリーランスとして活動中の方はもちろん、これからWeb制作を仕事にしたいと考えている方にも役立つよう発信しています。

スポンサーリンク

ScrollHintとは

ScrollHintは、横スクロール可能なコンテンツに「スクロールできます」というヒントを表示するJavaScriptライブラリです。

ScrollHintのUIを示した画像
スクロール可能なコンテンツにアイコンが表示される

横スクロール可能な要素に対してスクロール方向を示すアイコンを表示し、ユーザーに操作を促すことができます。

スマホで横スクロールが気づかれない問題

スマートフォンで横スクロール可能なコンテンツを表示する場合、ユーザーが「横にスクロールできること」に気づかないことがあります。

例えば、テーブルをスマホのような画面が狭いデバイスで表示すると、テーブルが潰れてしまって見づらくなってしまいます。

そんな場合、CSSで次のように対処することが多いと思います。

overflow-x: auto;

これにより横スクロール自体は可能になりますが、ユーザーから見ると「横にスクロールできる」という情報が画面上に表示されないため、スクロールできることに気づかないケースがあります。

特にスマホはスクロールバー自体の存在感がPCよりも薄いので…

冒頭でも書いたとおり、実際の制作案件では、コーポレートサイトなどでこういった問題に直面することがよくあります。

そんなときは、「横にスクロールできること」を視覚的に伝えるUIがあると、ユーザーが気づきやすくなります。

そこで便利なのがScrollHintです！

ScrollHintを導入すると、横スクロール可能なコンテンツにスクロール方向を示すヒントが表示されるので、クライアントが見てもらいたい表や図などを見てもらえやすくなりますよね。

スポンサーリンク

ScrollHintのデモ

では、ScrollHintを使うと、どのように横スクロール可能なコンテンツにスクロール方向を示すヒントが表示されるのか見ていきましょう。

実際の動作は次のデモをご覧ください。

※CodePenにアクセスして直接デモを見る場合、ブラウザの検証ツールなどで画面を狭めてください。

See the Pen ScrollHintデモ (テーブル) by Sugar (@ms_da_13) on CodePen.

横スクロール可能な要素に対して、スクロールできることを示すインジケーターが表示されているのが分かるかと思います。

ScrollHintの導入方法

ここからはScrollHintの導入方法を紹介します。

基本的な流れは次の通りです。

  1. ScrollHintのCSSとJavaScriptを読み込む
  2. 横スクロールさせたい要素をHTMLでマークアップする
  3. JavaScriptでScrollHintを初期化する

ScrollHintのCSSとJavaScriptを読み込む

まず、ScrollHintのCSSとJavaScriptを読み込むのですが、読み込み方法は3つあります。

方法1：CDNを使用

最も簡単なのがCDNを利用する方法です。

以下のコードをheadタグ内か、bodyタグの終了直前( </body> のすぐ前)に設置してください。

<link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script>

個人的にはこの方法が手軽でよく利用していますが、CDN利用の場合は落とし穴があります。

そちらはこの記事内で後述しているので、確認してみてください。

方法2：「npm」コマンドでインストール

「npm」コマンドを使用してインストールすることも可能です。

以下のコードをVS Codeなどのターミナルに貼り付けて実行します。

npm install scroll-hint --save

その後、JSファイルで以下のコードでimportしましょう。

import ScrollHint from 'scroll-hint'

これで、npmでインストールした外部のファイルを使用できるようになります。

方法3：公式サイトからファイル一式を入手

①、②以外の方法として、公式サイトからCSSとJSファイルをダウンロードするこもできます。

ScrollHint公式サイト
https://appleple.github.io/scroll-hint/

公式サイトにアクセスしたら、以下の画像の赤枠ボタンをクリックして「scroll-hint-master.zip」をダウンロードしましょう。

ScrollHint公式サイトのスクリーンショット
ScrollHint公式サイトのダウンロード箇所
  • scroll-hint.css
    ファイルの場所：scroll-hint-master → css → scroll-hint.css
  • scroll-hint.min.js
    ファイルの場所：scroll-hint-master → js → scroll-hint.min.js

それぞれのファイルは、あなたの開発環境の、通常のCSSファイルやJSファイルと同じ場所に格納してheadタグ内やbodyタグ終了直前で読み込みましょう。

HTMLの記述

横スクロールさせたい要素をラップしてjs-scrollableのクラス名を付与します。

以下の例では、tableをスクロールさせたいので、

  • tableをdivで囲む
  • そのdivにjs-scrollableのクラス名を付与

しています。

<div class="table-wrapper js-scrollable">
  <table>
    <tr>
      <th>項目</th>
      <th>製品A</th>
      <th>製品B</th>
      <th>製品C</th>
    </tr>
    <tr>
      <td>重量</td>
      <td>10kg</td>
      <td>12kg</td>
      <td>15kg</td>
    </tr>
  </table>
</div>

CSSの記述例

.table-wrapper {
  max-width: 100%;
  white-space: nowrap;
}

table {
  border-collapse: collapse;
  width: 700px;
}

th, td {
  border: 1px solid #222;
  padding: 10px 15px;
  width: 200px;
}

th {
  background-color: #ddd;
}

CSSはあくまでも記述例なので、実際に制作するサイトデザインなどによって変わってきますが、大事なポイントが2つあります。

ScrollHintを動かすCSSのポイント
  • tableタグを囲む要素(今回で言うと、クラス名.table-wrapper)に、.js-scrollableのクラス名を付与
  • tableタグには、固定の幅サイズを指定。上記例では、width: 700px; を指定しています。

JavaScriptで初期化

あなたの開発環境にあるscript.jsなどに以下の記述をしてください。

new ScrollHint('.js-scrollable');

これだけで、.js-scrollable を付けた要素にScrollHintが適用されます。

横長画像でScrollHintを使う方法

ここまではテーブルを例として挙げましたが、ScrollHintはテーブルだけでなく、横長画像にも利用することができます。

例えば、サービスの申込フローや手順を説明する図などは、スマートフォンで表示すると横幅が足りず、横スクロールが必要になることがあります。

図で表現されている内容が、どうしてもデザイン上の問題で、スマホ用に作り直すことができない場合は、横長の画像をそのままスマホでも表示させなければなりません。(MVVを表現する図や、複雑な概念図などがそうだと思います)

このような場合でも、ScrollHintを使うことでユーザーに「横にスクロールで画像を全部見られる」ということを分かりやすく伝えることができます。

CodePenで横長画像をスクロールさせるデモを作成したので、確認してみてください。

See the Pen ScrollHintデモ (横長画像) by Sugar (@ms_da_13) on CodePen.

HTML例

スクロールさせたい画像をdivで囲み、.js-scrollableクラスを付与します。

今回は画像のラッパーである.demo__scrollに付与しています。

<div class="demo demo-image">
  <div class="demo__inner">
    <h2 class="demo__title">② 横長画像のデモ</h2>
    <p class="demo__lead">横長のフローチャート風画像を、狭い画面でだけスクロール表示します。</p>

    <div class="demo__scroll js-scrollable">
      <svg class="demo__wide-image" viewBox="0 0 1200 320" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="製品導入フロー">
        <rect width="1200" height="320" fill="#ffffff"/>

        <g>
          <rect x="50" y="110" width="180" height="80" fill="#e8f1ff"/>
          <text x="140" y="158" text-anchor="middle" font-size="24" fill="#222">お問い合わせ</text>

          <rect x="280" y="110" width="180" height="80" fill="#e8f1ff"/>
          <text x="370" y="158" text-anchor="middle" font-size="24" fill="#222">ヒアリング</text>

          <rect x="510" y="110" width="180" height="80" fill="#e8f1ff"/>
          <text x="600" y="158" text-anchor="middle" font-size="24" fill="#222">製品選定</text>

          <rect x="740" y="110" width="180" height="80" fill="#e8f1ff"/>
          <text x="830" y="158" text-anchor="middle" font-size="24" fill="#222">導入準備</text>

          <rect x="970" y="110" width="180" height="80" fill="#e8f1ff"/>
          <text x="1060" y="158" text-anchor="middle" font-size="24" fill="#222">導入</text>

          <line x1="230" y1="150" x2="280" y2="150" stroke="#333" stroke-width="4"/>
          <line x1="460" y1="150" x2="510" y2="150" stroke="#333" stroke-width="4"/>
          <line x1="690" y1="150" x2="740" y2="150" stroke="#333" stroke-width="4"/>
          <line x1="920" y1="150" x2="970" y2="150" stroke="#333" stroke-width="4"/>
        </g>
      </svg>
    </div>
  </div>
</div>

CSS例

画像の幅を1200pxとした場合、ブラウザ幅が1200pxよりも狭くなるとスクロールできるようになります。

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 40px 20px;
  font-family: sans-serif;
  line-height: 1.7;
  color: #222;
  background: #f5f5f5;
}

.demo {
  padding: 40px 0;
}

.demo__inner {
  width: min(100%, 960px);
  margin: 0 auto;
}

.demo__title {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.4;
}

.demo__lead {
  margin: 0 0 20px;
  color: #666;
}

.demo__scroll {
  overflow-x: auto;
  background: #fff;
  border: 1px solid #ddd;
}

.demo__wide-image {
  display: block;
  width: 1200px;
  max-width: none;
  height: auto;
  background: #fff;
}

@media (min-width: 768px) {
  .demo__wide-image {
    width: 100%;
    max-width: 100%;
  }
}

JavaScript

こちらは今までと同じです。

なお、「スクロールできます」というテキストは自由にカスタム可能です。

new ScrollHint('.js-scrollable', {
  i18n: {
    scrollable: 'スクロールできます'
  }
});

これだけで、横長画像にもScrollHintを適用することができます。

申込フローや比較図など、横に長いコンテンツを掲載する場合にはテーブルと同様にScrollHintを活用することができますね。

CDN利用時の注意点 (実務での体験談)

ScrollHintはCDNを使って簡単に読み込むことができますが、実務ではCDN利用に注意が必要なケースもあります。

というのも、実際の制作案件で、CDN経由で読み込んでいたライブラリが正常に読み込めないトラブルを経験したことがありました。

具体的には、あるとき、開発中のサイトでSwiperが突然崩れて表示されることがありました。
Xなどで同じような現象が起きてないか調べてみると、ライブラリが置いてあるサーバー(unpkg)のCDNが一時的に正常に応答していない状況で、SNSではエンジニア達が大混乱…

その影響で、CDN経由で読み込んでいたSwiperのJavaScriptやCSSが取得できず、ページのレイアウトや動作に影響が出ていたというワケです。

このトラブルに気づいたあと、既に公開済みの他サイトも全て確認し、CDNで読み込んでいたライブラリはプロジェクトのディレクトリ内に直接配置して読み込む方法に変更しました。

このように、CDNは手軽に利用できる反面、外部サービスに依存するというリスクもあります。

ScrollHintに限らず、次のような対応を検討しておくと安心です。

  • ライブラリをプロジェクト内に配置して読み込む
  • 重要なサイトではCDN依存を避ける
  • CDN障害時の影響を考慮して実装する

特にコーポレートサイトやサービスサイトなど、安定性や信頼が重要なサイトではディレクトリ内に配置して読み込むということも検討しておくといいと思います。

なお、ScrollHintを公式サイトからダウンロードしてローカル配置する場合は、こちらのセクションを参考にしてください。

ScrollHintが動かないときのチェックポイント

ScrollHintを導入しても、ヒントが表示されない場合があります。
そのような場合は、次のポイントを確認してみてください。

JavaScriptが正しく読み込まれているか

まずはScrollHintのJavaScriptが正しく読み込まれているか確認します。

CDNを使用している場合は、ネットワークエラーなどでライブラリが取得できていない可能性もあります。

ブラウザの開発者ツール（Console）を確認し、エラーが出ていないかチェックしてみてください。

ScrollHintの初期化が実行されているか

ScrollHintはJavaScriptで初期化する必要があります。

new ScrollHint('.js-scrollable');

このコードが実行されていない場合、ScrollHintは動作しません。

横スクロール可能な状態になっているか

ScrollHintは、横スクロール可能な要素に対してヒントを表示する仕組みになっています。

そのため、対象の要素に幅を指定しておき、その幅よりもブラウザ幅が狭くならないとScrollHintは表示されません。

tableやimgなどにwidthの固定値が指定されているか確認してみましょう。

ScrollHintを使うときにユーザーフレンドリーなレイアウト

ScrollHintを実装することでアイコンが表示されてスクロールできることが分かりやすくなりますが、さらにユーザーにとって分かりやすくする方法があります。

実務でも使えるので紹介しますね。

スクロールできる要素の右端に影を付ける

ScrollHintには様々なオプションがあり、JavaScriptに追記することでそのオプションを有効化できます。

その中でオススメなのが suggestiveShadow です。

これは、以下の画像のように、スクロールできる要素の右端に影を付けて、右側にスクロールできる部分が隠れていることを示してくれます。

suggestiveShadowのオプションでスクロールできる要素の右側に影が付く
suggestiveShadowオプションを有効化した状態

このオプションを有効化するのは簡単です。

new ScrollHint(".js-scrollable-shadow", {
  suggestiveShadow: true,
  i18n: {
    scrollable: "スクロールできます"
  }
});

上記のように、suggestiveShadow: true, を記述するだけ！

あえてインナー幅をはみ出てスクロールできる要素を示す

基本的にサイトコーディングではインナー幅を設けて、サイト全体のレイアウトを整えることが多いと思います。

ただ、セクションによってはインナー幅をはみ出させる必要がある場合がありますよね。

それと同様に、スマホではテーブルなどを横スクロールさせたい場合に、テーブル右側をあえてインナーからはみ出させることで、右側にスクロールできる要素が続いていることを視覚的に示すことができます。

デモを見るのが分かりやすいかと思うので、CodePenを見てみましょう。
直接CodePenにアクセスして、ブラウザ幅を縮めてみるのが一番分かりやすいかと思います。

See the Pen ScrollHintデモ (右だけインナーを超える) by Sugar (@ms_da_13) on CodePen.

上記CodePenでは、薄いブルーの背景色がインナー幅なのですが、テーブル右側がインナー幅をはみ出ているのが分かるかと思います。

インナーをはみ出てスクロールできる要素を示す
インナーをはみ出てスクロールできる要素を示す

こうなっていると、まだ右側にスクロールできる要素が隠れていると伝わりますよね。

この実装方法も簡単で、スクロールさせたいコンテンツの親要素に対して以下のようにするだけです。

margin-right: calc(50% - 50vw);
padding-right: calc(50vw - 50%);
  • こちらの方法だと、ブラウザの縦スクロールバーの幅も考慮してしまい、ブラウザ自体に横スクロールバーが出てしまうので、適当な親要素にoverflow: hidden; を指定してください。指定する場所を間違えると、せっかくはみ出させたテーブルがはみ出なくなるので注意です…
  • padding-right: calc(50vw - 50%); は、スクロールして右端に達した際に、余白を設けるためのものです。お好みでどうぞ。

ScrollHintの公式サイト

ScrollHintの詳細や最新の情報については、公式サイトを確認してください。

ScrollHint公式サイト
https://appleple.github.io/scroll-hint/

ScrollHintに設定できるオプション一覧も掲載されていますよ。

まとめ

サイトコーディングにおいて、スマホで以下のような横長のコンテンツを表示する際に、横スクロールできるようにしつつ、スクロールできることをユーザーに示す必要があります。

  • 製品の性能表
  • 料金表
  • 比較表
  • 申込フローなどの横長画像

ScrollHintを導入することで、それを簡単に解決できるので、ユーザーフレンドリーになりますね。

また、実務で使用する際には次のような点にも注意が必要です。

  • CDN利用時の障害リスク
  • オプションで影を付けたり、インナー幅をはみ出して、スクロールできることを分かりやすくする

ディレクターさんやデザイナーさんから指示が無くても、こういった対応を自発的にできるコーダーは評価されるので、横スクロールコンテンツを実装する際には、ぜひこの記事を参考にしてみてください。

スポンサーリンク

コメント