制作事例 ／ Qz AI Labsのサイト
このサイトを、
3日間で一般公開。
Qz AI Labsの営業サイトを、AIコーディングエージェントを活用して制作開始から3日間で一般公開しました。
サービスの紹介から問い合わせ、オンライン相談の予約、運営者の管理までをひとつの流れとして設計・実装した事例です。
01設計した仕組み
相談する人にも、
運営する人にも使いやすく。
問い合わせフォームと予約ページが別々だと、相談者は同じ情報を入力し直し、運営者は相談内容と予定を照合する必要があります。このサイトでは、相談内容を一度入力すれば、予約と事前情報の共有まで進める形にしました。
サービス紹介から相談へ
提供内容・進め方・費用の目安を掲載。関心を持った方が、必要な情報を確認して問い合わせへ進める構成にしました。
相談内容と予約をまとめて受付
名前やメールアドレス、相談内容は一度だけ入力。メール相談とオンライン相談の予約を、同じフォームから受け付けるようにしました。
オンライン相談の案内と事前情報を1通に
Googleカレンダーの空き枠からオンライン相談を予約し、Meetを発行。相談内容と参加先を1通の招待で案内し、運営者にも事前情報が届くようにしました。
相談の管理と受付の切り替え
運営者がGoogle認証で入る管理画面に、相談内容と予約をまとめました。予約受付の開始・停止も、管理画面から切り替えられます。
02裏側の仕組み
サーバーを持たずに、
ログインもメールも予約も動かす。
このサイトは、自社でサーバーを用意せず、Cloudflareを中心としたクラウドのサービスを組み合わせて動かしています。それぞれの役割と、使っているサービスは次のとおりです。
| 役割 | 使っているもの | それで何ができるか |
|---|---|---|
| サイトの表示と処理 | Cloudflare Workers | アクセスのたびに起動を待たず、すぐ応答します。サーバーの購入や保守は要らず、このくらいの規模なら無料プランの範囲で動きます。 |
| 相談・予約の記録 | Cloudflare D1（データベース） | フォームの内容と予約を1か所に保存し、管理画面からまとめて確認できます。 |
| 迷惑な送信の防止 | Cloudflare Turnstile | 画像を選ばせるような確認をせずに、機械による大量の送信を防ぎます。 |
| 管理画面の入口 | Cloudflare Access（Googleアカウントで認証） | 許可したGoogleアカウントの人だけが入れます。管理画面用のパスワードを別に作って管理する必要がありません。 |
| 予約とオンライン会議 | Googleカレンダー・Google Meet（Google Calendar API） | カレンダーの空き枠から予約を受け付け、会議のURLを自動で作り、招待を1通で送ります。 |
| メールの送信 | Resend | 受付の確認メールと、運営者への通知を自動で送ります。 |
| アクセス解析 | Google Analytics 4 | 国内からの閲覧と、問い合わせ・予約の完了を数え、案内の見直しに使います。 |
| 公開と動作の確認 | GitHub・Cloudflare Workers Builds・自動テスト | 修正を送ると自動で公開されます。公開の前に、受付・予約などの動作を約250件の自動テストで確かめます。 |
03サービスを選んだ理由
なぜCloudflareを選んだか
企業のシステムでよく知られているのは、AWS・Google Cloud・Microsoft Azureの3つです。Cloudflareは、それらとは得意な分野が違います。このサイトでは、違いを比べたうえでCloudflareを選びました。
このサイトでCloudflareを選んだ理由は、次の4つです。
費用を抑えて始められる
問い合わせ・予約・管理画面まで含めて、1つの契約で動かせます。このサイトの規模なら、無料プランの範囲に収まります。
サーバーの管理が要らない
サーバーの購入・更新・障害への対応がありません。修正をGitHubに送るだけで、自動で公開されます。
安全の仕組みが最初から付いている
管理画面に入れる人の制限（Access）と、迷惑な送信の防止（Turnstile）を、追加の契約なしで組み込めました。
このサイトの処理に合っている
受付・予約・通知など、短い処理が中心です。Cloudflareが苦手な、1回に数分かかる重い処理はありません。
大手クラウドとの比較を見るAWS・Google Cloud・Azureと、6つの観点で比較
| 観点 | 大手のクラウド （AWS・Google Cloud・Azure） | Cloudflare |
|---|---|---|
| どんな会社・サービスか | AWS（Amazon）・Google Cloud（Google）・Microsoft Azure（Microsoft）。企業のシステムの土台として、最も広く使われている | もともとはWebサイトを速く・安全に届ける仕組み（配信の高速化や攻撃への対策）で広く使われている会社。その上でアプリを動かすサービス（Workers）を提供している |
| 得意なこと | 大規模な業務システム、大量のデータの分析、AIの基盤など、ほぼあらゆる用途 | Webサイト・Webアプリを、待ち時間なく、安全に届けること |
| 始めるときの費用 | 機能ごとに課金される。小さく使っても、構成ごとに費用がかかる | 無料プランから始められる。表示・処理・保存・ログイン・攻撃への対策が1つの契約にまとまる |
| 設定の手間 | 権限・ネットワーク・監視など、設定する項目が多い。専門の担当者がいる会社向け | 必要な機能がまとまっていて、少ない設定で公開できる |
| 苦手なこと | 小さく試す段階では、準備の手間と費用がかさみやすい | 1回に数分かかる重い処理や、大量のデータの分析。AIは、外部のAIのサービスを呼び出して使う |
| 向いている場面 | 情報システム部門がある会社の本番のシステム。すでに契約がある場合 | 小さく始めるWebアプリや試作。管理する人が少ない会社 |
04検索とAIへの対策（SEO・LLMO）
検索エンジンにも、
AIの回答にも、見つけてもらう。
お客様がサービスを探す方法は、検索エンジンに加えて、ChatGPTやClaudeなどのAIに「こういう会社を探して」と頼む形が増えています。このサイトでは、検索エンジン向けの対策（SEO）と、AIの回答に見つけてもらうための対策（LLMO）を、次のように組み込みました。
| 対策 | このサイトでしたこと | 何のためか |
|---|---|---|
| 探す人の言葉で書く | タイトル・説明文・本文に、探す人が実際に使う言葉を入れる。協業のページは、AIで協業先を探したときの検索の言葉を参考に、協業を探す会社が使う言葉に合わせた | 検索エンジンもAIも、まず検索の言葉に合うページを読むため |
| ページの中身を機械に伝える | 構造化データ（JSON-LD）で、事業者（Qz AI Labs）・サービス・パンくず・よくある質問を、検索エンジンとAIが読み取れる形で添える | ページが何についてのものかを、取り違えずに読み取ってもらうため |
| サイトの全体を案内する | サイトマップと、AI向けのサイト案内（llms.txt）を用意する。正規のURLを1つに決め、別のアドレスからは転送する | どのページがあり、どれが正本かを迷わせないため |
| 検索エンジンに知らせる | Google Search ConsoleとBing Webmaster Toolsに登録し、サイトマップや新しいページを送る | ChatGPTの検索は外部の検索サービス（Microsoftなど）も使い、CopilotはBingを使うため、Googleだけでなく、Bingにも |
| AIのクローラーを締め出さない | AIのクローラー（サイトを読みに来るプログラム）の読み取りを止めない設定にし、管理画面などだけを除外する | AIの回答の材料として、サイトを読んでもらうため |
| 対策が抜けないようにする | ページを足すたびに、タイトル・パンくず・サイトマップやllms.txtへの登録・アクセス解析の設定がそろっているかを、自動のテストで確かめる | あとから直したときに、対策が抜け落ちないようにするため |
05人とAIの分担
人が判断し、
AIと実装・検証を進める。
決める・確かめる
人が決め、確認したこと
誰に何を伝えるか、相談の流れ、入力項目、予約条件、利用するサービスを決定。実際の画面や通知メールを確認し、使い勝手と公開の判断を行いました。
実装する・直す
AIに任せた作業
Codex／Claude Codeによる画面・処理の実装、サービスの接続コード、文章の下書き、自動テスト。人の確認結果をもとに修正を重ねました。
業務に合わせた、小さな試作から
あなたの業務なら、
何から試せるでしょうか。
問い合わせの受付や社内の情報管理など、業務の流れに合わせて必要な機能を整理します。まずは、今の進め方と困っていることをお聞かせください。