ページ内スクロールでURLを変える必要はあるか？

2016/3/12 17:00

同一ページ内をスクロールしているだけなのに、ブラウザのアドレスバーに表示されている URL が変わるサイトを見かけることが増えてきました。調べてみると HTML5 の History API を使えばそういった挙動を実現できるようで、非同期通信を利用しているサイトなどで適切に利用すれば便利な機能です。

ただ、ページ内をスクロールしているだけなのにいつの間にか URL が変わるという挙動は、時に困った事態に遭遇します。

昨日「Webアプリで音楽を楽しく学べる「Chrome Music Lab」 – ITmedia ニュース」という記事内からリンクされている「Chrome Music Lab」というサイトを見つけました。実際に Chrome Music Lab のトップページを下にスクロールしたり上にスクロールしたりすると、セクションに合わせて URL が切り替わっているのが分かると思います。何度も上に行ったり下に行ったりしてみてください。

さて、ひと通りコンテンツを見終わったので元のニュース記事に戻りたいと思いました。別タブで開いてなかったのでブラウザバックで戻ろうと試みたのですが、何度ブラウザバックをしても元のニュース記事に戻ってくれません。スクロール操作で何度も何度も URL が切り替わっていたがために、ブラウザの履歴にどんどん URL が積み重ねられて履歴が増えてしまっていたのです。

これでは不便です。利用者としては URL が変わっていることに気づいていません。なのでブラウザバックですぐに元の記事に戻れると思い込んでいます。利用者は混乱してしまうでしょう。

こういう状態を防ぐには、実装がややこしくなりますが、下にスクロールしているなら履歴を追加 (pushState())し、上にスクロールしている時には履歴を取り除く (history.back()) 必要がありそうです。

ただ、そもそもスクロールでURLを変更する必要があるのか？というところも考えないといけません。URLが変更されるのは、利用者が明示的にクリックをした時だけでもいいのではないでしょうか。

もし利用者がそのサイトを気に入って Twitter や Facebook にシェアしたくなった時、URL の変更に気づいてなかったとしたら、意図せず特定セクションを指し示す URL を誤って共有してしまう可能性もあります。多くの場合、特定セクションを指し示す URL にアクセスすると、ページ内のそのセクションまで自動的にスクロールした状態になる実装がされています。なので、そのリンクをトップページだと思ってクリック人は、なぜ勝手にスクロールしてしまっているのか戸惑ってしまうでしょう。

ページ内スクロールで URL を変えようと思うなら、こういった不便さや間違いがあるということを考慮し、どうすれば迷うことなく利用してもらえるのかという点をよく考えてみる必要があると思います。