もっと見るボタン
Load more button
別名: もっと見るボタン、ロードモア、Load more、Show more button、Load more button
生態(さわってみる)
一言定義
一覧の末尾に置いたボタンをクリックするたびに、次の一定件数を追加で読み込んで表示するUI。
分類
使う場面
- 無限スクロールほど読み込みを自動化したくないが、ページ送りより手軽に次を見せたいとき
- フッターへの到達可能性を保ちつつ、追加コンテンツも読み込ませたいとき
避ける場面
- 特定ページへの再訪やURL共有を成立させたいとき(→ページネーション)
- ユーザー操作を挟まず継続的に読み込ませたい探索型の一覧のとき(→無限スクロール)
近縁種との比較
「もっと見るボタン」は、研究ノートの同義語表が指摘するとおり無限スクロールとページネーションの中間に位置するハイブリッド型の挙動である。無限スクロールが自動で追加読込するのに対し、もっと見るボタンは読込のタイミングをユーザーの明示的な操作に委ね、フッターへの到達可能性やスクロール位置の制御をユーザー側に残す。一方でページネーションのように一覧をページという単位で区切りはせず、既に表示済みの項目は末尾に積み上げ続ける点が異なる。この3種は互いに近縁種として扱われ、目的地に正確にたどり着かせたいEC検索結果などにはページネーションが、回遊性を優先したいフィードには無限スクロールが、その中間の手軽さを求める一覧にはもっと見るボタンが向く。
実例リンク
アクセシビリティ
- role
- ボタンはbutton要素。読み込み中はaria-busy="true"を付け、完了後に解除する
- キーボード操作
- ボタンをTabで到達しEnter/Spaceで実行。追加された項目群の先頭付近へフォーカスを移すか、aria-live領域で件数を通知する
- 補足
- 全件読み込み後はボタンを非表示にし、「ここまで表示しました」のようなテキストに置き換える。残り件数をボタン文言に添えると、あとどれだけ残っているかが伝わりやすい