自分で作ったHTMLファイルを、スマホでも使いたい。
そう思ったのが、Vercelを触ることになったきっかけでした。
AIに私だけが見るスケジュール表をHTMLファイルで作ってもらいました。
それをiPhoneに送ってみたのですが、開いても正しく動きませんでした。
調べてみたところ、iPhoneの「ファイル」アプリで開いたHTMLはプレビュー表示になってしまい、中のJavaScriptがきちんと動かないようです。
ファイルを直接渡すのではなく、URLで開ける状態にするしかないということがわかりました。
そこで使ったのがVercel（バーセル）です。
私自身、名前は聞いたことがあったものの中身は全然わかっていなかったので、同じところでつまずく方の参考になればと思い、手順をまとめていきます！
公開の方法は2つある
Vercelにファイルを置く方法は、大きく2つあります。
1つ目がターミナルからコマンドで公開する方法、
2つ目がVercelのサイト上でフォルダをドラッグ&ドロップする方法です。
私はターミナルから公開したので、まずそちらの手順を書いていきます。
ターミナルを開くこと自体に抵抗がある方は、後半のドラッグ&ドロップの方法から読んでいただいても大丈夫です。
Vercelってなんぞや！？
ざっくり言うと、作ったファイルを置いておくと、インターネット上で見られるURLを発行してくれるサービスです。
こういうサービスは「ホスティングサービス」と呼ばれています。
WordPressブログを運営している方だと、エックスサーバーやConoHaのようなレンタルサーバーを契約していると思います。
役割としてはそれと近いものですが、Vercelはもっと手軽です。
レンタルサーバーとの違い
私が実際に使ってみて感じた違いは、この3点でした。
- 契約手続きがなく、Googleアカウントでログインするだけで始められる
- FTPソフトを用意しなくていい。ターミナルにコマンドを打つとファイルが上がる
- 個人利用の範囲なら無料で使える
WordPressのようなブログを動かすためのものではなく、HTMLやJavaScriptで作ったページ・ツールを置く場所だと思っておくとイメージしやすいかもしれません。
無料で使えるけれど、商用利用は対象外
調べたところ（2026/7現在）Vercelには「Hobby（ホビー）」という無料のプランがあります。
クレジットカードの登録も求められませんでした。
ただし、公式のドキュメントを確認したところ、Hobbyプランは個人利用・非商用に限ると書かれています。
今回私が置いたのは自分専用のスケジュール表なので、Hobbyプランのままにしています。
では作ったHTMLをスマホで使う方法について説明します👇
【手順①】HTMLファイルを入れるフォルダを作る
まず、公開したいHTMLファイルを入れるフォルダを1つ作ります。
場所はどこでもいいとAIに言われましたが、ユーザーフォルダの直下じゃないと認識してくれなかったのでユーザーフォルダの直下に作ると良いと思います。
フォルダ名は英数字にしておきます（例：weekly-schedule）。
そのフォルダの中に、公開したいHTMLファイルを入れます。
ファイル名は index.html にしておく
ここが最初のポイントです。
ファイル名を index.html に変えておきます。
Webの世界では、index.html という名前のファイルが「そのフォルダの入口のページ」として扱われる決まりになっています。
ファイル名を index.html にしておかないと、発行されたURLを開いても何も表示されません。
その場合、URLの後ろに /ファイル名.html を付けないと開けなくなってしまいます。
【手順②】ターミナルでフォルダを開く
Macの「ターミナル」を起動します。
起動したら、さきほど作ったフォルダに移動します。
cd weekly-schedulecd は「このフォルダに移動する」という意味のコマンドです。
フォルダ名の部分は、自分が作ったフォルダの名前に置き換えます。
【手順③】npx vercel で公開する
フォルダに移動したら、次のコマンドを打ちます。
npx vercel初回は「インストールしますか？」というような確認が出るので、y を押してEnterで進みます。
Googleアカウントでログインする
しばらくするとChromeが立ち上がって、「Continue with Vercel」という画面が出てきました。
ここでGoogleアカウントを選んでログインします。
私は最初、Googleアカウントで入って大丈夫なのかとかなり不安になりました。
調べた範囲では、これはVercelにログインするための認証の仕組みで、Googleの中身を渡しているわけではないようです。
GitHubアカウントでも同じことができますが、Googleのほうが手間は少なかったです。
ログインが終わると、ブラウザに完了の表示が出て、ターミナルにも「You are now signed in.」というメッセージが出てきました。
質問に答えていく
ターミナルに戻ると、いくつか質問が出てきます。
私の場合はこの順番でした。
- Which project? → 矢印キーで「Create a new project」を選んでEnter
- What’s your project’s name? → そのままEnter（フォルダ名が使われます）
- In which directory is your code located? →
./のままEnter - Want to modify these settings? →
n
ビルドの設定を聞かれる場面もありますが、HTMLファイル1個だけなら何も変更しないで進めて大丈夫でした。
【手順④】本番用のURLを発行する
ここも私がつまずいたところです。
npx vercel だけだと、確認用（プレビュー用）のURLが出ます。
本番用のURLを出すには、もう一度こちらを実行します。
npx vercel --prod実行すると、ターミナルにURLが3つ並んで表示されました。
- Inspect … 管理画面へのリンク
- Production … ランダムな文字列が入った長いURL
- Aliased … 短いURL
どれを使えばいいのか迷ったのですが、使うのは一番下の「Aliased」の短いほうでした。
Productionの長いURLは更新するたびに変わってしまいますが、Aliasedのほうは更新しても変わらない固定のURLになっています。
→ 実際、私はそのあと中身を修正して再度アップしましたが、URLはそのままで最新の内容に切り替わりました。
あとから中身を直したいときは、フォルダの中の index.html を新しいものに差し替えて、もう一度 npx vercel --prod を実行するだけです。URLは変わりません。
ターミナルを使わない方法（ドラッグ&ドロップ）
ここまでターミナルでの手順を書いてきましたが、Vercelのサイト上でフォルダを放り込むだけで公開する方法もあります。
コマンドを打つのがどうしても不安、という場合はこちらのほうが分かりやすいかもしれません。
手順
① Vercelのサイト（https://vercel.com/）にGoogleアカウントでログインします。
② ダッシュボードの「Add New…」から「Project」を選びます。
③ プロジェクトの作成画面に、GitHubと連携するための表示が出てきます。
④ ドラックアンドドロップについて書いてあるので、このままこの画面に、index.html が入ったフォルダごと、その枠の中にドラッグ&ドロップします。
（下の画像は日本語翻訳に変えたやつなので日本語になっています。デフォルトは英語です）
⑤ デプロイボタンをクリック
⑥ しばらく待つと公開が完了して、URLが発行されます。
ドラッグ&ドロップするのは、HTMLファイル単体ではなくフォルダごとです。
ファイル名を index.html にしておく必要があるのは、ターミナルの場合と同じです。
ドラッグ&ドロップのデメリット
手軽な反面、こちらの方法には不便な点もあります。
中身を修正したときに、毎回同じ操作を最初からやり直すことになることです。
ターミナルの場合は npx vercel --prod と打つだけで、URLはそのままに中身が入れ替わります。
私のように、あとから何度も内容を直すことが分かっているものは、ターミナルのほうが楽だと思います。
一度作って終わりのページなら、ドラッグ&ドロップでも困らないかもしれません。
iPhoneで使えるようにする
発行されたURLをiPhoneのSafariで開くと、パソコンのときと同じように動きました。
チェックを入れた状態も、閉じてから開き直すとちゃんと残っています。
そのあと、画面下の共有ボタンから「ホーム画面に追加」をしておきました。
アプリのように1タップで開けるようになります。
調べた範囲では、Safariには「しばらく訪問していないサイトの保存データを消す」という仕組みがあるようなのですが、ホーム画面から起動するWebアプリはその対象外になるとのことでした。
チェックの記録が消えると困るので、ホーム画面に追加しておくほうが安心だと思います。
気をつけておきたいこと
Vercelで発行されたURLは、そのURLを知っている人なら誰でも開ける状態になります。
パスワードで守られているわけではありません。
私が置いたのは自分のタスクが並んでいるだけの表なので気にしていませんが、人に見られたくない情報を書いたページを置く場合は注意が必要だと思います。
URLをどこにも貼らなければ検索で見つかることはまずないと思いますが、そもそも見られて困るものは置かない、という前提で使っています。
まとめ
作ったHTMLをスマホで使いたい、というだけの話だったのですが、実際にやってみるまで「Vercelが何をしてくれるものなのか」がまったくわかっていませんでした。
やってみたら、フォルダを1つ作って、ターミナルにコマンドを2つ打つだけでした。
ターミナルを使わずに、フォルダを画面に放り込むだけの方法もあります。
時間にすると10分もかかっていません。
難しかったのは操作そのものよりも、ファイル名を index.html にすることと、本番URLは --prod を付けて出すこと、そして3つ出てくるURLのうち短いほうを使うことの3点を知っているかどうかでした。
ここさえわかっていれば、自分で作った小さなツールを自分のスマホに入れて使う、ということが気軽にできるようになります。
私は今回作ったスケジュール表を、毎朝ホーム画面から開いて使っています。
同じように「作ったけど自分のスマホで使えない」で止まっている方に届いたらいいなと思います。
