もっと見るボタン

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領域で件数を通知する
補足
全件読み込み後はボタンを非表示にし、「ここまで表示しました」のようなテキストに置き換える。残り件数をボタン文言に添えると、あとどれだけ残っているかが伝わりやすい