2021 年のスクロールに関するアンケート調査レポートと、Chromium とウェブの優先順位と計画にこの調査結果がどのように影響するかについての Chrome チームからのメッセージをご覧ください。
4 月に、Chrome チームは 2019 MDN Web DNA Report で報告された上位の問題に基づいて、スクロールとタッチ操作に関するアンケートをリリースしました。2021 スクロール アンケート レポートが完成しました。Chrome チームは、アンケート結果から得られたいくつかの考えとアクション アイテムを共有したいと考えています。この結果が、ブラウザ ベンダーや標準化団体がウェブ スクロールを改善する方法を理解するうえで役立つことを願っています。
2021 年のスクロールに関するアンケートのレポートをご覧ください。
注目すべき結果
このアンケートでは、880 件の回答が匿名で収集され、366 件の回答がすべての質問に回答しました。
スクロールを始めるには overflow-x:
scroll; のような CSS を 1 行記述するだけですが、スクロール API とオプションのサーフェス領域は JavaScript から CSS まで広範囲に及びます。次の結果は、ウェブ デベロッパーが直面している問題を浮き彫りにするのに役立ちます。
ウェブ スクロールに対する全体的な満足度
質問 27
45%
ウェブのスクロールについて、全体的にやや不満または非常に不満である場合。
この質問は、26 個のスクロールのユースケースと機能に関する質問の後に、意図的にアンケートの最後に配置されました。この回答から、ウェブ コミュニティがスクロールに苦労していることがわかります。回答者のほぼ半数が、全体的な不満を報告しています。
スクロールの操作に関する全体的な感情は、これほど低いものではないはずです。この指標は変更する必要があります。これは、作業が必要であることを示す明確なシグナルです。
スクロールの操作が難しい
問題 2
43%
スクロールの操作がやや難しい、または
非常に難しい
と報告されています。
調査の結果、スクロールのユースケースが多岐にわたることが、この難しさの原因であることがわかりました。スクロールには、次のようなものが含まれます。 - スクロール可能な領域内の要素の配置 - 無限スクロール - スクロール連動アニメーション - カルーセル - ScrollView のパディング - 循環スクロール - 仮想化スクロール
ブラウザ機能の欠落、複雑な JavaScript、タッチ、キーボード、ゲームパッドなどの入力モードのサポートの必要性により、これらのことがすべて難しくなっています。
タッチ操作の重要性
問題 3
51%
仕事に非常に重要または極めて重要と回答したユーザーの割合。
モバイル ウェブ ユーザーの訪問数は依然として増加傾向にあるため、回答者の半数がウェブでの作業にタッチ操作が非常に重要であると回答したことは驚くべきことではありません。これは、CSS スクロール スナップや touch-action などのウェブ機能に特別な注意を払うことで、ウェブで高品質なタッチ操作を実現できることを示しています。
タブキーまたはゲームパッドでの操作の難しさ
質問 5a
44%
ゲームパッドとタブ ナビゲーションの操作がやや難しいまたは非常に難しいと報告します。
スクロールには、キーボードの矢印キー、Tab キー、スペースキー、ゲームパッドなどのナビゲーション方法が含まれます。カスタム スクロール作業を行う際に、これらを含めるのは難しい場合があります。回答者のほぼ半数が、これらの入力を組み込むのはやや難しいか非常に難しいと回答しています。
学習 touch-action
問題 9
50%
アンケートから
`touch-action: manipulation`
について学習したことを報告します。
アンケートの質問の一部では、特定の API の使用について「はい」、「いいえ」、「今日知った」のいずれかで回答を求めました。特に注目すべきフィードバックは、アンケートで touch-action について知ったと回答した人の数です。これは、スクロール内でインタラクションする必要があるカスタム タッチ操作を構築する際に重要なプロパティです。
循環スクロール
質問 27
58%
ときどき、頻繁に、またはすべてのプロジェクトで
循環スクロールを使用していることを報告します。
60 秒後に 0 から再び始まります。
これらの数値は、ウェブ プラットフォームによるサポートがほとんどない、またはまったくないスクロール機能としては高い数値です。このため、この機能は技術的負債が大きくなることが多く、効果を強制的に実現するために重複や JavaScript の挿入が行われます。商品カルーセルや、秒または分単位で時間を選択して循環スクロールを提供する場合によく使用されます。
スクロール可能な領域は重要か
問題 2
55%
非常に重要または
きわめて重要
16%
まったく重要ではない
またはやや重要である
回答者はスクロール可能な領域の重要性を強く感じており、高品質のスクロールを実現するために必要な苦労を改めて示しています。
カルーセル
質問 20
87%
カルーセルを使用している場合、
24%
管理が
簡単であると報告します。
回答者のほぼ全員がウェブサイトでカルーセルを使用していますが、管理が簡単だと感じているのは 25% のみです。調査では、既製のカルーセルが人気でしたが、この統計には驚きました。あまり解決されていないように思われるからです。
無限スクロール
質問 22
65%
一部のプロジェクト
からすべてのプロジェクト
60%
やや難しい」または「
非常に難しい」と回答したユーザーの割合。
回答者の 3 分の 2 がウェブ制作で無限スクロールを実装しており、同数の回答者が実装が難しいと回答しています。使用頻度が高く、実装が難しいというもう 1 つの例であり、注意が必要な分野であることを示しています。
content-visibility と contain-intrinsic-size を組み合わせて長いスクロール可能な領域のレンダリング費用を削減できますが、「もっと読み込む」無限スクロールの UX には役立たないようです。
スクロールリンク アニメーションまたはスクロール トリガー アニメーション
質問 24
47%
すべてのプロジェクトにときどき使用する
56%
「やや難しかった」または「
非常に難しかった」と報告する
回答者のほぼ半数がスクロール連動アニメーションを使用しており、回答者の半数が難しいと感じています。ここでも、使用率の高さと難しさが関連付けられています。
組み込みのスクロールで競合する
質問 26
32%
常にまたは
ほとんどの場合
50%
ときどき
スマートフォンやタブレット アプリのスクロールやタッチ操作は、ウェブが追いつくべき明確な場所としてよく挙げられます。スクロール連動アニメーション、プログラム インターフェース、音声統合、スクロール ヒント、プルダウン更新 API などの機能があります。
回答者の半数のみが、組み込みのスクロールの動作を再現できるのはときどきだけだと感じています。
ウェブでのスクロール操作の構築に対する全体的な満足度
質問 27
アンケートのポイント
アンケートの結果は、互換性、教育、API、機能の 4 つのカテゴリに分類されています。
互換性
Chrome チームは、スクロールの互換性など、ウェブの互換性に関する問題の数を減らすことを目標として掲げています。
まず、次の 3 つの互換性の問題に焦点を当てます。
1. 水平スクロールの互換性。
1. overscroll-behavior クロスブラウザ。1. -webkit-scrollbar から接頭辞を削除し、標準に準拠しました。
教育
このアンケートの結果から、touch-action と論理プロパティについてもっと教育を行う必要があることがわかりました。ブラウザは国際レイアウトの最前線にあり、十分に活用されていないか、誤解されていることは明らかです。
重点分野:
1. touch-action
1. 論理プロパティ
API
スクロール スナップの使用は増加しており、デベロッパーからは、一般的なライブラリやプラグインと相互運用可能な機能を使用したいという要望が寄せられています。CSS とプラグイン ライブラリの間のギャップを縮小することで、スクロール スナップのデベロッパーとユーザーのエクスペリエンスの満足度を高めることができます。
API の作業は scroll-snap に重点を置きます。
1. ブラウザ間の API の可用性と互換性。1. scroll-start などの新しい CSS API の作業を開始します。1. snapChanged() などの新しい JS イベントの作業を開始します。
機能
アンケートの結果、ユーザーはウェブ上の特定の種類のスクロール関連コンポーネントに苦労していることがわかりました。これは、プラグインや多大な労力をかけずにコンポーネントを構築するために必要なプリミティブがプラットフォームに用意されていないためです。この分野については、今後さらに深く掘り下げていきたいと考えています。
デベロッパーが構築に苦労している機能には、次のようなものがあります。 1. カルーセル 1. 仮想スクロール 1. 無限スクロール
リソース
サムネイル画像: Taylor Wilcox 氏（Unsplash）撮影。