実は、難しい設定やサーバーは一切不要。 誰でも無料でスマホから確認できる3つの方法を紹介します。
方法①：無料公開サービス（おすすめ）を使う
最も簡単でおすすめなのが、 無料でWebページを公開できるサービスにアップする方法。
代表的なのは次の2つ：
- GitHub Pages（無料・広告なし）
- Netlify（無料）
Webページをアップすると、スマホでもアクセスできるURLが発行されます。 他の人にも共有できるので、練習中でも便利。
一番簡単な流れ（GitHub Pages）
- GitHub にアカウント作成
- リポジトリを作成
- index.html をアップロード
- 「Pages」設定から公開
→ すぐスマホでアクセスできるURLが手に入る。
方法②：PCとスマホが同じWi-Fiなら“ローカル共有”できる
PCがWi-Fiに繋がっているなら、 ローカルサーバーを使ってスマホに表示する方法があります。
VSCodeの「Live Server」などが有名です。
Live Server の使い方（超簡単）
- VSCode を開く
- Live Server をインストール
- index.html を右クリック → 「Open with Live Server」
すると http://192.168.xx.xx:5500/ のようなURLが発行されます。
同じWi-Fiに繋がっているスマホでこのURLを開けば表示されます。
メリット： 更新がリアルタイムでスマホに反映される。
方法③：スマホに直接ファイルを送って開く（最も簡易）
最も手軽なのは、 index.html をスマホに送って直接開く方法です。
送る方法は何でもOK：
- AirDrop
- メールに添付
- LINEで自分に送る
- Google Drive にアップロード
スマホで HTML ファイルをタップすればブラウザで開けます。
ただし、この方法は「画像」や「CSSファイル」などが別フォルダだと崩れやすいので、 シンプルな1ページだけの確認に向いています。
初心者はまず“公開サービス”がおすすめ
理由は3つ：
- URLでスマホから簡単に確認できる
- 家族や友達とも共有できる
- そのまま作品として公開できる
GitHub Pages は特におすすめ。
まとめ
- 無料でスマホに表示する方法は3つある
- 一番簡単なのは「無料公開サービス」
- Wi-Fi共有はリアルタイム確認に便利
- ファイル送信は最も手軽だがシンプル向け
自分が作ったWebページをスマホで見られると一気に世界が広がります。 次はそのページを「公開」したり「ツール化」したりして、 楽しみながらレベルアップしていきましょう。
