Webサイト作り その他

WordPressで「ホーム画面に追加」を入れる方法【PWA化】

WordPressで「ホーム画面に追加」を入れる方法【PWA化】

スマホで、ウェブサイトを見ていると、たまに「ホーム画面に追加」っていうメッセージが出ることがありませんか。

こんな画像のことです。

ちょっと見にくいですが、スマホ写真の下に「ホーム画面に追加」って出てますよね。

 

「ホームページに追加」をクリックするとアプリのインストールが始まり、ホームページに

該当のウェブサイトのショートカットみたいのができて、アプリみたいな活用ができるようになります。

この機能は、Wordpressを使ってウェブサイトを作っている方なら、プラグイン一つで簡単に実装可能です。

再訪者を増やす、非常に有効なツールですので是非実装してみましょう。

PWA化とは

この「ホーム画面に追加」ですが、PWA(Progressive Web Apps)という技術を使えば簡単に実装可能です。

PWAとはネイティブアプリ(通常のアプリ)のようにウェブサイトが使える技術です。

ウェブサイトは、クロームなどのブラウザを介して動作しています。

それに対して、ネイティブアプリは例えばエクセルみたいにブラウザを介さずに動きます。

つまり、まとめちゃうと我々のウェブサイトをアプリっぽくします。っていうのがPWAです。

これを導入すると「ホームページに追加」を入れることが可能です。

PWA化の長所

PWA化の長所は色々あるので、詳しくは「PWA」「長所」でググってください。

代表的な奴を言っちゃうと

・オフラインで使える

・再訪者が増える

・処理速度が上がる

になります。特に再訪者が増えるに関しては、当サイトのようないわゆる弱小サイトにとってありがたいです。

当サイトは2020年の11月に実装したのですが、2021年2月までに4人の方がPWA化によりアプリで当サイトに再訪してくださっています。

1月400人くらいが訪問される弱小サイトで設定3ケ月で4人というのはかなり大きな効果だと思ってます。

あとPWA化のデメリットですが、特にありません。

なんで、ドンドン導入していくのがおススメです。

PWAの導入方法

ここではPWAの導入方法について説明します。

ざっくり以下2つのステップです。

1. 画像を準備

アイコン画像として192×192の画像1枚と、512×512の画像1枚を作成してください。

作成したら、通常通りワードプレスのメディアにローディングしてください。

画像作成方法

192×192ピクセルと512×512ピクセルの画像の作り方が分からない人向けに、やり方の一例を説明します。

まず最初にパワポで適当に正方形の枠を作ってその中に何か文字でもいいので書いてロゴを作ってください。

出来たらグループ化して右クリックで図として保存。JPEGで保存。

保存した図をペイントで開いてください。開いたら上にある「ホーム」タブをクリック。

サイズ変更をクリックして、ピクセルを選択。あとはそれぞれ192×192ピクセル、512×512ピクセルの画像を数字入力で作ればOKです。

 

2. プラグインSuper Progressive Web Appsをインストール

WordPress ダッシュボードのプラグイン画面から、Super Progressive Web Appsをインストールしてください。

インストールしたら、通常のプラグインと一緒で有効化を選択。

3. Super Progressive Web Appsの設定

設定は以下の写真の通りで大丈夫です。

Application Name 適当に入れてください(サイト名)
Application Short Name 適当に入れてください
Description 適当に入れてください
Application Icon Choose Iconをクリックして事前に作った192×192の画像を選択してください
Splash Screen Icon Choose Iconをクリックして事前に作った512×512の画像を選択してください
Start Page Homepageを選択
Offline Page Defaultを選択
Orientation Follow Device Orientationを選択
Display Standaloneを選択

Super Progressive Web Appsの導入の確認方法

自分でサイトを何回か開いてみて、ホーム画面に追加の画面が出たら完成です。

アプリを介して、サイトにアクセスした場合Google Analyticsの参照元にsuperpwaと記載されます。

カテゴリー

-Webサイト作り, その他

© 2021 English コーチン 名古屋で英会話 Powered by AFFINGER5