PCで作ったHTMLをスマホで実機確認する方法と手順

なぜPCのブラウザだけでは不十分なのか

PCのブラウザには開発者ツールがあり、画面幅をスマホサイズに切り替えて表示を確認できます。レイアウトのおおまかな崩れを見つけるには便利な機能です。

ただし、画面幅をまねるだけでは拾えない差があります。スマホ実機ではフォントの描画、タップ操作の反応、固定要素の挙動、スクロールの滑らかさ、そして実際の通信環境での読み込み速度が違ってきます。とくにiOSのSafariとAndroidのChromeでは細かな挙動が異なり、片方で問題なくても、もう片方で崩れることは珍しくありません。

公開前のサイトであれば、最終的には自分が見せたい相手と同じ環境、つまりスマホの実機で一度は目視しておくと安心です。

スマホへHTMLを届ける代表的な方法

スマホで開くには、まずHTMLファイルをスマホ側に届けるか、スマホからアクセスできる場所にファイルを置く必要があります。手段はいくつかあり、それぞれ手間と向き不向きが分かれます。

次の方法がよく使われます。状況に合わせて選ぶとよいでしょう。

• メールやチャットでファイルを送る: 単一HTMLなら手軽だが、画像やCSSが別ファイルだとリンク切れになりやすい
• クラウドストレージに置く: ファイルは渡せるが、HTMLがそのまま表示されずダウンロードになる場合がある
• PCでローカルサーバーを立てて同じWi-Fiから開く: 確実だが、コマンド操作やIPアドレスの指定が必要で非エンジニアには敷居が高い
• 共有URLとして公開して開く: URLをスマホで開くだけで、外出先や別回線の端末でも確認できる

最短手順：まずこの3ステップで完了

PCで作ったHTMLをスマホで実機確認は、最初に全体像を押さえると迷いません。細かな設定に入る前に、ファイルを準備し、共有条件を決め、公開後に相手と同じURLで確認する流れを作ります。

手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

• 1. 共有するHTML/ZIPを整理し、不要ファイルや秘密情報を除く
• 2. 認証方式、公開期限、差し替え有無を決めてURLを発行する
• 3. シークレットウィンドウとスマホで開き、相手への依頼文を添えて送る

画像やCSSが崩れるよくある原因

スマホで開いたときに「PCでは見えていた画像が出ない」「デザインが当たっていない」と感じたら、ファイルの参照方法が原因のことが多いです。

HTMLが画像やCSSを読み込むとき、相対パスで書かれていると、HTMLと同じフォルダ構成のままでないとファイルを見つけられません。単一のHTMLファイルだけをメールで送ると、隣にあったはずのCSSや画像が一緒に届かず、見た目が崩れます。

この問題を避けるには、HTML・CSS・JS・画像を一式まとめて、フォルダ構成を保ったまま届けることが大切です。ZIPにまとめて扱える方法なら、ファイル同士の参照関係が壊れにくくなります。

共有URLでスマホ確認する手順

手早く実機確認したいときは、HTMLを共有URLとして公開し、そのURLをスマホで開く方法が分かりやすいです。ここでは「ギガサイト便」を使った手順を紹介します。サーバーの用意やデプロイ設定は不要です。

次の順番で進めます。

1. 単一HTMLか、画像やCSSを含む一式をZIPにまとめる
2. トップページに、そのファイルやZIPをドロップする
3. 発行された共有URLをスマホに送る（チャットやメールで自分宛でよい）
4. スマホでURLを開き、表示・タップ操作・スクロールを確かめる
5. 修正したら、同じURLのままファイルを差し替えて再確認する

確認をスムーズにするコツ

実機確認を一度で終わらせず、修正と再確認を繰り返す前提で準備しておくと作業が速くなります。

同じURLのままファイルを差し替えられる仕組みを使えば、修正のたびにリンクを送り直す手間がありません。一度スマホでURLを開いておけば、差し替え後は再読み込みするだけで最新の状態を確認できます。

また、まだ公開前の段階では、人に見られたくないことがあります。一時公開ページには検索除けのnoindexが付くため通常は検索結果に出ませんが、これは検索表示の抑制であってアクセス制御ではない点に注意してください。確実に閲覧者を絞りたい場合は、パスワード認証やメール認証を設定したうえで共有URLを渡すと安心です。アップロード時にはセキュリティスキャンが走り、APIキーらしき文字列や外部スクリプト依存などの兆候を警告してくれるため、公開前の見落としにも気づけます。