Netlifyでホームページ・LPを公開する方法｜Google登録からアップロードまで初心者向けに解説
先にZIPを普通のフォルダーへ戻します。ZIPファイルの解凍方法はこちら
はじめてでも迷わない Netlify公開ガイド
バイブコーディングでホームページやLPを作ったけれど、インターネットへ公開する方法が分からない。
この記事では、完成フォルダーの確認、Googleアカウントを使ったNetlify登録、フォルダーのアップロード、公開URLの確認まで、実画面スクショ付きで説明します。
ファイル数や回線によって前後します
完成したホームページ・LPのフォルダー
インターネットにつながったパソコン
- 公開するファイルを確認する
- GoogleアカウントでNetlifyを開設する
- フォルダーをアップロードして公開する
- あとで内容を更新する
- netlify.appの前の文字を変更する
- うまくいかないときの対処
Part 1
公開するファイルを確認する
公開するフォルダーを見つける
【画像なし・例外】バイブコーディングで作ったホームページやLPのファイルが入ったフォルダーを、パソコン上で見つけます。どれか分からない場合は、作成に使ったAIへ『Netlifyにアップロードするフォルダーはどれですか？』と聞けばOKです。
公開するフォルダーを開く
【画像なし・例外】見つけたフォルダーを2回続けて押し、中身を表示します。
index.htmlを確認する
【画像なし・例外】最初に見える場所に「index.html」があるか確認します。これはホームページの最初の画面になるファイルです。フォルダーの中にさらに同名フォルダーを入れないようにしてください。
Part 2
GoogleアカウントでNetlifyを開設する
Netlifyの登録ページを開く
下の紫色のアドレスを押します。画像と同じ登録画面が出ればOKです。
▼ ここを押すとNetlifyの登録ページが新しいタブで開きます
https://app.netlify.com/signup
「Sign up with Google」を押す
Googleアカウントを使うと、新しいパスワードをNetlify用に考えなくてよいのでスムーズです。
使うGoogleアカウントを選ぶ
【画像なし・例外】『アカウントを選択してください』と表示されたら、普段使っているGoogleアカウントを1つ選びます。個人情報が並ぶ画面で、人によって表示も異なるため見本画像は載せていません。
Googleの確認画面を進める
【画像なし・例外】パスワード入力や『次へ』『続行』が表示されたら、ご本人が画面の案内どおり進めます。個人のログイン情報を扱う画面なので、見本画像は載せていません。
「Projects」が見えたら登録完了
Googleでの確認が終わるとNetlifyへ戻ります。途中で利用目的などの質問が表示された場合は、自分に近い答えを選んで進めてください。Projects画面が見えればアカウント作成は完了です。
Part 3
フォルダーをアップロードして公開する
Netlify Dropを開く
下の紫色のアドレスを押します。『Drag & drop to publish instantly』が見えればOKです。
▼ ここを押すとアップロード画面が新しいタブで開きます
「folder」を押す
画面中央の「folder」を押します。もし、ZIPファイルしか手元にない場合は、先に上のZIP解凍ガイドで普通のフォルダーへ戻してから「folder」を押してください。
公開するフォルダーを1回だけ選ぶ
【画像なし・例外】Windowsの小さな画面が開きます。手順1で見つけたフォルダーを1回押して選びます。中へ何度も入らず、そのフォルダー自体を選ぶのがポイントです。
「フォルダーの選択」を押す
【画像なし・例外】Windows画面の右下にある「フォルダーの選択」を押します。この操作でNetlifyへの送信が始まります。
アップロードが終わるまで待つ
【画像なし・例外】画面を閉じずに待ちます。通常は数十秒〜数分が目安ですが、ファイル数や回線によって前後します。
「Public」と「published」を確認する
公開後の画面で「Public」と「published」が見えれば完了です。公開URLを知っている人はサイトを見られます。
netlify.appの公開URLを押す
画面上部の「netlify.app」で終わる文字が、あなたのホームページの公開URLです。画像の赤枠の場所を押します。
自分のホームページが開くか確認する
別の画面でホームページやLPが表示されれば、公開はすべて完了です。URLをコピーして、スマートフォンでも開けるか確認すると安心です。
Part 4
あとで内容を更新する
更新したいときはプロジェクト画面を開く
文章や画像を直した後は、Netlifyのプロジェクト画面を開きます。下へ進むと「Production deploys」があります。
「choose a folder」を押す
更新後のフォルダーを送り直す入口です。最初に公開したときと同じフォルダーを選びます。
更新後のフォルダーを1回選ぶ
【画像なし・例外】Windows画面で、最初に公開したときと同じフォルダーを1回押して選びます。
「フォルダーの選択」を押す
【画像なし・例外】Windows画面の右下にある「フォルダーの選択」を押します。完了すると新しい内容へ入れ替わります。
Part 5
netlify.appの前の文字を変更する
「Project configuration」を押す
公開後のURLを分かりやすくしたいときは、プロジェクト画面の左側にある「Project configuration」を押します。
「Change project name」を押す
General画面の「Project details」内にあるボタンです。画面を下へ進めて見つけます。
好みのURL名を入力する
「Project name」に、URLの前半へ使いたい文字を入力します。使えるのは半角英数字とハイフン（-）で、合計37文字までです。迷ったら画像と同じ「my-cafe-lp」のように、短い英単語をハイフンでつなげればOKです。入力欄の下に表示される予定URLを確認してください。.netlify.appの部分は変更できません。
「Save」を押す
希望の名前がほかの人に使われていなければ保存できます。もし、エラーが出たら末尾に短い数字を足すなど、別の名前に変えてください。
新しいURLを開いて確認する
【画像なし・例外】保存後はプロジェクト上部のURLが「好みの文字.netlify.app」に変わります。新しいURLを押してサイトが開けば完了です。以前のURLを人へ案内済みなら、新しいURLを送り直してください。
うまくいかないとき
「Page not found」と出る
公開したフォルダーの最初の場所に「index.html」があるか確認します。フォルダーの中にさらに同名フォルダーがあり、その奥にindex.htmlが入っている場合は、内側のフォルダーを選び直します。
10分以上「Uploading」「In progress」のまま
もし、10分以上変わらないときは、そのアップロードは完了しない可能性があります。通信が安定した場所で、同じフォルダーをもう一度選び直します。Netlify公式は、50MB未満のアップロードと、1ファイル10MB未満を目安として案内しています。
画像や文字の一部だけ出ない
ファイル名の大文字と小文字が合っているか、画像ファイルも同じフォルダーの中に入っているか確認します。分からない場合は、作成に使ったAIへ公開URLと症状を伝えて修正を頼みます。
「deploy（デプロイ）」が画面に出たら、この記事では「公開」または「公開内容の入れ替え」と読み替えれば大丈夫です。
▼ Netlify公式ヘルプを新しいタブで開きます
Netlify Drop Quickstartプロジェクト名とURLの変更Netlify Error reference
まとめ｜フォルダーを選べば公開できる
最後に、公開URLをスマートフォンへ送って開き、文字・画像・ボタンをひと通り確認してください。直したいところが見つかったら、元のファイルを修正してPart 4の方法で同じフォルダーを送り直せば更新できます。
