スマホ対応のウェブアプリの作り方

スマホ対応のウェブアプリとは、スマホでアプリのように動作するウェブサイトのことです。狭い画面に合わせてレイアウトされ、タップしやすい大きなターゲットを備え、モバイルデータでも素早く読み込まれ、プログレッシブウェブアプリ（PWA）としてホーム画面に追加できます。多くの新しいアプリにとって、これは現実的な最初のバージョンです。コードベースは1つ、リンクも1つで、ストアの審査も不要です。ただし限界もあり、特にiPhoneの通知や、デバイスへの深いアクセスには制約があります。このガイドでは、ネイティブアプリが必要になる場面についても率直に説明します。

スマホで「対応している」と言える3つの方法

PWAは、いくつかの機能を追加したレスポンシブなウェブアプリです。そのため、最初の2つのどちらを選ぶかで悩む必要はありません。まずレスポンシブに作り、そのあとでインストール可能にしましょう。より詳しい比較はネイティブアプリとプログレッシブウェブアプリの違いを参照してください。

スマホでウェブアプリにできること、できないこと

ブラウザでできることは、多くの人が想像しているより多くあります。

• カメラと写真のアップロード：標準のファイル入力を使います。
• 位置情報：ユーザーの許可を得て利用します。
• ホーム画面への追加：アイコン付きで、全画面表示で起動できます。
• オフライン利用：サービスワーカー（ブラウザがサイトのために裏で動かすスクリプト）を使い、ページとデータをキャッシュします。
• プッシュ通知：ただし、iPhoneには注意点があります。AppleのWebKitチームによると、ウェブのプッシュ通知はiOSとiPadOS 16.4で、ホーム画面に追加されたウェブアプリに対して利用できるようになりました。ユーザーはまずアプリをインストールし、そのうえで通知を許可する必要があります。

ネイティブアプリが依然として有利な場面もあります。

• デバイスの深い機能：バックグラウンドでの位置情報、Bluetoothアクセサリ、ヘルスケアデータ、ホーム画面のウィジェットなど。ブラウザでのサポートは限定的で、プラットフォームによって異なります。
• アプリストアでの発見：ストアで検索されることが集客の柱になる場合、ストアに載っている必要があります。
• 大量のオフライン処理：大きなデータセットをバックグラウンドで同期する場合など。
• 描画性能が重要な場合：負荷の高いゲームなど。

これらのどれもアプリの中心でなければ、ウェブアプリで十分な可能性が高いでしょう。

スマホを前提にした設計

大きな画面に合わせて作ってから縮めると、スマホの画面では窮屈になりがちです。スマホの画面をまず設計し、大きな画面には後から広げていくほうが通常はうまくいきます。

レイアウト

• 小さな画面では1カラムにします。サイドバーは、下部のバーやメニューに置き換えましょう。
• 横スクロールは避けます。 幅の広い表はカードに変えるか、表だけを自分のコンテナ内でスクロールさせます。
• 文字はズームせずに読める大きさにします。本文はおよそ16pxが目安です。

タッチ操作

• タップ領域を大きくします。 44×44ピクセル程度が一般的な最小サイズです。ボタン同士の間にも余白を取りましょう。
• 主要な操作は親指が届く範囲に置きます。 縦長のスマホでは、画面の下のほうが目安です。
• ホバーでしか使えない機能は避けます。 マウスを乗せたときに表示されるツールチップやメニューは、タッチ画面には存在しません。
• 適切なキーボードを出します。 メールの入力欄ではメール用のキーボード、電話番号の入力欄では数字のキーパッドが表示されるようにします。正しい入力タイプを指定しましょう。

速度

• 画像は適切なサイズの小さなものにし、画面に入ってから読み込みます。
• 重いライブラリは減らします。 ライブラリが増えるほど、モバイル回線でのダウンロード時間が増えます。
• スケルトン画面や分かりやすい読み込み表示を使い、アプリが固まって見えないようにします。

セーフエリアとアドレスバー

最近のスマホでは、特に全画面で起動するインストール済みのアプリで、コンテンツがノッチやホームインジケーターの下に入ってしまうことがあります。セーフエリア用の余白を指定しましょう。また、ブラウザのアドレスバーが表示・非表示されるたびにずれてしまう、高さいっぱいのレイアウトにも注意が必要です。

インストール可能にする（PWA）

インストール可能にするには、ウェブアプリに次のものが必要です。

1. ウェブアプリマニフェスト：アプリ名、短い名前、アイコン、テーマカラー、表示方法（通常は全画面の「スタンドアロン」）を記述した小さなファイル。
2. アイコン：各プラットフォームが求めるサイズのもの。Appleのデバイス向けのアイコンも含みます。
3. HTTPS：適切にホスティングされたアプリであれば、通常すでに備えています。
4. サービスワーカー：オフライン対応やプッシュ通知を使いたい場合に必要です。

そのうえで、ユーザーへのインストール方法を案内します。Androidのブラウザは通常、インストールのプロンプトやメニュー項目を表示します。iPhoneでは共有ボタンを押してから「ホーム画面に追加」を選びます。「このアプリをインストール」という短い案内と、その手順を載せておくと効果的です。

オフライン対応は、PWAで複雑になりがちな部分です。接続がなくても開けるように、アプリのページをキャッシュするのは簡単です。一方、オフラインでデータを変更し、後から同期させるのは大変な作業です。ユーザーに本当に必要な場合にだけ取り組みましょう。

効果のある最初のプロンプト

清掃チーム向けに、今日の作業を確認して完了にできるウェブアプリを作ってください。スマホを前提に設計してください。1カラム、大きなタップ領域、画面下部に固定されたメインのアクションボタン、ホバーでしか操作できない機能なし、横スクロールなし、電話とメールの入力欄には正しいキーボードを表示。各作業には住所（タップで地図を開く）、顧客の電話番号（タップで発信）、チェックリスト、写真を撮れる「完了にする」ボタンを表示してください。マネージャーはパソコンからログインして作業を割り当てます。画面が広いときは、カードの代わりに表を表示してください。マニフェスト、アイコン、スタンドアロン表示を備えた、インストール可能なPWAにしてください。アプリのシェルをキャッシュし、電波がなくても開けるようにしてください。データはデータベースに保存します。

構築の手順

1. サンプルデータで、まずスマホのレイアウトを作る。スマホサイズのプレビューで確認します。
2. 実機のスマホでテストする。ユーザーがiPhoneとAndroidの両方を使うなら、少なくとも両方で確認しましょう。エミュレーターでは、画面のキーボードが入力欄を隠してしまうといった問題を見落とします。
3. メインの作業を片手の親指だけで操作してみる。両手が必要だったり、ズームが必要だったりする箇所があれば修正します。
4. マニフェストとアイコンを追加し、両方のプラットフォームにインストールして、アイコン、名前、スプラッシュ画面を確認します。
5. オフライン対応を決める。まずは「接続がなくても開き、分かりやすいメッセージを表示する」から始め、オフラインでの編集は本当に必要な場合にだけ追加します。
6. 遅い回線で速度を確認する。ブラウザの開発者ツールで、低速な回線を再現できます。
7. 通知は最後に追加する。必要なら、の話です。インストールしないユーザー向けに、メールでの代替手段も計画しておきましょう。

よくある失敗

• 大きなモニターでだけ設計する。 作業のたびに、スマホの幅で各画面を確認しましょう。
• はみ出す表。 小さな画面では、行をカードに変えます。
• 小さすぎるタップ領域や、近すぎるリンク。
• キーボードと競合するフォーム。 誤った入力タイプ、キーボードの後ろに隠れる入力欄、「次へ」で移動できない流れなど。
• ブラウザのタブでもiPhoneのプッシュ通知が使えると思い込む。 ホーム画面にアプリをインストールしている必要があります。
• 出せないApp Storeアプリを約束する。 ストアが重要なら、別途計画を立てましょう。
• ウェブサイトを包んで、アプリと呼ぶ。 AppleのApp Store審査ガイドラインは、単なるウェブサイトの焼き直しを超えるアプリを求めています。薄いラップだけでは、リジェクトされるおそれがあります。

ネイティブアプリが必要になるとき

次のような場合は、ネイティブアプリ（またはウェブアプリの後に計画するネイティブ版）を検討してください。

• 顧客があなたを見つける手段がストアである。
• バックグラウンドでの位置情報、Bluetooth、ヘルスケアデータ、ウィジェットなど、ブラウザでは安定して提供されないデバイス機能に頼っている。
• 長期間にわたって完全にオフラインで動く必要がある。
• ユーザーがそれを期待している。ストアにないものは使わないというユーザー層もいます。

ストアでの公開には、独自の費用と手順があります。2026年9月時点で、Appleのデベロッパープログラムは年額99米ドル、Google Playのデベロッパーアカウントは買い切りで25米ドルです。これは各社のサイトに記載された金額です。また、どのリリースもストアの審査を通る必要があります。多くのチームは、まずスマホ対応のウェブアプリで製品を求められているかを確かめ、そのうえで、ネイティブ版への投資を判断します。AIでアプリを作る方法では、この最初の段階を最初から最後まで解説しています。

Mythexで作る

Mythexはウェブアプリを作ります。チャットでアプリを説明すると、デスクトップでライブプレビューを確認でき、サイズを変えられるスマホサイズの表示でも確認できます。小さい画面のレイアウトを直すには、スマホ対応のプロンプトが用意されています。PWAのマニフェストやアイコンも、ほかの機能と同じようにお願いできます。その後、どのスマホからでも開ける公開リンクに公開できます。Proプランでは、アプリを AndroidとiPhoneのアプリとしてラップし、Google Playの内部テストとTestFlightに送ることもできます。詳しくはドキュメントを参照してください。始めるには、AIウェブアプリビルダーやアプリテンプレートを参照してください。実例としては、習慣トラッカーアプリの作り方が参考になります。

よくある質問