この記事は Chrome プロダクト マネージメント担当副社長、Rahul Roy-chowdhury による Google Developers Blog の記事 "The Modern Mobile Web: State of the Union" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
この 1 年の変化を振り返りましょう。昨年の Google I/O で、モバイルウェブが企業向けに公開されたことを紹介しました。AMP や Progressive Web App(PWA)などの新しいテクノロジーにより、新しい機能が提供され、パフォーマンスが向上し、モバイルウェブへのワークフローが効率化されました。
そして 1 年が経ち、20 億を超える AMP ページが作成され、「PWA」が流行語をはるかに超えた存在になり、今では世界中の多くの企業がモバイル端末向けの開発にこの方式を採用しています。詳細については、最新のモバイルウェブの状況について、Google I/O で配信された動画をご覧ください。また、これらのテクノロジーが最新のモバイルウェブの主流となりつつある現状を、以下でご説明します。
動向
世界中の優れた成功事例をすべて 1 つの投稿にまとめるのは難しいので、ここではいくつか注目すべき事例を取り上げます。
Wego は自社のモバイルサイトのパフォーマンスを改善するため、amp-install-serviceworkerで AMP ページを構築し、PWA の高速環境に移行しました。ページ読み込みの平均時間が 12 秒から 1 秒未満に短縮され、コンバージョン率が 95% 増加しました。
Forbes がモバイルサイトを PWA として再構築するとき、スマートフォンの操作環境に似たサイトになるように考え直すことから始めました。Forbes は、基盤となるサイトのアップデートを最小限に抑える代わりに、PWA テクノロジーを統合し、没入型のアプリ風操作環境を実現しました。改善はすぐに数字となって現れ、リリース以降のエンゲージメント率が 2 倍以上になりました。
インドの代表的な配車アプリである Olaは、PWA を構築し、この PWA で予約したユーザーの 20% が、以前このアプリをアンインストールしたことがあることに気付きました。必要なストレージ スペースの量を減らすことで、PWA によってユーザーのリピート率を効率的に高めることに成功しました。
次の成功事例として、Twitter Liteの例を見てみましょう。データ使用量をできるだけ押さえた PWA によって、信頼性の低いモバイル ネットワークにも柔軟に対応し、端末上のスペースは 1MB 未満で十分になりました。Twitter の新しいモバイル操作環境はスピード面についても最適化されており、サイト中のナビゲーションが高速になっただけでなく、起動時間も最大 30% 短縮されました。ユーザーがサイトに滞在する時間が 2.7 倍に増加し、その結果、新しい PWA では、以前のモバイルサイトよりもツイート数が 76% も多くなりました。Android のホーム画面に設置されたアイコンから開始されるセッションが 1 日で 100 万にものぼり、驚くべきリピート率を達成しています。
磨き上げられた操作性
ユーザーはモバイル端末にたくさんのことを期待しています。この 1 年、その要望に応えるべく多くの API を追加してきました。モバイルウェブはより多くのユースケースに対応し、今まで以上に多くのことができるようになりました。代表的な例を示します。
ツール
私たちは、ウェブで魅力的なエクスペリエンスを構築する一連のツールの改善と拡張にも取り組んできました。
Lighthouseは、ウェブ エクスペリエンスの品質を測定できる新しい自動化ツールです。ウェブアプリに対して、およそ 100 個の監査を実行し、ページ パフォーマンスからバイト効率、アクセシビリティに至るまですべてを検査し、集計したスコアを提供します。Chrome の DevTools との新たな統合により、ブラウザを離れずに Lighthouse 監査を実行できるようになります。
Polymer 2.0は、基礎から再構築された、Polymer ライブラリの次期メジャー リリースで、最新のウェブ プラットフォームの新機能を最大限に活用できます。このリリースでは、Chrome と Safari で利用できるようになった、新しい Web Components の API を使用します。完全なモジュール型で、スピードが 10% アップし、80% 軽量化されています。
Chrome は、デベロッパーの皆様が開発を容易に進め、ユーザーと交流し、ウェブで成功し続けるビジネスを構築できるよう、サポートいたします。最新のニュースについては、YouTube チャンネルに登録して、Twitter @ChromiumDevをフォローしてください。
Posted by Eiji Kitamura - Developer Relations Team
この 1 年の変化を振り返りましょう。昨年の Google I/O で、モバイルウェブが企業向けに公開されたことを紹介しました。AMP や Progressive Web App(PWA)などの新しいテクノロジーにより、新しい機能が提供され、パフォーマンスが向上し、モバイルウェブへのワークフローが効率化されました。
そして 1 年が経ち、20 億を超える AMP ページが作成され、「PWA」が流行語をはるかに超えた存在になり、今では世界中の多くの企業がモバイル端末向けの開発にこの方式を採用しています。詳細については、最新のモバイルウェブの状況について、Google I/O で配信された動画をご覧ください。また、これらのテクノロジーが最新のモバイルウェブの主流となりつつある現状を、以下でご説明します。
動向
世界中の優れた成功事例をすべて 1 つの投稿にまとめるのは難しいので、ここではいくつか注目すべき事例を取り上げます。
Wego は自社のモバイルサイトのパフォーマンスを改善するため、amp-install-serviceworkerで AMP ページを構築し、PWA の高速環境に移行しました。ページ読み込みの平均時間が 12 秒から 1 秒未満に短縮され、コンバージョン率が 95% 増加しました。
Forbes がモバイルサイトを PWA として再構築するとき、スマートフォンの操作環境に似たサイトになるように考え直すことから始めました。Forbes は、基盤となるサイトのアップデートを最小限に抑える代わりに、PWA テクノロジーを統合し、没入型のアプリ風操作環境を実現しました。改善はすぐに数字となって現れ、リリース以降のエンゲージメント率が 2 倍以上になりました。
インドの代表的な配車アプリである Olaは、PWA を構築し、この PWA で予約したユーザーの 20% が、以前このアプリをアンインストールしたことがあることに気付きました。必要なストレージ スペースの量を減らすことで、PWA によってユーザーのリピート率を効率的に高めることに成功しました。
次の成功事例として、Twitter Liteの例を見てみましょう。データ使用量をできるだけ押さえた PWA によって、信頼性の低いモバイル ネットワークにも柔軟に対応し、端末上のスペースは 1MB 未満で十分になりました。Twitter の新しいモバイル操作環境はスピード面についても最適化されており、サイト中のナビゲーションが高速になっただけでなく、起動時間も最大 30% 短縮されました。ユーザーがサイトに滞在する時間が 2.7 倍に増加し、その結果、新しい PWA では、以前のモバイルサイトよりもツイート数が 76% も多くなりました。Android のホーム画面に設置されたアイコンから開始されるセッションが 1 日で 100 万にものぼり、驚くべきリピート率を達成しています。
磨き上げられた操作性
ユーザーはモバイル端末にたくさんのことを期待しています。この 1 年、その要望に応えるべく多くの API を追加してきました。モバイルウェブはより多くのユースケースに対応し、今まで以上に多くのことができるようになりました。代表的な例を示します。
- ホーム画面に追加の改善:今年の前半に、ホーム画面に追加の改善を行ったことを発表しました。これで、PWA が Android オペレーティング システムにより深く統合されました。PWA は、ホーム画面に表示されるだけでなく、ネイティブ アプリと一緒にアプリ ランチャーや Android 設定にも表示されるようになりました。さらに、Chrome や他のアプリでもリンクをクリックすれば起動します。
- 支払い:支払いを行う処理は複雑なものになる可能性があります。ウェブ上の支払いフローを改善するため、Payment Requestと呼ばれるワンタップの支払い API を公開しました。この API を利用すると、ウェブアプリがクレジット カードや Android Pay などの Google の支払い方式に対応できるようになります。この API を追加可能な支払いアプリと統合できるようになったこともお知らせします。
- メディア消費量:インターネット トラフィックの 70% 以上を占めるのは動画です。優れたモバイルウェブ メディア エクスペリエンスを実現するため、ユーザーが Media Session API による再生を詳細にコントロールできるようにし、Screen Orientation API でフルスクリーンでの再生を改善しました。さらに、Background Fetch を利用したオフライン機能を追加しています。詳細については、モバイルウェブ メディアのベスト プラクティスをご覧ください。また、PWA for Media デモで、API のどのように提供されるかをご確認ください。
ツール
私たちは、ウェブで魅力的なエクスペリエンスを構築する一連のツールの改善と拡張にも取り組んできました。
Lighthouseは、ウェブ エクスペリエンスの品質を測定できる新しい自動化ツールです。ウェブアプリに対して、およそ 100 個の監査を実行し、ページ パフォーマンスからバイト効率、アクセシビリティに至るまですべてを検査し、集計したスコアを提供します。Chrome の DevTools との新たな統合により、ブラウザを離れずに Lighthouse 監査を実行できるようになります。
Polymer 2.0は、基礎から再構築された、Polymer ライブラリの次期メジャー リリースで、最新のウェブ プラットフォームの新機能を最大限に活用できます。このリリースでは、Chrome と Safari で利用できるようになった、新しい Web Components の API を使用します。完全なモジュール型で、スピードが 10% アップし、80% 軽量化されています。
Chrome は、デベロッパーの皆様が開発を容易に進め、ユーザーと交流し、ウェブで成功し続けるビジネスを構築できるよう、サポートいたします。最新のニュースについては、YouTube チャンネルに登録して、Twitter @ChromiumDevをフォローしてください。
Posted by Eiji Kitamura - Developer Relations Team