PWA - Miichisoft

Progressive Web Apps – PWAは将来性があるか？

人口の3分の2がモバイルデバイスで接続されている世界では、注目を集めたいなら強力なモバイルプレゼンスは不可欠な要素です。問題なのは、モバイルアプリ (iOS と Android) とレスポンシブ Web サイトの両方を開発および維持することなく、どうやってモバイルユーザーとデスクトップユーザーを同じようにターゲットにできるか？という。近年、多くの Web 開発者はProgressive Web Apps（PWA）アプリが最良の答えであると確信するようになりました。この記事では、それらが本当にWeb デザインの未来、将来性があるかどうかご紹介いたします。 Progressive Web Apps – PWAとは「プログレッシブ Web アプリ」という用語は 2015 年に造語されました。これは、Web 開発に関しては基本的に 1 世紀前のことですが、その構造についてはまだ混乱が見られます。基本的に、PWA はアプリのようなWeb サイトであり、Web テクノロジを使用して Web 環境とネイティブ環境の両方の長所を組み合わせます。これらは、次の 3 つの主要コンポーネントで構成されています。 Web サイト: 基本的に、すべての PWA は、HTML、CSS、および JavaScript を使用して記述された、多かれ少なかれ通常の Web サイトです。 PWA は、双方向性を実現するために JavaScript のみに依存しているため、PWA を構築するために開発環境をインストールする必要はなく、最新のすべての Web ブラウザーで既にサポートされています。 Web マニフェスト: PWA […]

【2023年】12つのPWAアプリの導入事例を詳しく紹介

オンラインでマーケティングやEコマースなどをする際、成功の一つのポイントはシステムとアプリのパフォーマンスに不可欠な要素と言っても過言ではありません。それで多くのWebサイトはProgressive Web Apps（PWAs）と呼ばれる新しい技術標準を利用してパフォーマンスを向上させています。 GoogleでサポートされているWebアプリPWAsは、デバイスやネットワークの状態に関係なく、高レベルのパフォーマンスを提供することを目的としています。信頼性が高く、速く、魅力的なネイティブアプリの品質でPWAを強化しているため、多くの注目を集めています。 Progressive Web Apps – PWAが従来のレスポンシブWebサイトとどのように異なるかを深く理解するために、さまざまな業界にわたる印象的なPWAアプリの例を以下のように紹介していきたいと思います。それでは、始めましょう！ PWAアプリの導入事例、その１：Starbucksアプリスターバックスは、すべての顧客にアクセス可能でユーザーフレンドリーなオンライン注文を提供することを目指して、Web上に注文システムのPWAを構築しました。言い換えれば、オフラインモードで実行する機能により、スターバックスPWAを使用すると、顧客はメニューを閲覧し、注文をカスタマイズし、アイテムをカートに追加できます。オンラインでは、場所固有の価格設定を表示し、食べ物や飲み物の注文を行うことができます。 PWAのほとんどはネットワーク接続なしで利用できるため、1日を通して接続性に出入りする可能性のある顧客や、接続の信頼性が低い農村コミュニティのような新興市場に最適です。新しい注文PWAを立ち上げることにより、スターバックスはすでに重要な結果を見てきました。 PWAアプリは、スターバックスの既存のiOSアプリよりも99.84％小さいため、Webアプリは全ユーザー（アプリ、Web、PWA）の間でお気に入りになっています。その結果、毎日注文を行うWebユーザーの数が2倍になり、デスクトップユーザーはモバイルユーザーとほぼ同じレートで注文しました。 PWAアプリの導入事例、その２：オンラインショッピングDebenhams ファッション業界でショッピング体験を変えているブランドについて話すとき、デベンハムズを見逃すことはできません。有名な英国のブランドは、デベンハムズの古いウェブサイトがモバイルトラフィックを増加させたにもかかわらず、モバイル変換率が高まっていないことに気付きました。そのため、Debenhamsはデジタル変革の時だと結論付けました。そうでなければ、彼らのデジタルと全体的な成長はすぐに減速するでしょう。ブランドは、特にモバイルデバイスでユーザーにスムーズなエクスペリエンスを提供できるソリューションを探しました。 PWAは、デベンハムズのチームの答えでした。古いウェブサイトをPWAに変えた後、彼らの努力は確かに報われました。カスタマージャーニーでブロックを削除することにより、遅いページ、ナビゲーションが困難な構造、複雑なチェックアウトプロセスというカスタマーエクスペリエンスを改善しました。全体として、デベンハムズはモバイル収益が40％増加し、コンバージョンが20％増加しました。 PWAアプリの導入事例、その３：BMW 自動車業界の先駆的なブランドとして、BMWは、車やウェブサイトであっても、新しいテクノロジーから遠慮のないものではないことを証明しています。カスタマーエクスペリエンスを向上させるために、ブランドは価値を反映した品質と魅力的なコンテンツを提供しようとしました。新しいBMWのPWAアプリは、ユーザーに「すごい」体験を間違いなく提供します。誰もが気付くのは、高解像度の画像とビデオであり、Webはこれらすべての機能（古いサイトよりも4倍高速）に即座にロードされます。彼らのレポートはまた、PWAアプリに変更後、他の印象的な数字を示しました。ホームページからBMW販売サイトにクリックする人々の4倍の増加。モバイルユーザーの50％の成長と、古いサイトと比較して、サイト訪問が49％増加しています。参考：PWAとネイティブアプリを比較・選択方法を解説 PWAアプリの導入事例、その４：Uber 同社が新しい市場に拡大するにつれて、そのUber WebはPWAとしてゼロから再構築され、ネイティブモバイルアプリに匹敵する予約体験を提供しました。 Uber PWAは、低速の2Gネットワークで自動車予約を実行可能にするように設計されています。すべての最新のブラウザーでアクセスできるアプリのようなエクスペリエンスの概念を中心に構築されたPWAは、ローエンドデバイスのライダーに最適です。これは、ネイティブUberアプリと互換性がない場合があります。 Uberは、スーパーライトウェイトWebアプリでネイティブエクスペリエンスをもたらすことにより、場所、ネットワークの速度、デバイスに関係なく、クイックライドリクエストを有効にしました。わずか50kbのコアアプリを使用すると、2Gネットワークで3秒以内にロードできます。 PWAアプリの導入事例、その５：Pinterest Pinterestは、国際的な成長に焦点を当てて、PWAとしてゼロから新しいモバイルWebエクスペリエンスを開始しました。ソーシャルネットワークは、モバイルユーザーのパフォーマンスが低いため、モバイルユーザーの1％のみがサインアップ、ログイン、またはアプリインストールに変換されることを発見しました。コンバージョンを改善する機会が膨大であることを認識するために、PWAテクノロジーを使用してモバイルWebを再構築しました。 44％とコアエンゲージメントは60％増加しています。 PWAアプリの導入事例、その７：Spotify お気に入りの音楽プレーヤーはPWAを駆動しました。 SpotifyとAppleのAppleの30％のApp Store委員会に関する意見に相違があるため、Spotifyは他の多くの大手ブランドと同様に、PWAバージョンのアプリの開発を開始するタイムリーな機会であると判断しました。ネイティブアプリのカウンターパートと比較して、PWAバージョンは、ユーザーがアプリを介して進行するにつれてその背景を変更する独自の独自の適応性のあるUIで非常に高速です。他の多くのPWAと同様に、ユーザーはSpotify PWAをホーム画面に追加するように求められ、Spotify PWAが他のバージョンでよりアクセスしやすく、Parをよりアクセスしやすくします。 […]

【2023年】pwa アプリとネイティブアプリを比較・選択方法を解説

消費者はモバイルの使用が不可欠です。ユーザーはデスクトップよりもモバイルで 2 倍の量のコンテンツを視聴しており、企業がエンゲージメントを生み出し、カスタマーエクスペリエンスを向上させる絶好の機会を生み出しています。長い間、企業はモバイルアプリの開発に関して 2 つの選択肢しかありませんでした。現在、彼らには 3 つ目の選択肢があります。Progressive Web Apps (PWAs)です。 PWA技術は、モバイルでのプレゼンスを確立するための最良の方法としてしばしば歓迎されますが、実際にどのように優れているのでしょうか? このPWAアプリとネイティブアプリの比較で詳しくご紹介します。 1. エンジニアの観点による pwa とネイティブアプリの比較 1.1. 目的により利用する開発言語が違うネイティブアプリはモバイルのデバイスで実行するように開発されていますが、PWA は Web ブラウザー内で実行するように開発されています。ネイティブアプリは各プラットフォームのプログラミング言語 (iOS では Objective-C と Swift、Android では Java) で開発されますが、PWA アプリは HTML、CSS、および JavaScript を使用します。 1.2. 開発コストはネイティブアプリよりPWAの方が低い PWA アプリの構築は、ネイティブアプリの開発よりも安価です。ネイティブアプリの場合は、言語を学習し、プラットフォームごとにバージョンを作成する必要があります。これは、iOS と Android の少なくとも 2 つのバージョンと、各バージョンを維持および更新するためのリソースが必要だからです。アプリの目的と複雑さによっては、多くの時間と費用が必要です。 PWAアプリは、ビルドと更新が高速です。 […]

【2023年】Progressive Web App（PWA）のメリットとデメリットを解説

Web アプリの開発者は、現代のユーザーの高まる期待に応えるために、常に最新の Web 開発テクノロジを日々アップデートしています。近年、Web 開発の状況を変えてきた一つの Web 開発テクノロジは、Progressive Web Apps (PWA) と呼ばれます。前回は「PWAとは？初心者向けのProgressive Web Appsを解説」を紹介しました。本記事ではビジネスの観点から PWA の長所と短所を見てみましょう。 Progressive Web Apps（PWAs）でパフォーマンスが向上することは誰もが知っていますが、他に何を提供するのか? どんなデメリットがあるのかなどをご紹介いたします。この記事が、PWAが自分のやりたいアプリケーションに適しているかどうか確認するヒントになれば幸いです。 1. Progressive Web Apps（PWA）とは？「Progressive Web Apps」という用語は、Google Chrome エンジニアの Alex Russell によって造られました。彼はこの用語を、通常の Web サイトと同じように読み込まれ、Service Worker や Web アプリManifestなど、最新のブラウザーでサポートされている機能を利用する新世代の Web アプリケーションを表すのに用いました。オフライン使用、プッシュ通知、および従来はネイティブアプリケーションのみに関連付けられていたその他の機能などのユーザー機能を提供します。そのため、PWA はモバイルアプリと Web サイトの間のギャップを効果的に埋め、両方の長所を提供します。 PWA は、ユーザーが洗練されたモバイルエクスペリエンスを要求しているにもかかわらず、デバイス上のアプリの数に圧倒され、新しいアプリのインストールに消極的になっているときに登場します。多くの大手企業はすでに PWA の流行に乗り、ネイティブ機能を備えた独自の […]

PWAとは？初心者向けのProgressive Web Appsを徹底解説

本記事では、Progressive Web Apps（PWAs）とは何か、そのコア原則は何か、Web アプリやモバイルアプリとの違いについてご紹介していきます。また、 PWA、Webレスポンシブとネイティブアプリのどちらが適しているか悩んでいる方の選択のためのヒントになりますと幸いです。それでは本題に入りましょう！ 1. ウェブの変化によりPWAsが誕生ウェブはここ数年で大きく変化しました。 2000 年代初頭、Web ページは新聞記事や百科事典のエントリに似ていましたが、10 年間で、より洗練されたブログ、ビデオ、および e コマースサイトに進化しました。スマートフォンの登場により、ますます多くのユーザーがモバイルデバイスで Web を閲覧するようになりました。デジタルメディアの使用量では、モバイルアプリが Web サイトを急速に上回りました。アプリはより多くの機能を提供し、ユーザーとのより良い関係を築くことができるため、企業は Web サイトからアプリに関心を移しました。一方、US Mobile App Report 2017 によると、スマートフォンを利用しているユーザーの半分は1 か月間新しいアプリをインストールしていません。 Web の次の大きなものであるProgressive Web Apps（PWAs）は、モバイルアプリの機能と、現代のインターネットの基盤であるアクセシビリティ、発見可能性、および使いやすさを組み合わせることを目的としています。 2. Progressive Web Apps（PWAs）とは？ PWAとはProgressive Web Appsという、Web を通じて提供されるアプリケーションソフトウェアの一種であり、HTML、CSS、JavaScript、WebAssembly などの一般的な Web テクノロジを使用して構築されます。そして、以下の要素を持っています。 PWAsは、一連のテクノロジではなく、Webプラットフォームのアクセシビリティを維持しながら、ネイティブのような動作に焦点を当てたユーザーエクスペリエンスです。 PWA […]