ざわちゃみです。
ド素人でも簡単にかっこいいサイトが作れるという記事を紹介させて頂きました。
THE THORの使い方を紹介しながら、自分も少しずつ覚えていけるように頑張りたいと思います。
今回は、「PWA設定」編。
PWAはGoogleが推進するプロジェクトであるため、今後SEOの面でもPWAであることが重要となってくる可能性があります。
一つ一つ見ていきましょう！
PWA設定のTOP
PWAとは、「Progressive Web Apps」の略称で、モバイル向けWebサイトをスマートフォン向けアプリのように使える仕組みのことを指します。
見た目は、アプリと全く一緒です。
PWAにするメリットを挙げてみましょう。
①ページの読み込みが速い
PWAの場合、データ通信量が抑えられるという特徴があるため、読み込みが高速化されます。
そのためユーザーは、快適にコンテンツを利用してもらうことができます。
②オフラインでも動く
通信が一時的に途絶えても、継続してWebサイトを閲覧することができます。
③アプリではないためインストールがいらない
インストール不要のためユーザーの手間が省けます。
④プッシュ通知を送信することができる
Webサイトでありながらプッシュ通知を送信することができます。
⑤アプリではないため審査がない
例えば、アプリをリリースしようとする場合、AppStore等の審査を受ける必要がありますが、PWAではその手間を省くことができます。
⑥GPS機能を使える
GPS機能を利用できるため、ユーザーの位置情報に応じてコンテンツを提供することも出来ます。
⑦ホームスクリーンにアイコンを追加できる
アプリのアイコンのように、ホーム画面にアイコンを追加することができます。
ユーザーにとっては使いやすく通信料も減らせるというメリットもあり、発信側はユーザーの使いやすさによってWEBサイトへの流入数を増加させることが出来ます。
PWA機能設定
ここを有効にすると、スマホ表示時にホーム画面へ追加ボタンが表示されます。
アイコンの設定
各サイズ毎のアイコンの画像を設定します。
スマホへの設定の仕方
私は現在iPhoneを使用しているのですが、実際にどんな感じで設定するのかやってみました。
知識のある方であれば当たり前の話かもしれませんが、PWA機能を有効にしただけではユーザーのホーム画面に自分のサイトのアイコンが設定されることはありません。
ユーザーに設定してもらう必要がありますので、設定してもらうためにも誘導する必要があります。
まず、twitterなどで自分のサイトを開いてもらった場合、右下のアイコンを押してsafariで開きます。
googleで開いた場合は、□に↑が重なったマークを押してsafariで開きます。
右下のマークが□が重なったものになったら、真ん中にある□に↑が重なったマークを押します。
すると、下段に「ホーム画面に追加」というものが出てきますので、そこを押す。
上記の画面が出てきますので、右上の追加を押すと、
アイコンが出てきたー！
と、なるわけです。
ここを押せばすぐに自分のブログに飛んでもらえて、なおかつオフラインでも見れるようになるので非常に便利です。
「THE THOR」で素敵なサイトを作りましょう！
☆ただのサラリーマンが一つの夢を掴みました☆
私ざわちゃみが漫画の主人公になったアルティメット課長！！
パニック7ゴールドにて再連載目指し中！！
