pagination VS スクロール

UI

結論

 状態:-  閲覧数:2,256  投稿日:2017-08-18  更新日:2019-10-25
役割が異なる
・目的に応じて使い分ける

pagination


特定コンテンツを探す際、有用
・探した後も、後から再度訪れやすい
・何ページ目の上から何番目

スクロール


何となく見続ける際、有用
・ユーザーを作業に没頭させ、閲覧継続させやすい

膨大な情報を閲覧するために効率的な方法
・ユーザーをWebページにより長く滞在させることが出来る
・「発見」のためのインターフェース

メリット / デメリット

 閲覧数:647 投稿日:2017-08-18 更新日:2017-08-18

一覧表


一覧
- ページング スクロール 無限スクロール
読込速度 速 遅 速
閲覧情報量 少 多 多
滞在時間 短 長 長
フッター訪れやすい? ◯ ✕ ✕
再度訪れやすい? ◯ ✕ ✕
SEO ✕ ◯ ✕


・無限スクロール vs ページネーション:それぞれの特徴と使い分け



UIコードダウンロードLink

UIテキスト仕様調査「新規登録」 / 2018/2/16



週間人気ページランキング / 10-16 → 10-22
順位 ページタイトル抜粋 アクセス数
1 Design 0 10
2 「東京都」のカラーコード取得は難しい | カラーコード(色) 4
3 「Twitter Bootstrap」導入したらおかしくなった時、試した方がよいかもしれないこと | 2系(Bootstrap) 3
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2
4 「Google Chrome」履歴一覧から、複数履歴を選択して一度に開くことはできません。バージョン: 94.0.4606.81(Official Build) (64 ビット) | Google Chrome(ブラウザ) 2
4 「transform:translate3d();」でスマホ実機画面が一瞬だけチラつく → 「backface-visibility:hidden;」指定すると解消される | CSSトラブル対応(CSS) 2
4 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 2
4 デザイン変更 | Webデザイン(デザイン) 2
4 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 2
4 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 2
4 CMY 2
4 背景 | 他サイト調査(HTML) 2
4 Chromeブックマークの不満な点 | Chromeブックマーク(ブラウザ) 2
4 TwitterのURL | SEO 2
4 aタグで複数のブロック要素を囲むやり方 | CSS 2
5 京阪電気鉄道株式会社 / 京都市交通局 1
5 XnConvertとは?/ インストール / 変換実行してみる 1
5 カテゴリ一覧 1
5 ユーザコメント一覧ページ 1
5 ゲストコメント一覧ページ 1
2026/10/23 5:05 更新