1P1A（One Page. One App.）というPWA設計思想

PWAでは一般的に、1つのWebサイトを1つのアプリとして扱います。

ホーム画面へ追加すると、サイト全体を表すアイコンが作成され、起動するとそのWebサイトが開きます。

私はこれを

1 Site. 1 App.

という設計だと考えています。

もちろんこれは現在のPWAでは最も一般的な設計です。

1P1Aとは

1P1A（One Page. One App.）とは、

1ページを1つのアプリとして設計する考え方です。

ホーム画面へ追加される対象はWebサイトではありません。

ページそのものです。

例えば、

• 商品ページ
• ブログ記事
• プロフィールページ
• デジタル名刺
• ランディングページ

これらをそれぞれ独立したアプリとしてホーム画面へ追加します。

アイコンもページごとに持つ

従来のPWAでは、

サイト
└── サイトアイコン

という構造になります。

一方、1P1Aでは

商品ページ
└── 商品画像

記事
└── アイキャッチ画像

プロフィール
└── プロフィール画像

というように、

ページごとに意味を持ったアイコンを使用します。

ホーム画面を見るだけで、どのページなのかが分かります。

OJapp Tips｜合わせて読みたい
PWA・ショートカット・OJappの違いを徹底比較｜どれを使うべきか の解説が役に立ちます。

起動URLもページ単位

1P1Aでは、アプリを起動したときに開くURLもページ単位で制御されます。

つまり、

商品ページを追加したら、直接その商品ページが開く

ブログ記事を追加したら、直接その記事が開く

プロフィールを追加したら、直接そのプロフィールが開く

ホーム画面のアイコンを「サイトのトップドア」ではなく、「特定のコンテンツへ直行する専用の入口」として利用する考え方です。

「それって普通のブックマークやショートカットと何が違うの？」

そう思った方も多いかもしれません。ブラウザの「ホーム画面に追加」を使えば、当たり前にできるように感じますよね。

しかし、これまでの一般的なPWA（1 Site. 1 App.）では、これが大きな障壁になっていました。

サイト全体をひとつのアプリとして設計する場合、PWAの設定ファイル（⁠manifest.json⁠）で以下のようにアプリの有効範囲（Scope）を定義します。

"scope": "https://ojapp.app/"

このようにドメイン全体を1つのアプリ領域として指定すると、AndroidなどのOSは「このドメインのアプリはすでにインストール済みである」と判定します。

その結果、たとえば
⁠https://ojapp.app/petal⁠
⁠https://ojapp.app/pastcamera⁠

という2つの異なるページをそれぞれホーム画面に追加しようとしても、「このアプリはすでにスマホに存在します。アプリを開きますか？」 とOSに拒否され、別々のアプリ（アイコン）として追加させてもらえなくなってしまうのです。

1P1Aは、この「1つのサイト＝1つのアプリ」というPWAの固定観念を崩し、ページごとに独立した体験とアイコンを提供する設計思想なのです。

1P1AはPWAの新しい使い方

1P1Aは、何か新しいPWAの技術や仕様を追加するものではありません。

すでに存在するPWAの技術をどう捉え、どう活かすかという「設計思想」です。

Webサイト全体を大きなアプリとして閉じ込めるのではなく、

ひとつひとつの「ページ」そのものを独立したアプリとして解き放つ。

私はこの考え方を、

1P1A（One Page. One App.）

と呼んでいます。

今後、記事・EC・プロフィール・名刺など、さまざまなWebサービスで応用できる設計になると考えています。