Webサイトをアプリにする方法
2020.11.152021.10.08
この記事は約3分で読めます
この記事の筆者:三好アキ
🔹 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。
🔹 Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』著者。
Amazon著者ページはこちら → amazon.co.jp/stores/author/B099Z51QF2
React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて無料配信中。登録はこちらから → 無料メルマガ登録
アプリとは?
みなさんのスマートフォンにはLINEやグーグルマップ、Instagramなどが入っていると思いますが、それらは「アプリ」と呼ばれます(「ネイティブアプリ」と呼ばれる場合もあり)。
この「アプリ」は、「ウェブサイト」や「ホームページ」とは異なるもので、いくつかの特徴があります。
例えば、アプリには通知機能やカメラとの連携機能などがあり、これらは普通のウェブサイトは持っていない機能です。
アプリの最大の特徴はダウンロードして使う点で、みなさんのアプリも最初にPlayストア(Android)やAppleストア(iOS)からダウンロードしたものだと思います。
とはいえ、この「ダウンロードする」という作業は、ビジネスの観点からいうと非常にリスキーなプロセスです。
まずユーザーにはストアへとアクセスをしてもらい、次にアプリを見つけてもらう必要があります。
さらにはダウンロードをしてもらう必要もあり、そのダウンロードには数秒(場合によっては数分)かかり、またユーザーはダウンロードに先立って他のアプリを削除するなどして空き容量を作る必要があるかもしれません。
このようなアプリのボトルネックを解消する方法として考えられたのが、「ウェブサイトをアプリ化する」という方法です。
ウェブサイトをアプリにする
すでに2016年の時点でモバイル端末からのアクセスはPCを上回っており、モバイル端末の重要性は年々高まっています。
これまでモバイル端末のユーザーにリーチする方法としては、ウェブサイトをモバイル端末での表示に最適化する「レスポンシブデザイン」と、上で紹介したような「アプリ」の2つがありました。
この2つのアプローチにはそれぞれに強みと弱みがあり、ウェブサイトはアプリより多くのユーザーにリーチできるものの、エンゲージメント(コンバージョン率や滞在時間など)はアプリの方が高い傾向にあります。
また上で触れたように、アプリには「ダウンロードをしないと使えない」という大きなデメリットがあったため、「アプリのように多機能で、かつウェブサイトのようにユーザーが手軽にアクセスできる」という2つのいいところを兼ね備えたものとして、プログレッシブ・ウェブ・アプリ(Progressive Web App / PWA)と呼ばれるものが開発されました。
PWAは既存のウェブサイトをベースにアプリの機能をもたせたもので、次のような特徴があります。
オフラインでも使用できる
通常のウェブサイトを使うにはネット接続が必要ですが、PWAの場合オフラインでも使用できます。
この機能は特にネットの通信環境が良くない国や地域で大きな強みになります。
プッシュ通知が使える
メッセージの着信通知や更新のお知らせなどを、ユーザーのスマートフォン画面上部に表示させることができます。
例えば「新製品の発表」などのお知らせを、ユーザーのスマートフォンの画面に表示できるので、より多くのユーザーにリーチすることができます。
アイコンをホーム画面に追加できる
アプリのようなアイコンをホーム画面に追加できるので、ユーザーはブラウザを開かずに、すぐアクセスできます。
アイコンの追加はワンクリックで行えるので、ダウンロードのような手間をユーザーにかけずに済みます。
PWAとアプリの特徴をまとめると以下のようになります。
PWA | アプリ | |
---|---|---|
ユーザーへのリーチ | ◎ | △ |
ユーザーのエンゲージメント | ◎ | ◎ |
ダウンロードの有無 | 無 | 有 |
コンパビリティ | ◎ | △ (iOSでのみ、又はアンドロイドでのみ使用可能なアプリがあり、互換性は低い) |
開発の負担 | 低い | 高い (アプリを別途開発する必要あり) |
スピード | ◯ | ◯ |
各種の制限 | 低い | 高い (コンテンツや開発技術に関する制限が各ストアにあり) |
PWAの対応方法
PWAには、デザインに関するManifestとオフライン操作を可能にするService Workerという2つの高度なテクノロジーが使われています。
そのため既存のウェブサイトをPWA化するのは、プラグインを使うなどの方法以外は複雑になるのでこちらよりご相談ください。
PWAとAMPの違い
PWAとよく間違われるものとしてAMPがあります。
AMPは"Accelerated Mobile Page"の略で、こちらもモバイル端末向けのテクノロジーですが、PWAとは異なります。
AMPはウェブサイトに表示されるデータをミニマムにすることでモバイル端末での表示を高速化する技術、いわば「シンプル化」であるのに対し、PWAはウェブサイトに通知やオフラインなどの機能を追加した「リッチ化」になります。
AMPについて、くわしくは「サイトの表示スピードを4倍にする方法」をご覧ください。
このAMPとPWAは一緒に使うことも可能ですが、PWAとAMPの特徴をまとめると以下のようになります。
PWA | AMP | |
---|---|---|
スピード | ◯ | ◎ |
ダウンロードの有無 | 無 | 無 |
アクセシビリティ(見つかりやすさ) | 普通 (通常のウェブサイトと同じ) |
高い (検索結果上部にカルーセル表示される場合がある) |
UI/UX、デザインなどの見た目 | リッチ | シンプル |
用途 | オンラインショップなど | ニュースやオウンドメディアなど |
アプリの未来。PWAはアプリを置き換えるのか?
ここまで紹介したように、PWAはアプリよりもベネフィットが多いように見えますが、今後アプリの未来はどうなるのでしょうか?
私は、アプリがすぐに消えることはないものの、間違いなく衰退傾向にあると考えています。
私自身、アプリをダウンロードすることは数ヶ月に一回あるかないかですし、この「ダウンロードする」という作業にはストレスを感じます。
また世間のトレンドとしても、『情報配信、自社アプリ撤退 大手の狭間に埋没、コスト重荷に』とあるように、アプリ開発をやめて、SNSやPWA化したウェブサイトで済ませる企業は今後も増えていくでしょう。
こちらの記事のように、海外においてもアプリからPWAへのシフトは進んでいます。
これまでウェブサイトとモバイル端末には、「レスポンシブデザイン」から「モバイルファースト」という流れがありましたが、この「モバイルファースト」の先には「PWA」があるのだと感じます。
メルマガ配信中
(from 三好アキ/エンジニア)
React、Next.js、TypeScriptなど最新のウェブ開発のお役立ち情報を、ビギナー向けにかみ砕いて無料配信中。
(*配信はいつでも停止できます)