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

「Webサイトを作って公開したい」と思ったとき、結局なにをすればいいのか——。 ふんわりIT図解で紹介してきた ドメイン・サーバー・GitHub・HTTP などの用語が、実際の制作現場でどう繋がるのか、筆者の制作体験をもとに 5ステップ でまとめてみました。 読み終えるころには、サイト公開の全体像 と、自分でも作ってみる第一歩 が見えているはずです。

この記事の前提

自分でサイト制作をしてみようかな？と思っている方に向けた内容です。 今回紹介するのは、情報を見せるシンプルなサイト（自己紹介ページ・ポートフォリオ・お店の紹介サイトなど）を作って公開するまでの流れ。ECサイトのように決済を扱うもの、会員登録やログイン機能が必要なものは、また別の話になります。

また、内容は AIを活用する前提 にしています。設定の詳細手順は、AIに聞きながら進めるイメージで進めますね。

下準備するもの

本題に入る前に、最初にそろえておくとスムーズなものを並べておきます。詳しい設定方法はAIに聞きながら進められるので、ここでは「何がいるか」だけ知っておけばOKです。

• Claude Code（または使うAI） — サブスク登録＋インストール
• VS Code — Claude Codeを開く場所（なくてもOKだけど相性◎）
• Git — バージョン管理の道具（次の②で使う）
• GitHub アカウント — コードの保管庫（次の②で使う）
• Cloudflare アカウント — サイトを公開する場所（③で使う）

さらに、やっておくとあとがラクになるものも：

• 参考にしたいサイトを2〜3個ピックアップ（AIに「こんな見た目で」と伝える材料）
• 使いたい画像素材をそろえておく
• サイト名やなんとなくの方向性を決めておく

① コードを書く

まずはコードを書くところから。使ったのは Claude Code（日本語で「こうしたい」と伝えるだけでコードを書いてくれるAI）です。VS Codeというエディタで開いて使っていましたが、VS Code自体は必須ではありません。

最初に、どの言語やフレームワークを活用して作成するのかをAIと相談して決めておくと、後々困りにくいのでおすすめです。とはいえ「とにかく一度作ってみたい！」という方なら、HTML・CSS・JavaScript の組み合わせで十分。実際、筆者もこの3つだけでサイトを作りきりました。

💡 それぞれ詳しくは → HTMLってなに？ / CSSってなに？ / JavaScriptってなに？

進め方は、かなりアナログでした：

1. 「なんとなくこんな感じのサイトにしたい」とAI（Claude Code）に伝えて、叩き台を作ってもらう
2. フォント・配置・見え感など気になるところを、ひたすら壁打ちしながら整えていく
3. 仮で置いていた画像を、本番のものに差し替えていく

利点 は、自分の気になるところを細かく直していけること。最初の叩き台はけっこうしょぼかったので、このブラッシュアップがかなり重要でした。配色・フォント・スマホでの見え方 といったデザインまわりも、すべてAIと壁打ちしながら整えていけます。 デメリット は、なかなか非効率なのと、直したい指示がどんどん積み重なって、コードがふくらみがちなこと。既存の見た目を壊さないように、AIはむやみに削除できず、直したい箇所に装飾を足していく形になるためです。これは後から、AIに頼んで少しずつ整理してもらいました。

そして、この修正をくり返す過程で活躍するのが、次に紹介する Git / GitHub です。

💡 もっと効率よくやるなら：参考サイトのURLや完成イメージ画像をAIに渡したり、AI専用のサイト制作機能を使うと、もっと効率的につくれます 笑

② バージョン管理する

書いているコードは、自分のPCの中（ローカル）と GitHub（リモート）の両方で管理していました。

💡 GitHubについて知りたい方は → GitHubってなに？

AIは賢いので、修正前の状態に自力で戻してくれることもあります。ただ、自分でも “セーブデータ” を残しておくと安心です。完全に元へ戻したいときや、新しいページ・機能をお試しで追加したいときも、気楽に試せるようになります。

下準備で揃えた git と GitHubアカウント が、ここで活躍します。設定や接続まわりは少しややこしいので、AIに聞きながら進めていきました。

これで コード本体＋セーブデータ が両方そろいました。 あとは、世界に公開するだけ です。

③ デプロイする

デプロイ（deploy） ＝ 開発したコードやサイトを「実際に公開される場所」に配置して、世界に見られる状態にすること。

さて、ここまでは自分のPC内だけで、他の人には見られていない状態でした。ここから、いよいよ世界に公開していきます。

筆者が使ったのは Cloudflare というサービス。サイトのデータ（HTML・画像など）をCloudflareに預けると、世界中に散らばった 300以上の拠点 から訪問者に届けてくれます。

💡 サーバーについて知りたい方は → サーバーってなに？

ふんわりIT図解の「サーバーってなに？」で出てきた「お店の厨房」が、世界中に支店として展開されているイメージ です。だから日本からでもアメリカからでも速くサイトを開くことができます。

「あれ、コードはGitHubに預けてるんじゃなかったっけ？」と思った人、鋭いです。 実は GitHub と Cloudflare は役割が違います：

• GitHub ＝ コードの保管庫（開発・履歴管理）
• Cloudflare ＝ 完成したサイトを世界中に配信する場所（公開）

GitHubとCloudflareを繋いでおくと、GitHubに保存（push）したら自動でCloudflareに運ばれて公開される——という連携で動いています。

ちなみに、GitHubは必須ではありません。自分のPCから直接Cloudflareにコードを渡して公開することもできます。渡したコードは預かっておいてもらえますし、後から更新もできます。GitHubは「履歴管理＋自動デプロイ」の便利を足してくれる、というポジション。

Cloudflareでデプロイが完了すると、URLを共有すればサイトを見せられるようになります。アクセス制限をかければ、本当に限られた人だけに見せることもできますよ。

あわせて、Cloudflareに置くだけで自動でHTTPS化（https://〜 の鍵マークつきURL）も済むので、訪問者にも安心して見てもらえる状態になります。

💡 HTTPS について → HTTP / HTTPS ってなに？

④ ドメインを取る

ここまでで公開はできましたが、URLは Cloudflare が自動で割り当てた長いもの（例：xxx.pages.dev）になっています。

そこで、自分だけの住所＝独自ドメイン を取得して繋ぎましょう。覚えやすいURLになって、人にも紹介しやすくなります。

💡 ドメインについて → ドメインってなに？

筆者も、サイト名に合わせた独自ドメイン（例：example.com のような形）を取得して接続しました。 ドメインも Cloudflare で取ると、サイトとの接続がワンクリックで済む ので、初心者には特におすすめです。

⑤ 完成・公開

ドメインまで繋ぎ終えて、ブラウザのアドレスバーに自分のURLを打ち込んだ瞬間。 「あ、ちゃんと出た」——これが意外と感動します。

それまで自分のPCの中だけで動いていたサイトが、どこからでも見られる場所に立ち上がる。 家族や友人にURLを送って「ちゃんと見える！」と言われたとき、ようやくサイトが “生きてる” 感覚になりました。

あと、大事なのは 公開してからが本番 ということ：

• 「ここの文言、もう少し変えたいな」
• 「画像をちょっと差し替えよう」
• 「お問い合わせ先を追加したい」

こういった細かな更新も、これまで紹介した仕組みのおかげで気軽に試せます。コードを直して → GitHubに保存 → 自動でCloudflareに反映、という流れがクセになって、サイトが少しずつ育っていく感覚が出てきます。

公開前にチェックしておくこと

最後にひとつだけ。APIキー・パスワード・個人情報をコードに直接書いていないか は、公開前に必ず確認しましょう。GitHubもCloudflareも世界に開かれた場所なので、うっかり書いてしまうと 他人に勝手に使われたり、情報が漏れたり します。

💡 詳しくは → 環境変数ってなに？ / APIキーってなに？

それと、ファビコン（タブや検索結果に出るサイトのアイコン）も、できればこのタイミングで設定しておきましょう。反映が遅いので、早めに仕込んでおくとスムーズです。

💡 ファビコンや、公開後の初期設定について詳しくは → 特別編02「サイトを公開したら最初にやること」

まとめ

さんざん話しましたが、サイトを公開するまでの流れを改めて並べると、ざっくりこの5ステップ：

1. コードを書く（Claude Codeを活用）
2. バージョン管理を仕込む（GitHub準備は最初、セーブは書きながら）
3. デプロイする（Cloudflareに預けて世界公開）
4. ドメインを取る（独自のURLに接続）
5. 完成・公開（ようこそ、そしてここからが本番）

これからサイト作りを始めたい方は、よかったら関連記事ものぞいてみてください 🌱

「いつか自分のサイトをもってみたい」と思っている方のハードルが、この記事でちょっとだけ下がっていたら嬉しいです。