無料のWebツールだけで、小規模な会社でも「ちゃんとした公式サイト」を作る方法：

ある非エンジニア創業者の完全実録ストーリー

これは「コードの書き方」を教える記事ではありません。 「ほぼコストゼロ＋AI＋無料ツールを使って、どうやって自社の公式サイト＋ブログ＋問い合わせフォームを構築したか」 という私の復習記録です。 技術的な背景は不要です。必要なのは少しの忍耐と好奇心だけ。

目次

1. 多くの小規模企業が抱える共通の悩み
2. 実は不要だったもの
3. 現代の無料ツールセットで完全な公式サイトを組む
4. 公式サイトはどうあるべきかを先に考える
5. どうやって実際に動くサイトにするか？
6. 問い合わせフォームを真の集客口にする
7. AIの役割：あなたを拡張する
8. ゼロから始めるための手順
9. 起業中で、まだ公式サイトを作れていないあなたへ

1. 多くの小規模企業が抱える共通の悩み：

「公式サイトが必要なのはわかっているけど、どこから手をつければいいかわからない」

多くの創業者が、必ずと言っていいほどこの段階を経験します：

• クライアントから「公式サイトはありますか？URLを送ってください」と言われる
• 手元にあるのはPPT、Notionのリンク、あるいは散らばった資料だけ
• 「ちゃんとしたサイトが必要だ」とはわかっているが、いざ作ろうとすると疑問だらけになる：

外注すべき？ サーバーを買う必要がある？ エンジニアを雇わないといけない？ 費用が膨らみすぎないか？ うちのような小さな会社で、そこまでやる価値はあるのか？

私も最初は同じでした。

私が欲しかったものは実はシンプルでした：

1. プロフェッショナルで清潔感のあるトップページ
2. ちょっとした情報発信ができる場所（ブログ/インサイト）
3. ちゃんと「顧客からの連絡が届く」問い合わせフォーム
4. これら全てが、高額なSaaSの管理画面に縛られず、自分の手元にあること

聞くだけなら簡単そうですが、「従来のルート」で行こうとすると、途端に重荷になります：

• 制作会社に外注すると、プロセスが複雑で費用も安くない
• 自分でWordPressを立ち上げるには、サーバー契約、プラグイン導入、セキュリティ管理が必要
• 「誰でも簡単」なWeb作成ツールを使うと、カスタマイズ性が低く、すぐに有料プランの壁にぶつかる

その後、私は全く異なるルートを見つけました： 「ネット上に既に存在する無料ツールを、レゴブロックのように組み合わせて公式サイトを作る」 という方法です。

2. 最初は必要だと思っていたけど、実は不要だったもの

最初はこれらが必須だと思っていました：

• サーバー（クラウドホスティングなど）
• 複雑なCMS（サイト管理システム）
• 自分でデータベースを構築すること
• 各種「プロ用管理画面」
• さらにはセキュリティ強化やバックアップ作業……

しかし実際にやってみて気づきました：

B2Bの小規模企業にとって、これらはすべて「過剰設計（オーバースペック）」です。 本当に必要なのは、あなたの価値を明確に伝えるトップページと、信頼できる「連絡窓口」、そして少しの日常的な発信だけです。

正しいツールを選べば、実はこれらが実現できます：

• サーバー購入不要
• データベース管理不要
• メールサーバー設定不要
• フロントエンドの専門知識不要
• さらに AIがコード作成、レイアウト調整、デプロイまで手伝ってくれる

そこで私は、自分の「サイト構築戦略」を再設計し始めました。

3. 新ルート：「現代の無料ツールセット」で完全な公式サイトを組む

最終的に私が選んだ「レゴブロック」の組み合わせはこれです：

• GitHub：コードとファイルの「家」。サイトの全履歴を記録します。
• Cloudflare Pages：サイトを世界中に公開してくれます。「無料の静的サイトホスティング＋CDN」のようなものです。
• 静的サイトフレームワーク（例：Astro）：ページ構造を整理し、コンテンツ型サイト（公式サイト＋ブログ）に最適です。
• Cloudflare Turnstile：従来の認証コードに代わり、問い合わせフォームをボットから守ります。
• Resend：メール送信専用サービス。問い合わせがあるたびに通知メールを送ってくれます。
• Cloudflare D1：軽量データベース。「誰が問い合わせてきたか」を記録するために使います。
• AIアシスタント（ChatGPT / Claudeなど）：ページ作成、レイアウト修正、そしてこれら全てのツールを繋ぐ作業を手伝ってくれます。

コードを全く書かないとしても、これらのツールが「何をするものか」だけ理解しておけば十分です：

• GitHub：修正履歴を残せる「バージョンのノート」
• Cloudflare Pages：無料で世界中からアクセスできる「Webサーバー」
• Turnstile：ボットを追い払う「礼儀正しいドアマン」
• Resend：プロフェッショナルな「郵便局」
• D1：小さくて軽い「顧客台帳」
• AI：あなたの指示で動く「パートタイムの技術パートナー」

4. 技術の話は後回し。「公式サイトはどうあるべきか」を先に考える

実際にサイトを作る前に、私は重要な決断をしました： 技術スタックのことは一旦忘れ、「公式サイトのコンテンツ構造」を明確にする。

小規模ながら質の高い企業にとって、最終的にたどり着いた構成はこうです：

1. Heroセクション（ファーストビュー） 一言で説明する：あなたは誰？誰を助ける？どんな問題を解決する？ これが顧客がサイトを開いた時の第一印象であり、コンバージョン率の核心です。

2. Services / 事業内容 3〜4つのモジュールで、提供サービスを明確に記述します。売り込みすぎず、 信頼できるアドバイザーが自分の仕事範囲を丁寧に説明するようなトーンで。

3. Why Us / 選ばれる理由 小規模企業ならではの強みを書きます：

   • 例：「小回りが利く」「柔軟性」「異文化理解」「特定業界への深い知識」など。

4. Cases / 実績紹介（2〜3個でもOK） 長く書く必要はありませんが、リアルで情景が浮かぶように。 「本当に仕事をしてきたんだな」と感じさせることが重要です。

5. News / お知らせ シンプルで構いません：

   • 新サービス開始
   • イベント登壇
   • 業界レポート公開 会社が「生きている」ことを示します。

6. Insights / Blog / 記事 あなたの視点や業界への洞察を発信する場所。 潜在顧客にとって、あなたが「専門家」であると認識させる重要な部分です。

7. Contact / お問い合わせ（フォーム付き） 最も重要なパーツ。 単なるメールアドレスの記載ではなく、ちゃんとした入力フォームを用意します。 会社名、氏名、メール、相談内容を直接入力してもらい、 それら全ての情報をデータとして保存します。メールボックスに眠らせておくだけではいけません。

これらのブロックを書き出した時点で、実は公式サイト作成の最難関は突破しています： 「自分は何者か」「何をしているか」「なぜ選ばれるべきか」が明確になったからです。

あとは、「ツールを使ってこれらをどう表現するか」という問題だけです。

5. このツールセットで、どうやって実際に動くサイトにするか？

ここからは、できるだけ「非技術的」な言葉で全体の流れを説明します。これを「ロードマップ」として使ってください。

1. GitHub：コンテンツと構造の「中央倉庫」

GitHubはオンライン上の「バージョン管理ノート」だと考えてください：

• サイト関連の全ファイル（テキスト、レイアウト、設定）をここに置きます。
• 修正するたびに、ノートに新しいページを追加し、日時のタグを付けるようなものです。
• もし間違えても、いつでも過去のバージョンに戻せます。

GitHubがあれば、以下のものが手に入ります：

• サイトデータを絶対に失わない保管場所
• AIにコード修正を依頼できる作業場
• 明確な「成長の軌跡」：初期バージョンから、徐々に安定していく過程が見えます。

2. Cloudflare Pages：サイトを実際に「オンライン」にする

次にやることは一つだけ：

Cloudflare Pagesにこう伝えます：「私のサイトのコードはGitHubのこの倉庫にあります」

すると、あとは勝手にやってくれます：

• GitHubで修正を確定するたびに、自動でサイトを再構築
• 最新バージョンをインターネット上に公開
• HTTPS（ブラウザの鍵マーク）を自動設定
• CDNを使って自動で高速化し、世界中どこからでも快適にアクセス可能に

あなたにとっての意味は：

• サーバーを買う必要なし
• 自分でデプロイ作業をする必要なし
• 「サーバー」という言葉の意味さえ知らなくていい

覚えておくべきは一言だけ： 「修正してGitHubにプッシュすれば、Cloudflareが公開してくれる」

3. ブログ：公式サイトを「コンテンツ資産」の入り口にする

小規模企業の公式サイトにおける最大の誤解は：

公式サイトをただの「オンライン名刺」だと思い込み、「信頼とコンテンツの器」として扱わないこと。

サイトにシンプルな「記事一覧」を追加しましょう：

• 業界観察を書く
• プロジェクトでの経験を記録する
• 顧客からよくある質問に答える

これにはいくつかのメリットがあります：

1. 独自の「コンテンツ資産」が蓄積されていく
2. 検索経由で記事を読んだ潜在顧客が、あなたを知るきっかけになる
3. 既存顧客も、記事を通じてあなたの継続的な進化を感じ取れる

技術的には非常にシンプルです。AIにこう頼むだけです：

「シンプルなブログ一覧ページと記事詳細ページを作って。 新しい記事を追加できて、日付、タイトル、本文が表示されれば十分です。」

この時点で、サイトは単なる「静的な名刺」ではなく、対外的な発信とコミュニケーションの主戦場になります。

6. 「問い合わせフォーム」を飾りにせず、真の集客口にする

ほとんどの公式サイトに「Contact」ページがありますが、多くは残念な状態です：

• ただメールアドレスが書いてあるだけ
• フォームに入力しても、どこに届いたかわからない
• スパムボットからの投稿ばかりで、体験が最悪

私が自分のサイトで実現したかったのは：

1. 訪問者がフォームに入力する
2. 即座に私に通知メールが届く
3. 同時に、その情報がリード（見込み客）データとして保存され、 後で追跡・分析ができる

つまりこういうことです：

「本当に使える問い合わせフォーム」 ≒ 「簡易版の顧客獲得システム」

これを実現するために、3つの「レゴブロック」を使いました：

1. Turnstile：スパムを防ぐ「見えない門番」

問い合わせフォームは、ボットに悪用されやすい場所です：

• スクリプトが広告やフィッシングリンクを大量に投稿してくる
• 対策しないと、毎日メールボックスがゴミで溢れかえる

従来の認証コード（信号機を選べ、横断歩道を選べ…）はユーザー体験を損ないます。 Turnstileの良いところは：

• ユーザーが変な画像を選ぶ必要がない
• 検証はバックグラウンドで静かに行われる
• 本物の人間にはほぼ「透明」だが、ボットには厳しい

2. Resend：フォーム送信を「通知メール」に変える

訪問者がフォームを送信した後、私が欲しい結果はシンプルです：

• すぐにメールを受け取る：
  • 件名：会社名 / 氏名
  • 本文：会社、担当者、メール、電話、相談内容
• そのまま「返信」ボタンを押せば、顧客とやり取りが始められる

Resendは「送信機能」を代行してくれるサービスのようなものです：

• 自分でメールサーバーを建てる必要なし
• メールプロトコルを気にする必要なし
• SPFやDKIMなどの専門用語を調べる必要なし
• 「新しいフォーム送信があったら、私のアドレスにメールして」と設定するだけ

これで、あなたのサイトは「静かな置物」から、 自動であなたに挨拶してくれる集客の入り口に変わります。

3. D1：全ての訪問者を「顧客台帳」に残す

メールは届きますが、もし：

• 忙しくて見逃したら？
• 過去1ヶ月に何件問い合わせがあったか集計したくなったら？
• トップページ経由か、記事経由かを知りたくなったら？

メールボックスだけで管理するのは困難です。

そこで、全てのリード情報を構造化して記録する場所が必要です。 D1がその役割を果たします：

• 全ての「問い合わせ送信」が1行のレコードになる
• 記録内容：流入元、氏名、メール、会社、相談内容、時間、付加情報（ブラウザの種類など）
• いつでも過去のリード状況を確認できる：
  • 数の推移
  • 業界タイプ
  • どのチャネルからの流入が多いか

つまり：

サイトに簡易版の「CRM（顧客管理）テーブル」が内蔵されている状態。 メール検索やExcel転記の手間から解放されます。

7. AIの役割：あなたの代わりではなく、「あなたを拡張する」

この全プロセスにおいて、AIの役割は非常に重要ですが、それは 「人間の代わり」ではなく、あなたに一瞬で技術チームを持たせること です。

あなたが全ての詳細を考える必要はありません。やるべきことは：

1. 何が欲しいかを明確にする：

   • どんな雰囲気のトップページ？
   • どんな構成要素が必要？
   • フォームで何を聞きたい？
   • データはどこに保存する？
   • 送信後にどんな通知が欲しい？

2. それらの要望を自然言語でAIに伝え、手伝ってもらう：

   • ページ構造の生成
   • レイアウト調整
   • 配色とフォントの提案
   • Turnstile / Resend / D1 を接続するロジックの作成
   • デプロイ手順とファイル構造のアドバイス

3. あなたの仕事は「コードを書くこと」から変わります：

   • プロダクトマネージャーとして：機能要件を決める
   • デザイナーとして：スタイルを決める
   • 編集者として：顧客に響く言葉を書く
   • CEOとして：何をリリースし、何を後回しにするか決める

ある意味、このシステムは：

AI ＋ 無料クラウドサービスを使って、自分専属の「仮想技術チーム」を配備した

と言えるでしょう。

8. もしゼロから始めるなら、この手順をおすすめします

今あなたに何もないとして、この記事を読み終わったところだと仮定します。私ならこの順序で進めることをお勧めします：

1. 紙に公式サイトの構造を描く Hero / Services / Why Us / Cases / News / Insights / Contact を配置してみる。

2. 各エリアの文章をざっくり書く（完璧な文章でなくていい） 重要なのは：あなたが誰で、何をしていて、何が得意で、頼むとどうなるかを明確にすること。

3. GitHubとCloudflareのアカウントを作る 技術知識は不要、画面の案内に従うだけです。

4. AIにサイトの骨組みを作ってもらう 例えばAIにこう伝えます：

   「日本企業向けのコンサル/プロダクト/開発支援会社の公式サイトを作りたい。 レイアウトはXXのようなスタイルで。 小規模企業に適したサイト構造とHTML/レイアウトファイルを生成してください。」

   そして、さっき書いた文章をAIに入れてもらいます。

5. AIが作ったファイルをGitHubに入れ、Cloudflare Pagesと接続する この瞬間、あなたは初めて「本当にオンラインにある公式サイト」を持つことになります。

6. 次に、2つのことだけに集中する：トップページの磨き込み ＆ Contactフォーム

   • トップページで価値が伝わるようにする
   • Contactフォームを使いやすくする（項目は適切か、威圧感はないか）

7. さらに一歩進んで、連絡先を「メール通知 ＋ データベース保存」に繋ぐ ここはAIにロジックを書いてもらいましょう。 あなたの重点は：

   • 送信後に何が起きてほしいか書き出す
   • 毎回ちゃんとメールが届くか確認する
   • データが保存されているか確認する

8. 全てが動き出したら、ブログ、事例、ニュースを徐々に追加する コンテンツが増えるたび、サイトはより「真剣にビジネスをしている会社」らしくなっていきます。

9. 起業中で、まだ公式サイトを作れていないあなたへ

ここまで読んでくれたあなたに、心から伝えたいことがあります。

1. あなたに足りないのは技術スタックではなく、「自分にもできると思えるルート」です。 多くの創業者は技術がわからないのではなく、「サイト制作」という言葉を過度に神格化してしまっているだけです。

2. 小規模企業の公式サイトは、大企業のように派手である必要はありません。 必要なのは：

   • 清潔で、明確で、誠実であること
   • 何をしているかが伝わること
   • 簡単に連絡が取れること
   • 今日の見込み客を逃さないこと

3. 一行もコードを書かなくても、今のツールとAIならあなたをスタートラインに立たせてくれます。 あなたがやるべきは：

   • 自分のビジネスをストーリーで語れるようになること
   • ツールに「何が欲しいか」をシンプルに伝えること
   • 少しの忍耐と改善を続けること

4. 公式サイトの完成はゴールではなく、市場との対話のスタートです。 今後あなたが書くブログ記事、トップページの微修正、フォームの改善、 その全てが未来の顧客へのメッセージになります：

   「私はこの会社を真剣に経営しており、あなたのための準備も真剣にしています。」

もしここまでたどり着いたなら、あなたと「プロフェッショナルな公式サイト」の間にあるのは、 実はたった一つの決断だけです：「手を動かし始めること」。

あとは、これらの無料ツールと、 いつでもコードとレイアウトを書いてくれるAI「技術パートナー」に任せてみてください。

なお、いまご覧になっているこのウェブサイト自体も、上記の方法を活用したAIコーディングアシスタントによって構築されています。