モバイルウェブで優れたユーザー エクスペリエンスを強調表示する
2020年9月4日金曜日
この記事は高速なページのファン、Addy Osmani、Ben Greenstein、Josh Simmons による Chromium Blog の記事 "Highlighting great user experiences on the mobile web" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
この 10 年間、Chrome とウェブ開発コミュニティは、高速かつレスポンシブで快適なブラウジング体験をユーザーに提供するための作業を続けています。<link rel=preload> やネイティブ遅延読み込みをはじめとするさまざまな機能は、この目的の実現に貢献しています。Chrome は従来より、HTTPS などのベスト プラクティスの採用も進め、成功に導いてきました。これは、Chrome の UI で安全なブラウジングと安全でないブラウジングを区別することで実現しています。
この 10 年間、Chrome とウェブ開発コミュニティは、高速かつレスポンシブで快適なブラウジング体験をユーザーに提供するための作業を続けています。<link rel=preload> やネイティブ遅延読み込みをはじめとするさまざまな機能は、この目的の実現に貢献しています。Chrome は従来より、HTTPS などのベスト プラクティスの採用も進め、成功に導いてきました。これは、Chrome の UI で安全なブラウジングと安全でないブラウジングを区別することで実現しています。
ユーザーがブラウジングする際に優れたユーザー エクスペリエンスを認識できるように、Chrome はウェブ上の高品質なユーザー エクスペリエンスを強調表示するようになります。その第一歩として、Android 版の Chrome で高速なリンクのコンテキスト メニューにラベルを表示します。この変更は、Chrome 85 ベータ版以降でロールアウトされる予定です。
ラベル表示は、実際の Chrome ユーザーが体験するユーザー エクスペリエンスの重要な側面を定量化した Core Web Vitals 指標のシグナルに基づいています。Core Web Vitals 指標は、読み込み時間、応答の早さ、読み込み時のコンテンツの安定性など、ウェブのユーザビリティの要素を測り、優れたユーザー エクスペリエンスの基準となる指標のしきい値を定義します。
サイト所有者がこれらの指標を改善するために変更を加えると、ユーザーがどんなウェブブラウザを使っていたとしても、ウェブ体験が快適になります。このようなユーザー中心の重要指標に注力することで、ユーザビリティの改善が進み、企業のエンゲージメントも向上する可能性があります。
Core Web Vitals のすべての指標のしきい値を満たすかそれを上回っているページへのリンクは、“高速版ページ” という新しいラベルとともに表示されます。このラベルは、ページに移動する前にユーザーがリンクを長押しした場合に表示され、そこへ移動したユーザーの大半が特に優れた体験をしていることを示します。
"高速版ページ" ラベルはリンクが高速であることを示します。これが表示される可能性があるのは、これまで他のユーザーが高速に開くことができた実績のある URL（あるいはそれに似た URL）です。ラベルを表示するにあたって、同じ構造を持つサイトの URL の履歴データが集計されます。たとえば、URL が新しい、あまり人気がないなど、URL のデータが十分ではないためスピードが評価できない場合や URL データを利用できない場合、履歴データはホスト単位に評価されます。
ページのラベル表示機能は、ユーザー エクスペリエンス全体を最も的確に表す指標に対して常に最適化されるように、Core Web Vitals の進化に合わせてゆきたいと考えています。以前にも記載しましたが、デベロッパーの皆さんは、Core Web Vitals の定義としきい値が安定版になり、予測可能な 1 年単位のアップデートとその事前通知が行われると考えてください。
Core Web Vitals を最適化するには、ページの質を改善する作業が必要になる場合があります。これをサポートするため、デベロッパー ツールをアップデートし、情報や推奨事項が表示されるようにしました。Lighthouse、DevTools、PageSpeed Insights、Search Console チームも、Core Web Vitals 専用のレポートを追加しました。
現在、ラベル表示機能は Chrome 85 ベータ版にロールアウトされていますが、chrome://flags を開いて “Context menu performance info and remote hint fetching” を有効にすると、すぐに試すことができます。このフラグは Android 版 Chrome のみで有効ですのでご注意ください。完全にロールアウトされると、Lite モードか “Make Searches and Browsing Better” をオンにしているユーザーにラベルが表示されます。次に、Wikipedia の Internet のページなど、条件を満たすページに移動し、いずれかのリンクを長押ししてみてください。
私たちは、ウェブが私たちの生活において重要な役割を果たしていると確信しており、今回のラベル表示が遅いネットワークや接続状態の悪いネットワークを使っているユーザーの役に立つことを期待しています。今後は、Chrome の UI のその他の部分に試験的にラベル表示を行うことも検討しています。私たちの最終的な目的は、ページを開いたときに体験する可能性があるエクスペリエンスを、健全なレベルの透過性をもってウェブのユーザーに提供することにあります。
Chrome は、今後もウェブの繁栄のためにエコシステムと連携してゆきます。ここで紹介したようなステップは、その目的を念頭において検討されています。
Reviewed by Eiji Kitamura - Developer Relations Team
Core Web Vitals のすべての指標のしきい値を満たすかそれを上回っているページへのリンクは、“高速版ページ” という新しいラベルとともに表示されます。このラベルは、ページに移動する前にユーザーがリンクを長押しした場合に表示され、そこへ移動したユーザーの大半が特に優れた体験をしていることを示します。
"高速版ページ" ラベルはリンクが高速であることを示します。これが表示される可能性があるのは、これまで他のユーザーが高速に開くことができた実績のある URL（あるいはそれに似た URL）です。ラベルを表示するにあたって、同じ構造を持つサイトの URL の履歴データが集計されます。たとえば、URL が新しい、あまり人気がないなど、URL のデータが十分ではないためスピードが評価できない場合や URL データを利用できない場合、履歴データはホスト単位に評価されます。
ページのラベル表示機能は、ユーザー エクスペリエンス全体を最も的確に表す指標に対して常に最適化されるように、Core Web Vitals の進化に合わせてゆきたいと考えています。以前にも記載しましたが、デベロッパーの皆さんは、Core Web Vitals の定義としきい値が安定版になり、予測可能な 1 年単位のアップデートとその事前通知が行われると考えてください。
Core Web Vitals を最適化するには、ページの質を改善する作業が必要になる場合があります。これをサポートするため、デベロッパー ツールをアップデートし、情報や推奨事項が表示されるようにしました。Lighthouse、DevTools、PageSpeed Insights、Search Console チームも、Core Web Vitals 専用のレポートを追加しました。
現在、ラベル表示機能は Chrome 85 ベータ版にロールアウトされていますが、chrome://flags を開いて “Context menu performance info and remote hint fetching” を有効にすると、すぐに試すことができます。このフラグは Android 版 Chrome のみで有効ですのでご注意ください。完全にロールアウトされると、Lite モードか “Make Searches and Browsing Better” をオンにしているユーザーにラベルが表示されます。次に、Wikipedia の Internet のページなど、条件を満たすページに移動し、いずれかのリンクを長押ししてみてください。
私たちは、ウェブが私たちの生活において重要な役割を果たしていると確信しており、今回のラベル表示が遅いネットワークや接続状態の悪いネットワークを使っているユーザーの役に立つことを期待しています。今後は、Chrome の UI のその他の部分に試験的にラベル表示を行うことも検討しています。私たちの最終的な目的は、ページを開いたときに体験する可能性があるエクスペリエンスを、健全なレベルの透過性をもってウェブのユーザーに提供することにあります。
Chrome は、今後もウェブの繁栄のためにエコシステムと連携してゆきます。ここで紹介したようなステップは、その目的を念頭において検討されています。
Reviewed by Eiji Kitamura - Developer Relations Team
