ページ ネーション デザイン。 Laravel のページャー(ページネーション)の表示とカスタマイズ|プログラムメモ

ページネーション ≪ コンポーネント ≪ Bootstrap3日本語リファレンス

ページ ネーション デザイン

を、記述。 これが基本の使い方ですが、このままですとPageNaviを使用するテーマファイルによってはエラーが出て、うまく動いてくれません。 こちらをベースに、各テーマファイルの記述方法と注意点を説明します。 固定ページ page. php にPageNaviを実装する場合 【完成イメージ】• お知らせ一覧を想定してテーマファイル(page. php)を作成し、そこにページネーションを実装する• 1ページあたり10記事を表示• 記事の下にページネーションを設置させたい こちらの完成イメージに沿って手順を説明していきます。 まずはページネーションを実装していない記述から。 ~の部分が投稿された記事の内容です。 ループで記事を表示させるよう指定しています。 「今このページが何ページ目を表示しているか?」という情報を取得させる 取得しない場合、2ページ目以降が認識されずページ送りがうまくいかない• 先ほどインストールした管理画面のPageNavi設定で「表示するページ数」という項目がありますが、この数字を10より大きい数に指定しないようにしましょう。 これは、phpで10記事取得しなさいと命令している状態で、ページ上に15記事表示させなさいというちぐはぐな命令になってしまうからなんですね。 この数字の指定を間違ってしまうと、ページネーションはうまく機能しません。 実装途中でつまづきやすいミスでもありますので、覚えておくと良いと思います。 【手順2】テーマファイル内に「PageNavi」を取得・表示 今回の本題です。 ページネーションを表示させたい場所に表示させていきましょう。 php にPageNaviを実装する場合 テーマファイルへの記述方法については、固定ページと同様の記述方法で実装できますが、アーカイブに実装する場合は以下の注意点を念頭に入れておきましょう。 一致していない場合、2ページ目以降が404エラーとなり表示されないという現象が起きます。 固定ページ同様、アーカイブで2ページ以降がうまく出ない!というエラーは結構陥りやすいミスなようで、こうした現象が起きた場合は管理画面の設定とテーマファイルの記述を見直してみましょう。 投稿テンプレート single. php)にPageNaviを実装する場合• お知らせ詳細を想定してページ(single. single. phpに表記する場合は以下のコードを記述してみましょう。 CSSでデザインをカスタマイズする方法 ページネーションのデザインもカスタマイズしたい!という方は、CSSに記述することで自分なりのデザインにすることができます。 管理画面PageNaviの設定内に、「pagenavi-css. css を使用」という項目が存在します。 これを「はい」にした場合、PageNaviが用意しているデフォルトのcssで出力されます。 自分でcssを編集したい場合は、呼び出されたソースコード内のclassを使ってスタイルを指定してあげましょう。 まとめ 「WP-PageNavi」はWordPressでのホームページ制作時に役立つプラグインのひとつです。 ページネーションを簡単に実装したい際にはぜひ活用してみてください。

次の

コピペでOK!Wordpressでページネーションを実装する【Wordpressカスタマイズ】

ページ ネーション デザイン

お願いします! ページネーション(ページ送り)とは ページネーションとは、1ページに表示しきれない内容を複数ページにわたって掲載する場合に、ページ番号のリンクを並べたものです。 検索サイトや、ブログサイトなどでよく見かけますね。 コーポレートサイトなどでも、お知らせの一覧ページに設置されていることがあります。 前のページ、次のページのリンクだけの場合に比べて、ページ数がどのくらいあるのか、今何ページ目を見ているのかが把握しやすく、好きなページに移動できるメリットがあります。 Googleの検索結果一覧に表示されているページネーション Yahooの検索結果一覧に表示されているページネーション TechAcademy Magazineのページネーション ページネーション(ページ送り)をデザインする方法 ページネーション ページ送り では、基本的にはページ番号のリンクを並べれば良いですが• ページ番号をいくつ並べるか 省略するか• 次のページへのリンク• 前のページへのリンク• 一番最初のページへのリンク• 一番最後のページへのリンク などを表示するかどうかについては、サイトの規模や、ページネーションが使用されているページの内容、サイト全体の体裁に合わせて検討しましょう。 また、ページネーションが必要になるようなサイトはWordPressをはじめとするCMS コンテンツマネジメントシステム などを使用し、既定の関数など使ってページネーションを配置することになるでしょう。 それぞれのCMSなどでは、決まったフォーマットのHTMLで出力されるので、どのようなHTMLで構成されているかを分析して、CSSでデザインしていけば良いでしょう。 今回はTechAcacdemy MagazineのページネーションのHTMLを検証してみましょう。 ページのリンクや現在のページに割り振られたクラス名や要素を分析して、ユーザーが操作しやすいようにCSSでデザインしていきましょう。 デザイン例 ページネーション ページ送り は、サイト全体のデザインや構成に合わせてさまざまなデザインがあります。 先述したように、現在のページがわかりやすくて、リンクをクリックしやすければ決まりはありませんので、いろんなサイトを参考に、自由にデザインしてみましょう。 Responsive web design jpのページネーション Web Design Clipのページネーション WordPressテーマ Totomoのページネーション 実際に書いてみよう 先ほど検証した、TechAcademy MagazineのページネーションのHTMLを分析してカスタマイズしてみましょう。 マウスオンのときに変化をつけてみました。 TechAcademyではWebデザインコース・WordPressコースを担当しています。 ラジオとバナナが好き。 Webページごとに異なるCSSを適用する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。 なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。 田島悠介 今回は、CSSに関する内容だね! 大石ゆかり どういう内容でしょうか? 田島悠介 Webページごとに異なるCSSを適用する方法について詳しく説明していくね! 大石ゆかり お願いします! Webページごとに異なるCSSを適用する方法 html毎に、ページを特定するための固有の識別子を定義しておくと個別のデザインをCSSにて定義しやすくなります。 例えば、headerタグのデザインをページ毎に変更する場合は、基になるデザインの共有のクラスと、個別変更用のクラスの複数を定義します。 以下、topapage. html、about. html、contact. htmlの3ページがあった場合を想定してからサンプルコードを提示します。 toppage. html 例文 about. html 例文 contact. この関数をbodyタグの内部に記述することが一般的になっています。 処理結果(固定ページ) 固定ページの番号が英数字列にて定められます。 処理結果(カスタム投稿タイプ「report」の個別投稿ページ) 個別投稿ページの番号が英数字列にて定められます。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。 大石ゆかり 内容分かりやすくて良かったです! 田島悠介 ゆかりちゃんも分からないことがあったら質問してね! 大石ゆかり 分かりました。 ありがとうございます! TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。 名称自体は、ページャーやページ送りと言われますが、今回はそのページ送りの設置方法を紹介していきます。 WordPressのプラグインを使った例と使わない例の両方を見ていきましょう。 なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。 大石ゆかり 田島メンター!!よくサイトを見ていると「次の記事へ」って表示されていて次の記事に飛ぶことができるリンクが有ると思うんですけど、あれってWordPressでできるんですか? 田島悠介 ページャのことだね。 ページャを入れる方法はいくつかあるよ。 ページ送りを導入することで、 12345・・・10・・・20 このような表示に変えることができるのです。 この数字をクリックすれば、過去の記事であったとしても、すぐに飛ぶことができます。 それでは実際に、導入してみましょう。 WordPressでページ送りをプラグインで導入 今回は「WP-PageNavi」というプラグインを使って設置していきます。 このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。 インストールがわからない場合はWordPressのプラグインをインストールする方法をご覧ください。 有効化したらWP-PageNaviの設定画面に移りましょう。 ここで、表示数を変えられます。 すると簡単に、ページ送りを設置できてしまうのです。 まず下のテンプレートを、コピーしてください。 phpやhome. phpなどのページャーを表示したい場所にテンプレートを追加していきます。 その際、画像の右側の欄からindex. phpやhome. phpを選択して、テンプレートを入力しましょう。 この際、サイトにもよるのですが、ページ送りの表示の数を変えたい場合がありますよね。 そして最後に、style. cssに設定して完了となります。 CSSは、使用されているサイトによって変化させるものですので、サイトに合うように変更してください。 page-numbers,. pager. 02 ; border:solid 1px rgba 0,0,0,0. pager. 見た目のデザインを変えたい場合はCSSを編集する必要などありますが、手軽に導入できるのでぜひ活用してみてください。 プラグインを使うと手軽にできるし、なしでやると自分なりのページャが作れるから、どちらも場合によって使い分けると良いね。 大石ゆかり はい!!! [お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。 期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。 WordPress HTMLで404 errorが起こる原因と対処法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。 田島悠介 今回は、HTMLに関する内容だね! 大石ゆかり どういう内容でしょうか? 田島悠介 404 errorが起こる原因と対処法について詳しく説明していくね! 大石ゆかり お願いします! HTMLで404 errorが起こる原因と対処法 HTMLで404 errorが起こる原因と対処法を紹介します。 404 errorとは何? サイトの表示でいう「404 error」、「404 error Page Not found」とは、そのようなページはありません、という意味です。 別名では、404 Not Foundとも呼ばれます。 メッセージとして、「お探しのページが見つかりません。 」と表示されることもありますし、契約しているサーバーでのデザインで「404 error」と無機質に表示されます。 これは、サイトとして問題があるので表示されないほうがよいものです。 ユーザーが入力したが、スペルミスされてしまった場合 リンクを貼っているが、ファイルパスが間違っている場合 リンクを貼っているが、実際サーバー上に該当HTMLが存在しない場合(サーバー上にアップしていない) リンクを貼っているが、実際サーバー上に該当HTMLが存在しない場合(サーバー上にあったけれど削除した) リダイレクト処理でリンク先が間違っている 実生活に例えると… 住所を間違ってメモして家に訪問した お知らせする住所を間違えて表示している 住所は存在しているのだけれど、まだ立てていない家 住所は存在しているのだけれど、立てた家を取り壊してしまった 住所は存在しているのだけれど、転居届を出していない+家を取り壊してしまった このようなイメージです。 いずれも正しい家にはたどり着けないですね。 一つ一つ対処法・解決策を考えてみましょう 1)ユーザーが入力したが、スペルミスされてしまった場合 これは、ユーザー側が入力したものであるならば、間違いを正してもらわないとたどり着きません。 ユーザーや社内のメンバーなど、第三者から、「ページが見つからないと出ていますよ〜」と言われたときは、 相手を疑う前に、サイト内のURLリンクが正しいかどうかを確認しましょう。 そうでないと、相手との信頼関係に関わります。 もし、該当箇所のURLリンクが正しいのであれば、メールでURLリンクを示してあげる、どのようにアクセスしたのかヒアリングする。 と良いでしょう。 2)HTML内にリンクを貼っているが、ファイルパスが間違っている場合 サイト制作側に原因があります。 HTML内に貼られているリンクに間違いがある場合、たどり着けないので、「404 error Page Not found」という表示になります。 早急にリンクを貼っているソースコードのURLを確認しましょう。 3、4)リンクを貼っているが、実際サーバー上に該当HTMLが存在しない場合(サーバー上にアップしていない、サーバー上にあったけれど削除した) いずれもサイト制作側に原因があります。 HTML内に貼られているリンクはあるが、サーバー上にアップしていない場合、たどり着けないので、「404 error Page Not found」という表示になります。 早急にリンクを貼っているソースコードのURLを確認、ファイルをサーバー上に公開するか、HTML内のリンクを削除しましょう。 5)リダイレクト処理でリンク先が間違っている サイト制作側に原因があります。 ドメイン移管や、サーバー変更、ディレクトリ名変更などを行った場合、301リダイレクトとさせます。 前URLから適切にリダイレクト処理できていない場合なら、たどり着けないので、「404 error Page Not found」という表示になります。 該当ソースコード上のURLを確認し、最適なものとしましょう。 独自の404 errorページを作っておこう 登録サーバーデフォルトの404ページが表示されると、ユーザーが違和感を持ち、サイトの体裁的にあまりよろしくないので、独自の404エラーページを作成しておくと良いでしょう。 404 errorページをオリジナルでコーディングするには. htaccessを使用する. htaccessを使用し、404エラーの場合は、特定のページが表示されるように記述しておきましょう。 この場合は、ルートパスでの呼び出しとしましょう。 html 外部的要因、内部的要因があるので、どの原因なのかを確認して、早急に対応できそうなのであれば早めに解決しておきましょう! 監修してくれたメンター ゆかちん先生 フリーランスのクリエイティブディレクター。 制作会社、インハウス、スタートアップ企業などで、グラフィックデザイン・ウェブデザイン・アプリデザイン、ウェブディレクションなどに携わってきました。 TechAcademyではWeb Designコース・ウェブディレクションコース・WordPressコースを担当しています。 大石ゆかり 内容分かりやすくて良かったです! 田島悠介 ゆかりちゃんも分からないことがあったら質問してね! 大石ゆかり 分かりました。 ありがとうございます! TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。 HTML HTMLでmetaタグを使って自動的に他のページにジャンプする方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。 田島悠介 今回は、HTMLに関する内容だね! 大石ゆかり どういう内容でしょうか? 田島悠介 metaタグを使って自動的に他のページにジャンプする方法について詳しく説明していくね! 大石ゆかり お願いします! 活用場面 ネットでとあるページを開いてみると「このページは30秒後に自動的に別のURLにリンクします。 」なんて表示が出てきて、別のURLに飛ばされた、なんて経験をしている方は結構多いと思います。 このような別のサイトに自動的に飛ばされることを「リダイレクト処理」といい、HTMLによるリダイレクト処理を使う場面としてはサイトのドメインやページのアドレスなど、URLを変更したときや、サイトをhttps化したときなどに使用します。 古いサイトやページのURLに訪れた人に対して「アドレスが変わりました」ということを教える役割があります 自動的に他のページにジャンプする方法 使い方としては、HTMLに専用のタグ「meta refresh」を埋め込むためhtmlによるリダイレクトと呼ばれることがあります。 使いかたはいたってシンプルです。 ページによっては、「本サイトは移転しました。 5秒後にジャンプします」といった表示が出た後、自動的に転送されるのを見たことがあるかもしれません。 そうすると、記述は下記のようになります。 SEOの効果を期待するならば、転送までの時間は0秒を指定しておくことをお勧めします。 「meta refresh」タグでのリダイレクトは、SEO効果を最大限に発揮できないという可能性はあるものの、移転先のURLをインデックスさせ、評価をある程度引き継ぐことが可能です。 ただし、Googleは「meta refresh」によるリダイレクトをサポートこそしているけれど決して推奨しているわけではないので、. 確かにGoogleの推奨ではありませんが、簡単でお手軽というのが最大の利点であると思います。 また、「meta refresh」タグを設置した場合はリダイレクト処理が正常に行われているかどうかチェックできるツールもありますので、そちらも利用してきちんと正常なリダイレクト処理が行われるチェックすることも併せてお勧めしておきます。 趣味はスキューバーダイビング・年間3度は海のある国内外へ旅行してます。 大石ゆかり 内容分かりやすくて良かったです! 田島悠介 ゆかりちゃんも分からないことがあったら質問してね! 大石ゆかり 分かりました。 ありがとうございます! TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。 HTML HTMLで一定時間後に別のページにジャンプする方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。 田島悠介 今回は、HTMLに関する内容だね! 大石ゆかり どういう内容でしょうか? 田島悠介 一定時間後に別のページにジャンプする方法について詳しく説明していくね! 大石ゆかり お願いします! リダイレクト処理について リダイレクトとは、アクセスしたページから自動的に任意のページに転送させる処理のことです。 例えばあるページが不要になったため削除したが、検索エンジンでは検索画面にページが残っているというケースが度々あります。 しかしそれは検索画面からでは判断できないので、ユーザーはURLをクリックしてしまいます。 そこでページが404エラーと表示されるとユーザーはすぐページを離脱してしまいます。 そうならないように、削除したページに入ってきたユーザーを他のページに数秒で自動に移動できるように、リダイレクト処理をする必要があるのです。 活用場面 活用場面として一番多いのが、サイトを引っ越ししたときにリダイレクトさせる事かと思います。 また、印刷物に記載したURLに変更があった場合にもリダイレクトは有効です。 リダイレクトさせる事で、ユーザーをスムーズに誘導させることができます。 下記が例として、3秒後にYahoo! Japanにリダイレクトさせる記述です。 こちらをmetaに記述します。 監修してくれたメンター 舟橋幸太郎 フリーのWebデザイナー、グロースハッカーです。 KaizenPlatform社主催のGrowth Hacker Awardsで受賞歴があります。 TechAcademyではWebデザインコースを担当しています。 大石ゆかり 内容分かりやすくて良かったです! 田島悠介 ゆかりちゃんも分からないことがあったら質問してね! 大石ゆかり 分かりました。 ありがとうございます! TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。 HTML RubyでMechanizeを利用してWebスクレイピングする方法について解説します。 Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事をまずご覧ください。 なお本記事は、TechAcademyのWebアプリケーションオンラインブートキャンプの内容をもとに紹介しています。 田島悠介 今回は、Rubyに関する内容だね! 大石ゆかり どういう内容でしょうか? 田島悠介 Mechanizeを利用してWebスクレイピングする方法について詳しく説明していくね! 大石ゆかり お願いします! Mechanizeとは MechanaizeとはスクレイピングするためのRubyのライブラリーです。 他にnokogiriというスクレイピングするライブラリーもあります。 ここにいうスクレイピングとはweb情報を取得したり、加工したりして使用することです。 今回はこのMechanaizeというライブラリーを使用してスクレイピングする方法を紹介していきます。 Mechanizeのインストール まず、Mechanizeのライブラリーを使うために、gem install mechanize でインストールをしましょう。 ファイルに以下のように書いてみてください。 このファイルを実行してみます。 linksはページ全体のリンクのリストが全部取得できます。 [ , , , , , ,.................................. 以上のようにページ全体のリンクの情報が取得できていますね。 今回はページ内のリンク情報を取得する方法で紹介しましたが、他にもいろいろな情報を取得することもできますので、調べてみると良いでしょう。 筆者プロフィール 町田 耕 学生時代は会計学専攻。 塾講師勤務を経て、企業のCFOとして会社経営に携わる。 会社経営から一線を退いた後、インフラエンジニアの妻の勧めでプログラミングを 独学で始め、プログラミングセミナーなど転々としながら、開発案件に携わるようになる。 現在、フリーランスとして活動しながらテックアカデミーのメンターも勤めている。 大石ゆかり 内容分かりやすくて良かったです! 田島悠介 ゆかりちゃんも分からないことがあったら質問してね! 大石ゆかり 分かりました。 ありがとうございます! TechAcademyでは初心者でも最短4週間でエンジニアになれるRuby on Railsオンラインブートキャンプを開催しています。 現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサービスを開発することが可能です。 また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。 Ruby.

次の

CSSページネーション例

ページ ネーション デザイン

無限スクロール 無限スクロールのメリット 1.ユーザーを没頭させ、コンテンツを発見させる データ探索の主要な手段としてスクローリングを使う場合、無限スクロールはユーザーをwebページにより長く滞在させ、よりエンゲージメントを高めることができます。 ソーシャルメディアの人気に伴い大量のデータが消費されている中、無限スクロールは、ページが前もって読み込まれるのを待つことなく、膨大な情報を閲覧するための効率的な方法です。 無限スクロールは、「発見」のためのインターフェースであれば、ほぼ必須の機能です。 ユーザーが特定のものを探していない場合、気に入った一つのものを探すために大量のアイテムを見る必要があります。 クリック:それぞれのコンテンツをアップデートするには、追加でクリックを行いページの読み込みを待つ必要があります。 スクロール:一度のスクロールでコンテンツをアップデートできます (出典:designbolts) 3.モバイルデバイスに適している 画面が小さいほど、より長いスクロールをすることができます。 長いスクローリングが主流になった経緯としてはモバイルの普及があり、ジェスチャーによるコントロールは、直感的でより説明不要なスクロールを可能とします。 その結果、ユーザーは利用デバイスに関係なく、すぐに素早い反応を体験することができます。 無限スクロールのデメリット 1.ページの動作とデバイスのリソース 優れたUXのためには、ページの読み込み速度が全てです。 読み込み速度が遅いと、訪問者はサイトを離脱もしくはアプリを削除してしまい、その結果コンバージョンが下がるということが多数のリサーチによって示されています。 そしてこれは、無限スクロールを採用しているサイトにとって悪いニュースとなります。 ユーザーがページをスクロールダウンすればするほど、より多くのコンテンツを同じページ上に読み込まなければなりません。 その結果、ページの動作は非常に遅くなるでしょう。 もう一つの問題は、ユーザーのデバイスにおけるリソースが限られていることです。 特に多数の画像を扱う無限スクロールサイトの多くでは、iPadのようなリソースの限られたデバイスは動作が遅くなり始めます。 なぜならiPadは、非常に多くのアセットを読み込んでいるからです。 2.アイテムの検索と位置 無限スクロールの別の問題は、ストリームの中でユーザーがある特定の項目にたどり着いても、その場所をブックマークできず、後で戻ってくることが困難なことです。 サイトを離れてしまうと全ての進捗が失われ、同じ項目に戻るためにまたスクロールダウンする必要があるのです。 ユーザーがスクロールする目的の位置を見つけられないことは、苛立ちや混乱の原因となるだけでなく、結果的に全体のUXに悪影響を及ぼします。 2012年、Etsyは無限スクロールインターフェイスの実装に時間を費やしましたが、結局ページネーションほど上手く機能しないことがわかりました。 購買数はほぼ同数を保ちましたが、ユーザーのエンゲージメントは低下し、あまりこの機能はあまり使われることはありませんでした。 無限スクロールを利用したEtsyの検索インターフェイス。 現在のバージョンではページネーションを採用しています。 Dmitry Fadeyev氏は次のように。 訪問者は、検索結果のリストに戻りたいのです。 たった今見たアイテムをチェックし、リストの下の方に表示されるこれまでに見つけた他のものと比較するためです。 無限スクロールは、この動的な性質を遮断するだけでなく、リストを上下移動することも困難にします。 特に、別の時間にページに帰ってきた際、トップに戻されていることに気づいたとき、もう一度リストをスクロールダウンして結果が読み込まれるのを待たなければならない場合です。 この点において、無限スクロールはページネーションよりも実質的には遅くなってしまうのです。 3.意味のないスクロールバー ユーザーを苛立たせてしまう要因の一つとして、スクロールバーが実際にスクロール可能なデータの量を反映しないことが挙げられます。 ユーザーはもう少しでページの終わりだと思って下までスクロールし(しかもそれによってもう少しスクロールしようという気にもさせるのですが)、最後までたどり着いたと思ったところでゴールが遠ざかってしまうのです。 アクセシビリティの観点から言うと、スクロールバーを無意味化してしまうことはユーザーにとって非常に良くないことです。 Facebookは、全てのリンク(例えば「法務」や「採用情報」)をフッターから右側のサイドバーに移動させました。 別の解決策としては、「さらに表示」のボタンを活用し、要求に応じてコンテンツの読み込みを行うことです。 ユーザーがこのボタンをクリックしない限りは、新しいコンテンツが自動的に読み込まれることはありません。 この方法であれば、ユーザーはフッターに簡単にたどり着くことができるので、追いかける必要はありません。 Instagramは「さらに表示」ボタンを活用し、ユーザーがフッターを利用しやすいようにしています。 ページネーション ページネーションとは、コンテンツを異なるページに分割するUIの様式です。 ページの下部までスクロールしたときに連なった数字の並びが見えたら、それはサイト又はアプリのページネーションです。 Google検索の結果データ 2.コントロール感がある 無限スクロールは終わりのないゲームのようなもので、どれだけ遠くまでスクロールしようと、終わりにたどり着くことができないように思えるでしょう。 利用可能な検索結果の数がわかれば、ユーザーは無限スクロールのリスト内を探し回ることなく、より詳しい情報に基づいた決断をすることができます。 David Kieras氏は、自身の研究であるの中で、「終点にたどり着くことで、ユーザーにコントロール感をもたらす」と述べています。 更に、ユーザーが限られていながらも関連した検索結果を得たとき、探しているものが実際にその中にあるかどうかを簡単に判断できるということも、この研究により解明されています。 また、検索結果の総数を見れば(もちろん、データの総量が無限ではない場合)、ユーザーは実際に探しているものを見つけるまでにどれくらいの時間がかかるのかを見積もることができるでしょう。 3.アイテムの位置がわかる ページネーションによって、ユーザーはアイテムの位置を頭に留めておくことができます。 必ずしも正確なページ数をわかっているわけではないかもしれませんが、それが何だったかをおおよそで思い出し、ページネーションのリンクによってその場所へ簡単にアクセスすることができるでしょう。 ページネーションによって、どのページをクリックすれば元の場所に戻ることができるのかがわかるので、ユーザーはナビゲーション機能をコントロールできます。 ページネーションは、ECのサイトやアプリに向いています。 オンラインで買い物するとき、ユーザーは一旦離れた場所に戻り買い物を続けられるようにしたいのです。 MR Porterのサイトは、商品の表示画面にページネーションを利用しています ページネーションのデメリット 余分な動作が生じる ページネーションにおいて次のページに進むには、ユーザーは「次へ」などの目標となるリンクを見つけ、マウスポインターを合わせ、クリックし、そしてページが読み込まれるのを待たなければなりません。 コンテンツへ進むためのクリック この場合における主な問題点は、ほとんどのサイトがユーザーに対し、1ページにごく限られたコンテンツしか表示しないということです。 読み込み速度を妥協することなくページのコンテンツを長くすることで、ユーザーは1ページにつきより多くのコンテンツを見ることができます。 これにより、ページネーションのボタンをそれほど多くクリック、またはタップする必要がなくなります。 どう使い分けるべきか? 無限スクロールが効果的となる事例はごく少数で、ユーザー生成型コンテンツを含むサイトやアプリ(TwitterやFacebook)、またはビジュアルコンテンツ(PinterestやInstagram)が最も適しています。 一方、ページネーションは無難な選択肢で、ユーザーの行動が目的志向のサイトやアプリにとって良い解決策です。 2つの手法を使い分けるGoogle Googleにおける体験は、このポイントを示す良い実例です。 Google画像検索では無限スクロールが活用されていますが、それは画像ならユーザーがテキストよりもはるかに早く目を通し、処理することができるからです。 検索結果を読むにはもっと長い時間がかかります。 これが、Google検索の結果画面で従来型のページネーションテクニックが引き続き使われている理由なのです。 まとめ デザイナーは、どちらを使うか決める前に、無限スクロールとページネーションのメリット・デメリットを検討した方が良いでしょう。 どちらを選択するかは、対象のコンテキスト(文脈)とそのコンテンツを伝える方法に左右されます。 一般的に、無限スクロールは、Twitterのようにユーザーが特定のものを探すことなく、永遠に流れるデータストリームを消費するような場で効果を発揮します。 対して、ページネーションは、検索結果ページのように訪問者が特定の項目を探したり、ユーザーがそれまでに閲覧したアイテムの位置を重要視する場合に有効です。

次の