無限スクロールは考慮することが多い

2022/05/19 311 users 実装 反論材料 方式 言語化 コンテンツ

毎年無限スクロールの実装をしているのだが正直なところ実装したくないので依頼されたときの反論材料として実装したくない理由を言語化しておこうと思う。 無限スクロールとは 無限スクロールが何を指すかを知らない人のために解説すると、ページにコンテンツを足す方式でページネーションする UI を指している。例えば ... 続きを読む

useSWRInfiniteを使うとページング(無限スクロール)の処理がシンプルに書けて気持ちいい！

2021/05/21 6 users ページング SWR 処理 気持ち わたし

はじめに こんにちは、最近SWRを使いこなすのが楽しくなってきた今日この頃の、からまげです。 SWRでページング(無限スクロール)する際、useSWRInfiniteを使うと驚くほどシンプルにコードが書けることがわかり、共有したくてこの記事を書いています。 この記事が、誰かのお役に立てれば幸いです。 わたしは、「Focus Caf... 続きを読む

アメリカでSNSの動画自動再生、無限スクロールを禁止する動き | ギズモード・ジャパン

2019/08/05 52 users ギズモード image 原文 ジャパン SNS

アメリカでSNSの動画自動再生、無限スクロールを禁止する動き2019.08.05 14:00 Melanie Ehrenkranz - Gizmodo US ［原文］ （ そうこ ） Image: Getty Images 禁止したくなる気持ちもわかってしまうというね。 テクノロジーは暮らしを便利にするだけでなく害にもなる。現代人はスマホに依存している。ということで、近年... 続きを読む

遅延読み込み、無限スクロールなど、要素と境界の交差を非同期で検出する1Kbの超軽量スクリプト -Bounds.js | コリス

2019/07/04 65 users 検出 軽量スクリプト 依存 パフォーマンス コリス

画像の遅延読み込みや無限スクロールを実装する際、ページ上に境界を定義し、その境界に要素が入ったかどうか判定して実行します。要素と境界の交差を非同期に検出し、パフォーマンスを改善する1Kbの軽量スクリプトを紹介します。 要素が境界に1px交差した、全部が入ったなどを正確に検出。他のJavaScriptへの依存はなく... 続きを読む

Googleの検索が無限スクロールに対応したので、色々実験してみた - 情報管理LOG

2018/04/15 15 users 情報管理LOG yoshinon Google 検索 ニュース

情報管理LOGの @yoshinon です。 先日、GoogleからGoogle検索のモバイル版が、無限スクロールに対応というニュースが流れました。今まで「次へ」を押して、続きを見るということに慣れすぎていましたが、これでモバイルでの検索が、かなり便利になりそうです。 　　 【　Googleの検索が無限スクロールに対応したので、色々実験してみた　】　　 　 １．Googleの検索が無限スクロールに... 続きを読む

Google、モバイル検索のページネーションを廃止。「もっと見る」による無限スクロールへ変更 | 海外SEO情報ブログ

2018/04/11 73 users 廃止 ページネーション Google モバイル検索 変更

[レベル: 中級] 無限スクロールのモバイル検索結果を Google は導入しました。 「次へ」でページネーションして2ページ目、3ページ目に移動するのではなく、「もっと見る」で続きの結果が出現します。 正式導入 「もっと見る」による無限スクロールのモバイル検索結果は 昨年12月にテスト していたことが確認されています。 しかし今回はテストではなく、正式導入になります。 Google 検索の Tw... 続きを読む

Googleが推奨する、SEOに最適な無限スクロールをjScrollで実装する

2017/11/02 11 users Facebook SEO Google 実装方法 技術

Googleが2014年末に発表した、SEOに最適な無限スクロールをjScrollで実装する方法を解説する。今や少し下火になってきている無限スクロール、昔はホットだった。Facebookが使ってるんだし俺らも使おうぜ！ってな感じで、その実装方法が乱れ飛んだのも今は昔。 で、この技術、SEOに最適な実装方法というのがある。Googleが2014年末に投稿したブログに従えば、ちょっと気をつけて実装しな... 続きを読む

[JS]これなら簡単で便利！要素がビューポートに表示されているかを判定できる -Intersection Observer | コリス

2017/08/10 65 users ビューポート getBoundingClientRect

スクロールした際にヘルプや広告を表示したり、無限スクロールでコンテンツを読み込ませたり、画像の遅延ロードなど、要素がビューポートに表示されているかをトリガーにするのには、なかなか面倒なJavaScriptが必要でした。 例えば、スクロールやサイズ変更のイベントを取得し、getBoundingClientRect()などのDOM APIでビューポートからの相対位置を手動で計算します。 この今までの方... 続きを読む

無限スクロールの課題とは！縦長サイトのデザイン手法 | TechAcademyマガジン

2017/06/14 39 users TechAcademyマガジン 本稿 UXデザイナー 課題

TechAcademyマガジンはオンラインのプログラミングスクール TechAcademy [テックアカデミー] が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。 本稿は、Smashing magazineの ブログ記事 を許可を得て日本語翻訳し掲載した記事になります。 本記事は、UXデザイナーのNick Babich氏によって投稿されました... 続きを読む

長いスクロールページでユーザーを引きつけるための５つの方法 | UX MILK

2017/03/12 60 users UX MILK ユーザー 方法 ソフトウェアデベロッパー 5つ

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事は こちら をご参照ください。 ファーストビューだけで情報を伝える時代は終わりました。最近では長いスクロールや無限スクロールを用いるサイトが増えてきています。ユーザーが簡単にコンテンツをスクロールができ、スクロールすると自然に情報が表示されるサイトは以下のような利益をもたらします。 ナビゲーション... 続きを読む

Googleが推奨する、SEOに最適な無限スクロールをjScrollで実装する – TOACH

2016/02/13 298 users Facebook TOACH jQueryプラグイン SEO

今や少し下火になってきている無限スクロール、昔はホットだった。Facebookが使ってるんだし俺らも使おうぜ！ってな感じで、その実装方法が乱れ飛んだのも今は昔。 で、この技術、SEOに最適な実装方法というのがある。Googleが2014年末に投稿したブログに従えば、ちょっと気をつけて実装しないといけないってことが分かる。 今回はその方法を解説する。まずはjScrollというjQueryプラグインで... 続きを読む

無限スクロール向け雑なローディング画像 - Weblog - Hail2u.net

2015/06/10 17 users View Demo 実装 Weblog hail2u.net

無限スクロールはちょくちょく実装することはあるが、追加するコンテンツの読み込みや挿入はともかく、ローディング画像の処理で悩むことがある。その表示の切り替えには実装と処理のどちらにおいてもそこそこコストがかかるからだ。かなり前に色々考えるのが面倒になり、常に表示しておくという雑な手をよく使うようになった。 View Demo: Easy Loading Marker for Infinite Scr... 続きを読む

Flipboardのウェブ版は進歩なのか、それとも退化なのか？

2015/02/11 33 users Flipboard Ads フリップ 順序 ウェブ版

Ads: タブレット上で人気のニュース閲覧用アプリ、Flipboardにウェブ版が登場しました。 もともとタブレット上で「指でめくってニュースを閲覧」という直感的な動作でユーザーが爆発したFlipboardが、次にiPhone 版、その次にウェブ版を発表するのは順序が普通と逆でいえます。 しかもウェブ版にいたっては「めくる」動作ではなくて無限スクロールで記事が表示されていきます。フリップはもういい... 続きを読む

【要チェック】無限スクロールで確認したい10個のメリット、デメリットまとめ - Photoshop VIP

2015/02/11 101 users Photoshop Vip メリット 要チェック 10個

シングルページを利用したウェブサイトが大きなデザイントレンドになっています。特に豊富なコンテンツが用意されている場合が多く、ありがたいことに無限スクロールテクニックを利用することで、デザイナーはコンテンツを無限に並べつづけることができます。 このテクニックは一部のサイトやコンテンツ種類にも最適ですが、他のウェブサイトでは扱いにくく、悩みのタネになるのも事実です。新しいデザインテクニックだからとすぐ... 続きを読む

Tumblrの省メモリーな無限スクロール - 記録

2014/06/13 538 users tumblr ユーザースクリプト 記録 メモリー コンテンツ

無限スクロールまたはauto pagingと呼ばれるUIには、読み終えたコンテンツがどんどん画面の上のほうに溜まっていってメモリーを食い潰すという問題がある。 なかでもTumblrは画像などのコンテンツが多いため、ダッシュボードダイバーたちは無限Tumblrユーザースクリプトなどのユーザースクリプトをインストールして、読み終えたコンテンツを定期的にページ上から自動削除するといった対策を講じていた。... 続きを読む

無限スクロールの問題点と解決方法 - 記録

2014/06/13 126 users Twitter permalink 記録 問題点 解決方法

無限スクロールとは、ページの下部までスクロールすると自動的に新しい要素が追加される機能のこと。TwitterなどのSNSのタイムラインを初めとして様々なウェブサイトで使われているが、いくつかの問題点も指摘されている。 無限スクロールのよく知られた問題点と、それに対する解決方法をまとめた。 permalinkが取れない 同じページに次々と新しい内容が継ぎ足されていくので、いま自分が見ているページのU... 続きを読む

【ギャラリーサイトで重複しない画像をランダム表示させる時に使った】WordPressで投稿を取得する際に「ORDER BY」節を付ける | 今村だけがよくわかるブログ

2014/04/28 13 users 今村 SQLクエリ ORDER BY WordPress たび

WordPressのフィルターフック「posts_orderby」を使うと、投稿を取得するSQLクエリに「ORDER BY」節を加えることができます。私の場合は、ギャラリーサイト制作の時に使いました。 無限スクロールができて、スクロールするたびにどんどん写真が表示される、みたいなギャラリーサイト。その際「重複しないランダムな写真を次々に表示」させるために必要でした。イメージですと、今制作中の「大英... 続きを読む

[JS]これスゴイよ！スクロール時にさまざまな楽しいエフェクトを与えるスクリプト -ScrollMagic | コリス

2014/03/09 381 users コリス パララックス jQuery スクリプト エフェクト

スクロールに合わせて、さまざまなアニメーションをシンクロさせるjQueryのプラグインを紹介します。 Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、div要素の内側のスクロール... 続きを読む

世界で最も美しくSEOに適した無限スクロールを実装するサイト、QUARTZ (qz.com) | 海外SEO情報ブログ

2014/03/02 106 users Quartz 百聞 SEO 一見 qz.com

[対象: 上級]この記事では、非常に華麗な無限スクロールを実装しているサイトを紹介します。美しく、見やすい、SEOも考慮できた QUARTZ の無限スクロールそのサイトは、ニュースメディアサイトの QUARTZ です。「百聞は一見にしかず」で、実際に QUARTZ に訪問して見てください。注目してほしいのはブラウザに表示されるURLです。無限スクロールで下がっていくと、今あなたが見ている記事に対応... 続きを読む

Google ウェブマスター向け公式ブログ: 検索エンジンとの相性を考慮した無限スクロールのベストプラクティス

2014/02/21 234 users ベストプラクティス Googlebot 相性 クローラー 英語

検索エンジンとの相性を考慮した無限スクロールのベストプラクティス 2014年2月21日金曜日 | 17:46 ご自身のサイトのニュース フィードやピンボードで、ユーザーの利便性を考えて無限スクロール（英語）を使用している方もいらっしゃるでしょう。しかし、Googlebot に対してとなると話が変わってきます。無限スクロールでは、クローラーがユーザーの行動（スクロールやボタンを押してさらにアイテムを... 続きを読む

「SEO的に優れた無限スクロールの実装方法」Googleからのアドバイス::SEM R (#SEMR)

2014/02/13 252 users SEMR プログレッシブ・エンハンスメント SEO 原則 前提

「SEO的に優れた無限スクロールの実装方法」Googleからのアドバイス Googleが検索エンジンに配慮した無限スクロールの導入方法を公式ブログでアドバイス。クローリングできるようページ分割したものを用意するのが原則。プログレッシブ・エンハンスメントを前提に設計しよう。 2014年02月14日 02:16 | Google 2010-2014, SEO（検索エンジン最適化） | TrackBac... 続きを読む

ASCII.jp：こうめの“これから使える”jQueryプラグイン

2013/08/23 68 users jQueryプラグイン Infinite Scroll

2013年08月23日 11時00分 第1回 Facebook風の無限スクロールが作れるinfinite scroll ページ下部まで移動すると、次のページを自動的に読み込んで表示するjQueryプラグイン「infinite scroll」。ブログ記事や、ECサイトの商品ページ、ギャラリーサイトなどで効果的です。 続きを読む

ASCII.jp：Facebook風の無限スクロールが作れるinfinite scroll｜こうめの“これから使える”jQueryプラグイン

2013/08/23 110 users Infinite Scroll jQuery スクロー 手間

圧倒的な人気を誇るJavaScriptのライブラリー「jQuery」。サイトに効果をあたえるプラグインが多数あることが魅力ですが、そのプラグインを探すことがWeb制作者の手間になっています。本連載では、「こうめ」さんこと大竹孔明さんがおすすめのプラグインと実装方法、実装例を紹介します。（編集部） 今回紹介するプラグイン infinite scroll 「infinite scroll」は、スクロー... 続きを読む

Unicodeの全文字セットと便利ツールが揃った -Unicode character table | コリス

2013/06/10 61 users コリス unicode スクロールバー 記号 便利ツール

Unicodeの全文字セットを見やすくまとめたUnicode character tableを紹介します。 見たことのない文字や記号を眺めているだけで、ちょっと楽しいです。 Unicode character table 上記キャプチャだと2スクロール分のスクロールバーしか表示されていませんが、テーブルは無限スクロールとなっており、スクロールするとどんどん表示されます。 続きを読む

なぜEtsyでは無限スクロールは失敗したのか – U-Site

2013/01/24 124 users Etsy Pinterest ユーザビリティ U-Site

要約： 「ユーザーがページに滞在してコンテンツに関わる時間が長くなる」といわれる無限スクロールを採用したものの、うまくいかなかったというEtsyでの事例から、その教訓を読み解きます。 HCD新人部員のTです。 1年以上前の記事ですが、「Pinterestによってもたらされた、6つの重要なWebデザインとユーザビリティにおけるトレンド」という下記の記事を読んでいました。 該当記事：6 Importa... 続きを読む