ポートフォリオサイトをPWAで構築する利点は？

はじめに

ポートフォリオサイトとは、自分のスキルや仕事の成果をオンラインで紹介するためのWebサイトを指す。ポートフォリオサイトは、自分の作品を魅力的に見せることができるWebサイトであるので、フリーランスの活動の場としても重要な役割を果たしてくれると思う。

PWA（プログレッシブウェブアプリ）とは、Webサイトをネイティブアプリのように扱える技術のことである。ネイティブアプリと同じくアイコンをホーム画面に追加できたり、サイト更新のタイミングでユーザーにプッシュ通知を送ることができる。

開発費用を抑えながらもアプリと同様の機能を利用できるため、その利便性から導入を検討する企業は増えているという。

PWAを導入することでプッシュ通知やホーム画面の追加機能を通じて接触機会を増やすことができるため、ニュースサイトやコンテンツマーケティングを行う企業は導入することでアクセスアップや新規顧客の獲得に繋がると言われている。

Webとアプリの両方の利点を持つPWAは、動作が早く、端末の機能を利用できることが最大の魅力である。PWAの仕組みを構成する技術には、Service Workers、Web App Manifest、Push API、ユーザーインターフェース（UI）ライブラリなどがある。PWA開発の際は、これらの技術を活用することが重要となる。

本稿では、PWAの基礎知識、PWAでポートフォリオサイトを構築するメリット、PWAでポートフォリオサイトを構築する方法について学んでいきたい。

＜目次＞
はじめに
PWAの基礎知識
PWAとは何？
PWAの特徴は？
PWAとWebブラウザの違いは？
ネイティブアプリとの違いは？
ハイブリッドアプリとの違いは？
ホーム画面にアイコンを設置できる
表示速度が優れている
検索結果にコンテンツを載せられる
プッシュ通知を送ることができる
開発コストを削減できる
使用するデータ容量が少ない
直帰率を下げられる可能性がある
PWAの基本構成
PWAの要件は？
PWAの起動方法は？
PWAでポートフォリオサイトを構築する利点
PWAでポートフォリオサイトを構築する方法
方法1: PWA対応プラグインを使用する
方法2: カスタム開発
あとがき

PWAの基礎知識

PWAとは何？

PWA（Progressive Web Apps）とは、WebサイトやWebアプリをスマートフォン向けのアプリのように利用できるようにするフロントエンドの技術のことである。

Webアプリがスマートフォン向けのアプリのように使用できるので、利便性が格段に向上する。従来のWebアプリの仕組みではできなかった、プッシュ通知設定をはじめとする機能も使用できるようになる。

PWAを利用することでネイティブアプリのような機能を持つWebアプリを構築できるため、現在多くのWebアプリで使用される傾向にある。

PWAは、アプリケーションストアを介してインストールされるネイティブアプリとは違い、OSによる制限を受けないのが最大の魅力である。

ネイティブアプリを開発する際、基本的にはAndroidとiOSでプログラム言語を使い分けたり、AndroidとiOSの開発の流れの差異に注意を払わなければならない。しかし、PWAであればそもそもOSの違いがないため、両方のOSに対応できる。

PWAはOSによる縛りがないうえに、ストア（AndroidならGoogle Playに、iOSならApp Store）に申請する手間やリスクもなく、すぐにユーザーに届けられる利点もある。

PWAの特徴は？

PWAには次のような特徴がある。

アプリをインストールしなくても、ホーム画面にアイコンを追加して起動できる
プッシュ通知やオフライン対応など、ネイティブアプリのような機能が使える
Webブラウザと同じく、URLでアクセスできる
開発コストや運用手数料がネイティブアプリよりも安い

PWAは、ユーザーにとって使いやすく、開発者にとって効率的なWebサイトの形と言えるだろう。

PWAとWebブラウザの違いは？

PWAとWebブラウザには主に以下の違いが挙げられている。

PWAは、スマートフォンのホーム画面にアイコンとして表示できる
Webブラウザは、ブラウザを開いて一度検索し、目的のページを表示させる必要がある
インターネットに接続できない環境では、PWAの場合はアイコンをクリックするだけで目的のページを表示でき、使い勝手が向上する。

ネイティブアプリとの違いは？

ネイティブアプリとは、OSごとに展開されているアプリケーションストアでインストールをして利用できるアプリケーションのことを指す。

ネイティブアプリを構築する場合は、想定するOSごとに構築の過程が異なる。さらに、AndroidならGoogle Play、iOSならApp Storeにアプリの申請をして、それぞれから承認される必要がある。

これに対してPWAは、スマートフォン向けのアプリの機能を備えながらも、OSごとの構築や各種OSの承認を経る必要がないのが特徴である。この点が、ネイティブアプリとの大きな違いである。

ハイブリッドアプリとの違いは？

ハイブリッドアプリとは、上記のネイティブアプリの性質と、Webアプリの両方の性質を併せ持ったアプリケーションを指す。

ハイブリッドアプリは、Webアプリに使用されるCSS3やHTML5、JavaScriptといった言語をベースに構築されるが、Webviewでの表示に限定されるため、ブラウザではその機能を利用できない。

ハイブリッドアプリは、ネイティブアプリ上にブラウザを設けるような仕組みであるため、PWAとは性質が異なる。

ホーム画面にアイコンを設置できる

ブラウザで表示させたページをホーム画面に追加することは従来のWebアプリでもできる。しかし、PWAの場合ではService Workerの機能を使用することによってアプリのようにホーム画面にアイコンを追加でき、任意のデザインのアイコンをユーザーのホーム画面に表示させられる。

また、ホーム画面に追加されたアイコンから、ユーザーの端末に保存されたキャッシュを用いてオフラインでもWebアプリを使用できる強みもある。

表示速度が優れている

PWAを利用すれば、Webアプリ上でキャッシュを使用できる。ローカルのキャッシュに保存できるため、再びWebアプリを開いた際の読み込みのスピードが従来よりも速くなる。

表示速度が速くなることで、よりユーザーにとって利便性の良いWebアプリになることは間違いない。表示速度を改善することにより、直帰率を下げられるというメリットもある。

表示速度はユーザー体験に直結する重要な要素であるため、表示速度で悩んでいる人には特に推奨できる。

検索結果にコンテンツを載せられる

検索結果にコンテンツを載せられるという点は、ネイティブアプリと決定的に違う。

ネイティブアプリはアプリケーションストアを介してインストールすることでしか、コンテンツを表示させられない。しかし、PWAはWebアプリであるため、検索エンジンがコンテンツを表示してくれる。そのため、キーワード等を使用して新しいユーザーを流入させやすく、ネイティブアプリと比較して大きなメリットであると言える。

プッシュ通知を送ることができる

プッシュ通知とは、アプリやウェブサービスからユーザーにリアルタイムで情報を送る仕組みのことをいう。ネイティブアプリではお馴染みのプッシュ通知であるが、Service Workerを使えばWebアプリでもプッシュ通知が可能である。プッシュ通知はユーザー体験の質を向上させるだけではなく、既存のWebアプリでも後付けで実装できるので開発者側にとっても利点がある。

但し、使用するブラウザによってはプッシュ通知の動作に違いがあったり、そもそもプッシュ通知に対応していなかったりする可能性がある点には注意が必要である。

開発コストを削減できる

前述したとおり、PWAはOSごとに開発の手順を分ける必要がないため、開発コストを削減できる。OSによる制限もない上に、アプリケーションストアにおける申請の期間も必要とせず、リジェクトされた際のスケジュール調整等の手間もいらない。

PWAは、コストを最小限に抑えながらも、ネイティブアプリの良い点をWebアプリに導入できる優れものである。ネイティブアプリには開発コストがそれなりにかかるが、PWAにすることでOSによる制約もなくWebアプリを使用できる。

プラットフォームを問わず、手軽に開発できるのもPWAの魅力の一つと言える。

使用するデータ容量が少ない

PWAは、ユーザー側のデータ容量を少なく抑えられる。PWAはキャッシュを利用することによってオフラインでもWebアプリを閲覧できるため、データ容量を極限まで抑えられる。

ネイティブアプリでは、ストアからアプリをインストールしたり、データをダウンロードする際に多くの容量を必要とするものも少なくない。

その点に関して、PWAはネイティブアプリと比較すると、最低限の通信で済むのも大きなメリットと言える。

直帰率を下げられる可能性がある

PWAの性質やメリットは、Webアプリ開発・運営側やユーザーの双方にとって大きなメリットをもたらす。前述したPWAのメリットが相乗効果として作用し、Webアプリの直帰率を下げられる可能性がある。

直帰率や遷移率、回遊率は、コンバージョン（CV）につなげるための大きな要素である。コンバージョンとは、Webサイトやアプリにおける特定の目標が達成されたことを指す用語である。この目標は、ビジネスやサービスの種類によって異なり、ユーザーが取る具体的な行動がコンバージョンとして定義される。そこで、PWAを使用することで、ユーザー体験の質を高めて直帰率を下げる役割を担い、コンバージョン率を向上させる可能性を秘めている。

PWAの基本構成

PWA開発の構成要素を押さえれば、PWAがどのような仕組みが理解できる。PWAの基本的な構成要素としては、下記のものが挙げられる。

Service Worker
- キャッシュ・プッシュ通知機能を可能にする
httpsのサーバー
- Googleで使用するために必要
Single Page Application
- サーバーから情報を呼び出すために必要
App Manifest
- ホーム画面のアイコン指定のために必要
- Splashスクリーンのために必要

PWA開発する際は、これらの基本的な構成要素を満たす必要がある。このように、PWAはそれ自体が何か特殊な一つの技術というわけではない。

レスポンシブデザイン、HTTPS化など、Googleが定める要素を備えたWebサイトであり、オフラインやプッシュ通知に対応するためのブラウザAPI（Service Workerなど）を利用しているだけである。

PWAの要件は？

PWAは、以下のすべての要件を満たしていることが必要である。

検索エンジンでコンテンツを見つけられる
端末のホーム画面にアプリを追加できる
URLを共有することで、アプリも共有できる
オフラインやネットワークが不安定な環境でも利用できる
最新のブラウザではフルの機能を利用できる
デバイスに応じて最適な形で使える
通知機能がある
安全性維持のためにhttpsを使用する

PWAの起動方法は？

PWAを初めて起動するときは、以下の手順で操作する。

パソコン等のインターネットデバイスでWebブラウザを開く
インストールしたいWebサイトにアクセスする
アドレスバーにあるインストールのアイコンをクリックする
画面の手順に従ってインストールする
2回目以降は、アイコンをクリックするだけで起動する

PWAでポートフォリオサイトを作る利点

PWAは、Webサイトとアプリの両方のメリットを持つ技術である。ポートフォリオサイトがPWAを実装すれば、プッシュ通知やホーム画面へのアイコン追加など、アプリの特徴的な機能をサイトに持たせる事ができる。そのため、ユーザーエンゲージメントの改善やコンバージョン率の向上にもつながると期待できる。

したがって、PWAでポートフォリオサイトを構築すれば、次のような利点を享受できるようになる。

AndroidとiOSのどちらでも使用できる
ストアに申請する必要がない
- アプリのダウンロード・アップデートを行う必要がない
- 通常のWebサイトと同じようにアクセスできる
ホーム画面にアイコンを設置できる
- ホーム画面にアイコンを追加すればアプリのように使える
- ユーザーエンゲージメントの向上が期待できる
- ユーザーはアイコンをタッチするだけでWebサイトを閲覧することができる
- オフライン時でも利用できる
  - インターネットに接続していなくてもキャッシュを利用してページを表示するため、オフラインでもサイトを閲覧できる
  - オフラインの間に入力されたデータをオンラインになったら送信するといったこともできる
表示速度が優れている（サイトの表示速度が高速化）
- ユーザー体験の改善が期待できる
- PWAはキャッシュを利用してWebサイトを表示させる
- キャッシュによってページを先んじて読み込める
- ページの表示速度が早くなり、ページを移動しやすくなる
検索結果にコンテンツを載せられる
- 検索エンジンによるサーチも期待できるからアクセスアップにつながる
- 検索エンジンでPWA対応サイトを見つけられる
- Webサイトのアクセス解析やSEO対策が有効になる
- アプリとは違いURLを送ればページを共有できる
プッシュ通知を送ることができる
- プッシュ通知を送れるから接触機会が増やせる
- ユーザーに最新の情報やお知らせを送ることができる
- Service Workerの機能により、従来のWebサイトでは出来なかったプッシュ通知が可能になる
- アプリ同様の積極的な通知・呼びかけがWebサイトからも出来るようになる
開発コストを削減できる
- アプリ開発よりも費用安い
- iOS・Android用に開発する必要がなく、既存のWebサイトに変更を加えるだけでPWAを導入できる
- アプリストアの審査を省くことができる
使用するデータ容量が少ない
直帰率を下げられる可能性がある

以上のように、PWAはネイティブアプリのような機能を備えているが、ネイティブアプリにはない利点も多く有している。PWAを導入するメリットは非常に多いと言える。

PWAでポートフォリオサイトを作る方法

WordPressのテーマにPWAを組み込むことは可能である。その方法は２通りあるので、WordPressでPWAを組み込む方法を簡単に説明する

方法1: PWA対応プラグインを使用する

WordPressには、PWAを簡単に導入できるプラグインがいくつかあるので、それを活用する。

Super Progressive Web Apps:
- 簡単にPWA機能を追加できるプラグイン
PWA for WP & AMP:
- 高機能で、オフラインアクセスやプッシュ通知をサポートする

これらのプラグインをインストールして設定するだけで、PWA化が可能である。

方法2: カスタム開発

テーマに直接PWA機能を組み込むには、以下の技術が必要である。

サービスワーカー:
- オフライン機能やキャッシュ管理を実現するスクリプト
- サービスワーカーを作成し、ポートフォリオサイトに追加する
- サービスワーカーは、PWAのキャッシュやオフライン動作、プッシュ通知などの機能を実現するJavaScriptファイルを指す
- このファイルをポートフォリオサイトのルートディレクトリに配置し、JavaScriptから登録する
ウェブアプリマニフェスト:
- アプリの名前やアイコン、表示設定を定義するJSONファイル
- マニフェストファイルを作成し、ポートフォリオサイトに追加する
- マニフェストファイルは、PWAの名前やアイコン、表示モードなどの基本的な情報を記述したJSONファイルのことである
- このファイルをポートフォリオサイトのルートディレクトリに配置し、HTMLファイルからリンクさせる
HTTPS:
- ポートフォリオサイトをHTTPS化する
- セキュリティを確保するために必須
- HTTPS化は、PWAの必須条件で、セキュリティや信頼性の向上にも寄与する

これらをWordpressのテーマに組み込むことで、独自のPWA機能を構築できる。PWAに対応したポートフォリオサイトは、PWAをサポートしているブラウザからアプリとしてインストールすることができるようになる。

注意点

PWAを導入する際は、サイトの目的やユーザー体験を考慮して設計することが重要である
プラグインを使用する場合は、信頼性の高いものを選ぶ

あとがき

PWA（Progressive Web Apps）は、ネイティブアプリのようにWebコンテンツをインストールできることが特徴である。つまり、PWAなら、アイコンが表示されるので、URLをお気に入りとしてブックマークする必要がない。さらにデバイスに関係なく、ホームページ上にデバイスの幅に合わせてサイトを最適な形で表示することができる。

私がPWAに興味を持ち、ポートフォリオサイトの構築にPWAを選択した理由は、PWAはWebサイトとWebアプリをネイティブアプリのように端末にインストールすることができるアプリであるからである。そして、Webアプリでありながら、ネイティブアプリと似た機能が搭載できるという利点があるからである。

こののように、本稿では、ポートフォリオサイトをPWAで構築することに着目したが、当初は自分自身で新たなアプリを開発したくなり、従来から汎用されているアプリでなく、PWAを用いて開発したいと思ったのがそもそもの始まりである。

私が開発したいアプリはスマホ用であるため、本来であればネイティブアプリと呼ばれるアプリで開発すべきものであろう。しかし、ネイティブアプリで開発するとなるとiPhone用とAndroid用の２種類のアプリを開発しなくてはならなくなるし、双方の保守管理のことを考えると憂鬱になり、アプリ開発の意欲が失せてくる。そこで注目したのが、PWAである。

そんな魅力的なPWAを独学でアプリ開発に使えるようにしたいと思った。しかし、PWAを独学で習得するにはどうすれば良いのか？

アプリ開発の独学による習得期間には個人差があるが、一般に約200〜300時間が必要だと言われている。また、どれくらいのレベルを目指すかによっても、学習期間は異なってくる。一概に何時間勉強すれば良いと言うものではないのかも知れない。しかし、断言できることは、ちょっと学習したぐらいで、すぐに習得できるようなものではないということである。

その一方で、時間をかけることができれば、初心者にもアプリ開発のスキルを習得できる可能性があるということになる。時間がかかることを前提にすれば、忍耐力を武器にして学習を継続していけば良い。モチベーション維持も必要となるだろうが、好奇心の強いシニア世代にはむしろ最適である。

アプリ開発を独学で進める利点は、学習コストが抑えられることと、自分のペースで勉強できることである。特に、自分のペースで学習できることが独学の最大の利点と言えよう。自分の理解度や住環境に合わせて学習を進められるのは、独学ならではの利点である。

勿論、独学に欠点がないわけではない。独学での学習では、疑問点が出てきた場合、自分で解決しなければならない。疑問点を解決しにくいという欠点である。そのような場合の主な解決方法と言えば、書籍やWebサイトからの情報取得となる。

また、独学の際には、何を学ぶべきなのかを探すところから始まる。アプリ開発の知識のない者は、この時点でかなりの労力を使う。さらに、分からないことが積み重なると学習が思うように進まない。結果として、アプリ開発を挫折してしまうことにつながることになりかねない。

このように独学では自分で学習カリキュラムを組まなければならないし、そのためには計画性が求められる。しかし、私たちシニア世代には時間がたっぷりとあるのが有利な点である。あせる必要は全くない。

さらに、ポートフォリオサイトをPWAで構築することを検討することは、リベラルアーツの学習に深く繋がる行為でもある。

リベラルアーツとの繋がり

論理的思考と技術的創造性の統合
- PWA構築では、プログラミングや設計スキル（技術的思考）が求められる
- 一方で、美しいデザインや効果的な情報伝達を行うための創造性が重要
- この組み合わせは、リベラルアーツの多領域的アプローチによく合致する
多学問的な視点の応用
- 心理学
  - ユーザー体験（UX）の向上を目指し、訪問者の行動を考慮する
- デザイン学
  - 視覚的魅力やアート要素を取り入れる
- 情報学
  - データ管理やセキュリティに関する知識を応用する
- 経済学
  - サイトの収益化を検討するビジネスモデルの理解
実践的学習の場
- 実際にPWAを構築する過程で、抽象的な概念だけでなく、コードを書く具体的なスキルや問題解決能力を身につけることができる

個人の成長と価値創造

自己表現の場
- ポートフォリオサイトは、自分のスキルや価値観を他者に伝える手段になる
- この自己表現のプロセスもリベラルアーツの中心的な考え方である
社会との接続
- ポートフォリオサイトは、他者と繋がる橋渡しになる
- クライアントや読者との対話を通じて、新しい視点や知見を得ることができる