PWAはどこまで「アプリ」に寄せるべき？Webらしさを残す設計もあり
PWAはネイティブアプリのように見せるほど良いのでしょうか。standalone・fullscreen・ホーム画面UIなどを使いながら、Webのリンク性や軽さを残す設計とのバランスを実体験ベースで考えます。
CATEGORY
PWA
Webサイトをアプリのように使えるようにする仕組み「PWA（Progressive Web Apps）」を解説するカテゴリーです。 manifest.json・Service Worker・オフライン対応・ホーム画面追加など、実装に必要な知識と活用方法をまとめています。
PWAのstart_urlは何を指定すべき？トップ・現在ページ・専用URLの違い
PWAのstart_urlには何を指定すべき？サイトトップ、現在のページ、専用URL、start_url: "." の違いを整理し、1S1Aと1P1Aで設計がどう変わるのかを実機検証ベースで解説します。
PWAのホーム画面アイコンは何を設定すればいい？name・short_name・iconsの役割
PWAをホーム画面に追加した時の名前やアイコンは何で決まる？Web App Manifestのname・short_name・iconsの役割と、iPhone・Androidで実際の表示がどう変わるのかを分かりやすく解説します。
PWAをホーム画面に追加するメリットは？「再訪」から考える本当の価値
PWAをホーム画面に追加するメリットを「再訪」という視点から解説。検索やSNSから訪れたWebページをホーム画面に残し、次回から1タップで戻れる入口に変えるPWAの価値と、追加後のUX設計を考えます。
PWAはホーム画面に追加してもらってからが本番｜再訪されるWebアプリの作り方
PWAはホーム画面に追加できたら完成ではありません。本当に重要なのは、そのアイコンから再訪してもらうこと。ホーム画面起動の判定、専用UI、限定案内、アクセス解析まで、追加された後のPWA設計をわかりやすく解説します。
PWAの「ホーム画面に追加」を案内するベストなタイミングは？
PWAの「ホーム画面に追加」は、いつ案内するのが効果的？初回訪問ですぐ表示するのではなく、記事を読み終えた時、Webツールを使った後、再訪した時など、ユーザーが「また使いたい」と感じるタイミングからホーム画面追加のUXを考えます。
PWAのstandaloneとfullscreenの違い｜どっちを使うべき？
PWAのWeb App Manifestで指定するdisplay: standaloneとfullscreenは何が違う？AndroidとiPhoneで実機検証した結果をもとに、ブラウザUI、アプリ感、使いやすさの違いと、どちらを選ぶべきかをわかりやすく解説します。
PWAのホーム画面起動をアクセス解析する方法｜UTMだけでは分からない再訪を計測
PWAがホーム画面のアイコンから起動された回数をアクセス解析する方法を解説します。UTMパラメータだけでは区別しにくいホーム画面からの再訪を、display-mode: standaloneで判定し、GA4のカスタムイベントとして計測する実装例を紹介します。
PWAをホーム画面から開いた時だけ表示を変える方法｜限定案内・クーポンにも使える
PWAをホーム画面から起動した時だけメッセージやメニュー、限定案内、クーポンを表示する方法をJavaScriptで解説します。display-mode: standaloneとnavigator.standaloneを使い、通常のWeb閲覧とホーム画面起動でUIを出し分ける実装例を紹介します。
PWAをホーム画面から開いたか判定する方法｜display-mode: standaloneの使い方
PWAが通常のブラウザで開かれたのか、ホーム画面からstandalone表示で起動されたのかをJavaScriptで判定する方法を解説します。matchMedia('(display-mode: standalone)')の使い方、iPhone向けnavigator.standalone、実機確認の注意点まで紹介します。
