Webサイトを作って公開する

この記事で分かること

• Claude CodeClaude CodeClaude が、あなたのパソコンの中のファイルを読み書きしたりコマンドを実行したりして、作業そのものを進めてくれるツールです。用語集で詳しく → に頼んでWebサイトを作る流れ
• 公開する前に、自分のパソコンで見た目を確認する方法
• 作ったサイトをインターネットに公開する仕組みと、かかる費用の考え方

全体の流れは「お店を出す」のと同じ

Webサイトの公開は、お店を出すことに似ています。

お店にたとえると	Webサイトでは
店の中を作る	ページ（ファイル）を作る
開店前に内装を確認する	自分のパソコンで表示を確認する
設計図を倉庫に保管する	GitとGitHubにファイルを保存する
土地を借りて開店する	ホスティングサービスで公開する

Webサイトの正体は、HTMLHTMLWebページの中身（見出し・文章・画像など）を書き表すための言語です。用語集で詳しく → などで書かれたファイルの集まりです。このファイルをインターネット上の置き場所（ホスティングホスティングサイトのデータを置いて、世界中から見られるようにしてくれるサービスのことです。用語集で詳しく →）に置くと、誰でも見られるようになります。これを デプロイデプロイ作ったサイトやアプリを、インターネット上で使える状態にすることです。用語集で詳しく → と呼びます。

この記事では、文章と写真が中心のシンプルなサイト（自己紹介やお店の案内）を例にします。

手順1：サイトを作ってもらう

1. サイト用の空のフォルダを作ります（例：my-site）。
2. そのフォルダで Claude Code を起動します。起動の方法ははじめての会話を見てください。
3. 作りたいサイトを言葉で伝えます。

自己紹介のWebサイトを作ってください。
・ページは1枚だけ。名前、ひとこと紹介、好きなこと3つ、連絡先を載せる
・落ち着いた青系の色で、スマートフォンでも読みやすく
・特別な道具を入れなくても動く、HTMLとCSSだけの構成にする
・名前や連絡先は仮の文字を入れておく

「誰に見せるのか」「何を載せるのか」「どんな雰囲気か」を伝えると、仕上がりが希望に近づきます。伝え方のコツはプロンプトの基本にまとめています。

手順2：自分のパソコンで確認する

できあがったフォルダの中の index.html をダブルクリックすると、ブラウザで表示されます。この段階では、まだ自分にしか見えません。

気になるところは、そのまま言葉で直してもらいます。

見出しの文字をもう少し大きくしてください。
一番下に、営業時間の表を追加してください。

直してもらったら、ブラウザの再読み込みボタンを押して確認します。これを満足するまで繰り返します。

ヒント

スマートフォンでの見え方は、ブラウザの幅を細くすると大まかに確認できます。「スマホで見たときに崩れていないか確認して」と頼むのも有効です。

手順3：GitとGitHubに保存する

公開の前に、ファイルを GitGitファイルの変更履歴を記録して、いつでも過去の状態に戻せるようにする道具です。用語集で詳しく → で記録し、GitHubGitHubGit で記録した履歴を、インターネット上に保管・共有できるサービスです。用語集で詳しく → に送ります。記録することを コミットコミット今のファイルの状態を、メモを添えて履歴に記録すること。ゲームの「セーブ」にあたります。用語集で詳しく →、GitHubへ送ることを Push（プッシュ）Push（プッシュ）自分のパソコンに記録したコミットを、GitHub などインターネット上の保管場所へ送ることです。用語集で詳しく → と呼びます。

GitHubのアカウント作成と、最初のログインは自分で行う必要があります。準備はGitとGitHubとはを見てください。準備ができたら、次のように頼みます。

このフォルダをGitで管理して、最初のコミットをしてください。
そのあと、GitHubにリポジトリを作ってPushする手順を、1つずつ案内してください。

詳しくはClaude CodeでGitを使うで説明しています。

手順4：ホスティングサービスで公開する

GitHubに置いたファイルを、ホスティングサービスが読み取って公開します。一度つなげば、次からはPushするだけで公開中のサイトも更新されます。

執筆時点で、個人のサイトによく使われている例です。

サービス	特徴
GitHub Pages	GitHubの機能の1つ。GitHubの設定画面から有効にできる
Cloudflare Pages	GitHubとつないで公開できる。このサイトもここで公開している

設定は各サービスの画面で行います。画面は変わることがあるので、Claude Code に案内役を頼むと安心です。

このサイトをGitHub Pagesで公開したいです。
私が画面で操作する手順を、初心者向けに順番に教えてください。

ノート

Cloudflareは執筆時点で、新しく始める場合は「Workers」という別の仕組みを勧めると案内しています。どちらを使うかは公式ページの最新の説明を確認してください。

費用について

• 無料で始められます。 上の2つのサービスには無料で使える枠があります。ただしGitHub Pagesの場合、無料プランでは公開用の リポジトリリポジトリGit で管理しているひとつのプロジェクト（フォルダと、その変更履歴）のことです。用語集で詳しく → を「誰でも見られる設定」にする必要があります。
• 独自ドメインは有料です。 無料のままだと、サービス名が入ったアドレスになります。自分の名前.com のような ドメインドメイン「example.com」のような、インターネット上のサイトの住所です。用語集で詳しく → を使いたいときは、年ごとの料金がかかります。
• Claude Code の利用料は別です。 料金のしくみを見てください。

無料枠の条件や上限は変わることがあります。必ず各サービスの公式ページで確認してください。

つまずきポイント

• 公開したものは世界中から見えます。 住所、電話番号、家族の写真などを載せる前に、本当に公開してよいか考えてください。GitHubのリポジトリを公開設定にすると、サイトのもとになるファイルも見える状態になります。
• パスワードやAPIキーをファイルに書かない。 公開された瞬間に他人に使われるおそれがあります。
• 最初から凝りすぎない。 まず1ページを公開まで通してみると、全体の流れが分かります。飾りはあとから足せます。
• 表示されないときは、少し待つ。 公開や更新が反映されるまで数分かかることがあります。

次に読む記事

• 資料（スライド・PDF）を作る —— 次は、仕事や学校で使う資料作りを試してみましょう。