T-Mobile は、実際のユーザーのウェブバイタルを分析することで、ウェブに関する主な指標の改善がユーザー エクスペリエンスとビジネス指標の両方に大きな影響を与えることを認識しました。

RUMvision がベースライン情報を RUM データに組み込んだ方法。

Ray-Ban が Speculation Rules API を使用して LCP を改善し、Ray-Ban の e コマース プラットフォームのビジネス パフォーマンスを改善した方法を学びます。

QuintoAndar は、Interaction to Next Paint（INP）を 80% 削減することでウェブのパフォーマンスを大幅に改善し、コンバージョン数を前年比 36% 増加させました。

このケーススタディでは、Netflix でコンテナ クエリを採用するメリットについて説明します。

日本の鉄道会社である東急が、パスキーによるログインを 12 倍高速化し、毎日何千人もの乗客をサポートしている方法をご覧ください。

Google スプレッドシートでの計算は当初、サーバーで行われ、次に JavaScript のクライアントで行われ、WebAssembly ガベージ コレクションではクライアントで行われていました。このケーススタディでは、その方法と理由について説明します。

このケーススタディでは、Google Meet チームが権限をどのように改善したか、それがユーザーに及ぼした影響について説明します。向上します

ウェブによって臨場感あふれる 3D エクスペリエンスを可能にし、買い物客が物理的な商品を理解して探索できるようにした方法をご覧ください。

スマートテレビとセットトップ ボックスのデバイス向けアプリである Disney Hotstar が INP を削減する取り組みを通じて、視聴者のエンゲージメントを大幅に高めた事例をご紹介します。

ウェブによって臨場感あふれる 3D エクスペリエンスを可能にし、買い物客が物理的な商品を理解して探索できるようにした方法をご覧ください。

PubTech の同意管理プラットフォームが、顧客ウェブサイトの INP を最大 64% 削減し、広告の視認性を最大 1.5% 改善した方法

過去 2 年間にわたり、Goodnotes のエンジニアリング チームは、成功を収めた iPad のメモ作成アプリを他のプラットフォームでも利用できるようにするプロジェクトに取り組んできました。このケーススタディでは、2022 年の iPad アプリが、ウェブ テクノロジーを活用したウェブ、ChromeOS、Android、Windows に導入され、WebAssembly ではチームが 10 年以上にわたって取り組んできた同じ Swift コードを再利用した事例を紹介します。

コンテンツ レコメンデーション プロバイダである Taboola は、LoAF を使用して、パブリッシャー パートナー ウェブサイトの INP を最大 36% 改善しました。

モバイルで利用できる最も人気のある動画編集アプリの一つが、完全に機能するウェブ バージョンをどのように作成したか。

pixiv は、イラストレーターやイラスト愛好家がコンテンツを通じて相互に交流できるオンライン コミュニティ サービスです。ユーザーは独自のイラストを投稿できます。世界中に 8,400 万人以上のユーザー がおり、2023 年 5 月時点で 1 億 2,000 万点 を超えるアート作品が投稿されています。 pixiv Sketch は、pixiv

この投稿では、Mitra Tokopedia が ML を使用して販売者のウェブアプリを改善し、運用コストを削減した方法について説明します。

このケーススタディでは、PageSpeed Insights（PSI）、Chrome DevTools、scheduler.yield API などの Google ツールを活用して、Trendyol で使用される React の INP をデバッグおよび改善するワークフローをステップごとに説明します。

この活用事例では、非営利団体である Kiwix が、プログレッシブ ウェブアプリ テクノロジーと File System Access API を使用して、ユーザーがオフライン用に大容量のインターネット アーカイブをダウンロードして保存できるようにしている事例を紹介します。

Yahoo!JAPAN は、パスキーの採用とユーザー エクスペリエンスの改善に向けた取り組みを進めています。

プリフェッチは、近い将来必要になると思われるリソース（またはページ全体）をダウンロードして、ページの読み込みを高速化する手法です。調査によると、読み込み時間が速いとコンバージョン率が高くなり、ユーザー エクスペリエンスも向上することがわかっています。

Yahoo! 日本有数のニュース プラットフォームであるジャパンニュースは、bfcache のヒット率を高めるために一丸となって取り組み、その結果、ユーザー エクスペリエンスとビジネスが大幅に改善しました。具体的には、同社が実施した A/B テストの結果、bfcache を使用するページで広告収益が 9% 増加したことがわかりました。

TBT を 30 倍削減し、Next.js に移行したことで、The Ecomonic Times は INP を約 4 倍削減できました。その結果、直帰率が 50% 減少し、ページビューが 43% 増加しました。

INP の最適化により redBus の売上は約 7% 増加

このカジュアルなドライビング ゲームでは、プロシージャル生成の無限の風景で WebGL の可能性を探ることができます。 Slow Roads は、無限に生成されるプロシージャ シーンに重点を置いたカジュアルなドライビング ゲームです。すべて WebGL アプリケーション

これは、YouTube ウェブの改善に関する新しいシリーズのパート 1 です。

また、楽天 24 は、実際のユーザーのウェブに関する指標を測定することで、優れた Largest Contentful Paint（LCP）によってコンバージョン率が 61.13% 向上することを発見しました。

GoDaddy が実装した変更の事例。何百万ものサイトのパフォーマンスを向上させ、PageSpeed Insights と Core Web Vitals の優れたスコアを達成しました。

高級小売店の Farfetch は、ウェブに関する主な指標の改善に投資したことが、どのようにビジネス成果の向上につながったかについて解説します。

Yahoo! JAPAN はパスワードレスの ID システムを実現しました。そのアプローチと取り組みの結果をご覧ください。

ウェブに関する主な指標に対する高いパフォーマンス スコアの全体的な影響とメリットを測定した事例紹介。

プログレッシブ ウェブアプリは、最新のウェブの能力を活かしています。Adobe は Workbox を使用して、そうした機能を Adobe Experience Manager に導入しています。

トランザクションを 10 倍に増やし、2 年半のキューイングを削減した MishiPay の PWA についてご紹介します。

Economic Times のウェブサイトでウェブに関する主な指標を最適化すると、ユーザー エクスペリエンスが大幅に向上し、ウェブサイト全体の直帰率が大幅に減少しました。

この記事では、「ダークモード」コホートのサイズを特定し、カスタムダークモードを適用するまでの Terra のジャーニーを分析し、最後にこの実装が主要な KPI に及ぼす影響を測定します。

ウェブに関する主な指標の最適化と Next.js への移行に重点を置いたプロジェクトの結果、コンバージョン率が 5% 向上し、セッションあたりの閲覧ページ数が 87% 増加しました。

Kapwing などの企業は、強力な API（IndexedDB や WebCodecs など）とパフォーマンス ツールを使用して、こうした動画コンテンツをすべてウェブ上で作成できるようにしています。

カラーまたはモノクロのビットマップ画像（PNG、JPG、JPEG、WEBP、AVIF、GIF など）をカラーまたはモノクロのベクター画像（SVG）に変換します。

Mail.ru のホームページで Core Web Vitals を数か月かけて改善した結果、Cumulative Layout Shift（CLS）の 75 パーセンタイルが 60% 増加し、平均セッション時間が 2.7%、コア セクションのコンバージョン率が 10% 以上増加しました。

この投稿では、ルノーとそのグローバル データ パートナーである fifty-five が、ウェブに関する主な指標の測定と最適化にどのように取り組んだかをご紹介します。チームはランディング ページへの 1,000 万件のアクセスからのデータを分析し、Largest Contentful Paint とコンバージョンの間に強い相関関係があることを発見し、最適化の取り組みを強化しました。これらのデータポイントを確認し、最適化に向けてチームがどのように整理しているかを把握します。

この事例紹介では、Swappie チームが、ウェブに関する主な指標に向けてウェブアプリを最適化することで、どのようにコンバージョン数と収益を増やしたかを説明します。

この記事では、ユーザーやビジネスに良い影響を及ぼしている企業の例を挙げて、ウェブに関する主な指標と主要なビジネス指標の相関関係について説明します。

ドイツのニュース メディアである Netzwelt が、ウェブに関する主な指標を最適化してユーザー エクスペリエンスと広告収入を改善した方法をご覧ください。

Blibli では、直帰率を 42% 削減し、モバイル コンバージョン率を 8 倍向上させ、セッションあたりの閲覧ページ数を 2.5 倍に増やすことに成功しました。

英国の大手ニュースサイトである Telegraph は、数か月で、75 パーセンタイルの CLS を 0.25 から 0.1 に 250% 改善しました。

また、平均読み込み時間は以前のサイトより 30% 速くなり、直帰率が 12%、セッション深度が 18% 向上しました。

Mainline Menswear は、プログレッシブ ウェブアプリ（PWA）を実装し、キャッシュ機能とオフライン機能を使用してアプリをインストールしたユーザーのコンバージョン率が 55% 上昇しました。

Zalando のウェブチームは、Lighthouse CI を統合することで、パフォーマンスに対する予防的アプローチが可能になることを発見しました。自動ステータス チェックにより、現在の commit をメインブランチと比較し、パフォーマンスの低下を防ぐことができました。

Lowe's Site Speed Team は、自動化されたパフォーマンス テストおよびモニタリング システムを構築することで、pull リクエストをパフォーマンス バジェットに照らしてテストし、本番環境へのパフォーマンスの低下を防止しています。

Vodafone はウェブに関する指標の最適化に重点を置いた A/B テストを実施した結果、LCP が 31% 改善すると、売上が 8% 増加し、見込み顧客の訪問率が 15% 向上し、カートから来店率が 11% 向上しました。

何百万ものサイトについて、ウェブサイトの読み込みパフォーマンスを改善するために Wix に導入された主要な変更のケーススタディです。これにより、PageSpeed Insights と Core Web Vitals の優れたスコアを獲得するための道が明らかになります。

Search Console と Lighthouse を使用してウェブに関する主な指標をモニタリングしたところ、CLS スコアを 0.2 改善できる余地があることが判明しました。その結果、セッションあたりのページビュー数が 15% 増加し、セッション継続時間が 13% 増加し、直帰率が 1.72% 低下しました。

ウェブに関する主な指標に焦点を当てて負荷の放棄率を改善した Agrofy の事例をご覧ください。

Excalidraw は、手描きのような図を簡単にスケッチできる、コラボレーションができるバーチャル ホワイトボードです。Excalidraw プロジェクトでは、Excalidraw の Electron ラッパーだった Excalidraw Desktop のサポートを終了し、excalidraw.com でいつでも行えるウェブ版を優先することにしました。慎重な分析の結果、プログレッシブ ウェブアプリ（PWA）は今後構築したいと判断しました。

また、PWA ユーザーは他のすべてのインストール タイプと比較してアクティブ ユーザー数が 24% 高く、リピート ユーザー数も他のプラットフォームと比べて 31% 高くなっています。

ウェブベースの動画エディタで PWA、WebAssembly、ChromeOS を使用して、パフォーマンスを向上させ、1,200 万人のユーザーに魅力的なエクスペリエンスを提供する仕組み。

JD.ID が全体的なモバイル コンバージョン率（mCVR）を 53%、インストール ユーザーの mCVR を 200%、1 日のアクティブ ユーザーを 26% 向上させた方法

同社のウェブアプリをインストール可能にすると、トラフィック、ユーザー維持率、顧客あたりの売上、およびコンバージョン数が増加しました。

NDTV チームは、PageSpeed Insights、web.dev/measure、WebPageTest などのツールを使用して改善の余地がある領域を分析し、ビジネスで成功を収めるためにウェブに関する主な指標に投資しました。

ビジネスで成功を収めるために、ウェブ パフォーマンス ダッシュボードを作成し、JavaScript、リソース、ホームページを最適化します。

ZDF がオフライン サポート、インストール可能性、ダークモードなどの最新の機能を備えたプログレッシブ ウェブアプリ（PWA）の作成方法をご覧ください。

インドの大手オンライン旅行会社 Goibibo は、PWA と iOS/Android アプリの間で信頼性の高いユーザー エクスペリエンスを構築することで、コンバージョンを 60% 増加させました。

Mercado Libre のフロントエンド アーキテクチャ チームが、TBT をプロキシ指標として使用して FID を最適化するために行った作業の概要。

4 つの速度指標を 0.1 秒改善すると、購入の目標到達プロセス全体にわたって進捗率が向上します。

料理サイト BettyCrocker.com の Wake Lock API 実装の事例紹介。

この事例紹介では、Google が stale-while-revalidate で第三者広告スクリプトのパフォーマンスを最適化することで、どのように主要な広告ビジネス指標が増加したかを説明します。

このケーススタディでは、eBay がウェブとアプリのエクスペリエンスのパフォーマンスを最適化することで、どのように主要なビジネス指標が増加したかを説明します。

あるホスピタリティのスタートアップが、ウェブ コンテンツを利用してユーザー エンゲージメントを劇的に向上させ、ファイルサイズを小さく抑える Android アプリを構築した方法。

AirSHIFT チームは、テーブル仮想化、RUM データ、遅延読み込み、ウェブワーカー、パフォーマンス バジェット、ハッカソンを使用して、React アプリのランタイム パフォーマンスをどのように最適化したか。

このケーススタディでは、Truebil チームがウェブアプリの速度と信頼性を最適化することで、どのようにコンバージョンとエンゲージメントを増やしたかを説明します。

OpenSooq チームがベスト プラクティスを活用して、信頼性が高く魅力的なマーケットプレイスのプログレッシブ ウェブアプリをどのように作成したかをご覧ください。

WebAssembly を使用して Google Earth へのクロスブラウザ アクセスを改善

Google でどんなトピックでも検索すると、関連性が高く有意義な検索結果のページが表示されます。この検索結果ページが、Service Worker という強力なウェブ テクノロジーによって提供されている場合があることを、おそらく気づいていないでしょう。

140 年以上の歴史を持つ日経新聞は、日本で最も権威のあるメディア企業の一つです。日経は、ユーザー エクスペリエンスを向上させ、ウェブでのビジネスを加速させるため、2017 年 11 月にプログレッシブ ウェブアプリのリリースに成功し、この新しいプラットフォームで目覚ましい成果を上げています。

George.com は英国の大手衣料品ブランドで、ASDA Walmart の一部です。サイトをプログレッシブ ウェブアプリ（PWA）にアップグレードしたところ、モバイル コンバージョンが 31% 増加しました。 モバイル ショッピング エクスペリエンスに対する消費者の期待がかつてないほど高まっていることから、Asda George は時代遅れのモバイル ソリューションを刷新して、顧客に提供するサービスを改善する必要があることに気づきました。チームはモバイル

BookMyShow は、月間 5, 000 万人の訪問者を擁するインド最大のチケット販売会社です。同社はプログレッシブ ウェブアプリ（PWA）を使用してモバイルサイトを改善し、速度を最適化し、データの制約を取り除き、コンバージョン数を 80% 増やすことに成功しました。

Ele.me は、中国本土の最大のデリバリー&テイクアウト企業です。同社は、同社のプログレッシブ ウェブアプリ（PWA）をマルチページ アプリとして構築し、モバイルウェブ エクスペリエンスを改善しました。その結果、不安定な接続でもより高速で信頼性が高くなり、顧客に最適なサービスを提供するための運用ニーズに対応できるようになりました。

Dance Tonite は、バンド LCD サウンドシステムとそのファンとの VR コラボレーションで絶えず変化している。このプロジェクトには WebVR が組み込まれており、VR の有無にかかわらず、さまざまなプラットフォームで機能し、デバイスに応じてエクスペリエンスに異なる役割をユーザーに与えます。プロジェクト作成者である Jonathan Puckey、Moniker、Google の Data Arts Team のクリエイティブな意思決定と高度な最適化手法により、単一のコードベースで、3DoF で 60 FPS、6DoF で 90 FPS に近い高品質のパフォーマンスと、すべてのプラットフォームにわたって魅力的なユーザー エクスペリエンスを実現できました。

0h h1 はモバイルでもぴったりの楽しい（中毒性のある）ゲームです。 私は常にウェブ テクノロジーの無限の可能性を愛し、数年前にウェブ テクノロジーを受け入れたことは幸運だと思っています。パソコンとモバイルの両方で、ウェブを実際に進化させる驚くべき機能強化が目に見えているからです。 JavaScriptすごい！オタク向けってこと。Play-Doh と JavaScript のどちらを使用しても、スパゲッティを山のように盛り上げることができるので、文字どおり、より一層魅力的なものとなっています。

ラグジュアリー 化粧品ブランドの Lancôme は、トラフィックとリエンゲージメントの両方を促進するために、プログレッシブ ウェブアプリ（PWA）をリリースしました。プログレッシブ ウェブアプリ（PWA）により、モバイルウェブにアプリのような高速エクスペリエンスを提供

OLX: プログレッシブ ウェブアプリの作成により、エンゲージメントが 250% 増加し、インタラクティブになるまでのページ時間が 23% 短縮

Infobae は Service Worker を活用して、信頼性の低いネットワークで信頼性の高いパフォーマンスを実現しました。同社の最高水準の PWA は、ウェブページの品質測定の自動化ツールである Lighthouse で 93/100 のパフォーマンス スコアを獲得しました。

Mynet は毎月 3,400 万人を超える訪問者をサイトにアクセスし、ニュース、動画、ゲーム、金融、情報、エンターテイメントのコンテンツやサービスを提供しています。コンテンツに Accelerated Mobile Pages（AMP）を使用するプログレッシブ ウェブアプリ（PWA）をリリースしたところ、平均読み込み時間が 4 分の 1 になりました。さらに、ユーザー エンゲージメントも著しく改善し、モバイルサイトの平均滞在時間も 43% 増加しました。 モバイル トラフィックの 85%

Ola はインドの大手タクシー アグリゲータで、10 億人のインド人の移動促進という絶え間ない使命を掲げています。同社は約 60 万人のドライバー パートナー ネットワークを持ち、インドの 100 を超える都市にサービスを展開しています。インドで最も価値の高いスタートアップの 1 つである Ola は、1 日 100 万件以上の乗車を行い、1 日の推定 3 億回のタクシー乗車件数のうち、最大のシェアを奪っています。 ティア 2 とティア 3 の都市（人口 20,000 ～ 99,000

Twitter Lite プログレッシブ ウェブアプリは、最新のウェブ機能とネイティブ機能を組み合わせてより堅牢なエクスペリエンスを提供します。迅速な読み込み、ユーザー エンゲージメント、データ消費の削減という明確な目標があります。

プログレッシブ ウェブアプリのリリース後、MakeMyTrip.com のモバイルウェブでのコンバージョン率は 3 倍になり、ページの読み込み速度は 38% 向上しました。

Jumia の PWA へのトラフィックは同社のネイティブ アプリの 12 倍以上に達し、今も増え続けています。また、直帰率が 50% 低下し、

Voot.com がインドでメディア プログレッシブ ウェブアプリをリリース。実装から数日も経たないうちに、ユーザーあたりのセッション時間は 39%、ユーザーあたりの 1 日の閲覧回数は 15% 増加しました。 Voot は、ネイティブ アプリとモバイルウェブ アプリの両方で利用可能なインド有数のビデオ オンデマンド サービスで、オンラインでは 35,000 時間近くのプレミアム コンテンツを提供しています。これには、Colors や MTV などのネットワーク、Voot Originals

サイトを表示 「サンタを追いかけよう」は、2016 年のホリデー シーズンに向けて、オフラインのプログレッシブ ウェブアプリに急速にアップグレードされました。 既存のシーンデザインのおかげです 「サンタを追いかけよう」 は、Google のホリデー シーズンのお祭りです。 毎年 12 月中は、ゲームや学習体験でホリデー シーズンをお祝いできます。 サンタが一休みしている間に、妖精たちは「サンタを追いかけよう」を ウェブ 上と Google Cloud 上でのオープンソースの Android 。

ラボを見る ウェブサイトの設計者はレスポンシブ デザインという考え方に精通しています。つまり、スマートフォン、タブレット、パソコンなどのさまざまなデバイスに対応し、さまざまな画面解像度やピクセル比に対応するウェブサイトを構築できます。 WebVR では、レスポンシブ デザインの考え方に新たな課題が導入されています。 WebVR エクスペリエンスは、没入感のレベルと入力のレベルという 2 つの指標によって分類できます。これらのレベルは「自由度」（DOF）によって区別されます。6 DOF

バーチャル リアリティのストーリーテリングのためのプラットフォームです。ウェブを含め、VR のあらゆる場所で利用できます。WebVR を活用すると、視聴者はウェブサイトにアクセスしてリンクをクリックしたら、ハイエンドのヘッドマウント ディスプレイを含め、臨場感あふれる VR で「Inside」の映画をすぐに視聴できます。開発チームは開発プロセス中に、この新しい環境ではテキストのレンダリングが難しいことを発見し、よりスムーズな処理を行えるようにシェーダーを使用したサンプルを作成しました。

サイトを表示 Matterport では、WebVR のサポートを追加することで、臨場感あふれるバーチャル リアリティで現実世界の場所を簡単に探索できます。ダウンロードするアプリがない場合、WebVR を使用すると離脱が減り、パートナーは自身のウェブサイトでユーザーを維持できます。 WebVR は、Matterport の戦略における重要な要素 です。VR コンテンツの消費と見つけやすさを追求しています。 Matterport VR を使用すると、インタラクティブ バーチャル

ドキュメンタリーを見る WebVR は、ステレオ レンダリングとリアルタイムのヘッド トラッキングを組み合わせた、ブラウザに組み込まれた API です。これにより、オンラインですばやく簡単に VR コンテンツを楽しむことができます。コンテンツ作成者は WebVR を使用して、オンライン上でさまざまな VR ハードウェアで動作する没入型の VR コンテンツを作成できます。 Bear 71 は、カナダの国立映画委員会（NFB）が制作したインタラクティブなドキュメンタリーです。元々 Flash

固定線は、ジェスチャーを使って Google Earth の衛星画像を探索できる試験運用中の機能です。機械学習、最適化されたアルゴリズム、グラフィック カードの性能を組み合わせることで、バックエンド サーバーを必要とせずに、スマートフォンのウェブブラウザでテストを効率的に実行できます。ここでは、Google の開発プロセスと、最終結果にたどり着いたさまざまなアプローチをご紹介します。

Carnival Cruise Line はプッシュ通知を使って、顧客に合わせてカスタマイズされた魅力的なコミュニケーション サービスを提供しています。 PDF の事例紹介をダウンロード 世界最大級のレジャー旅行会社である Carnival Cruise Line

IBM 傘下の The Weather Company は、毎日平均 400 億件の予測リクエストに対応しており、人々が日常生活を計画し、天候に基づいてより適切な判断を下せるようサポートしています。

PDF の事例紹介をダウンロード Guardian News & Media（GNM）が公開している theguardian.com は、世界最大級の英語圏の質の高いニュース ウェブサイトです。2011 年と 2013 年にそれぞれ米国とオーストラリアのデジタル エディションをリリースして以来、英国以外からのトラフィックが Guardian の全デジタル オーディエンスの 3 分の 2 以上を占めています。英国では、GNM が 1821 年に発行したガーディアン新聞を週 6

PDF の事例紹介をダウンロード 2010 年 4 月に開設された AliExpress は、世界中の消費者をターゲットとするグローバルな小売マーケットプレイスです。このプラットフォームにより、世界中の消費者が競争力のある価格で商品にアクセスし、中国の卸売業者やメーカーから直接購入できます。AliExpress は、Alibaba Group 傘下の企業です。 200 を超える国や地域の買い物客が、AliExpress

PDF の事例紹介をダウンロード Housing.com はインドの有力なスタートアップです。今年は 5, 000 万回のアクセス数を記録し、インド有数のオンライン不動産プラットフォームとなっています。プログレッシブ ウェブアプリ（PWA）である Housing Go では、ブラウザをまたいで総コンバージョン数が 38% 増加しました。また、新しい PWA により、ユーザーの 1 回のセッションあたりの滞在時間が 10% 増加し、ユーザーのリピート率が向上しました。 Housing.com

Service Worker が実社会に与えるパフォーマンスへの影響を測定する

AMP により Washington Post のモバイル検索からのリピーターが 23% 増加 PDF の事例紹介をダウンロード トラフィックの 55% 近くがモバイル デバイスからのもので、ワシントン ポストは、モバイル デバイスで優れた読書エクスペリエンスを提供することが長期的な成功に不可欠であることを認識しています。 The Post が特に力を入れているのは、モバイル

ウェブ コンポーネントを使用して Google I/O 2016 PWA を構築する

United eXtra Electronics、ウェブプッシュ通知を活用して e コマースの売り上げを 100% 増加 PDF の事例紹介をダウンロード eXtra は、サウジアラビアの大手かつ急成長している家電および家電小売業者です。サウジアラビア、オマーン、バーレーンの 40 以上の店舗で 1,200 万人以上の買い物客にサービスを提供しています。 サウジアラビアは世界最大のスマートフォン市場の一つです。毎月 250 万人以上の買い物客が eXtra.com

Jumia はプッシュ通知を活用してカートの放棄を阻止し、コンバージョン数を 9 倍に増やすことに成功しました。 PDF の事例紹介をダウンロード Jumia は、アフリカを代表する e コマース ウェブサイトです。ほとんどの顧客のモバイル デバイスは、トラフィックとユーザー増加の最大のソースでもあります。 Jumia のモバイルサイトでは、4 分の 1 近くのショッピング

BaBe のクロスブラウザ プログレッシブ ウェブアプリは、ネイティブ アプリと同等のパフォーマンスを発揮します。 PDF の事例紹介をダウンロード 2013 年にリリースされた BaBe は、インドネシア最大のニュース アグリゲータ アプリです。すでに 100 万人以上がダウンロードしています。このアプリのみのビジネスは 2016 年初頭に初めてウェブに移行し、同等の機能を備え、ネイティブ アプリとほぼ同じ外観のクロスブラウザ プログレッシブ ウェブアプリを構築しました。

Konga は新しいプログレッシブ ウェブアプリでデータ使用量を 92% 削減 PDF の事例紹介をダウンロード 2012 年に開設したコンガはナイジェリアの大手 e コマース ウェブサイトで、書籍から冷蔵庫、スマートフォンまであらゆる商品を販売しています。モバイル デバイスがトラフィックを増やし、ユーザーを増加させる最大の要因となっています。

5miles の新しいプログレッシブ ウェブアプリで直帰率を 50% 削減し、コンバージョン数を 60% 増加 PDF の事例紹介をダウンロード 「入手した品物を売って欲しいものを購入しよう」がモットーの 5miles です。5miles は家具からダイヤモンドのイヤリングまであらゆるものを買えるモバイル マーケットプレイスです。ダラスに本拠を置くスタートアップであり、北京に研究開発センターを構えています。同社のアプリのダウンロード数は 700 万を超えています。 新規買い物客の半数以上が 5

日本の大手不動産サイトはウェブプッシュ通知を活用して新しい掲載情報を大幅に強化し、通知の開封率は 31% を記録しています。 PDF の事例紹介をダウンロード SUUMO は日本最大の不動産サイトであり、国内の人口の 11% 近くを占めています。SUUMO では毎月 1,400 万人のユニーク ユーザーが新築住宅を検索しています（その多くがスマートフォンを使用）。 オンラインで表示される住宅リストを常に把握しておくために、検索エンジンを利用するユーザーがますます増えています。そのため SUUMO

6 人のアーティストが VR での絵、デザイン、彫刻に招かれました。

Net-A-Porter: Google の Polymer Library を使用して開発時間を短縮 NET-A-PORTER は、Google の Polymer ライブラリを使用して、オンライン プロパティにコンポーネント ベースの設計を実装しています。その結果、開発時間が大幅に短縮され、サイト全体でコードが標準化され、構造化データの使用により SEO のパフォーマンスが向上しました。 PDF の事例紹介をダウンロード 2000 年 6 月に創業した NET-A-PORTER

インド最大の e コマースサイトである Flipkart は、2015 年にアプリ専用戦略を採用し、モバイルサイトを一時的に停止しました。同社は、自社のモバイルアプリと同程度に速く、魅力的なユーザー エクスペリエンスを提供することが難しくなることを認識していました。しかし、Flipkart は開発のアプローチを見直すことにしました。モバイル ウェブを即座に実行し、オフラインで動作し、ユーザーに再アプローチする機能を導入したことで、モバイルウェブに引き戻されました。

Polymer を使用して高 FPS WebGL プロジェクトをセットアップする方法

目標は、一度に 6 万個以上の HTML、6 万個の JavaScript、6 万個以上の CSS をダウンロードしないことです。

Beyond the Rack は、プッシュ通知を活用してモバイルウェブのユーザーに再アプローチし、訪問あたりの収益を 26% 増加させました。

AirHorner はシンプルかつ強力なプログレッシブ ウェブアプリで、Service Worker と Web Audio API を駆使して独自のエアホーンを実現します。オンラインでもオフラインでも、不安定な 2G ネットワークでも、友人や同僚に不快な思いをさせられます。

サービス ワーカー ライブラリを使用して、Google I/O 2015 ウェブアプリを高速かつオフライン ファーストにする方法を学びます。 今年の Google I/O 2015 ウェブアプリ は、Google のデベロッパー リレーションズ チームが、 Instrument の友人が作成したデザインに基づいて作成しました。Instrument は、便利な オーディオ/ビジュアル テスト を作成しました。私たちのチームの使命は、I/O ウェブアプリ（コードネーム

Madeon Adventure Machine は、楽しいドラムマシンである Madeon のニューアルバムを宣伝する効果的なプロモーションです。 Adventure Machine はとてもシンプルなアプリですが、かなりよく機能しています。 ウェブ オーディオと、必要に応じて Web Midi を利用することで（独自のシンセサイザーを接続できます）、ボタンのタップで新しく作成されたループは完全に同期され、特にホーム画面にインストールした場合、モバイルでインターフェースが適切に動作します。

Hummingbird ライブラリ: 人気のアニメのウォッチ トラッカー / 発見サイトである Hummingbird の新しいフロントエンドです。 アニメファン（私のような – スクリーンショットの視聴回数は本当です！）は、以前から視聴内容の記録に夢中になっています。この分野で人気のサイトには AniDB や MyAnimeList がありますが、 Hummingbird はこれらの中で最も見栄えが良いサイトです。 既存の Hummingbird API の上に構築された

Adsy.me を使用すると、モバイル マイクロサイトを非常に迅速かつ簡単に構築できます。 Adsy.me は誰でもモバイル（マイクロ）ウェブサイトを作成できるツールです。実際に開発してみると、すぐに私の信頼を得られました。このツール全体は優れた応答性と直感的さを備えた優れたモバイル ウェブアプリです。 遅延読み込み手法を増やすことで、アプリの読み込み速度が上がります。また、全画面 API と Service Worker をオフラインで使用することでメリットが得られます。

Little Alchem: 大人気の Alchemy をモチーフにした、モバイル対応の楽しい組み合わせゲーム。 Little Alchemy は、ウェブ プラットフォームの最新機能をすべて活用した優れた例です。 ウェブアプリ マニフェスト を使用してインストール時に全画面で起動し、 theme-color を使用して Android と調和します。 初回読み込みは非常に高速で、プリローダがすぐに表示されます。また、AppCache

Hacker News Reader: Hacker News 用に最適化された優れたリーダー。 Hacker News 向けに美しく最適化された読みやすいアプリです。モバイル、タブレット、デスクトップのいずれにおいても適切に表示され、表示されます。これは高速で、モバイルでテストすると、滑らかな遷移が確認できるはずです。Android に統合するためのテーマカラーの使い方が実に優れており、 ウェブアプリ マニフェスト を使用するためインストール可能です。インストールすると、外観と操作性が HN

Merry Pixmas: 3D CSS 変換でクリスマスを楽しもう。 パソコンとモバイルで適切に機能する、クリスマスをテーマにしたデモ。さらに、新しいテーマカラーのサポートと、全画面表示で起動できるホーム画面用のウェブ マニフェストも用意されています。 活用のヒント: スマートフォンを振ると雪が降ります。 これはデモですが、アセットに指定されたキャッシュ ヘッダーと、レンダリング ブロックのない JavaScript を使用することで、認識される読み込み時間が大幅に改善された可能性があります。

Chrome Dev Summit 2014 のウェブサイトは、自社の Paul Lewis が社内で構築した CDS ウェブサイトでは、会議の訪問者向けに優れたモバイルウェブ エクスペリエンスを構築する方法を説明しました。

SVGOMG: SVGO 用の美しいマテリアル レスポンシブ フロントエンド。 Google の Jake Archibald によって作成された SVGOMG は、ウェブ技術で記述された、完全にレスポンシブで高機能なツールのほぼ完璧な例です。美しいマテリアル デザインの外観を備え、ServiceWorker によりアプリの読み込みが速く、オフラインでも利用可能で、モバイルでの遷移がスムーズです。 唯一の欠点は、メイン UI がないため、最初の UX

ウェブフィルタ: 高速で迅速でダーティなカメラフィルタ。 リアルタイムでフィルタを適用できる、ウェブベースの優れたカメラアプリです。画像は自動的にローカル デバイスに保存されます。つまり、通常は選択したクラウド ストレージ プロバイダ（Google+）と同期されるため、簡単に写真を共有できます。 アプリはホーム画面にインストールできますが、少なくとも Android では、アプリが起動するたびにカメラを使用する権限を求められます。これは明らかにデベロッパー側ではなく Chrome/Android

ホビット エクスペリエンスに WebRTC ゲームプレイを追加する ホビットの新作映画「ホビット ～戦いの決着～」の公開に合わせて、昨年の Chrome 試験運用版「 中つ国をめぐる旅 」を拡張し、新しいコンテンツを追加しました。今回の主な目的は、より多くのブラウザとデバイスでコンテンツを表示できるように WebGL の使用を拡大し、Chrome と Firefox の WebRTC 機能を使用できるようにすることです。今年のテストには 3 つの目標がありました。

マルチデバイス ウェブに LEGO® ブロックを導入する パソコン版 Chrome ユーザー向けの楽しい試験運用版である Build with Chrome は、 オーストラリアで最初にリリース されましたが、2014 年に再リリースされ、世界中で利用可能になり、THE LEGO® MOVIE™ とのタイアップが実現し、モバイル

マルチデバイス開発のチュートリアル Chrome 試験運用版「 A Journey Through Middle-earth 」の開発に関する 最初の記事 では、モバイル デバイス向けの WebGL 開発に焦点を当てました。この記事では、残りの HTML5 フロントエンドの作成時に直面した課題、問題、解決策について説明します。 まず、画面サイズとデバイスの機能の観点から、この試験運用版をデスクトップ パソコンとモバイル デバイスの両方で機能するように調整する方法について説明します。

モバイル WebGL で中つ国を再現 これまで、インタラクティブでウェブベースのマルチメディアを多用したエクスペリエンスをモバイルとタブレットに提供することは、課題でした。主な制約は、パフォーマンス、API の可用性、デバイス上の HTML5 音声の制限、インライン動画のシームレスな再生の欠如です。 今年の初めに、Google とワーナー ブラザースの仲間と協力して、新しいホビット映画 ホビット 竜のゆくえ のモバイル ファースト ウェブ

Racer は、 Active Theory が開発したウェブベースのモバイル Chrome テストです。最大 5 人の友だちがスマートフォンやタブレットを接続して、すべての画面でレースを楽しめます。Google Creative Lab のコンセプト、デザイン、プロトタイプと Plan8 のサウンドを基に、I/O 2013 でのリリースに向けて 8 週間にわたってビルドを反復しました。ゲームがリリースされて数週間が経過し、デベロッパー

Racer は、マルチプレーヤー、マルチデバイスの Chrome 試験運用版です。画面をまたいでプレイするレトロなスタイルのスロットカー ゲーム。スマートフォンまたはタブレット（Android または iOS）。誰でも参加できます。アプリはありません。ダウンロードは不要です。モバイルウェブのみ。 Plan8 は、 14islands の協力を得て、ジョルジオ モロダーのオリジナル楽曲に基づくダイナミックな音楽とサウンドを制作しました。Racer

World Wide Maze は、スマートフォンを使って、ウェブサイトから作成された 3D 迷路を転がるボールを操作してゴールを目指すゲームです。 このゲームでは、HTML5 の機能が幅広く使用されています。たとえば、 DeviceOrientation イベントはスマートフォンから傾斜データを取得し、WebSocket 経由で PC に送信します。PC では、 WebGL と Web Workers によって構築された 3D 空間をプレイヤーが移動します。

Roll It は、スマートフォンやパソコンのブラウザのみを使用して、定番のボードゲームを再現した Chrome 試験運用版 です。スマートフォンのブラウザでは、手首をひねってボールを狙って転がすことができ、パソコンのブラウザでは、WebGL と Canvas を使用して Roll It のレーンにリアルタイムのグラフィックをレンダリングします。2 つのデバイスは WebSocket

CSS とブラウザ レイアウトのツールを駆使することで、ウェブ コンテンツの魅力的な可視化を実現できます。CSS フィルタ、WebGL、HTML5 動画、SVG、キャンバスなどのウェブ機能と、CSS リージョン、CSS シェイプ、CSS カスタム フィルタなどの進化する未来の技術を使用すると、クリエイティブな表現の幅が大幅に広がります。Adobe は、レイアウトとデザインに情熱を傾けるコンテンツ

カンファレンスの登録が開始される前に、Google I/O 2013 ウェブサイトでデベロッパーの関心を高めるために、タップ操作、生成音声、発見の喜びに焦点を当てた一連のモバイル ファーストのテストとゲームを開発しました。コードの可能性と遊びの力にインスパイアされたこのインタラクティブな体験は、新しい I/O ロゴをタップすると「I」と「O」のシンプルな音声から始まります。 Google は、I と O のアニメーションを、HTML5

2010 年の夏に、Sand Trap というゲームを作成しました。このゲームは、スマートフォン向けの HTML5 ゲームの大会に出品しました。しかし、ほとんどのスマートフォンでは、ゲームの一部しか表示されないか、ゲームが小さすぎてまったくプレイできませんでした。そこで、どんな解像度にも対応できるよう、ゲームをスムーズに調整できるようにしました。少しプログラムを書き換え、この記事で説明したアイデアを取り入れることで、デスクトップ ブラウザでもモバイル

「オズの魔法使い」 は、ディズニーがウェブに導入した新しい Google Chrome 試験運用版です。インタラクティブな旅で、カンザスのサーカスを巡り、大嵐に巻き込まれ、オズの国にたどり着きます。 映画の豊かさとブラウザの技術的な能力を組み合わせて、ユーザーが強いつながりを形成できる、楽しく没入感のあるエクスペリエンスを実現することが目標でした。

UI を魅力的にした方法 JAM with Chrome は、Google が作成したウェブベースの音楽プロジェクトです。JAM with Chrome では、世界中のユーザーがバンドを結成し、ブラウザ内でリアルタイムで JAM できます。 DinahMoe は Chrome の Web Audio API で可能な範囲を広げ、 Tool of North America のチームは、コンピュータを楽器のようにストローミング、ドラム、演奏するためのインターフェースを作成しました。 Google

こんにちは。Google のデータ アート チームに所属している Michael Chang と申します。先日、近くの星を可視化する Chrome Experiments 「 100,000 Stars 」を終了しました。このプロジェクトは THREE.js と CSS3D で作成されています。このケーススタディでは、検出プロセスの概要、プログラミング手法のいくつかを説明し、最後に今後の改善点について説明します。 ここで説明するトピックは非常に幅広く、THREE.js

音声をロックに仕上げる方法 JAM with Chrome は、Google が作成したウェブベースの音楽プロジェクトです。JAM with Chrome では、世界中のユーザーがバンドを結成し、ブラウザ内でリアルタイムでジャムセッションを行うことができます。 DinahMoe は、このプロジェクトに参加できたことを大変光栄に思います。私たちの役割は、アプリの音楽を制作し、音楽コンポーネントを設計して開発することでした。開発は主に 3 つの領域で行われました。MIDI 再生、ソフトウェア

Movi.Kanti.Revo は、Cirque du Soleil が制作し、Subatomic Systems が開発した新しい Chrome センサリー エクスペリエンスです。最新のウェブ技術を駆使して、Cirque du Soleil の驚異をウェブに届けます。 このテストは HTML5 のみを使用して作成され、環境はマークアップと CSS で完全に構築されています。ステージ上のセットピースのように、 div 、 img 、小さな video などの要素は、CSS を使用して 3D

昨年の夏、私は SONAR という商用 WebGL ゲームのテクニカル リードとして働きました。このプロジェクトの完了には 3 か月ほどかかり、JavaScript で完全にゼロから作成しました。SONAR の開発中、テストされていない新しい HTML5 の領域で、さまざまな問題に対する革新的なソリューションを見つける必要がありました。特に、一見簡単な問題の解決が必要でした。プレイヤーがゲームを開始したときに、70 MB を超えるゲームデータをダウンロードしてキャッシュに保存する方法です。

Technitone.com は、WebGL、Canvas、Web ソケット、CSS3、JavaScript、Flash、Chrome の新しい Web Audio API を融合させたものです。 この記事では、制作のあらゆる側面（計画、サーバー、音声、ビジュアル、インタラクティブなデザインに活用するワークフローなど）について説明します。ほとんどのセクションには、コード スニペット、デモ、ダウンロードが含まれています。記事の最後に、これらをすべて 1 つの ZIP

昨年末に iOS と Android で Bouncy Mouse を公開した後、いくつかの重要な教訓を得ました。その中でも、確立された市場に参入するのは難しいという点が重要でした。完全に飽和状態の iPhone 市場では、注目を集めるのは非常に困難でした。Android マーケットプレイスでは、競合がそれほど激しくないため、進展はしやすくなりましたが、それでも簡単ではありませんでした。こうした経験から、Chrome

iPad 版 MathBoard は、 PalaSoftware のアプリで、洗練されたアプリです。繊細で自然なアニメーションが多数あり、独自のリアルな外観と操作感があります。目標は、iPad アプリケーションを HTML5 に忠実に移植することでした。 N2N-Apps は、HTML5 テクノロジーによる次世代のウェブおよびモバイル アプリケーションの構築に重点を置くソフトウェア開発会社です。同社は 2010 年に Jeremy Chone によって設立されました。Jeremy は

Google ホームページは魅力的なコーディング環境です。特にスピードとレイテンシを重視すること、あらゆる種類のブラウザに対応し、さまざまな状況下で機能しなければならないことなど、多くの難しい制限が伴います。驚きと喜びです。 Google Doodle は、Google のロゴと入れ替わる特別なイラストです。筆者とペンやブラシとの関係には長きにわたって制約の独特な特徴がありましたが、インタラクティブなコンテンツにも貢献しています。 私がコーディングしたすべてのインタラクティブな Doodle（

HTML5 では、 WebSockets と EventSource を使用して、サーバーとのリアルタイム通信を行うウェブアプリを構築できます。 Stream Congress （ Chrome ウェブストア で入手可能）は、米国議会の活動に関する最新情報をライブ配信します。下院と上院の両方からの議場情報、関連するニュース速報、下院議員のツイート、その他のソーシャル

Wordico クロスワード ゲームを Flash から HTML5 に移行した際、まず最初に、ブラウザでリッチなユーザー エクスペリエンスを実現するためにこれまで学んできたことをすべて忘れました。Flash は、ベクター描画からポリゴンのヒット検出、XML 解析まで、アプリケーション開発のあらゆる側面に対応する単一の包括的な API を提供していましたが、HTML5 は、ブラウザのサポートが異なるさまざまな仕様を提供していました。また、ドキュメント固有の言語である HTML

2010 年 6 月、地元の出版物「Zine」である Boing Boing が ゲーム開発コンテスト を開催していることが判明しました。これは、JavaScript と <canvas> で簡単なゲームをすばやく作るための絶好の機会だと考え、作業を開始しました。コンテスト後も、まだ多くのアイデアがあり、始めたことをやり遂げたいと思いました。以下は、その結果として生まれたゲーム「 Onslaught!Arena にアクセスします。 チップチューン をベースにしたゲームを開発するという

2010 年、 F-i.com と Google Chrome チームは、HTML5 ベースの教育用ウェブアプリ「ブラウザとウェブについて学んだ 20 のこと」（ www.20thingsilearned.com ）を共同で開発しました。このプロジェクトの背後にある主なアイデアの 1 つは、 書籍のコンテキスト

昨年（2010 年）の春、HTML5 と関連テクノロジーのサポートが急速に拡大していることに興味を持ちました。当時、友人と私は 2 週間のゲーム開発コンペティションで互いに競い合い、プログラミングと開発スキルを磨き、お互いに提案し合ったゲームのアイデアを実現していました。そのため、私は自然に HTML5 要素をコンペティションのエントリに組み込み始め、その仕組みをより深く理解し、以前の HTML 仕様ではほぼ不可能だったことを実現できるようになりました。 HTML5

2010 年 8 月 7 日、deviantART は 10 周年を迎えました。誕生日を記念して、deviantART muro という HTML5 描画ツールをリリースしました。このツールは、スタンドアロンのウェブ アプリケーションとして使用できるほか、フォーラムのコメントに写真を追加するための軽量な描画ツールとしても使用できます。 deviantART コミュニティはこの新しい描画ツールを熱烈に歓迎し、ツール自体は、かなり規模の大きいウェブ

ドラッグ＆ドロップ（DnD）は HTML 5 の多くの優れた機能の 1 つで、Firefox 3.5、Safari、Chrome、IE でサポートされています。Google は最近、Google Chrome ユーザーがブラウザからデスクトップにファイルをドラッグ＆ドロップできる 新機能 をリリースしました。これは非常に便利な機能ですが、Ryan Seddon がこの新機能のリバース エンジニアリングの 発見 に関する記事を投稿するまで、あまり知られていませんでした。 Box.net

Using the Media Capabilities API lets you better target video codecs, frame rates, and resolutions based on the capabilities of your users' devices.

Forbes is re-defining modern web development with Progressive Web App technology.

There's a new way to deliver amazing user experiences on the web. Travel company Wego has built a successful AMP based Progressive Web App (PWA).

Alibaba.com is the world’s largest online business-to-business (B2B) trading platform, serving 200+ countries and regions. After upgrading their site to a Progressive Web App (PWA), they saw a 76 percent increase in total conversions across browsers.

AliExpress increases conversion rate for new users by 104% with new Progressive Web App Download PDF Case study "Smarter shopping, better living!" is the motto of AliExpress, a website where shoppers can buy everything from baby clothes to