![](https://web.dev/static/images/case-studies-header.png?authuser=8&%3Bhl=ja&hl=ja)
事例紹介
実際のユーザーデータを使用してベースラインを行動につながるものにする
RUMvision がベースライン情報を RUM データに組み込んだ方法。
CSS コンテナ クエリのパワーを解き放つ: Netflix チームから学ぶ
このケーススタディでは、Netflix でコンテナ クエリを採用するメリットについて説明します。
東急がパスキーでログインのスピードを 12 倍にした方法
日本の鉄道会社である東急が、パスキーによるログインを 12 倍高速化し、毎日何千人もの乗客をサポートしている方法をご覧ください。
Google スプレッドシートが計算ワーカーを JavaScript から WasmGC に移植した理由
Google スプレッドシートでの計算は当初、サーバーで行われ、次に JavaScript のクライアントで行われ、WebAssembly ガベージ コレクションではクライアントで行われていました。このケーススタディでは、その方法と理由について説明します。
よりスムーズに、より細かい管理: Google Meet で音声と動画の権限が改善された仕組み
このケーススタディでは、Google Meet チームが権限をどのように改善したか、それがユーザーに及ぼした影響について説明します。向上します
BILIBILI、MediaPipe のオンデバイス ウェブ AI ソリューションを利用して動画ストリームの UX を改善し、セッション継続時間を 30% 拡大
ウェブによって臨場感あふれる 3D エクスペリエンスを可能にし、買い物客が物理的な商品を理解して探索できるようにした方法をご覧ください。
Disney+ Hotstar で INP を 61% 削減し、リビングルーム向けデバイスでの週単位のカード視聴回数を 100% 増加させた方法
スマートテレビとセットトップ ボックスのデバイス向けアプリである Disney Hotstar が INP を削減する取り組みを通じて、視聴者のエンゲージメントを大幅に高めた事例をご紹介します。
Google ハードウェアを使用したインタラクティブな 3D ウェブ アプリケーション: 次世代のプロダクト学習体験
ウェブによって臨場感あふれる 3D エクスペリエンスを可能にし、買い物客が物理的な商品を理解して探索できるようにした方法をご覧ください。
PubTech の同意管理プラットフォームが、顧客ウェブサイトの INP を最大 64% 削減し、広告の視認性を最大 1.5% 改善した方法
PubTech の同意管理プラットフォームが、顧客ウェブサイトの INP を最大 64% 削減し、広告の視認性を最大 1.5% 改善した方法
どこでもグッドノート
過去 2 年間にわたり、Goodnotes のエンジニアリング チームは、成功を収めた iPad のメモ作成アプリを他のプラットフォームでも利用できるようにするプロジェクトに取り組んできました。このケーススタディでは、2022 年の iPad アプリが、ウェブ テクノロジーを活用したウェブ、ChromeOS、Android、Windows に導入され、WebAssembly ではチームが 10 年以上にわたって取り組んできた同じ Swift コードを再利用した事例を紹介します。
コンテンツ レコメンデーション プロバイダである Taboola は、LoAF を使用して、パブリッシャー パートナー ウェブサイトの INP を最大 36% 改善しました。
コンテンツ レコメンデーション プロバイダである Taboola は、LoAF を使用して、パブリッシャー パートナー ウェブサイトの INP を最大 36% 改善しました。
CapCut: WebAssembly と WebCodecs を使用して完全に機能するウェブアプリを構築することで、オーガニック トラフィックを 83% 増加
モバイルで利用できる最も人気のある動画編集アプリの一つが、完全に機能するウェブ バージョンをどのように作成したか。
イラストレーターのためのウェブの力: ウェブ技術を活用した pixiv の描画アプリ
pixiv は、イラストレーターやイラスト愛好家がコンテンツを通じて相互にコミュニケーションを取るためのオンライン コミュニティ サービスです。ユーザーは独自のイラストを投稿できます。世界中に 8,400 万人以上のユーザー がおり、2023 年 5 月時点で 1 億 2,000 万点 を超えるアート作品が投稿されています。 pixiv Sketch は、pixiv
Tokopedia: ML を使用して販売者のウェブアプリを改善し、運用コストを削減した方法
この投稿では、Mitra Tokopedia が ML を使用して販売者のウェブアプリを改善し、運用コストを削減した方法について説明します。
Trendyol が INP を 50% 削減した結果、クリック率が 1% 上昇した方法
このケーススタディでは、PageSpeed Insights(PSI)、Chrome DevTools、scheduler.yield API などの Google ツールを活用して、Trendyol で使用される React の INP をデバッグおよび改善するワークフローをステップごとに説明します。
Kiwix PWA でインターネットからギガバイト単位のデータをオフライン保存する方法
この活用事例では、非営利団体である Kiwix が、プログレッシブ ウェブアプリ テクノロジーと File System Access API を使用して、ユーザーがオフライン用に大容量のインターネット アーカイブをダウンロードして保存できるようにしている事例を紹介します。
Yahoo!JAPAN、パスキーの導入率を 11% に増やし、SMS OTP の費用を削減
Yahoo!JAPAN は、パスキーの採用とユーザー エクスペリエンスの改善に向けた取り組みを進めています。
プリフェッチによって Terra の広告のクリック率が 30% 向上し、Largest Contentful Paint が高速化された仕組み。
プリフェッチは、近い将来必要になると思われるリソース(またはページ全体)をダウンロードして、ページの読み込みを高速化する手法です。調査によると、読み込み時間が速いとコンバージョン率が高くなり、ユーザー エクスペリエンスも向上することがわかっています。
バックフォワード キャッシュが Yahoo!JAPAN ニュース、モバイルでの収益が 9% 増加
Yahoo! 日本有数のニュース プラットフォームであるジャパンニュースは、bfcache のヒット率を高めるために一丸となって取り組み、その結果、ユーザー エクスペリエンスとビジネスが大幅に改善しました。具体的には、同社が実施した A/B テストの結果、bfcache を使用するページで広告収益が 9% 増加したことがわかりました。
INP の修正に関する Economic Times のクエスト
TBT を 30 倍削減し、Next.js に移行したことで、The Ecomonic Times は INP を約 4 倍削減できました。その結果、直帰率が 50% 減少し、ページビューが 43% 増加しました。
redBus、ウェブサイトの Interaction to Next Paint(INP)を改善して売上を 7% 伸ばした方法
INP の最適化により redBus の売上は約 7% 増加
ブラウザ用 3D の驚くべき機能にスポットライトを当て、ゲームユーザーとデベロッパーの双方を魅了する Slow Roads
手続きによって生成される無限のシーンで WebGL が秘める可能性を体験できるカジュアル ドライビング ゲーム。 Slow Roads は、手続きによって無限に生成されるシーンに重点を置いたカジュアルなドライビング ゲームで、すべてが WebGL アプリケーション
より快適なウェブを実現する: 高速な YouTube
これは、YouTube ウェブの改善に関する新しいシリーズのパート 1 です。
楽天 24 がウェブに関する主な指標に投資したことで、訪問者あたりの収益が 53.37%、コンバージョン率が 33.13% 増加した理由
また、楽天 24 は、実際のユーザーのウェブに関する指標を測定することで、優れた Largest Contentful Paint(LCP)によってコンバージョン率が 61.13% 向上することを発見しました。
GoDaddy のウェブサイト + マーケティング サービスでは、顧客のウェブに関する主な指標が 75% 向上した
GoDaddy が実装した変更の事例。何百万ものサイトのパフォーマンスを向上させ、PageSpeed Insights と Core Web Vitals の優れたスコアを達成しました。
高級品小売業者の Farfetch、ウェブに関する主な指標の改善によりコンバージョン率が向上
高級小売店の Farfetch は、ウェブに関する主な指標の改善に投資したことが、どのようにビジネス成果の向上につながったかについて解説します。
Yahoo! JAPAN のパスワード不要の認証で問い合わせが 25% 減少し、ログイン時間が 2.6 倍に
Yahoo! JAPAN はパスワードレスの ID システムを実現しました。そのアプローチと取り組みの結果をご覧ください。
ウェブに関する主な指標を最適化してロイヤリティとエンゲージメントを高めた RebelMouse の事例
ウェブに関する主な指標に対する高いパフォーマンス スコアの全体的な影響とメリットを測定した事例紹介。
WorkBox により Adobe Experience Manager で最新のウェブ環境を構築
プログレッシブ ウェブアプリは、最新のウェブの能力を活かしています。Adobe は Workbox を使用して、そうした機能を Adobe Experience Manager に導入しています。
MishiPay の PWA により、トランザクションが 10 倍に増加し、キューイングを 2 年半削減
トランザクションを 10 倍に増やし、2 年半のキューイングを削減した MishiPay の PWA についてご紹介します。
ウェブに関する主な指標の基準を突破し、直帰率を全体で 43% 向上させた Economic Times の事例
Economic Times のウェブサイトでウェブに関する主な指標を最適化すると、ユーザー エクスペリエンスが大幅に向上し、ウェブサイト全体の直帰率が大幅に減少しました。
ダークモードでユーザー エンゲージメントを改善した Terra
この記事では、「ダークモード」コホートのサイズを特定し、カスタムダークモードを適用するまでの Terra のジャーニーを分析し、最後にこの実装が主要な KPI に及ぼす影響を測定します。
QuintoAndar の事例: ページのパフォーマンスを向上させてコンバージョン率とセッションあたりの閲覧ページ数を改善
ウェブに関する主な指標の最適化と Next.js への移行に重点を置いたプロジェクトの結果、コンバージョン率が 5% 向上し、セッションあたりの閲覧ページ数が 87% 増加しました。
Kapwing: ウェブ向けの高度な動画編集
Kapwing などの企業は、強力な API(IndexedDB や WebCodecs など)とパフォーマンス ツールを使用して、こうした動画コンテンツをすべてウェブ上で作成できるようにしています。
SVGcode: ラスター画像を SVG ベクター グラフィックに変換する PWA
カラーまたはモノクロのビットマップ画像(PNG、JPG、JPEG、WEBP、AVIF、GIF など)をカラーまたはモノクロのベクター画像(SVG)に変換します。
Mail.ru のホームページで Core Web Vitals を改善した結果、コンバージョン率が平均 10% 向上
Mail.ru のホームページで Core Web Vitals を数か月かけて改善した結果、Cumulative Layout Shift(CLS)の 75 パーセンタイルが 60% 増加し、平均セッション時間が 2.7%、コア セクションのコンバージョン率が 10% 以上増加しました。
Largest Contentful Paint を測定、最適化することで、直帰率とコンバージョン率を改善したルノーの事例
この投稿では、ルノーとそのグローバル データ パートナーである fifty-five が、ウェブに関する主な指標の測定と最適化にどのように取り組んだかをご紹介します。チームはランディング ページへの 1,000 万件のアクセスからのデータを分析し、Largest Contentful Paint とコンバージョンの間に強い相関関係があることを発見し、最適化の取り組みを強化しました。これらのデータポイントを確認し、最適化に向けてチームがどのように整理しているかを把握します。
Swappie、ウェブに関する主な指標に着目することでモバイルの収益を 42% 増加
この事例紹介では、Swappie チームが、ウェブに関する主な指標に向けてウェブアプリを最適化することで、どのようにコンバージョン数と収益を増やしたかを説明します。
Core Web Vitals のビジネスへの影響
この記事では、ユーザーやビジネスに良い影響を及ぼしている企業の例を挙げて、ウェブに関する主な指標と主要なビジネス指標の相関関係について説明します。
ウェブに関する主な指標に取り組み、Netzwelt の広告収益が 18% 増加した方法
ドイツのニュース メディアである Netzwelt が、ウェブに関する主な指標を最適化してユーザー エクスペリエンスと広告収入を改善した方法をご覧ください。
Blibli の PWA により、ユーザーあたりの収益が従来のモバイルサイトの 10 倍に増加
Blibli では、直帰率を 42% 削減し、モバイル コンバージョン率を 8 倍向上させ、セッションあたりの閲覧ページ数を 2.5 倍に増やすことに成功しました。
Telegraph Media Group の Cumulative Layout Shift の改善
英国の大手ニュースサイトである Telegraph は、数か月で、75 パーセンタイルの CLS を 0.25 から 0.1 に 250% 改善しました。
オレンジ: 新しい PWA により、モバイルでのコンバージョン率が 52% 向上
また、平均読み込み時間は以前のサイトより 30% 速くなり、直帰率が 12%、セッション深度が 18% 向上しました。
Mainline Menswear の事例: PWA を導入した結果、コンバージョン率が 55% アップ
Mainline Menswear は、プログレッシブ ウェブアプリ(PWA)を実装し、キャッシュ機能とオフライン機能を使用してアプリをインストールしたユーザーのコンバージョン率が 55% 上昇しました。
Zalando が Lighthouse CI を使用してパフォーマンスのフィードバック時間を 1 日から 15 分に短縮した方法
Zalando のウェブチームは、Lighthouse CI を統合することで、パフォーマンスに対する予防的アプローチが可能になることを発見しました。自動ステータス チェックにより、現在の commit をメインブランチと比較し、パフォーマンスの低下を防ぐことができました。
Lowe's のウェブサイトは、パフォーマンスが最速の e コマースサイトの 1 つです
Lowe's Site Speed Team は、自動化されたパフォーマンス テストおよびモニタリング システムを構築することで、pull リクエストをパフォーマンス バジェットに照らしてテストし、本番環境へのパフォーマンスの低下を防止しています。
Vodafone: LCP を 31% 改善し、売上を 8% 増加
Vodafone はウェブに関する指標の最適化に重点を置いた A/B テストを実施した結果、LCP が 31% 改善すると、売上が 8% 増加し、見込み顧客の訪問率が 15% 向上し、カートから来店率が 11% 向上しました。
Wix がインフラストラクチャを進化させることでウェブサイトのパフォーマンスを向上させた方法
何百万ものサイトについて、ウェブサイトの読み込みパフォーマンスを改善するために Wix に導入された主要な変更のケーススタディです。これにより、PageSpeed Insights と Core Web Vitals の優れたスコアを獲得するための道が明らかになります。
CLS の最適化によって Yahoo! トラベルが日本ニュースのセッションあたりのページビュー数が 15% 増加
Search Console と Lighthouse を使用してウェブに関する主な指標をモニタリングしたところ、CLS スコアを 0.2 改善できる余地があることが判明しました。その結果、セッションあたりのページビュー数が 15% 増加し、セッション継続時間が 13% 増加し、直帰率が 1.72% 低下しました。
Agrofy: LCP の 70% の改善は、負荷の放棄が 76% 減少する相関関係にある
ウェブに関する主な指標に焦点を当てて負荷の放棄率を改善した Agrofy の事例をご覧ください。
Excalidraw Electron のサポート終了とウェブ版への移行
Excalidraw は、手描きのような図を簡単にスケッチできる、コラボレーションができるバーチャル ホワイトボードです。Excalidraw プロジェクトでは、Excalidraw の Electron ラッパーだった Excalidraw Desktop のサポートを終了し、excalidraw.com でいつでも行えるウェブ版を優先することにしました。慎重な分析の結果、プログレッシブ ウェブアプリ(PWA)は今後構築したいと判断しました。
PWA ユーザーが Gravit Designer PRO を購入する可能性は 2.5 倍
また、PWA ユーザーは他のすべてのインストール タイプと比較してアクティブ ユーザー数が 24% 高く、リピート ユーザー数も他のプラットフォームと比べて 31% 高くなっています。
Clipchamp の動画エディタ PWA のインストール数は月間 97% 増加
ウェブベースの動画エディタで PWA、WebAssembly、ChromeOS を使用して、パフォーマンスを向上させ、1,200 万人のユーザーに魅力的なエクスペリエンスを提供する仕組み。
JD.ID、キャッシュ戦略、インストール、プッシュ通知を活用してモバイル コンバージョン率を 53% 向上
JD.ID が全体的なモバイル コンバージョン率(mCVR)を 53%、インストール ユーザーの mCVR を 200%、1 日のアクティブ ユーザーを 26% 向上させた方法
楽天 24 は PWA への投資によりユーザー維持率を 450% 向上
同社のウェブアプリをインストール可能にすると、トラフィック、ユーザー維持率、顧客あたりの売上、およびコンバージョン数が増加しました。
NDTV: Core Web Vitals の最適化により LCP を 55% 改善
NDTV チームは、PageSpeed Insights、web.dev/measure、WebPageTest などのツールを使用して改善の余地がある領域を分析し、ビジネスで成功を収めるためにウェブに関する主な指標に投資しました。
ウェブ パフォーマンスに重点を置くことで、Tokopedia のクリック率が 35% 向上した方法
ビジネスで成功を収めるために、ウェブ パフォーマンス ダッシュボードを作成し、JavaScript、リソース、ホームページを最適化します。
ZDF がオフライン モードとダークモードの動画 PWA を作成した方法
ZDF がオフライン サポート、インストール可能性、ダークモードなどの最新の機能を備えたプログレッシブ ウェブアプリ(PWA)の作成方法をご覧ください。
Goibibo の PWA によりコンバージョン数が 60% 増加した方法
インドの大手オンライン旅行会社 Goibibo は、PWA と iOS/Android アプリの間で信頼性の高いユーザー エクスペリエンスを構築することで、コンバージョンを 60% 増加させました。
Mercado Libre がウェブに関する指標に合わせて最適化した方法(TBT/FID)
Mercado Libre のフロントエンド アーキテクチャ チームが、TBT をプロキシ指標として使用して FID を最適化するために行った作業の概要。
ミリ秒の差が数百万ドル
4 つの速度指標を 0.1 秒改善すると、購入の目標到達プロセス全体にわたって進捗率が向上します。
Wake Lock API の事例紹介: BettyCrocker.com での購入意向インジケーターが 300% 増加
料理サイト BettyCrocker.com の Wake Lock API 実装の事例紹介。
Google が stale-while-revalidate で広告パフォーマンスを向上させた方法
この事例紹介では、Google が stale-while-revalidate で第三者広告スクリプトのパフォーマンスを最適化することで、どのように主要な広告ビジネス指標が増加したかを説明します。
eBay.com でスピード商品を購入
このケーススタディでは、eBay がウェブとアプリのエクスペリエンスのパフォーマンスを最適化することで、どのように主要なビジネス指標が増加したかを説明します。
OYO Lite: 優れたウェブアプリと Android アプリを備えた TWA
あるホスピタリティのスタートアップが、ウェブ コンテンツを利用してユーザー エンゲージメントを劇的に向上させ、ファイルサイズを小さく抑える Android アプリを構築した方法。
AirSHIFT が React アプリのランタイム パフォーマンスを改善した 5 つの方法
AirSHIFT チームは、テーブル仮想化、RUM データ、遅延読み込み、ウェブワーカー、パフォーマンス バジェット、ハッカソンを使用して、React アプリのランタイム パフォーマンスをどのように最適化したか。
Truebil がウェブを成長のチャネルにした方法
このケーススタディでは、Truebil チームがウェブアプリの速度と信頼性を最適化することで、どのようにコンバージョンとエンゲージメントを増やしたかを説明します。
ウェブへの投資でエンゲージメントを高めた OpenSooq
OpenSooq チームがベスト プラクティスを活用して、信頼性が高く魅力的なマーケットプレイスのプログレッシブ ウェブアプリをどのように作成したかをご覧ください。
Google Earth をウェブに展開する方法
WebAssembly を使用して Google Earth へのクロスブラウザ アクセスを改善
Service Worker を Google 検索に対応
Google でどんなトピックでも検索すると、関連性が高く有意義な検索結果のページが表示されます。この検索結果ページが、Service Worker という強力なウェブ テクノロジーによって提供されている場合があることを、おそらく気づいていないでしょう。
日経がマルチページ PWA で新たな品質とパフォーマンスを実現
140 年以上の歴史を持つ日経新聞は、日本で最も権威のあるメディア企業の一つです。日経は、ユーザー エクスペリエンスを向上させ、ウェブでのビジネスを加速させるため、2017 年 11 月にプログレッシブ ウェブアプリのリリースに成功し、この新しいプラットフォームで目覚ましい成果を上げています。
George.com、新しいプログレッシブ ウェブアプリでモバイル カスタマー エクスペリエンスを強化
George.com は英国の大手衣料品ブランドで、ASDA Walmart の一部です。サイトをプログレッシブ ウェブアプリ(PWA)にアップグレードしたところ、モバイル コンバージョンが 31% 増加しました。 モバイル ショッピング エクスペリエンスに対する消費者の期待がかつてないほど高まっていることから、Asda George は時代遅れのモバイル ソリューションを刷新して、顧客に提供するサービスを改善する必要があることに気づきました。チームはモバイル
BookMyShow の新しいプログレッシブ ウェブアプリでコンバージョン数が 80% 増加
BookMyShow は、月間 5, 000 万人の訪問者を擁するインド最大のチケット販売会社です。同社はプログレッシブ ウェブアプリ(PWA)を使用してモバイルサイトを改善し、速度を最適化し、データの制約を取り除き、コンバージョン数を 80% 増やすことに成功しました。
Ele.me、複数ページのプログレッシブ ウェブアプリで読み込み時間を改善
Ele.me は、中国本土の最大のデリバリー&テイクアウト企業です。同社は、同社のプログレッシブ ウェブアプリ(PWA)をマルチページ アプリとして構築し、モバイルウェブ エクスペリエンスを改善しました。その結果、不安定な接続でもより高速で信頼性が高くなり、顧客に最適なサービスを提供するための運用ニーズに対応できるようになりました。
WebVR でダンストナイト
Dance Tonite は、バンド LCD サウンドシステムとそのファンとの VR コラボレーションで絶えず変化している。このプロジェクトには WebVR が組み込まれており、VR の有無にかかわらず、さまざまなプラットフォームで機能し、デバイスに応じてエクスペリエンスに異なる役割をユーザーに与えます。プロジェクト作成者である Jonathan Puckey、Moniker、Google の Data Arts Team のクリエイティブな意思決定と高度な最適化手法により、単一のコードベースで、3DoF で 60 FPS、6DoF で 90 FPS に近い高品質のパフォーマンスと、すべてのプラットフォームにわたって魅力的なユーザー エクスペリエンスを実現できました。
0 時間 1 日
0h h1 はモバイルでもぴったりの楽しい(中毒性のある)ゲームです。 私は常にウェブ テクノロジーの無限の可能性を愛し、数年前にウェブ テクノロジーを受け入れたことは幸運だと思っています。パソコンとモバイルの両方で、ウェブを実際に進化させる驚くべき機能強化が目に見えているからです。 JavaScriptすごい!オタク向けってこと。Play-Doh と JavaScript のどちらを使用しても、スパゲッティを山のように盛り上げることができるので、文字どおり、より一層魅力的なものとなっています。
Lancôme、モバイルサイトを PWA として再構築したことで、コンバージョン数が 17% 増加
ラグジュアリー 化粧品ブランドの Lancôme は、トラフィックとリエンゲージメントの両方を促進するために、プログレッシブ ウェブアプリ(PWA)をリリースしました。プログレッシブ ウェブアプリ(PWA)により、モバイルウェブにアプリのような高速エクスペリエンスを提供
OLX、プログレッシブ ウェブアプリでモバイルウェブでの再エンゲージメントを 250% 増加
OLX: プログレッシブ ウェブアプリの作成により、エンゲージメントが 250% 増加し、インタラクティブになるまでのページ時間が 23% 短縮
Infobae: プログレッシブ ウェブアプリを利用してモバイルサイトの利用時間を 2 倍以上に増加
Infobae は Service Worker を活用して、信頼性の低いネットワークで信頼性の高いパフォーマンスを実現しました。同社の最高水準の PWA は、ウェブページの品質測定の自動化ツールである Lighthouse で 93/100 のパフォーマンス スコアを獲得しました。
Mynet の事例: AMP ベースの PWA により、モバイルウェブ エクスペリエンスを 4 倍高速化し、収益を 25% 増加
Mynet は毎月 3,400 万人を超える訪問者をサイトにアクセスし、ニュース、動画、ゲーム、金融、情報、エンターテイメントのコンテンツやサービスを提供しています。コンテンツに Accelerated Mobile Pages(AMP)を使用するプログレッシブ ウェブアプリ(PWA)をリリースしたところ、平均読み込み時間が 4 分の 1 になりました。さらに、ユーザー エンゲージメントも著しく改善し、モバイルサイトの平均滞在時間も 43% 増加しました。 モバイル トラフィックの 85%
Ola、プログレッシブ ウェブアプリで 10 億人の先住民のモビリティを促進
Ola はインドの大手タクシー アグリゲータで、10 億人のインド人の移動促進という絶え間ない使命を掲げています。同社は約 60 万人のドライバー パートナー ネットワークを持ち、インドの 100 を超える都市にサービスを展開しています。インドで最も価値の高いスタートアップの 1 つである Ola は、1 日 100 万件以上の乗車を行い、1 日の推定 3 億回のタクシー乗車件数のうち、最大のシェアを奪っています。 ティア 2 とティア 3 の都市(人口 20,000 ~ 99,000
Twitter Lite PWA でエンゲージメントを大幅に向上させ、データ使用量を削減
Twitter Lite プログレッシブ ウェブアプリは、最新のウェブ機能とネイティブ機能を組み合わせてより堅牢なエクスペリエンスを提供します。迅速な読み込み、ユーザー エンゲージメント、データ消費の削減という明確な目標があります。
MakeMyTrip.com の新しい PWA でコンバージョン率が 3 倍に向上
プログレッシブ ウェブアプリのリリース後、MakeMyTrip.com のモバイルウェブでのコンバージョン率は 3 倍になり、ページの読み込み速度は 38% 向上しました。
Jumia ではコンバージョン率が 33% 増加し、PWA のユーザー数が 12 倍に増加
Jumia の PWA へのトラフィックは同社のネイティブ アプリの 12 倍以上に達し、今も増え続けています。また、直帰率が 50% 低下し、
Voot のプログレッシブ ウェブアプリ
Voot.com がインドでメディア プログレッシブ ウェブアプリをリリース。実装から数日も経たないうちに、ユーザーあたりのセッション時間は 39%、ユーザーあたりの 1 日の閲覧回数は 15% 増加しました。 Voot は、ネイティブ アプリとモバイルウェブ アプリの両方で利用可能なインド有数のビデオ オンデマンド サービスで、オンラインでは 35,000 時間近くのプレミアム コンテンツを提供しています。これには、Colors や MTV などのネットワーク、Voot Originals
PWA としてのサンタ トラッカー
サイトを表示 「サンタを追いかけよう」は、2016 年のホリデー シーズンに向けて、オフラインのプログレッシブ ウェブアプリに急速にアップグレードされました。 既存のシーンデザインのおかげです 「サンタを追いかけよう」 は、Google のホリデー シーズンのお祭りです。 毎年 12 月中は、ゲームや学習体験でホリデー シーズンをお祝いできます。 サンタが一休みしている間に、妖精たちは「サンタを追いかけよう」を ウェブ 上と Google Cloud 上でのオープンソースの Android 。
WebVR ラボの主要なインタラクション
ラボを見る ウェブサイトの設計者はレスポンシブ デザインという考え方に精通しています。つまり、スマートフォン、タブレット、パソコンなどのさまざまなデバイスに対応し、さまざまな画面解像度やピクセル比に対応するウェブサイトを構築できます。 WebVR では、レスポンシブ デザインの考え方に新たな課題が導入されています。 WebVR エクスペリエンスは、没入感のレベルと入力のレベルという 2 つの指標によって分類できます。これらのレベルは「自由度」(DOF)によって区別されます。6 DOF
WebVR でのテキストのレンダリング
バーチャル リアリティのストーリーテリングのためのプラットフォームです。ウェブを含め、VR のあらゆる場所で利用できます。WebVR を活用すると、視聴者はウェブサイトにアクセスしてリンクをクリックしたら、ハイエンドのヘッドマウント ディスプレイを含め、臨場感あふれる VR で「Inside」の映画をすぐに視聴できます。開発チームは開発プロセス中に、この新しい環境ではテキストのレンダリングが難しいことを発見し、よりスムーズな処理を行えるようにシェーダーを使用したサンプルを作成しました。
WebVR 向け Matterport VR
サイトを表示 Matterport では、WebVR のサポートを追加することで、臨場感あふれるバーチャル リアリティで現実世界の場所を簡単に探索できます。ダウンロードするアプリがない場合、WebVR を使用すると離脱が減り、パートナーは自身のウェブサイトでユーザーを維持できます。 WebVR は、Matterport の戦略における重要な要素 です。VR コンテンツの消費と見つけやすさを追求しています。 Matterport VR を使用すると、インタラクティブ バーチャル
Bear 71 と WebVR
ドキュメンタリーを見る WebVR は、ステレオ レンダリングとリアルタイムのヘッド トラッキングを組み合わせた、ブラウザに組み込まれた API です。これにより、オンラインですばやく簡単に VR コンテンツを楽しむことができます。コンテンツ作成者は WebVR を使用して、オンライン上でさまざまな VR ハードウェアで動作する没入型の VR コンテンツを作成できます。 Bear 71 は、カナダの国立映画委員会(NFB)が制作したインタラクティブなドキュメンタリーです。元々 Flash
固定線
固定線は、ジェスチャーを使って Google Earth の衛星画像を探索できる試験運用中の機能です。機械学習、最適化されたアルゴリズム、グラフィック カードの性能を組み合わせることで、バックエンド サーバーを必要とせずに、スマートフォンのウェブブラウザでテストを効率的に実行できます。ここでは、Google の開発プロセスと、最終結果にたどり着いたさまざまなアプローチをご紹介します。
カーニバル クルーズライン
Carnival Cruise Line はプッシュ通知を使って、顧客に合わせてカスタマイズされた魅力的なコミュニケーション サービスを提供しています。 PDF の事例紹介をダウンロード 世界最大級のレジャー旅行会社である Carnival Cruise Line
The Weather Channel
IBM 傘下の The Weather Company は、毎日平均 400 億件の予測リクエストに対応しており、人々が日常生活を計画し、天候に基づいてより適切な判断を下せるようサポートしています。
Smart Lock for the Guardian
PDF の事例紹介をダウンロード Guardian News & Media(GNM)が公開している theguardian.com は、世界最大級の英語圏の質の高いニュース ウェブサイトです。2011 年と 2013 年にそれぞれ米国とオーストラリアのデジタル エディションをリリースして以来、英国以外からのトラフィックが Guardian の全デジタル オーディエンスの 3 分の 2 以上を占めています。英国では、GNM が 1821 年に発行したガーディアン新聞を週 6
AliExpress 用 Smart Lock
PDF の事例紹介をダウンロード 2010 年 4 月に開設された AliExpress は、世界中の消費者をターゲットとするグローバルな小売マーケットプレイスです。このプラットフォームにより、世界中の消費者が競争力のある価格で商品にアクセスし、中国の卸売業者やメーカーから直接購入できます。AliExpress は、Alibaba Group 傘下の企業です。 200 を超える国や地域の買い物客が、AliExpress
Housing.com、新しい PWA によりコンバージョン数を増やし、直帰率を 40% 削減
PDF の事例紹介をダウンロード Housing.com はインドの有力なスタートアップです。今年は 5, 000 万回のアクセス数を記録し、インド有数のオンライン不動産プラットフォームとなっています。プログレッシブ ウェブアプリ(PWA)である Housing Go では、ブラウザをまたいで総コンバージョン数が 38% 増加しました。また、新しい PWA により、ユーザーの 1 回のセッションあたりの滞在時間が 10% 増加し、ユーザーのリピート率が向上しました。 Housing.com
Service Worker が実社会に与えるパフォーマンスへの影響を測定する
Service Worker が実社会に与えるパフォーマンスへの影響を測定する
The Washington Post
AMP により Washington Post のモバイル検索からのリピーターが 23% 増加 PDF の事例紹介をダウンロード トラフィックの 55% 近くがモバイル デバイスからのもので、ワシントン ポストは、モバイル デバイスで優れた読書エクスペリエンスを提供することが長期的な成功に不可欠であることを認識しています。 The Post が特に力を入れているのは、モバイル
Google I/O 2016 プログレッシブ ウェブアプリの構築
ウェブ コンポーネントを使用して 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
BaBe のクロスブラウザ プログレッシブ ウェブアプリは、ネイティブ アプリと同等のパフォーマンスを発揮します。 PDF の事例紹介をダウンロード 2013 年にリリースされた BaBe は、インドネシア最大のニュース アグリゲータ アプリです。すでに 100 万人以上がダウンロードしています。このアプリのみのビジネスは 2016 年初頭に初めてウェブに移行し、同等の機能を備え、ネイティブ アプリとほぼ同じ外観のクロスブラウザ プログレッシブ ウェブアプリを構築しました。
Konga
Konga は新しいプログレッシブ ウェブアプリでデータ使用量を 92% 削減 PDF の事例紹介をダウンロード 2012 年に開設したコンガはナイジェリアの大手 e コマース ウェブサイトで、書籍から冷蔵庫、スマートフォンまであらゆる商品を販売しています。モバイル デバイスがトラフィックを増やし、ユーザーを増加させる最大の要因となっています。
5 マイル
5miles の新しいプログレッシブ ウェブアプリで直帰率を 50% 削減し、コンバージョン数を 60% 増加 PDF の事例紹介をダウンロード 「入手した品物を売って欲しいものを購入しよう」がモットーの 5miles です。5miles は家具からダイヤモンドのイヤリングまであらゆるものを買えるモバイル マーケットプレイスです。ダラスに本拠を置くスタートアップであり、北京に研究開発センターを構えています。同社のアプリのダウンロード数は 700 万を超えています。 新規買い物客の半数以上が 5
Suumo
日本の大手不動産サイトはウェブプッシュ通知を活用して新しい掲載情報を大幅に強化し、通知の開封率は 31% を記録しています。 PDF の事例紹介をダウンロード SUUMO は日本最大の不動産サイトであり、国内の人口の 11% 近くを占めています。SUUMO では毎月 1,400 万人のユニーク ユーザーが新築住宅を検索しています(その多くがスマートフォンを使用)。 オンラインで表示される住宅リストを常に把握しておくために、検索エンジンを利用するユーザーがますます増えています。そのため SUUMO
バーチャル アート セッション
6 人のアーティストが VR での絵、デザイン、彫刻に招かれました。
Net-A-Porter
Net-A-Porter: Google の Polymer Library を使用して開発時間を短縮 NET-A-PORTER は、Google の Polymer ライブラリを使用して、オンライン プロパティにコンポーネント ベースの設計を実装しています。その結果、開発時間が大幅に短縮され、サイト全体でコードが標準化され、構造化データの使用により SEO のパフォーマンスが向上しました。 PDF の事例紹介をダウンロード 2000 年 6 月に創業した NET-A-PORTER
Flipkart、プログレッシブ ウェブアプリでサイト滞在時間を 3 倍に
インド最大の e コマースサイトである Flipkart は、2015 年にアプリ専用戦略を採用し、モバイルサイトを一時的に停止しました。同社は、自社のモバイルアプリと同程度に速く、魅力的なユーザー エクスペリエンスを提供することが難しくなることを認識していました。しかし、Flipkart は開発のアプローチを見直すことにしました。モバイル ウェブを即座に実行し、オフラインで動作し、ユーザーに再アプローチする機能を導入したことで、モバイルウェブに引き戻されました。
Polymer を使ってライトセーバーを作成する
Polymer を使用して高 FPS WebGL プロジェクトをセットアップする方法
Google+
目標は、一度に 6 万個以上の HTML、6 万個の JavaScript、6 万個以上の CSS をダウンロードしないことです。
幅広い用途
Beyond the Rack は、プッシュ通知を活用してモバイルウェブのユーザーに再アプローチし、訪問あたりの収益を 26% 増加させました。
AirHorner.com
AirHorner はシンプルかつ強力なプログレッシブ ウェブアプリで、Service Worker と Web Audio API を駆使して独自のエアホーンを実現します。オンラインでもオフラインでも、不安定な 2G ネットワークでも、友人や同僚に不快な思いをさせられます。
本番環境の Service Worker
サービス ワーカー ライブラリを使用して、Google I/O 2015 ウェブアプリを高速かつオフライン ファーストにする方法を学びます。 今年の Google I/O 2015 ウェブアプリ は、Google のデベロッパー リレーションズ チームが、 Instrument の友人が作成したデザインに基づいて作成しました。Instrument は、便利な 音声/映像のテスト を作成しました。私たちのチームの使命は、I/O ウェブアプリ(コードネーム
Madeon アドベンチャー マシン
Madeon Adventure Machine は、楽しいドラムマシンである Madeon のニューアルバムを宣伝する効果的なプロモーションです。 Adventure Machine はとてもシンプルなアプリですが、かなりよく機能しています。 ウェブ オーディオと、必要に応じて Web Midi を利用することで(独自のシンセサイザーを接続できます)、ボタンのタップで新しく作成されたループは完全に同期され、特にホーム画面にインストールした場合、モバイルでインターフェースが適切に動作します。
ハミングバード図書館
Hummingbird ライブラリ: 人気のアニメのウォッチ トラッカー / 発見サイトである Hummingbird の新しいフロントエンドです。 アニメファン(私のような – スクリーンショットの視聴回数は本当です!)は、以前から視聴内容の記録に夢中になっています。この分野で人気のサイトには AniDB や MyAnimeList がありますが、 Hummingbird はこれらの中で最も見栄えが良いサイトです。 既存の Hummingbird API の上に構築された
Adsy.me
Adsy.me を使用すると、モバイル マイクロサイトを非常に迅速かつ簡単に構築できます。 Adsy.me は誰でもモバイル(マイクロ)ウェブサイトを作成できるツールです。実際に開発してみると、すぐに私の信頼を得られました。このツール全体は優れた応答性と直感的さを備えた優れたモバイル ウェブアプリです。 遅延読み込み手法を増やすことで、アプリの読み込み速度が上がります。また、全画面 API と Service Worker をオフラインで使用することでメリットが得られます。
リトルアルケミー
Little Alchem: 兄の Alchemy をモチーフにした、楽しいモバイル フレンドリーな組み合わせゲームです。 Little Alchemy は、ウェブ プラットフォームの最新機能を最大限に活用した典型的な例です。インストール時に ウェブアプリ マニフェスト を使用して全画面表示を開始し、 theme-color によって Android に溶け込みます。 初回読み込みは非常に応答性が高く、プリローダーがすぐに表示されます。また、AppCache
Hacker News Reader
Hacker News Reader: Hacker News 用に最適化された優れたリーダー。 Hacker News 向けに美しく最適化された読みやすいアプリです。モバイル、タブレット、デスクトップのいずれにおいても適切に表示され、表示されます。これは高速で、モバイルでテストすると、滑らかな遷移が確認できるはずです。Android に統合するためのテーマカラーの使い方が実に優れており、 ウェブアプリ マニフェスト を使用するためインストール可能です。インストールすると、外観と操作性が HN
メリー ピクマス
Merry Pixmas: 3D CSS 変換でクリスマスを楽しもう。 パソコンとモバイルで適切に機能する、クリスマスをテーマにしたデモ。さらに、新しいテーマカラーのサポートと、全画面表示で起動できるホーム画面用のウェブ マニフェストも用意されています。 活用のヒント: スマートフォンを振ると雪が降ります。 これはデモですが、アセットに指定されたキャッシュ ヘッダーと、レンダリング ブロックのない JavaScript を使用することで、認識される読み込み時間が大幅に改善された可能性があります。
Chrome Dev Summit 2014
Chrome Dev Summit 2014 のウェブサイトは、自社の Paul Lewis が社内で構築した CDS ウェブサイトでは、会議の訪問者向けに優れたモバイルウェブ エクスペリエンスを構築する方法を説明しました。
SVGOMG
SVGOMG: SVGO 用の美しく、マテリアル、レスポンシブなフロントエンド。 Google 独自の Jake Archibald によって構築された SVGOMG は、ウェブ テクノロジーを使用して作成された、完全にレスポンシブで高機能なツールのほぼ完璧な例です。マテリアル デザインの美しい外観を備え、Service Worker によりアプリがすぐに読み込まれ、オフラインで利用でき、モバイルでの遷移がスムーズです。 提供する必要がある唯一の本当に重要な点は、メイン UI がないため初期
ウェブフィルタ
ウェブフィルタ: 高速で迅速でダーティなカメラフィルタ。 リアルタイムでフィルタを適用できる、ウェブベースの優れたカメラアプリです。画像は自動的にローカル デバイスに保存されます。つまり、通常は選択したクラウド ストレージ プロバイダ(Google+)と同期されるため、簡単に写真を共有できます。 アプリはホーム画面にインストールできますが、少なくとも Android では、アプリが起動するたびにカメラを使用する権限を求められます。これは明らかにデベロッパー側ではなく Chrome/Android
ホビット体験 2014
ホビット エクスペリエンスに WebRTC ゲームプレイを追加する ホビットの新作映画「ホビット ~戦いの決着~」の公開に合わせて、昨年の Chrome 試験運用版「 中つ国をめぐる旅 」を拡張し、新しいコンテンツを追加しました。今回の主な目的は、より多くのブラウザとデバイスでコンテンツを表示できるように WebGL の使用を拡大し、Chrome と Firefox の WebRTC 機能を使用できるようにすることです。今年のテストには 3 つの目標がありました。
Chrome でビルドする
マルチデバイス ウェブに 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 週間にわたってビルドを反復しました。ゲームがリリースされて数週間が経過し、デベロッパー
ケーススタディ - The Sounds of Racer
Racer は、マルチプレーヤー、マルチデバイスの Chrome 試験運用版です。画面をまたいでプレイするレトロなスタイルのスロットカー ゲーム。スマートフォンまたはタブレット(Android または iOS)。誰でも参加できます。アプリはありません。ダウンロードは不要です。モバイルウェブのみ。 Plan8 は、 14islands の協力を得て、ジョルジオ モロダーのオリジナル楽曲に基づくダイナミックな音楽とサウンドを制作しました。Racer
事例紹介 - Inside World Wide Maze
World Wide Maze は、スマートフォンを使って、ウェブサイトから作成された 3D 迷路を転がるボールを操作してゴールを目指すゲームです。 このゲームでは、HTML5 の機能が幅広く使用されています。たとえば、 DeviceOrientation イベントはスマートフォンから傾斜データを取得し、WebSocket 経由で PC に送信します。PC では、 WebGL と Web Workers によって構築された 3D 空間をプレイヤーが移動します。
Roll It を作成しています
Roll It は、スマートフォンやパソコンのブラウザのみを使用して、定番のボードゲームを再現した Chrome 試験運用版 です。スマートフォンのブラウザでは、手首をひねってボールを狙って転がすことができ、パソコンのブラウザでは、WebGL と Canvas を使用して Roll It のレーンにリアルタイムのグラフィックをレンダリングします。2 つのデバイスは WebSocket を介して通信します。アプリはありません。ダウンロードは不要です。トークンはありません。最新のブラウザさえあれば、
次世代のウェブ レイアウト - National Geographic Forest Giant
CSS とブラウザ レイアウトのツールを駆使すれば、ウェブ コンテンツを魅力的なビジュアル化できます。CSS フィルタ、WebGL、HTML5 動画、SVG、キャンバスなどのウェブ機能と、CSS リージョン、CSS シェイプ、CSS カスタム フィルタなどの進化する未来のテクノロジーを使用することで、クリエイティブな表現の幅が大きく広がります。Adobe は、レイアウトとデザインに情熱を傾けるコンテンツ
事例紹介 - Google I/O 2013 Experiment
カンファレンスの登録が開始される前に、Google I/O 2013 ウェブサイトでデベロッパーの関心を高めるために、タップ操作、生成音声、発見の喜びに焦点を当てた一連のモバイル ファーストのテストとゲームを開発しました。コードの可能性と遊びの力にインスパイアされたこのインタラクティブな体験は、新しい I/O ロゴをタップすると「I」と「O」のシンプルな音声から始まります。 Google は、I と O のアニメーションを、HTML5
事例紹介 - HTML5 ゲームの自動サイズ変更
2010 年の夏に、Sand Trap というゲームを作成しました。このゲームは、スマートフォン向けの HTML5 ゲームの大会に出品しました。しかし、ほとんどのスマートフォンでは、ゲームの一部しか表示されないか、ゲームが小さすぎてまったくプレイできませんでした。そこで、どんな解像度にも対応できるよう、ゲームをスムーズに調整できるようにしました。少しプログラムを書き換え、この記事で説明したアイデアを取り入れることで、デスクトップ ブラウザでもモバイル
事例紹介 - オズへの冒険: オズへの冒険
「オズの魔法使い」 は、ディズニーがウェブに導入した新しい Google Chrome 試験運用版です。インタラクティブな旅で、カンザスのサーカスを巡り、大嵐に巻き込まれ、オズの国にたどり着きます。 映画の豊かさとブラウザの技術的な能力を組み合わせて、ユーザーが強いつながりを築くことができる、楽しく没入感のあるエクスペリエンスを実現することが目標でした。
事例紹介 - Chrome での JAM
UI を魅力的にした方法 JAM with Chrome は、Google が作成したウェブベースの音楽プロジェクトです。JAM with Chrome では、世界中のユーザーがバンドを結成し、ブラウザ内でリアルタイムで JAM できます。 DinahMoe は Chrome の Web Audio API で可能なことをさらに推し進め、 Tool of North America のチームは、コンピュータを楽器のようにストローミング、ドラム、演奏するためのインターフェースを作成しました。
100,000 スターを獲得
こんにちは。Google のデータ アート チームに所属している Michael Chang と申します。先日、近くの星を可視化する Chrome Experiments 「 100,000 Stars 」を終了しました。このプロジェクトは THREE.js と CSS3D で作成されています。このケーススタディでは、検出プロセスの概要、プログラミング手法のいくつかを説明し、最後に今後の改善点について説明します。 ここで説明するトピックは非常に幅広く、THREE.js
事例紹介 - Chrome での JAM
音声をロックに仕上げる方法 JAM with Chrome は、Google が作成したウェブベースの音楽プロジェクトです。JAM with Chrome では、世界中のユーザーがバンドを結成し、ブラウザ内でリアルタイムでジャムセッションを行うことができます。 DinahMoe は、このプロジェクトに参加できたことを大変光栄に思います。私たちの役割は、アプリの音楽を制作し、音楽コンポーネントを設計して開発することでした。開発は主に 3 つの領域で行われました。MIDI 再生、ソフトウェア
Movi Kanti Revo - パート 1 - 3D 世界の構築
Movi.Kanti.Revo は、Cirque du Soleil が制作し、Subatomic Systems が開発した新しい Chrome センサリー テストです。最新のウェブ技術を駆使して、Cirque du Soleil の驚異をウェブに届けます。 このテストは HTML5 のみを使用して作成され、環境はマークアップと CSS で完全に構築されています。ステージ上のセットピースのように、 div 、 img 、小さな video などの要素は、CSS を使用して 3D
ケーススタディ - SONAR、HTML5 ゲーム開発
昨年の夏、私は SONAR という商用 WebGL ゲームのテクニカル リードとして働きました。このプロジェクトの完了には 3 か月ほどかかり、JavaScript で完全にゼロから作成しました。SONAR の開発中、テストされていない新しい HTML5 の領域で、さまざまな問題に対する革新的なソリューションを見つける必要がありました。特に、一見簡単な問題の解決が必要でした。プレイヤーがゲームを開始したときに、70 MB を超えるゲームデータをダウンロードしてキャッシュに保存する方法です。
事例紹介 - Technitone.com の構築
Technitone.com は、WebGL、Canvas、Web ソケット、CSS3、JavaScript、Flash、Chrome の新しい Web Audio API を融合させたものです。 この記事では、制作のあらゆる側面(計画、サーバー、サウンド、ビジュアル、インタラクティブなデザインに活用するワークフローなど)について説明します。ほとんどのセクションには、コード スニペット、デモ、ダウンロードが含まれています。記事の最後に、これらをすべて 1 つの ZIP
事例紹介 - Bouncy Mouse
昨年末に iOS と Android で Bouncy Mouse を公開した後、いくつかの重要な教訓を得ました。その中でも、確立された市場に参入するのは難しいという点が重要でした。完全に飽和状態の iPhone 市場では、注目を集めるのは非常に困難でした。Android Marketplace は飽和状態がそれほど進んでいなかったため、進展はしやすくなりましたが、それでも簡単ではありませんでした。この経験から、Chrome
ケーススタディ - HTML5 MathBoard
iPad 版 MathBoard は、 PalaSoftware のアプリで、洗練されたアプリです。繊細で自然なアニメーションが多数あり、独自のリアルな外観と操作感があります。目標は、iPad アプリケーションを HTML5 に忠実に移植することでした。 N2N-Apps は、HTML5 テクノロジーによる次世代のウェブおよびモバイル アプリケーションの構築に重点を置くソフトウェア開発会社です。同社は 2010 年に Jeremy Chone によって設立されました。Jeremy は
事例紹介 - Stanisław Lem Google Doodle の作成
Google ホームページは魅力的なコーディング環境です。特にスピードとレイテンシを重視すること、あらゆる種類のブラウザに対応し、さまざまな状況下で機能しなければならないことなど、多くの難しい制限が伴います。驚きと喜びです。 Google Doodle は、Google のロゴと入れ替わる特別なイラストです。筆者とペンやブラシとの関係には長きにわたって制約の独特な特徴がありましたが、インタラクティブなコンテンツにも貢献しています。 私がコーディングしたすべてのインタラクティブな Doodle(
ケーススタディ - Stream Congress のリアルタイム更新
HTML5 では、 WebSockets と EventSource を使用して、サーバーとのリアルタイム通信を行うウェブアプリを構築できます。 Stream Congress ( Chrome ウェブストア で入手可能)は、米国議会の活動に関する最新情報をライブ配信します。下院と上院の両方からの議場情報、関連するニュース速報、下院議員のツイート、その他のソーシャル
事例紹介 - Wordico を Flash から HTML5 に変換する
Wordico クロスワード ゲームを Flash から HTML5 に移行した際、まず最初に、ブラウザでリッチなユーザー エクスペリエンスを実現するためにこれまで学んできたことをすべて忘れました。Flash は、ベクター描画からポリゴンのヒット検出、XML 解析まで、アプリケーション開発のあらゆる側面に対応する単一の包括的な API を提供していましたが、HTML5 は、さまざまなブラウザのサポート状況に応じて仕様がバラバラでした。また、ドキュメント固有の言語である HTML
ケーススタディ - Onslaught!アリーナ
2010 年 6 月、地元の出版物「Zine」である Boing Boing が ゲーム開発コンテスト を開催していることが判明しました。これは、JavaScript と <canvas> で簡単なゲームをすばやく作るための絶好の機会だと考え、作業を開始しました。コンテスト後も、まだ多くのアイデアがあり、始めたことを完成させたいと考えました。以下は、その結果として生まれたゲーム「 Onslaught!Arena に移動します。 チップチューン をベースにしたゲームを開発するという
事例紹介 - 20thingsilearned.com のページめくり効果
2010 年、 F-i.com と Google Chrome チームは、HTML5 ベースの教育用ウェブアプリ「ブラウザとウェブについて学んだ 20 のこと」( www.20thingsilearned.com )を共同で開発しました。このプロジェクトの背後にある主なアイデアの 1 つは、 書籍のコンテキスト
ケーススタディ - HTML5 キャンバスの絡み合い
昨年(2010 年)の春、HTML5 と関連テクノロジーのサポートが急速に拡大していることに興味を持ちました。当時、友人と私は 2 週間のゲーム開発コンペティションで互いに競い合い、プログラミングと開発スキルを磨き、お互いに提案し合ったゲームのアイデアを実現していました。そのため、私は自然に HTML5 要素をコンペティションのエントリに組み込み始め、その仕組みをより深く理解し、以前の HTML 仕様ではほぼ不可能だったことを実現できるようになりました。 HTML5
ケーススタディ - deviantART muro での HTML5
2010 年 8 月 7 日、deviantART は 10 周年を迎えました。誕生日を祝して、deviantART muro という HTML5 描画ツールをリリースしました。 このツールは、スタンドアロンのウェブ アプリケーションとしてだけでなく、フォーラムのコメントに画像を追加するための軽量な描画ツールとしても使用できます。 deviantART コミュニティはこの新しい描画ツールを熱心に歓迎し、今ではツール自体も適度なサイズのウェブ
事例紹介 - Chrome でのドラッグ&ドロップ ダウンロード
ドラッグ&ドロップ(DnD)は HTML 5 の多くの優れた機能の 1 つで、Firefox 3.5、Safari、Chrome、IE でサポートされています。Google は最近、Google Chrome ユーザーがブラウザからデスクトップにファイルをドラッグ&ドロップできる 新機能 をリリースしました。これは非常に便利な機能ですが、Ryan Seddon がこの新機能のリバース エンジニアリングの 発見 に関する記事を投稿するまで、あまり知られていませんでした。 Box.net
How Ray-Ban doubled conversion rate and reduced exit rate by 13% through prerendering using the Speculation Rules API
Learn how Ray-Ban improved LCP by using the Speculation Rules API, and how it improved Ray-Ban's ecommerce platform's business performance.
How QuintoAndar reduced INP by 80%, increasing conversions by 36%
QuintoAndar significantly improved its web performance by reducing its Interaction to Next Paint (INP) by 80%, leading to a 36% increase in conversions year-over-year.
How YouTube improved video performance with the Media Capabilities API
Using the Media Capabilities API lets you better target video codecs, frame rates, and resolutions based on the capabilities of your users' devices.
Forbes
Forbes is re-defining modern web development with Progressive Web App technology.
Wego
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
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
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