PWAを作っていると、だんだん「もっとアプリっぽくしたい」と思うようになります。
ブラウザのUIを消して、フルスクリーンにして、戻るボタンも自前で作って、ページ遷移もアプリのように見せる。
確かに、そこまで作り込めば見た目はかなりネイティブアプリに近づきます。
でもPWAをいろいろ試しているうちに、私は逆の疑問を持つようになりました。
PWAは、本当にネイティブアプリへ近づけるほど良いのでしょうか。
今回は、PWAをどこまでアプリらしくするべきなのか。そして、あえてWebらしさを残す設計について考えてみます。
PWAには「アプリっぽくする機能」がたくさんある
PWAには、通常のWebサイトとは違う見せ方をするための仕組みがあります。
例えばWeb App Manifestでは、
"display": "standalone"と設定することで、ブラウザの通常UIを減らした状態で表示できます。
さらに、
"display": "fullscreen"とすれば、対応環境ではさらに画面全体を使った表示もできます。
ホーム画面には専用アイコンを置けて、名前も付けられます。
見た目だけを見れば、Webページというよりアプリに近い体験を作れます。
アプリっぽくすること自体が目的になると少し危ない
PWAを作り始めた時は、ブラウザっぽさが消えるほど完成度が高いように感じることがあります。
URLバーが見えない。
ブラウザのボタンがない。
全画面で動く。
ページ遷移も独自UIで行う。
確かにアプリらしく見えます。
ただし、そのためにWebがもともと持っている便利さまで消してしまうと、本末転倒です。
Webの強みはURLをそのまま扱えること
ネイティブアプリと比べた時、Webには非常に強い特徴があります。
URLがあります。
ページを共有できます。
検索結果から直接そのページへ入れます。
リンクを押せば、サイトの途中へ直接移動できます。
商品ページ、記事、プロフィール、ツール、設定状態まで、URLとして表現できます。
私は1P1AやUDAを考える中で、このURLこそWebのかなり大きな強みだと感じています。
「WebはどこまでAppになれるか？」その問いは、もう逆かもしれないでも書きましたが、Webがアプリへ近づくだけではなく、アプリ側がWebの柔軟さを持ち始めているとも考えられます。
Webらしさを消しすぎるとリンクの意味が薄くなる
例えば1つのWebツールを、完全に独立したアプリのように見せたとします。
画面内から外部ページへ移動できないようにして、URLも見えず、サイト内リンクも減らす。
すると確かにアプリらしくはなります。
でもその代わりに、
- 関連ページへ移動しにくい
- URLを共有しにくい
- 別の機能を探しにくい
- Web検索とのつながりが弱くなる
ということも起こります。
PWAはWeb上で動いている以上、Webのリンク構造を活かせるのが強みです。
そこを全部閉じる必要はありません。
standaloneくらいがちょうどいいことも多い
私は通常のPWAなら、まず display: standalone から考えることが多いです。
理由は単純で、ブラウザ感をかなり減らしながら、Webとしての使いやすさも残しやすいからです。
PWA LABではAndroidとiPhoneで standalone と fullscreen を比較しました。
Androidではfullscreenにすると、standaloneよりさらにブラウザ由来のUIが減り、画面を広く使えました。
一方、iPhoneでは私の実機検証ではstandaloneとfullscreenの見た目に大きな差を感じないケースもありました。
この違いについては、PWAのstandaloneとfullscreenの違い｜どっちを使うべき？で詳しくまとめています。
fullscreenが向いているPWAもある
もちろんfullscreenが悪いわけではありません。
画面全体を使うこと自体に意味があるサービスなら、かなり相性が良いです。
例えば、
- ゲーム
- 画像編集ツール
- デジタルサイネージ
- 店舗の受付端末
- プレゼン表示
- 画面を広く使いたい専用ツール
などです。
こういうものは、ブラウザUIが消えること自体がUXの改善になります。
つまり「fullscreenの方がアプリっぽいから使う」のではなく、その機能に全画面が必要だから使う方が自然です。
普通の記事までアプリUIにする必要はあるのか
逆に、ブログ記事や読み物を考えてみます。
ホーム画面から開いたからといって、急に独自の下部ナビゲーションを付けたり、戻る操作を特殊にしたりする必要はないかもしれません。
記事は記事として普通に読める。
リンクも普通に押せる。
共有もできる。
ただしホーム画面から1タップで開ける。
それだけでも十分PWAの価値があります。
PWAをホーム画面に追加するメリットは？「再訪」から考える本当の価値でも触れたように、ホーム画面は「もう一度戻ってくる入口」として使えます。
そのためにWebの読みやすさまで変える必要はありません。
ホーム画面から開いた時だけ少し変えるという方法もある
完全に別UIへ変えるのではなく、ホーム画面から起動した時だけ一部を調整する方法もあります。
例えば、
- 「ホーム画面に追加」の案内を消す
- 検索向けの大きな説明を少し減らす
- よく使う操作を上へ持ってくる
- 再訪ユーザー向けの案内を表示する
といった変更です。
standalone状態はJavaScriptから確認できます。
const isPWA =
window.matchMedia('(display-mode: standalone)').matches ||
window.navigator.standalone === true;これなら同じURL、同じWebページを使いながら、起動方法に合わせて少しだけ体験を変えられます。
詳しい方法は、PWAをホーム画面から開いた時だけ表示を変える方法で紹介しています。
「Web版」と「PWA版」を完全に分けなくてもいい
PWAを作る時、普通のブラウザ版とホーム画面版を別物として作りたくなることがあります。
でもPWAの面白いところは、基本的には同じWebページを使えることです。
検索から開く
↓
普通のWebページ
ホーム画面から開く
↓
同じURL
↓
必要な部分だけPWA向けに調整完全に2つのアプリケーションを作る必要はありません。
この軽さは、PWAのかなり大きなメリットだと思います。
ネイティブアプリの真似をしなくてもホーム画面には置ける
PWAを「ネイティブアプリの簡易版」と考えると、どうしてもネイティブアプリへ近づける競争になります。
でも、ホーム画面に存在するWebという見方をすると、少し違って見えます。
Webページのままでもいい。
リンクがあってもいい。
検索から入れてもいい。
URLを共有できてもいい。
そして、必要なページだけホーム画面へ置ける。
これはネイティブアプリを真似したものというより、Webに新しい入口を追加した状態とも言えます。
1P1Aでは特にWebらしさが重要になる
私が考えている1P1A（One Page. One App.）では、サイト全体ではなくページごとにホーム画面へ置きます。
例えば、
サイト
├─ タイマー
├─ 画像圧縮
├─ 商品A
└─ プロフィールこれらを、それぞれ別のホーム画面アイコンとして扱えます。
しかし、元はすべて同じWebサイトです。
タイマーから関連ツールへ移動してもいいし、プロフィールから別ページへ移動してもいい。
ページ単位ではAppのように見せつつ、その裏ではWebとしてつながっている。
1P1A（One Page. One App.）というPWA設計思想で考えているのも、この両立です。
アプリらしさとWebらしさは二択ではない
ここまで書くと、「アプリっぽくするか、Webのままにするか」という二択に見えるかもしれません。
でも実際には、その間を自由に選べます。
| 設計 | 特徴 |
|---|---|
| 通常のWeb | ブラウザUIやURLをそのまま使う |
| 軽いPWA | ホーム画面追加＋standalone程度 |
| アプリ寄りPWA | 専用ナビやPWA向けUIを追加 |
| 没入型PWA | fullscreenなどで画面全体を利用 |
サービスによって最適な場所が違います。
ブログとゲームを同じPWA設計にする必要はありません。
判断基準は「アプリっぽいか」ではなく「使いやすいか」
結局、見るべきところはここだと思います。
アプリらしく見えるかではありません。
その変更によってユーザーが使いやすくなるか。
URLバーを消した方が操作しやすいなら消す。
全画面が必要ならfullscreenを使う。
リンクが便利なら残す。
ブラウザの戻る操作が分かりやすいなら、それを邪魔しない。
ホーム画面から開いた人にだけ少し違う案内を出した方が便利なら、そこだけ変える。
それで十分です。
PWAは「Webをアプリに変える技術」だけではない
PWAはよく「Webサイトをアプリ化する技術」と説明されます。
もちろん、その説明は分かりやすいです。
でも実際に使ってみると、必ずしもWebを捨ててアプリへ変身させる必要はないと感じます。
Webのまま検索できる。
Webのまま共有できる。
Webのままリンクでつながる。
そこにホーム画面という新しい入口を追加する。
アプリらしさを足しながら、Webらしさも残す。
PWAは、その間を自由に設計できるところが面白い技術なのだと思います。
