第4部：公開とサポート Step 12 / 14

公開と運用

作ったサイトをインターネットに公開しましょう。無料〜低コストで公開できるサービスを紹介します。

公開に必要なもの

🌐 ドメイン

サイトの住所（URL）

例：example.com

年間1,000〜3,000円程度

🖥️ サーバー

サイトのデータを置く場所

静的サイトなら無料も可能

無料〜月額1,000円程度

無料で公開できるサービス

🔥

Netlify （初心者におすすめ）

静的サイトに特化。ドラッグ&ドロップで公開可能。フォーム機能も無料で使える。

無料枠あり フォーム機能 ドラッグ&ドロップ GitHub不要
📄

GitHub Pages

GitHubリポジトリから直接公開。完全無料。

完全無料 GitHub連携
▲

Vercel

静的サイト、Next.jsに最適。GitHubと連携で自動デプロイ。

無料枠あり SSL自動 高速

方法1: Netlifyで公開（最も簡単）

なぜNetlifyが初心者向けか：ドラッグ&ドロップだけで公開できるため、GitHubアカウントやコマンド操作が一切不要です。まずはここから試してみましょう。

1

Netlifyにアクセスしてアカウント作成

netlify.com にアクセスし、「Sign up」をクリックします。

登録方法は3つ：

  • メールアドレスで登録（最もシンプル）
  • GitHubアカウントで登録
  • Googleアカウントで登録

メールアドレスで登録すれば、GitHubアカウントは必要ありません。

2

「Deploy manually」を選択

ログイン後、以下の順にクリックします。

「Sites」タブ → 「Add new site」 → 「Deploy manually」

「Deploy manually」を選ぶと、ファイルのアップロード画面が表示されます。

3

プロジェクトフォルダをドラッグ&ドロップ

「Drag and drop your site output folder here」という点線のエリアが表示されます。

あなたのプロジェクトフォルダを
ここにドラッグ&ドロップするイメージ

重要：フォルダの中に index.html が含まれていることを確認してください。index.htmlがサイトのトップページになります。

4

公開完了！URLを確認

数秒でデプロイが完了し、自動的にURLが発行されます。

例：https://random-name-12345.netlify.app

ランダムな名前が自動で付きますが、後から変更できます。

確認しよう

表示されたURLをクリックして、自分のサイトがインターネット上に表示されることを確認しましょう。スマホのブラウザからもアクセスしてみてください。

サイト名（URL）を変更する

ランダムなURLを分かりやすい名前に変更できます。

「Site configuration」→「Change site name」

例：my-portfolio → https://my-portfolio.netlify.app

他の人が使っていない名前であれば、好きな名前に設定できます。

方法2: GitHub Pagesで公開

GitHub Pagesの特徴：GitHubにコードをアップロードすれば、そのまま無料でWebサイトとして公開できます。コードのバージョン管理もできるので、長期的な運用に向いています。

事前準備：GitHubアカウントの作成

1

GitHubにアクセス

github.com にアクセスし、「Sign up」をクリック

2

アカウント情報を入力

メールアドレス、パスワード、ユーザー名を入力（ユーザー名はURLの一部になります）

3

メール認証

届いたメールのリンクをクリックして認証完了

Claude CodeでGitHubにアップロード

Claude Codeを使えば、難しいGitコマンドを覚えなくても簡単にアップロードできます。

Claude Codeへの指示：

このプロジェクトをGitHubにアップロードして、
GitHub Pagesで公開してください

Claude Codeが自動で行うこと：

  1. Gitリポジトリを初期化（git init）
  2. ファイルを追加（git add）
  3. コミットを作成（git commit）
  4. GitHubにリポジトリを作成
  5. コードをアップロード（git push）

初回のみGitHubの認証画面が表示されることがあります。画面の指示に従って許可してください。

GitHub Pagesを有効にする

GitHubにアップロードしたら、GitHub Pagesの設定を行います。

1

リポジトリのSettingsを開く

GitHubのリポジトリページで上部の「Settings」タブをクリック

2

Pagesを選択

左メニューの「Pages」をクリック

3

ブランチを設定

「Source」で「Deploy from a branch」を選択し、「Branch」を main に設定して「Save」

4

数分待って公開完了

1〜3分ほどで公開されます。URLは以下の形式になります。

https://ユーザー名.github.io/リポジトリ名/

確認しよう

設定後、Pagesの画面に表示されるURLにアクセスして、サイトが正しく表示されるか確認しましょう。表示まで数分かかることがあります。

方法3: Vercelで公開

Vercelの特徴：GitHubと連携して、コードをpushするだけで自動的にサイトが更新されます。一度設定すれば運用がとても楽になります。

事前にGitHubにコードがアップロードされている必要があります（方法2の前半を参照）。

1

Vercelにアカウント作成

vercel.com にアクセスし、「Sign Up」をクリック。

おすすめ：「Continue with GitHub」でGitHubアカウントを使ってログインすると、リポジトリの連携がスムーズです。

2

新しいプロジェクトを作成

ダッシュボードで以下の順にクリックします。

「Add New...」→「Project」→「Import Git Repository」
3

GitHubリポジトリを選択

GitHubに連携すると、リポジトリの一覧が表示されます。公開したいリポジトリの「Import」をクリック。

初回はGitHubとの連携を許可する画面が表示されます。

4

「Deploy」をクリック

設定はそのままで「Deploy」ボタンをクリック。30秒程度で自動ビルド&公開が完了します。

例：https://プロジェクト名.vercel.app
5

今後の更新は自動

一度設定すれば、GitHubにコードをpushするたびに自動でサイトが更新されます。手動でのデプロイ作業は不要です。

確認しよう

デプロイ完了後、Vercelのダッシュボードに表示されるURLをクリックして、サイトが正しく表示されることを確認しましょう。

独自ドメインの設定（必要な場合のみ）

最初はサブドメイン（xxx.netlify.app や xxx.github.io）で十分です。独自ドメインはサイトを本格運用する段階で検討しましょう。

ドメインの取得

独自ドメインを使いたい場合は、まずドメイン取得サービスで購入します。

お名前.com

国内最大手、種類が豊富

ムームードメイン

操作がシンプルで初心者向け

Google Domains

管理画面が見やすい

各サービスでのドメイン設定

ドメインを取得したら、公開サービス側で設定を行います。

Netlify：

「Domain management」→「Add custom domain」でドメインを追加。DNS設定の案内が表示されます。

GitHub Pages：

「Settings」→「Pages」→「Custom domain」にドメインを入力。DNSにCNAMEレコードを追加します。

Vercel：

「Settings」→「Domains」でドメインを追加。自動でSSL証明書も設定されます。

いずれのサービスも無料でSSL（https）に対応しています。

公開後にやること

📊 アクセス解析

Google Analyticsを設置して訪問者を分析

🔍 Search Console

Google検索でのパフォーマンスを確認

📱 各デバイスで確認

PC、スマホ、タブレットで表示チェック

🔄 定期的な更新

コンテンツを更新して鮮度を保つ

よくあるエラーと対処法

ページが404（Not Found）になる

原因：index.html がプロジェクトのルート（一番上の階層）にない

対処法：

  • フォルダ構造を確認し、index.htmlが最上位にあるか確認
  • サブフォルダにindex.htmlがある場合は、フォルダごとではなく中身をアップロード
  • GitHub Pagesの場合、ブランチ設定が正しいか確認

CSSが効いていない（デザインが崩れる）

原因：CSSファイルへのパスが間違っている

対処法：

  • HTMLの <link> タグのパスを確認
  • 相対パス（./css/style.css）を使っているか確認
  • ファイル名の大文字・小文字が一致しているか確認（サーバーでは区別されます）

更新が反映されない

原因：ブラウザのキャッシュが古いページを表示している

対処法：

  • ブラウザのキャッシュをクリア（Ctrl + Shift + R / Cmd + Shift + R）
  • 公開サービスのダッシュボードでデプロイが完了しているか確認
  • Netlifyの場合：「Deploys」タブで最新デプロイのステータスを確認
  • GitHub Pagesの場合：反映まで数分かかることがあるので少し待つ

画像が表示されない

原因：画像ファイルのパスが間違っている、またはファイルがアップロードされていない

対処法：

  • <img src="..."> のパスが正しいか確認
  • 画像ファイルがプロジェクトフォルダに含まれているか確認
  • ファイル名に日本語やスペースが含まれていないか確認

まとめ

  • ✓ 初心者はNetlifyのドラッグ&ドロップが最も簡単
  • ✓ GitHub Pagesは完全無料で、Claude Codeで簡単に設定可能
  • ✓ Vercelは自動デプロイで長期運用に最適
  • ✓ 独自ドメインは必要になってからでOK
  • ✓ 公開後はアクセス解析を設置して改善を続ける
前へ：ブログサイト制作 次へ：次のステップ