【イベントレポート】Claude Codeで数分でサイト制作→Cloudflareで即公開！

「あっという間にサイトを公開できて驚いた」
「AIの可能性に驚きました」

フォルダを作り、ざっくりとしたプロンプトを伝えるだけ。数分後には1枚のサイトが立ち上がり、その日のうちに世界中から見られるURLになりました。今回はノーコードサロンで開催したClaude Code勉強会の様子をレポートします。

開催概要

項目	内容
イベント名	ノーコードサロン Claude Code勉強会
開催日時	2026年7月29日（水）11:00〜15:00
会場	水道橋レンタルスペース
参加人数	5名（ノーコードサロン会員4名＋非会員1名）
テーマ	Claude Codeでのサイト制作と、Cloudflareを使った公開（デプロイ）体験
平均満足度	10点満点中9.75点

会場の雰囲気

会場は東京・水道橋のレンタルスペース。ひとつの大きなテーブルを全員で囲むレイアウトで、詰まったところをその場で聞ける距離感で進みました。手を動かす時間を長めに取り、うまくいかない箇所は画面を見せ合いながら解決していく——オフライン開催ならではの進め方ができた回でした。

Claude Codeで、数分でサイトが完成

今回はまず「Claude Codeを使ってサイトを作る」ところからスタートしました。手順はいたってシンプルです。

1. サイト用のフォルダを作成する
2. どんなサイトにしたいかを、ざっくりとしたプロンプトでAIに伝える
3. 数分待つと、サイトが出来上がっている

細かい指示書を用意しなくても、大枠の意図を伝えるだけで形になる。この体験そのものが、参加者にとって一番のインパクトだったようです。

もちろん出来上がったサイトには修正したい点も残ります。ただし今回は「完璧なサイトを作ること」より、作ったものを実際に公開するところまで体験することを優先しました。

Cloudflareで、ローカルのファイルを世界に公開

次に取り組んだのが公開（デプロイ）です。今回はホスティングサービスの Cloudflare を使い、フォルダ内のソースコードを自分のパソコン（ローカル）から外部公開しました。これで、他の人がURLを開けば閲覧できる状態になります。

ホスティングサービスとは？
サイトをインターネット上に公開できるようにするツールのことです。Cloudflareのほか、VercelやGitHub Pagesなども有名です。

Cloudflare Pages / Vercel / GitHub Pages の比較

項目	Cloudflare Pages	Vercel（Hobby／無料プラン）	GitHub Pages（無料）
料金	無料プランあり	無料プランあり（Proは月20ドル〜）	無料（パブリックリポジトリなら誰でも利用可）
帯域幅	無制限	月100GBが目安	月100GBが目安（ソフトリミット）
商用利用	無料プランでも可能	無料プランは個人・非商用のみ。商用はPro以上が必要	オンラインビジネス・ECサイト・SaaSなど商用目的での利用は不可
カスタムドメイン	無料で設定可能。SSLも自動発行	追加自体は無料。ただし商用利用ならProが必要	無料で設定可能。SSLも自動発行
容量・ビルドの制限	無料プランのビルドは月500回まで	無料プランのビルドは月6,000分まで	サイト容量は1GBまで、公開は1時間に10回まで
得意な用途	静的サイト、低コストでの複数サイト運用	Next.jsとの統合、動的なアプリ開発	ドキュメント、ポートフォリオ、OSSの紹介ページ

※各サービスの料金・制限は変更される場合があります。最新の情報は各公式サイトをご確認ください。

運営が実感しているCloudflareのメリット

運営自身、これまでにサイトやシステムを30件以上Cloudflareで公開していますが、すべて無料の範囲で運用できています。

さらに大きいのが、カスタムドメインの設定が無料という点です。Studioなどのノーコードツールでは、独自ドメインでサイトを公開するために有料プランへの課金が必要になります（Studio側の手順はStudioの独自ドメイン設定で解説しています）。一方Cloudflareでは、それが不要。もちろんドメインの取得自体は有料ですが、「公開するために月額を払い続ける」という前提が変わるのは、かなり大きな違いだと感じています。

参加者の声

• 「あっという間にサイトを公開できて驚いた」
• 「AIの可能性に驚きました」
• 「Obsidian、Notion、Googleドライブなどを活用することで、説明を省いてもコンテキストが伝わることがわかった」

特に3つ目は、AIを日常業務に組み込むうえで本質的なポイントです。普段からドキュメントを蓄積しておけば、毎回ゼロから説明しなくてもAIが前提を汲み取ってくれる。ツールの使い方以上に、情報の置き場所を整えておくことが効いてきます。

お昼は近くの中華料理屋へ

お昼は会場近くの中華料理屋でランチ。水道橋は東京ドームが近くに見える場所ということもあり、ご飯屋に向かう道中でも色々な話で盛り上がりました。こうした雑談から生まれる情報交換も、オフライン開催ならではの価値だと思っています。

AIとノーコードの使い分けについて

ノーコードサロンでは、これまで1年半にわたりStudioが学べるコミュニティとして、さまざまな勉強会や交流会を開催してきました。

そんな中で、今回のようにClaude Codeを代表とするAIを活用すれば数十分でサイトを制作できてしまう。これは本当に凄いことですが、同時に「じゃあノーコードを学ぶ意味は？」と感じてしまう方も多いのではないでしょうか。

しかし、ノーコードには依然として明確な優位性があります。それが運用面です。お客様が自社のスタッフでサイトを日々更新していける。この強みは、AIでコードを生成する方法では簡単に代替できません。

だからこそ、「AIが良い」「ノーコードが良い」ではなく、お客様の状況に合わせて最適解を提案できる提案力の価値が上がっていると考えています。この考え方はStudioとAI（Claude Code）の役割の使い分けでも詳しく整理しています。

まとめ

今回の勉強会では、AIでサイトを作るスピードと、それを実際に公開するまでの手軽さを、参加者それぞれが自分の手で体験しました。作るだけで終わらせず「公開する」ところまでやり切ると、理解の解像度が一段上がります。

ノーコードサロンでは、引き続きAIならびにノーコードの勉強会を開催していきます。過去の開催の様子はイベントレポート一覧から、Studioの学習を進めたい方はStudio学習教材もあわせてご覧ください。