Netlifyとは？静的Webアプリを無料で公開する方法【登録・公開・更新・削除まで】

WEBツール

HTMLやCSS、JavaScriptを使ってWebアプリを作ってみた。

パソコンではちゃんと動いている。

「よし、できた！」

……で、これどうやってスマホで使うの？

Webアプリを作り始めると、意外とここで止まります。

私も、

「GitHubに置けばいい？」
「レンタルサーバーが必要？」
「Googleのサービスに何かあったような……」
「そもそもサーバーを契約しないといけないの？」

と、作るところとは別の問題が出てきました。

特に最近は、AIと一緒にHTML・CSS・JavaScriptを使ってWebアプリを作ることも簡単になってきました。

プログラム自体はAIに手伝ってもらって完成した。

でも、

「これ、どこに置けばいいの？」

となる人もいるのではないでしょうか。

そこで静的Webアプリの公開先を調べていて、候補の一つとして出てきたのが、

Netlify（ネットリファイ）

です。

実際に調べてみると、HTML・CSS・JavaScriptなどで作った静的WebサイトやWebアプリなら、フォルダをドラッグ＆ドロップするだけでも公開できます。

今回は、私自身があとから見返したときや、人から「Netlifyってどうやって使うの？」と聞かれたときにも説明できるよう、

  • Netlifyとは何なのか
  • どこの会社が運営しているのか
  • セキュリティは大丈夫なのか
  • 無料でどこまで使えるのか
  • 300クレジットとはどのくらいなのか
  • アカウントの登録方法
  • Webアプリの公開方法
  • 公開後の編集・更新方法
  • 公開を停止する方法
  • 削除・デプロイ履歴
  • GitHubと連携する方法

までまとめておきます。

Netlifyとは？

Netlifyは、簡単に言えば、

「作ったWebサイトやWebアプリをインターネット上に公開できるサービス」

です。

例えば、

my-app/
├─ index.html
├─ style.css
├─ script.js
└─ images/

こんなWebアプリを作ったとします。

普通に考えると、

Webアプリを作る
      ↓
公開するサーバーを用意
      ↓
サーバーを設定
      ↓
ファイルをアップロード
      ↓
ドメインやHTTPSを設定
      ↓
ようやく公開

という流れを想像します。

ところがNetlifyなら、静的なWebアプリであればかなり簡単です。

HTML・CSS・JavaScriptで作成
        ↓
Netlifyにアップロード
        ↓
https://○○○.netlify.app
        ↓
公開完了

Netlify Dropを使えば、GitHubを使わずにプロジェクトフォルダをドラッグ＆ドロップして公開することもできます。

例えば、自宅のPCで作ったクイズアプリをNetlifyに公開して、そのURLへスマホからアクセスする、といった使い方ができます。

「とりあえず作ったWebアプリをスマホから使いたい」

という用途なら、かなり分かりやすい方法です。

そもそも「静的Webアプリ」って何？

ここはNetlifyを理解するうえで重要です。

ざっくり言うと、

  • HTML
  • CSS
  • JavaScript
  • 画像

など、ブラウザ側で動くファイルを中心に構成されたWebサイト・Webアプリです。

例えば、

  • HTML・CSS・JavaScriptで作った勉強アプリ
  • クイズアプリ
  • 計算ツール
  • ポートフォリオ
  • 簡単な便利ツール
  • AIに作ってもらったブラウザアプリ

などです。

一方、

Python
PHP
データベース
常時動作するバックエンド処理

などを必要とするアプリは、単純にファイルをNetlifyへ置くだけでは動きません。

NetlifyにはFunctionsなどサーバー側の処理を実行する仕組みもありますが、この記事では初心者向けに、

「HTML・CSS・JavaScriptで作ったものを公開する」

ところを中心に説明します。

例えばStreamlitで、

import streamlit as st

として作ったPythonアプリを、そのままNetlifyへアップロードすれば動く、というものではありません。

ここは注意しておきましょう。

Netlifyはどこの会社？

「無料でWebアプリを置けるのは分かった。でも、どこの会社？」

ここも気になったので調べました。

Netlifyは、米国サンフランシスコに本社を置くNetlifyというソフトウェア企業が提供しています。

2014年にMathias Biilmann氏とChristian Bach氏によって設立され、現在では世界中の開発者や企業が利用するWeb開発・公開プラットフォームになっています。

つまり、

「無料でHTMLを置ける謎の海外サイト」

というわけではありません。

個人のWebサイトだけでなく、本格的なWebサービスの公開にも利用されているプラットフォームです。

セキュリティ的には大丈夫なの？

Webサービスを公開するとなると、ここは気になります。

Netlifyは、

  • SOC 2 Type 2
  • ISO 27001
  • ISO 27018
  • PCI DSS
  • GDPR
  • CCPA

などのセキュリティ・プライバシー関連の認証や基準に対応しています。

通信についてもTLSによる暗号化が行われ、Netlifyで公開したサイトではHTTPSを利用できます。

つまり、

http://～

ではなく、

https://○○○.netlify.app

として公開できます。

DDoS攻撃などに対する対策もNetlify側で用意されています。

そのため、個人が静的Webアプリを公開するサービスとして、運営会社やサービス基盤そのものを過度に心配する必要はなさそうです。

ただし、ここで勘違いしてはいけないことがあります。

Netlifyを使えば自分のアプリも安全、というわけではない

例えば、

const API_KEY = "自分の秘密のAPIキー";

こんなものをJavaScriptへ直接書いて公開したら危険です。

ブラウザで動くJavaScriptは、基本的に利用者から中身を確認できます。

そのため、

  • APIキー
  • パスワード
  • 個人情報
  • 社内機密情報
  • データベース接続情報

などをHTMLやJavaScriptへ直接書かないようにしましょう。

これはNetlifyの問題ではなく、

公開するWebアプリを作る側のセキュリティ対策

です。

「Netlifyが安全だから、アップロードするものは何でも大丈夫」

という意味ではありません。

Netlifyは無料で使える？

Netlifyには無料プランがあります。

2026年9月現在、新しいアカウントではクレジット制の料金体系が採用されており、Freeプランには毎月300クレジットが含まれています。

小さなWebアプリを試したり、個人用ツールを公開したりするところから始められます。

ただし重要なのが、

「無料＝完全無制限」ではない

ということです。

デプロイや通信量、Webリクエストなどによってクレジットを消費します。

Freeプランでクレジットを使い切ると、次の請求サイクルまでプロジェクトが一時停止します。

昔のNetlifyの記事とは料金体系が変わっているため、古い記事を見る場合には注意した方がよさそうです。

Netlifyのクレジットは何に使われる？

「300クレジット」と言われても、最初は何のことか分かりません。

主なクレジット消費は次のようになっています。

利用内容クレジット消費
Production Deploy（本番公開）1回15クレジット
データ通信量1GBあたり20クレジット
Webリクエスト10,000回あたり2クレジット
Functionsなどの処理1GB-hourあたり10クレジット
NetlifyのAI機能利用したAIモデルなどに応じて消費

ここで重要なのが、

「サイトを公開しているだけで、毎月15クレジット取られるわけではない」

ということです。

Production Deployを行ったときに15クレジット消費します。

一度公開したあと、何も修正せずそのまま使っているなら、主にアクセス時の通信量とWebリクエストによってクレジットが消費されます。

300クレジットって実際どのくらい使える？

これが一番気になるところではないでしょうか。

私も、

「300って、多いの？少ないの？」

と思いました。

そこで、個人で作った簡単なクイズアプリをNetlifyへ公開する場合で考えてみます。

自分用のクイズアプリなら？

例えば、

quiz-app/
├─ index.html
├─ style.css
├─ script.js
└─ images/

というクイズアプリを作ったとします。

条件は、

  • HTML・CSS・JavaScriptで作成
  • アプリ全体の読み込みを約1MBと仮定
  • 1回開くと10リクエスト程度と仮定
  • 自分が1日1回使用
  • 1か月30日
  • 公開後は修正しない
  • 再デプロイもしない

とします。

最初の公開では、

Production Deploy
↓
15クレジット

を消費します。

そして毎日1回使った場合、

1MB × 30日
＝ 約30MB
＝ 約0.03GB

です。

通信量は1GBあたり20クレジットなので、

0.03GB × 20
＝ 約0.6クレジット

となります。

Webリクエストについても、

10リクエスト × 30日
＝ 300リクエスト

なので、10,000リクエストで2クレジットという基準から考えると、

約0.06クレジットです。

初月をまとめると、

内容クレジット
最初の本番公開15
約30MBの通信約0.6
約300リクエスト約0.06
合計約15.66

というイメージです。

※実際の消費量はファイルサイズ、キャッシュ、アクセス方法などによって変わるため、あくまで分かりやすくするための概算です。

2か月目以降は？

ここがポイントです。

何も修正せず、再デプロイもしなければ、翌月に15クレジットは発生しません。

同じ使い方なら、

通信量        約0.6
リクエスト    約0.06
----------------
合計        約0.66クレジット/月

程度の計算になります。

Freeプランは毎月300クレジット。

つまり、

自分専用の軽いクイズアプリを1日1回使う程度なら、無料枠にはかなり余裕がある

と考えてよさそうです。

「毎日使ったら、すぐ無料枠を使い切るのでは？」

と心配していましたが、この程度の用途ならそこまで気にする必要はなさそうです。

では100人が毎日使ったら？

せっかくなので、もう少し規模を大きくしてみましょう。

先ほどと同じ1MB程度のクイズアプリを、

100人が1日1回使う

と仮定します。

100人 × 30日
＝ 月3,000回

通信量は、

1MB × 3,000回
＝ 約3GB

なので、

3GB × 20クレジット
＝ 約60クレジット

1回につき10リクエストなら、

3,000回 × 10
＝ 30,000リクエスト

なので約6クレジット。

再デプロイしない月なら、

約66クレジット

という概算になります。

300クレジットに対して、まだ余裕があります。

もちろん実際にはファイルサイズ、画像数、キャッシュなどによって変わりますが、

「個人でちょっと使っただけで、すぐ無料枠がなくなる」

というものではなさそうです。

むしろ注意したいのは再デプロイ

個人的に気になったのはこちらです。

Webアプリを作っていると、

修正
↓
本番公開

「あ、ここも変えよう」

↓
修正
↓
また本番公開

「あ、ここ間違ってた」

↓
また修正
↓
また本番公開

とやってしまいがちです。

Production Deployは1回15クレジットなので、単純計算すると、

15 × 20回
＝ 300クレジット

です。

もちろん実際には通信量などでもクレジットを使うため、20回全部を本番公開に使えるわけではありません。

頻繁に開発するようになったら、Deploy Previewなどを利用して、

修正
↓
プレビューで確認
↓
問題なし
↓
Production Deploy

という流れを覚えた方がよさそうです。

Freeプランの300クレジットを使い切ったら？

「アクセスが増えて300クレジットを超えたら、高額請求が来るの？」

これも気になります。

Freeプランでは300クレジットを使い切ると、次の請求サイクルまでプロジェクトが一時停止します。

イメージとしては、

300クレジット到達
        ↓
Freeプランの上限
        ↓
プロジェクト一時停止
        ↓
次の請求サイクル
        ↓
クレジット復活

です。

50％、75％、100％到達時には通知も用意されています。

Netlifyの管理画面から、

  • Production Deploys
  • Bandwidth
  • Web Requests
  • Compute
  • AI inference

など、何にクレジットを使用しているか確認することもできます。

初めて使うなら、

「まず1週間くらい自分のアプリを使ってみて、どのくらいクレジットが減ったか確認する」

くらいでいいと思います。

Netlifyの登録方法

それでは実際に使ってみます。

Netlify公式サイトを開きます。

「Sign up」などからアカウント作成へ進みます。

画面表示はアップデートによって変わることがありますが、基本的には画面の案内に沿ってアカウントを作成すればOKです。

NetlifyではGitHubなどのGitサービスと連携して利用することもできます。

ただ、今回の目的は、

「とりあえず手元にあるWebアプリを公開する」

ことです。

そのため、最初からGitHub連携まで覚えなくても構いません。

まずはNetlify Dropを使ってみます。

一番簡単！ドラッグ＆ドロップでWebアプリを公開する

NetlifyにはNetlify Dropという機能があります。

これが非常に分かりやすい。

例えば、

study-app/
├─ index.html
├─ style.css
├─ script.js
└─ images/

というWebアプリがあったとします。

まずローカルPCでindex.htmlを開き、正常に動くか確認しておきます。

Netlifyへログインしたら、

Add new project → Deploy manually

などから手動デプロイ画面へ進みます。

そして公開したいプロジェクトフォルダを、表示されたDrop zoneへドラッグ＆ドロップします。

基本的にはこれだけです。

アップロードが完了すると、

https://○○○.netlify.app

というURLが発行されます。

このURLをスマホで開けば、

PCで作ったWebアプリをスマホから使える！

というわけです。

最初にこれを知ったとき、

「こんな簡単でいいの？」

と思うくらいです。

index.htmlは用意しておこう

初心者がつまずきそうなので、ここは覚えておいた方がいいです。

基本となるページは、

index.html

としておくのがおすすめです。

例えば、

my-app/
├─ index.html
├─ style.css
└─ script.js

という構成です。

Netlify公式ドキュメントでも、ページが正しく表示されない場合にはindex.htmlを確認するよう案内されています。

公開したWebアプリを編集・更新する方法

「公開はできた。でもプログラムを修正したらどうするの？」

ここも大事です。

ドラッグ＆ドロップで公開した場合は非常にシンプルです。

まず、自分のPCにある元ファイルを編集します。

PCにあるWebアプリ
↓
HTML・CSS・JavaScriptを修正
↓
PCで動作確認
↓
Netlifyへ再アップロード
↓
更新完了

Netlifyの対象プロジェクトを開き、Production deploysのドラッグ＆ドロップ領域へ更新したプロジェクトフォルダをもう一度ドロップします。

すると、新しいバージョンがデプロイされます。

URLを作り直す必要はありません。

同じWebアプリの新しいバージョンとして公開されます。

ただし先ほど説明したように、Production Deployではクレジットを消費するため、何度も細かく更新する場合は注意しましょう。

GitHubと連携するともっと楽になる

何度も修正するようになってくると、

「毎回ドラッグ＆ドロップするのも面倒だな」

となってきます。

そこでGitHub連携です。

PC
 ↓
GitHub
 ↓
Netlify
 ↓
Web公開

という形にできます。

GitHubのリポジトリをNetlifyへ接続しておけば、指定したProduction Branchへ変更をpushしたときにNetlifyが自動的にビルド・デプロイしてくれます。

つまり、

コードを修正
     ↓
GitHubへpush
     ↓
Netlifyが検知
     ↓
自動デプロイ
     ↓
Webアプリ更新

となります。

個人的には、

最初のお試し

ドラッグ＆ドロップ

継続して開発するアプリ

GitHub連携

という使い分けが分かりやすいと思います。

最初からGitHub、Git、デプロイ……と全部覚えようとすると話が難しくなります。

まずWebアプリを公開して、

「自分が作ったものがネット上で動いた！」

を体験してから次へ進む方が楽です。

公開を一旦止めたい場合

「削除まではしたくないけど、一旦公開を止めたい」

ということもあります。

NetlifyにはプロジェクトをDisable（無効化）する機能があります。

対象プロジェクトから、

Project configuration
↓
General
↓
Danger zone
↓
Disable project

と進みます。

これなら設定を残したままプロジェクトをオフラインにできます。

再度公開したくなったら、同じ場所からEnableできます。

個人的には、

「もう使わないかもしれないけど、一応残しておきたい」

という場合なら、すぐ削除するよりDisableの方が安心です。

デプロイ履歴についても知っておこう

Netlifyでは公開するたびに「Deploy」としてバージョンが残ります。

例えば、

初回公開
 ↓
Deploy 1

修正
 ↓
Deploy 2

さらに修正
 ↓
Deploy 3

というイメージです。

つまり、単純にサーバー上のファイルを上書きして終わり、ではありません。

過去のDeployを管理したり、必要に応じてロールバックしたりできます。

「変更したら動かなくなった！」

というときにも役立ちます。

なお、Deployを削除すると関連するファイルやログなども削除され、元には戻せません。

また、現在メインURLで公開されている最新Deployなど、状態によって削除できないものもあります。

よく分からない状態でDeploy履歴を片っ端から削除するのはおすすめしません。

デプロイ履歴を確認する方法

Netlifyでは、Webアプリを公開・更新した履歴を確認できます。

対象のプロジェクトを開き、左側メニューの「Deploys」をクリックすると、これまでのデプロイが一覧表示されます。

私が実際に公開している別のWebアプリでも、何度も更新した履歴が残っていました。

ここでは、公開日時やデプロイにかかった時間、現在公開されているバージョンなどを確認できます。

また、過去のデプロイの詳細を開くことで、以前のバージョンを再公開できる場合もあります。

アプリを更新したのに表示が変わらない場合などは、まずデプロイ履歴を確認してみましょう。

Netlifyで公開するときの注意点

最後に、実際に使ううえで気をつけたいことをまとめておきます。

1．秘密情報をJavaScriptへ書かない

APIキーやパスワードを公開ファイルへ直接書かないようにします。

特にAI APIなどを使ったアプリを作る場合は注意が必要です。

2．無料プランにも上限がある

Freeプランは無料ですが無制限ではありません。

2026年現在はクレジット制なので、使用量は時々確認しておきましょう。

3．Pythonアプリをそのまま置く場所ではない

StreamlitなどのPythonアプリをフォルダごとアップロードすれば動く、というサービスではありません。

HTML・CSS・JavaScript中心の静的Webアプリとは仕組みが違います。

4．大きな画像・動画には注意

画像や動画などのファイルサイズが大きくなると通信量も増えます。

クレジットを節約する意味でも、画像の圧縮などはしておいた方がいいでしょう。

5．公開範囲を確認する

公開したアプリを他の人にも使ってもらう場合は、実際に別の端末などからURLへアクセスできるか確認しておきましょう。

Netlifyはどんな人に向いている？

実際に調べてみて、特に向いていると思ったのが、

  • HTML・CSS・JavaScriptを勉強している人
  • AIと一緒にWebアプリを作った人
  • 作ったアプリをスマホでも使いたい人
  • 自分用のクイズ・勉強アプリを置きたい人
  • ポートフォリオを公開したい人
  • GitHubをまだよく分かっていない人
  • サーバー構築まではしたくない人
  • とりあえずWeb上で動かしてみたい人

です。

特に最近はAIと会話しながら、

「こんなアプリ作って」

とお願いすると、HTML・CSS・JavaScriptで結構なものが作れるようになりました。

ところが完成したあとに、

「で、これどこに置くの？」

問題が発生します。

Netlifyは、その答えの一つとして覚えておいて損はないサービスだと思います。

Netlify以外にも選択肢はある

もちろん静的Webサイト・Webアプリの公開方法はNetlifyだけではありません。

例えば、

  • Netlify
  • GitHub Pages
  • Vercel
  • Cloudflare Pages
  • Firebase Hosting

などがあります。

どれが絶対に正解というものではありません。

今回Netlifyを調べていて一番分かりやすいと思ったのは、

「GitHubが分からなくても、とりあえずドラッグ＆ドロップで公開できる」

ところです。

そのため、

「AIと一緒にWebアプリを作ったけど、公開方法が分からない」

という人が最初に試すサービスとしては、かなり面白い選択肢だと思います。

まとめ：Webアプリを作ったら「公開する」までやってみよう

Webアプリを作ると、

「動いた！」

で満足してしまいがちです。

でも、

作る
 ↓
公開する
 ↓
スマホで使う
 ↓
人に見せる
 ↓
修正する
 ↓
もう一度公開する

まで経験すると、一気に「作った感」が出てきます。

Netlifyなら、静的Webアプリの場合、

HTML・CSS・JavaScriptで作る
        ↓
フォルダをNetlifyへドラッグ＆ドロップ
        ↓
URL発行
        ↓
スマホからアクセス

というところから始められます。

そして慣れてきたら、

PCで修正
   ↓
GitHubへpush
   ↓
Netlifyが自動デプロイ

へ進めばいい。

最初から全部覚える必要はありません。

また、Freeプランの「300クレジット」という数字だけを見ると、

「すぐなくなるんじゃない？」

と思うかもしれません。

しかし、今回のように1MB程度のクイズアプリを自分が1日1回使うと仮定すると、再デプロイしない月なら概算で1クレジットにも届きません。

もちろん実際の使用量はアプリによって変わりますが、

個人用の軽い静的Webアプリなら、まず無料プランで試してみる

という使い方で十分そうです。

私自身も、こういったサービスは一度設定しただけだと、

「前どうやったっけ？」

となりがちです。

なので今回は、Netlifyが何なのかというところから、登録、公開、料金、更新、停止までまとめてみました。

次に静的Webアプリの置き場所を聞かれたら、

「Netlifyという選択肢もあるよ」

と、このページを見ながら説明できそうです。

Webアプリを自分でも作ってみたい人へ

今回はNetlifyを使って、作成したWebアプリをインターネット上に公開する方法を紹介しました。

実際に公開してみると、思っていたより簡単だったのではないでしょうか？

私自身、AIを活用しながらWebアプリを作っていますが、HTML・CSS・JavaScriptの基本を知っておくと、AIが作ったコードを理解したり、ちょっとした修正を加えたりするときにも役立ちます。

「公開するだけでなく、自分でも作ってみたい！」という方は、初心者向けの学習本から始めてみるのもおすすめです。


コメント