どうも！
Gapapatiです。
こういったブログなどのWEBサイトを運営していると、どうしてもSEO系のネタには敏感になります。だって読まれなければ意味がないのですから・・・。
昨年はAMP対応やHTTPS化が結構大きな話題でした。おととしくらいに「対応しないとまずそう・・・」という話になり、昨年実際に対応させたサイトが随分と増えた感じがします。
さて、今年の大きな話題はPWAになりそうです。今のうちから強い関心を持っていて良いと思います。
特にWordpressでサイトを構築している皆さん、、、PWA化はもうすぐです。
PWAに注目すべき理由
PWAって何？
PWAはProgressiveWebAppsの略で、一言でいえばWEBサイトをスマートフォンなどのモバイル端末で表示するとき、まるで端末にインストールしたアプリのような操作性を実現しようという技術です。
アプリのような操作性を実現してどうするの？と思う方もいるかと思いますが、例え見た目だけでいえば「わかりやすい」「読みやすい」が実現します。ついでに言えば表示も超早いです。
それだけならAMPで良いのでは？という人もいるでしょう。
確かにそうですが、コンテンツの配信の仕方、読み手にしてみればコンテンツにいかにたどり着けるか？という点がPWA化で向上します。
いち早くPWA化した海外のとあるサイトではコンバージョン（例えば購買した人の数）が大幅にアップしたそうです。
日本でも以下のような事例が発表されています。
www.ja.advertisercommunity.com
このように、既存のWEBサイトをアプリのように使えるのであれば専用のアプリを開発する必要性は薄れますし、WEBとアプリの2重管理のコストからも解放されます。そしてアプリ開発ができないような人でもWEBサイトさえ作れればほんの少しですがアプリ市場に参入することができます。
「PWAはWEBサイトを通じて収益を上げたい人にとって重要なテーマってことです」
PWAの仕組み
サイトを運営したことがある人ならざっくりイメージできるような図にしてみました。細かいことを言うと「違う」といわれそうな部分もあるのでしょうが、素人仕事なのでご勘弁を。
PWA化していないWEBサイトの場合
① ユーザーはモバイル端末のブラウザで読みたいWEBページのサーバーにアクセスする。
② サーバーは必要なWEBページのデータ（HTMLとかCSSとかJSとか画像とか）を一式全てデータの格納場所から探して引き出す。
③ 必要なデータ一式をユーザーのブラウザに送り届ける。ブラウザはそれらのデータを処理して表示する。
こんな流れでWEBページを読んでいるわけです。
ちなみにAMPがすごいのは通常表示させるのに必要なデータ一式の中からGoogleが制定した「最小限セット」にさらに絞り込んでさっさとブラウザにデータを送り届けているため、あほのように表示が早くなるのです。たとえるならマクドナルドの〇〇ハンバーガーセットを注文した人に対して「一番安いハンバーガーだけでお腹は足りるでしょ？」といって作り置きのハンバーガーをさっさと出してしまうという感じです。
PWA化したWEBサイトの場合
① PWA化してあらかじめモバイル端末に登録されていると必要なデータが最初から端末に保存されています。それだけを読むのであればインターネットにアクセスしなくとも閲覧可能です。そのうえで、新しい情報が必要な場合はWEBページのサーバーにモバイル端末からアクセスします。
② サーバーはユーザーの端末に保存されていないデータ（更新すべきデータ）のみを格納場所から探してきて引き出します。
③ 必要最小限のデータなのであっという間にユーザーのモバイル端末にデータを送り届けることができます。（考え方的にはAMPと似ていますね）
④必要なデータをモバイル端末側でもともとあったデータと合わせてWEBページを構築して表示します。
なお、サイトを運営する側がWEBページを更新した際に①のアクセスがなくとも「プッシュ通知」という形で②③の（最低限の）処理を行うことも可能です。（ここも従来のサイトの使い方と大きく違う所です）
このように2つのデータのやり取り方法の違いを見ても、明らかにPWAに対応したほうがユーザーがコンテンツにスムーズにアクセスすることができるのがわかります。
そしてそれはGoogleが望んでいるユーザー体験なわけです。
実際にPWAに対応させたときのイメージやメリットを解説した動画
PWA化したサイトは具体的には以下のサイトで多数紹介されています。
PWAに対応したサイトの事例やその様子の情報はまだまだ少ないのですが、動画などで多少は情報を得られるようになってきています。
下のツイッター動画はWindows10にWEBサイトをアプリとして認識させて動かしている様子です。
Just for kicks, here is @davatron5000's @godaytrip as a #PWA on a preview build of Windows 10! 🚀(inspired by: https://t.co/Flm63mmu6K) pic.twitter.com/t2Kr5MlTOX
— Kirupa 🍊 (@kirupa) 2018年2月1日
なんとなくイメージできましたでしょうか？
PWA対応するメリット
PWAには以下のようなメリットがあります。
- ページの読み込みや表示が速い（ユーザーストレスが少なく成約しやすい）
- オフラインでも動くのでユーザーがサイトを利用しやすくなる
- オフライン時に他のページに移動したりできる
- プッシュ通知の受信が可能（更新された情報が読まれる）
- インストール不要（アプリより手軽に使ってもらえる）
- ストアの審査がない（自由なコンテンツ配信可能。ストアに依存しない）
- GPSによる位置情報の取得と利用が可能（広告のターゲティングなどに応用）
- ネイティブアプリのようなUIを実現（メニューボタンによる操作がブラウザベースよりも容易）
どうでしょう？メリットをどのように生かせそうかイメージできますでしょうか？
PWA対応で誰もが〇〇できるようになる
PWAの波が本格的になるとビジネス的には次のようなことが起きると予測されます。
情報配信系のアプリを作れるようになる
例えばですが、ブログやサイトをアプリ化できます。雑記ブログをアプリ化してもあまり意味はないかもしれませんが、専門分野のコンテンツに絞ったものなどはアプリ化することでファンを囲い込むことができるようになるはず。
それこそ、特売情報のブログをアプリ化して「特売情報アプリ」にすることもできます。
○○のやり方に関するブログをアプリ化すれば「ノウハウ系アプリ」になるでしょう。
動画キュレーションメディアアプリだって簡単に作れるかもしれません。
アプリストアに頼らずともアプリを配信できる
アプリ化してもアプリストアを通さなければ意味がない・・・というのであればハードルが高すぎますね。
PWAはアプリストアを通さずにアプリとしてスマートフォンに登録できます。正確には「疑似アプリ」なのかもしれませんが。。。
ということは、配信するコンテンツやそこからの収益モデルにアプリストア独特の制限がかからないということです。
ある意味アダルトなコンテンツも容易にアプリ化できてしまうわけです。
ショッピングアプリも作れる
あまりニーズはないのかもしれませんが、もし他とは明らかに違う商品に特化したサイトを運営しているのであればショッピングアプリ化することもできるでしょう。
しかも、前述の様にPWA化したことでこれまでのWEBサイトとは違ってコンバージョン率が高くなるわけです。
PWA化して生まれるビジネスチャンス
PWA化は大きなWEB上の動きです。2018年になって話題に上ることが多くなりました。
マイクロソフトからもこんな発表があったばかりです。
Appleもコメントを発表しました。
MSに続きアップルもPWA対応を表明 AppStoreが不要に？ ｜ビジネス+IT
WEBサイトのスマホ対応や昨今のHTTPS化も大きな動きでしたが、PWAも大きな動きになりそうです。
それこそ「WordpressをPWA化して成功する」というような方法論をいち早く確立できればそれだけでビジネスができるかもしれません。
それくらい情報が不足しつつも潜在ニーズの大きな話題なのです。
WordpressのPWA化はどうやるの？
実際問題、WordpressのPWA化はどうするのでしょうか？
というかそもそもPWA化する流れなのでしょうか？
Googleは間違いなくWPのPWA化を推し進める
先日こんな記事を書きましたが、Googleは間違いなくWordpressのPWA化を強力にバックアップしてきます。そもそも求人内容にPWA化の話が出ているわけですから・・・。
世界中のサイトの3割近くがWordpressなわけで、そのWordpressがインターネットのトラフィックの足を引っ張っているわけですから改善しようと躍起になるのも無理もありません。
すでに動き出した事例も・・・
JetPackにはすでに隠しコードが実装済み
Wordpressで有名なJetPackプラグインにはすでにPWA化のためのコードが実装されているそうです。
jetpack/modules/pwa at master · Automattic/jetpack · GitHub
ただし、ベータ版として利用するためのアドインを追加する必要があります。
jetpack/beta-testing.md at master · Automattic/jetpack · GitHub
気になっている人はベータ機能を有効化して試してはいかがでしょうか？
WordpressをPWA化したサイトの事例
以下のサイトをスマホで読み込んでください。オフライン用のサービスワーカーは対応していないようですが、非常に高速に動くのがわかります。
Can Solution – Just another WordPress site
こんなプラグインも
厳密には現在のバージョンではPWA化のプラグインとは呼べなさそうな感じがしますが、プラグインのページにはいずれPWA化対応すると書いてあります。
Wordpressじゃない！って人はこのサイトを参考に
WordpressじゃなくともPWA化を簡単に実現するためのサイトもあるようです。
残念ながらはてなブログでは難しいのではないかと思うのですが、技術に詳しい人、情報あったらください。
最後に言いたい、はてなブログに希望はあるのか？
最後にですが、このように様々な変化が起きる中で「はてなは大丈夫だろうか？」と非常に心配です。
はてなブログは大変すばらしいブログだと思いますが、HTTPS化すらままならない、AMP対応も中途半端。
開発陣には本当に頑張ってもらいたいです。なんなら追加オプション料金払うからさ。
とりあえずPWAは今後の重要なキーワード！日々のニュースで気にかけておこう！