STUDY PASSPORTアップデート情報
今回のアップデートで、STUDY PASSPORTが「アプリ」として使えるようになりました。新しいアプリを入れるわけではなく、いつものSTUDY PASSPORTをホーム画面に追加できるようにした機能追加です。
結論を先に
今回のSTUDY PASSPORTアップデートにより、App StoreやGoogle Playを経由せず、スマホのブラウザからホーム画面に追加するだけでアプリのように使えるようになりました。実際にAndroidで試してみたところ、インストール自体は数秒で終わって快適だったのですが、自分で追加した「アプリとして追加する」ボタンが、問題を解いている最中もずっと画面に居座っていて地味に邪魔だと気づきました。この記事では、iPhone・Android両方のインストール手順に加えて、気づいてからその場でボタンを直した過程までそのまま公開します。
この記事でわかること
- STUDY PASSPORTをアプリとしてホーム画面に追加する、Android・iPhoneそれぞれの具体的な手順
- アプリ化すると何が変わるのか（起動の速さ・見た目）
- 実際にインストールしてみて気づいた「ボタンが問題を解いている間も邪魔」という不具合の実例
- 気づいてからその場で直した改善の中身（5秒で小さくなる仕組みにした話）
- ホーム画面に追加したときの学習データの扱い（iPhoneは要注意）
アプリ化（PWA化）すると何が変わるのか
STUDY PASSPORTは元々、ブラウザでURLを開いてパスワードを入力すれば使える模擬試験アプリでした。今回対応したのは、いわゆる「アプリストアで配信されるネイティブアプリ」ではなく、PWA（Progressive Web App）という仕組みでのアプリ化です。ホーム画面にSTUDY PASSPORTのアイコンが追加され、タップするとブラウザのアドレスバーなどが表示されない、アプリのような見た目で起動します。
App StoreやGoogle Playでの配信も検討したのですが、Appleの年間デベロッパー登録料（$99）に加えて、Google Playは2026年現在、新規の個人アカウントだと公開前に12人以上のテスターによる14日間以上の連続クローズドテストが義務付けられており、登録から公開まで実質3〜4週間かかる見通しでした。それに比べてPWA化は審査も追加費用も不要で、既存のWordPressの仕組みの上にそのまま実装できたため、まずこちらから着手しました。
Android（Chrome）でホーム画面に追加する手順
実際に自分のAndroid端末・Chromeで試した手順です。STUDY PASSPORTのページ（パスワード入力後の画面）を開くと、しばらくして画面の右下に金色の「📲 アプリとして追加する」ボタンが表示されます。これをタップするだけで、Chromeが標準のインストール確認画面を出してくれるので、あとは「インストール」を選べば完了です。
インストール後は、ホーム画面に追加されたアイコンをタップするだけで、ブラウザのアドレスバーなどが表示されないアプリのような画面で起動します。体感でも、ブラウザでブックマークから開くより一段階早く本編にたどり着ける印象でした。
iPhone（Safari）でホーム画面に追加する手順
iPhoneの場合、AndroidのようにChromeが自動で「アプリとして追加する」ボタンを出してくれる仕組みが使えません。Safariの「共有」ボタン（□に上矢印のアイコン）から「ホーム画面に追加」を選ぶ、という手動操作が必要になります。手順は次のとおりです。
iPhoneでの手順
1. SafariでSTUDY PASSPORTのページを開き、パスワードを入力する
2. 画面下（または上）にある「共有」ボタン（□に上矢印のアイコン）をタップする
3. メニューを下にスクロールし、「ホーム画面に追加」を選ぶ
4. 表示名を確認し、右上の「追加」をタップする
この方法はChrome以外のブラウザ（Safari）にもともと備わっている機能で、STUDY PASSPORT側で特別な操作をしなくても以前から使えました。今回のPWA化では、この標準機能を使ったときにアプリらしいアイコン・見た目・起動画面になるよう、裏側の設定（アイコン画像やアプリ名などの情報）を整えた形になります。
実際に使ってみて気づいた「ボタンが問題を解いている間も邪魔」問題
インストール自体は数秒で終わって拍子抜けするほど簡単だったのですが、実際にAndroid端末で模擬試験を解き始めてから、違和感に気づきました。最初に実装したときは、金色の「アプリとして追加する」ボタンを画面下の中央に固定表示させていて、しかもインストールが済むまでずっと表示されっぱなしの仕様にしていました。
問題画面を開くと、選択肢のすぐ下にある「ヒントを見る」ボタンのさらに下に、このインストールボタンが常に居座っている状態になります。1問目を解いているときはまだ気にならなかったのですが、何問か解き進めるうちに、視界の端に金色のボタンが常にちらつくのが地味に気になってきました。実際に自分で操作してみて初めて気づいた不具合で、「表示すること」自体は正しくできていても、「表示し続けること」がユーザー体験としては良くなかった、というパターンでした。
気づいてから直すまで：5秒で小さくなる仕組みに変更
このボタンは、iPhone・Androidのアプリと違って自分でコードを書いて実装しているものなので、その場で仕様を直すことにしました。やったことは大きく3つです。
実際に加えた3つの修正
1. ボタンが出てから5秒だけ大きい状態（文字入り）で目立たせ、そのあとは自動的に金色の丸いアイコンだけの小さい表示に縮小するようにした
2. 小さくなったあとも、タップすればいつでもインストールを実行できるようにした（機能自体は消さない）
3. ボタンの位置を画面下の中央から右下の隅に移動し、問題文や選択肢の真下に来ないようにした
「最初に一瞬だけ大きく見せて、あとは小さく」という仕様にしたのは、存在に気づいてもらう役割と、邪魔にならない役割を両立させたかったからです。ずっと大きいままだと今回のように問題を解く邪魔になりますし、逆に最初から小さいアイコンだけだと、そもそも「アプリとして追加できる」こと自体に気づいてもらえません。実際に自分の端末で直後の動きを確認し、5秒後にきちんと小さいアイコンへ切り替わることをその場で確かめてから、本番の設定に反映しました。
実際に修正を反映したあと、もう一度Android実機で確認してみました。表示された直後は、位置が右下に変わった状態でラベルと×が見えていますが、5秒ほど経つと写真のとおり金色の丸いアイコンだけに縮小されます。問題画面でも視界の端に小さく収まっていて、1問目のときのような気になり方はなくなりました。
ホーム画面に追加したデータは引き継がれる？（iPhoneは要注意）
もう一点、インストール前に知っておいてほしいのが学習データの扱いです。Androidの場合は、ホーム画面に追加したアプリも普段使っているChromeと同じデータ領域を使うため、これまでの学習履歴・実績バッジ・正答率はそのまま引き継がれます。
一方iPhoneでは、Safariから「ホーム画面に追加」したアプリは、Safari本体とは別のデータ領域として扱われる仕様になっています。そのため、これまでSafariのブラウザでSTUDY PASSPORTを使っていた方が、ホーム画面に追加したアプリ版に切り替えると、学習履歴が「消える」わけではないものの、別領域扱いになるため引き継がれません。切り替え前に、STUDY PASSPORT内の学習データエクスポート機能（JSON形式）でバックアップを取り、アプリ版に切り替えたあとインポートすることをおすすめします。
この記事のまとめ
- 今回のSTUDY PASSPORTアップデートで、App Store・Google Playを経由せず、ブラウザから直接ホーム画面に追加できるようになった
- Androidは表示される「アプリとして追加する」ボタンをタップするだけ、iPhoneはSafariの「共有→ホーム画面に追加」で対応する
- 実際にインストールして使ってみたところ、ボタンが問題を解いている間もずっと表示され続ける点が使いづらく、気づいた直後に仕様を修正した
- 修正後は、出現直後の数秒だけ目立たせたあと自動的に小さいアイコンへ切り替わり、位置も画面右下に変更した
- iPhoneでホーム画面に追加すると学習データが引き継がれないため、切り替え前にJSONエクスポートでバックアップを取っておく
正直、アプリ化そのものより「ボタンが邪魔だった」ことのほうが印象に残っています。自分で仕様を決めて実装したはずなのに、実際に問題を解く側の立場で触ってみるまで気づけませんでした。作ってすぐ公開して終わりにせず、自分の端末で最後まで使ってみる一手間の大事さを、あらためて実感しました。
STUDY PASSPORTをアプリとしてインストールするのに、App StoreやGoogle Playのアカウントは必要ですか？
いいえ、必要ありません。STUDY PASSPORTはPWA（Progressive Web App）という仕組みでホーム画面に追加できるため、App StoreやGoogle Playを経由せず、ブラウザから直接インストールできます。審査や追加料金も発生しません。
iPhoneでも同じようにインストールできますか？
iPhoneのSafariでも、共有メニューから「ホーム画面に追加」を選ぶことでインストールできます。ただしAndroidのように自動でインストールボタンが表示されることはないため、手動での操作が必要です。
ホーム画面に追加すると、それまでの学習履歴は引き継がれますか？
Androidでは同じブラウザのデータがそのまま使われるため引き継がれますが、iPhoneではホーム画面に追加したアプリがSafariとは別のデータ領域として扱われるため、学習履歴が引き継がれません。切り替え前に、STUDY PASSPORT内のJSONエクスポート機能でデータを保存しておくことをおすすめします。
関連記事
-
-
生成AIパスポートに一度落ちて、その後合格した私が作った、Web模擬試験アプリ「STUDY PASSPORT」をリリースしました！
生成AIパスポートの対策を進める中で、「模擬問題をもっとたくさん、本番と同じ形式で解きたい」と感じたことはありませんか？ 今回、生成AIパスポート試験対策に特化したWeb模擬試験アプリ「STUDY P ...
出典
本記事は、STUDY PASSPORT開発者本人がPWA機能を実装し、実際にAndroid端末でホーム画面への追加・模擬試験の受験を行った際の体験に基づいています（2026年9月実施）。記事中で触れているボタンの不具合と修正内容は、実装コードの変更履歴に基づく実際の経緯です。
