無限スクロール/ロングスクロール
すごい流行っているらしいですが、本当に必要でしょうか。
必要ではない場合は、別の実装をおすすめします。
google.comやamazon.co.jpを見てみると、2019年11月現在PC版は今のところ、ロングスクロールではないですよね。
ロングスクロールにはメリットもありますが、デメリットもあるのです。そういう考慮もなにもなく、ただ流行っているからといって採用すると、ろくなことになりません。
筆者の開発力は2005年ぐらいで止まっていて、もっぱら現在はただの利用者ですが、こういうことを思っているんだよ、ということは開発者の人も押さえておいてほしいと思っています。
もちろん、[次ページ]のリンクのクリック/タップと再表示待ちをしなくていいという利点は、褒められる点です。
利点を他の欠点で潰してしまっては、元も子もないと思います。
粗悪なロングスクロールは滅びてほしい
はい。ずばり言いたいです。
ロングスクロールは一見、流行りでスタイリッシュで、ナウいのかもしれません。
しかし細かな配慮がない、単純な実装では、ユーザーの使い勝手は、伝統的webサイトの何倍も使いにくいものになってしまいます。
ユーザー体験(エクスペリエンス)が悪いサイトは、ユーザーの定着率に影響してきます。最初は使ってくれていても、離れていくということです。
「戻る」対応
多くのサイトがロングスクロールに対応している一方でまともな戻るに対応したサイトはあまり多くありません。
ロングスクロールでは「見出しと概要」がずっと並び、クリック/タップにより、そのリンクから遷移して、個別の内容を見るように設計されています。
そして重要なことは、その内容を見た後、満足しなくてスクロール画面に戻って来るユーザーがかなりの数居るということです。
スマホ(主にアンドロイド)では、個別ページに遷移して戻ってくると、画面がフラッシュして再読み込みされます。すると多くの何も考えていないロングスクロールサイトでは、スクロールが死んでいるため、一番上からやり直さなければなりません。
80個目から100個目を順番に内容を見たいというような場合、スクロールが死んでいると発狂したくなるほど面倒くさいです。
多くの人は、その時点でサイトをそのスマホ、ブラウザで見るのをあきらめます。
さらに状況を悪くしているのは、項目全体をリンクにするサイトが多いため、スクロールしようとして誤タップによる遷移で戻ってくると、また最初からやり直しという「最悪のユーザー体験」を経験することになります。
一番後ろから見たい
一部のサイトでは検索順でデフォルト順ではなく「逆順」で見たいという要望があります。
旧来のサイトでは、ページ下部などに [前][1][2][3]...[99][次] というふうに一番最後にジャンプできるような、ナビゲーションがあったため、逆順にたどることができました。
しかし、何もオプションもないロングスクロールではこのようなものを、素早く見ることができません。
できれば逆順でも見れるようにすると、いいと思います。
またページ番号がないために、2分探索で、特定の項目を探すという方法が使えないのも、注意するべき点です。
日記などで一番古いのが2000年、新しいのが2019年だとして、2010年を探したい、というときにロングスクロールでは大変面倒です。
サイトナビの固定ヘッダ、または上から出てくるやつ
専門的になんと呼んでいるか存じないのですが、サイト内の移動へのナビゲーションリンクを、スクロールした画面外のページの一番上に置くと、そこまで戻ってきて操作することが困難です。
とくにスマホでは、スクロールバーをつまんで一番上に移動させる方法がないので、スクロールし続ける必要が出てきます。
ずばり固定ヘッダ等がないと「使いにくい」と言われてしまいます。
単純にスクロールが重い
スクロールページが画面100個分など、とても多い量になると、とにかくブラウザそのものが重いということがあります。
上に画面アウトしたデータを空文字列とダミーデータに置き換えるなどして、なんとか軽くする方法などもありますが、それなりに大変です。
しかしデータが重いと「前へ」「次へ」なども重くなってしまい、レスポンスそのものへの影響も大きくなります。
レスポンスが悪いサイトからは基本的に、ユーザーは離れていきます。
重複した項目の削除
Twitterを見ればわかりますが、タイムライン上でスクロールしたとしても、同じ内容のコメントが複数同時に表示されることはありません。
これが通常です。
しかし「新着順」などを何も考えないで実装すると、最初に表示データを返したときよりも、スクロールする時点ではさらに新しい項目が追加されて、項目順がずれることがあります。
そうすると、同じ項目が複数表示される状態になります。
ユーザーはすでに見終わった項目が、また表示されるというのは、ストレスの一つです。
プログラマは、同じ項目が複数表示されないように、プログラムを書いたほうが、ユーザー体験は明らかに良くなります。
スクロール以外の「戻る」
スクロールでの「戻る」に配慮が無いサイトは、たいてい他の場所でも「戻る」への配慮がありません。
2000年ちょっとすぎぐらいの企業サイトでは「戻る」「進む」禁止でその操作をすると「禁止されています」とエラー画面に移動して、最初からやり直しなんて設計のものもありましたが、さすがに2019年にもなって、それはないとしか言いようがありません。
タブ
このスクロール以外の要素として、よく目にするのは「タブ」です。
タブを切り替えて、リンクを移動、戻ってくると、タブが戻っています。
しかもタブは画面の上にスクロールアウトしていて、スクロールからやり直しになる、というのも見かけます。
展開と収納
なんと呼んでいるか分からないのですが「＋」マークや「▼」「▲」などで、出たり引っ込んだりする、展開と収納ができる要素があります。
やはり何も考えないで実装すると、進んで戻ってくると、ページリロードで全部畳んだ状態に逆戻りというサイトがあります。
全画面、遷移もどき
全画面を覆う、実質的に遷移しているように見えるJavaScript操作があるサイトがあります。
たとえば画像の拡大表示、プレビュー画面などです。
そういうときに「移動」だと思って「戻る」をすると画面内の操作で「2画面分戻ってしまう」ように見えるサイトが存在します。
ユーザーはあれ？って思うでしょう。
リンクが疑似リンクになっている
ユーザ体験に関することなので、これも無関係ですが取り上げます。
onclickでのリンク再現
無限スクロールでの「戻る」でのリロードを回避するために、よく使われるものとして「新規タブで開く」というのがあります。
ナウい方法なのかなんなのか分かりませんが、それをJavaScriptで実装しているサイトも目にします。
この場合問題なのはPCでの操作です。
新規タブを開くときに「ミドルクリック」で開くユーザーがかなりの数います。
そういうユーザーはJavaScriptの「onclick/クリック」のアクションで開くリンクを「ミドルクリック」で操作すると定義されていないため、スクロールマーカーが表示されるという、意図しない動作のするwebページになってしまいます。
リンクを疑似要素にしてonclickで再現するなら、ミドルクリックにも対応しましょう。
この記事などが参考になると思います。
参考：https://qiita.com/khsk/items/9913c35e89af9a72767b
伝統的にはこれはa target='_blank'と書くだけでできるので、JavaScriptがなくてもできるはずです。
TABキーでの移動、遷移
もうひとつ、そこまで優先度は高くないとは思いますが、一応取り上げます。
普通のリンクは「TABキー」で移動することができます。これは普通のアプリと一緒で「タブストップ」と言われる要素です。
そして「タブストップ」で「アクティブ」になっている要素は「Enterキー」などで、ページ遷移できます。
マウスが壊れているときとかに、便利です。
しかし単純な疑似リンクではこういうものが使えません。<a href="#">またはjavascript:void(0)という手もありますが、これには賛否があるようです。
リンクが#などになっていると、やはりミドルクリックしたときに「#」のページが新規タブに開くことがあります。
なるべくなら普通のリンクまたはボタン要素として実装したほうが、アクセシビリティの面では有利です。
おわりに
このようなちょっとの改良で、ユーザーにとってサイトの使い心地は、天と地ほどの差になることがあります。
サイト利用者、ユーザー数、とくに継続者数を増やしたいという人は、こういう細かな配慮も、ぜひサイト実装時にするように、よろしくお願いします。
マックユーザーのみなさま、Windows、Androidユーザーのことも、ちょっとだけ気にしてくださいますよう、お願い申し上げます。