― このコーポレートサイト、ほぼAIが作りました
このサイト（kotsumo.com）は、ほぼAIとの対話で作りました。
デザイン、コーディング、CMS連携、お問い合わせフォーム、メールの自動返信、法的ページ、デプロイまで。
私がやったのは「こうしたい」を言語化することと、最終的な判断。 そしてAIにはできないこと（サービスの契約、ドメインの取得、APIキーの発行、法的文面の確認など）を自分でやることだけです。
この記事では、実際に使った技術スタック、AIとのやり取りの流れ、そして「AIに任せてよかったこと」「人間がやるべきだったこと」を正直に書きます。
想定している読者は、HTML / CSS / JavaScript と、Illustrator / Photoshop / Figma を学んだくらいの「駆け出しWebクリエイター」の方です。各技術やサービスについても、少し丁寧目に説明します。
この記事にすべてまとめるとすごい文章量になるので、各技術の詳しい解説は別記事にまとめています。
このサイトの全体像
完成したサイトには、以下のページがあります。
- トップページ ― サービスの概要とCTAボタン
- サービス紹介 ― Webサイト制作・コンサルティング・受託開発の詳細
- About ― プロフィール、経歴、事業情報
- ブログ ― CMSから記事を投稿・管理（タグ絞り込み付き）
- お問い合わせフォーム ― 送信すると自動返信メールが届く
- 特定商取引法に基づく表記
- プライバシーポリシー
デザインコンセプト
デザインは「ヴィンテージ・アメリカンダイナー」をコンセプトに始めました。くすんだターコイズ、レトロなタイポグラフィ、チェッカー柄のボーダーなど、いわゆるモダンなSaaSサイトとは少し違う方向性です。
使った技術スタック
このサイトを構成している技術とサービスは、主に以下の4つです。
| 役割 | サービス / 技術 | ひとことで言うと |
|---|---|---|
| AI開発ツール | Antigravity IDE + Claude Opus 4.6 | AIと対話しながらコードを書く |
| フレームワーク | Next.js | サイトの骨格を作る |
| CMS | Sanity | ブログ記事を管理する |
| メール送信 | Resend | お問い合わせメールを送る |
| ホスティング | Vercel | サイトを公開する |
この他に、コード管理に GitHub を使っています。ドメインも Vercel で管理しています。
なぜWordPressではないのか
「コーポレートサイトならWordPressでいいのでは？」という声が聞こえそうなので、先に書いておきます。
WordPressなら、レンタルサーバー代（月1,000円程度）とドメイン代で済みます。テーマを入れればデザインもすぐ決まるし、プラグインでお問い合わせフォームも作れる。実績も情報量も圧倒的です。
それでもこの構成にしたのは、いくつか理由があります。
① すでにVercelやResendの有料プランを契約していた
他のプロジェクトでVercelとResendを使っていたので、追加コストなしでそのまま使えました。新しくサーバーを契約するよりも、既存の環境を活かすほうが合理的でした。
② AIがこのフレームワークに慣れている
これが一番大きい理由かもしれません。Next.js / Reactは、AIの学習データが非常に豊富なフレームワークです。世界中の開発者が使っていて、ドキュメントやサンプルコードが大量にあるため、AIが正確なコードを生成しやすいです。
WordPressのPHPテンプレートでも同じことはできますが、AIに「Next.jsでこういうページを作って」と言ったほうが、精度の高いコードが返ってきます（体感）。AIと協業するなら、AIが得意な技術を選ぶのは合理的な判断だと思います。
それぞれ、もう少し詳しく説明します。
Next.js ― サイトの骨格を作るフレームワーク
Next.jsは、Reactをベースにした Webフレームワーク です。
「フレームワーク」と聞くと難しそうですが、ここでは「Webサイトを効率的に作るための仕組みがひとまとめになったもの」と考えてください。
HTML / CSS / JS を直接書いてサイトを作ることはもちろんできます。でも、ページが増えてくると「ヘッダーとフッターを全ページに書くのが面倒」「ページ遷移が遅い」「画像の読み込みが遅い」といった問題が出てきます。
Next.jsを使うと、こういった問題を仕組みで解決できます。
- コンポーネント化: ヘッダーやフッターを一度書けば、全ページで使い回せる
- ファイルベースルーティング: ファイルを置くだけでURLが決まる（例:
src/app/about/page.js→/about） - 画像・フォントの自動最適化: 表示速度を自動で改善してくれる
- ページ遷移の高速化: ページ全体をリロードせずに内容が切り替わる
このサイトでは「App Router」という新しいルーティングの仕組みを使っています。
📖 Next.jsについてもっと詳しく知りたい方は → Next.jsとは？ HTML/CSSを書ける人のための入門ガイド
Sanity ― ブログ記事を管理するヘッドレスCMS
ブログ記事を管理しているのが Sanity です。
WordPressのように「管理画面から記事を書いて公開する」ことができますが、大きく違うのは 「表示部分（フロントエンド）」と「データ管理」が完全に分離している こと。これを「ヘッドレスCMS」と呼びます。
WordPressだと、デザインを変えるにはPHPテンプレートを編集する必要があります。でもヘッドレスCMSなら、データはAPIで受け取るだけなので、表示部分は好きな技術（今回はNext.js）で自由に作れます。
Sanityのいいところ：
- 管理画面（Studio）をサイト内に組み込める ― このサイトでは
/studioでアクセスできます（ログインが必要なので、URLを知っているだけではアクセスできません） - スキーマをコードで定義 ― 「タイトル」「本文」「タグ」など、記事のデータ構造をJavaScriptで定義します。WordPressの「カスタムフィールド」を、もっと柔軟にした感じです
- 無料プランで十分 ― 個人サイトやブログなら、無料枠内で運用できます
- リアルタイムプレビュー ― 記事を書きながらプレビューが見られます
📖 Sanityの導入手順を詳しく知りたい方は → SanityでブログCMSを作る手順ガイド
Resend ― お問い合わせメールを送る
お問い合わせフォームからのメール送信に使っているのが Resend です。
このサイトのお問い合わせフォームは、送信すると2通のメールが飛びます。
- 自分宛ての通知メール ― 「〇〇さんからお問い合わせがありました」
- お客様への自動返信メール ― 「お問い合わせを受け付けました」
昔はメール送信のためにSMTPサーバーを用意する必要がありましたが、ResendならAPI経由で数行のコードでメールが送れます。HTMLメールのテンプレートも自分で作れるので、見た目もカスタマイズできます。
月3,000通まで無料。個人サイトのお問い合わせフォームなら、まず超えることはないでしょう。
📖 Resendの設定方法を知りたい方は → Resendでお問い合わせフォームの自動返信を実装する
Vercel ― サイトを公開する
サイトの公開には Vercel を使っています。Next.jsを作っている会社のサービスなので、相性は抜群です。
ここで GitHub について簡単に説明しておきます。GitHubは「コードのバージョン管理と共有ができるサービス」です。Googleドライブのようなものですが、コードに特化していて「誰が・いつ・何を変更したか」の履歴が全て残ります。チームでの開発には必須のツールですが、個人開発でもバックアップとして非常に便利です。
Vercelの流れはシンプルです：
- ローカルでコードを書く
- GitHubにpush（アップロード）する
- Vercelが自動的に検知して、ビルド → 公開
これだけです。従来の「サーバーを借りて、FTPでアップロードして、ドメインを設定して…」という作業が大幅に簡略化されます。独自ドメインの設定やSSL証明書（https化）も自動。
無料プランもありますので、勉強目的なら十分です。商用利用はProプランが必要です。
📖 デプロイの流れを詳しく知りたい方は → GitHub + Vercelでサイトを公開する方法
AIとの開発フロー ― どうやって作ったのか
ここからが本題です。実際にAIとどうやってサイトを作ったのかを、具体的に書きます。
使ったAIツール
開発に使ったのは Antigravity IDE というAIコーディングエディタです。Google DeepMindが開発したもので、VS Codeのようなエディタの中にAIアシスタントが統合されています。
普通のAIチャット（ChatGPTのような）との最大の違いは、開発環境と直接つながっていること。チャットで「こういうページを作って」と伝えると、AIがファイルを作成し、コードを書き、ターミナルでコマンドを実行するところまで、全部やってくれます。自分はエディタを眺めながら、出来上がったものを確認して「OK」か「やっぱりこうして」と言うだけです。
AIモデルには Claude Opus 4.6（Anthropic社）を使いました。コードの生成精度が高く、日本語での指示にもしっかり対応してくれます。
Antigravity IDEの特に便利だった機能：
- ファイルの直接編集 ― AIがコードを生成するだけでなく、プロジェクト内のファイルを直接作成・編集してくれる
- ターミナル連携 ―
npm installやGitコマンドもAIが実行してくれる - 複数ファイルの一括修正 ― 「全ページのサービス名を並べ替えて」と言うと、関連する7ファイルを自動で特定して修正
- ブラウザプレビュー ― 修正結果をブラウザで確認しながら進められる
- 壁打ち機能 ― コードだけでなく、方針や構成の相談にも対話形式で応じてくれる
実際のやり取りの流れ
開発はこんな流れで進みました。
① ベースの構築
私：「フリーランスのコーポレートサイトを作りたい。
コンセプトはヴィンテージ・アメリカンダイナー風。
ページはトップ、サービス、About、ブログ、お問い合わせ。」
AI：（Next.jsプロジェクトを作成、全ページのコンポーネントとCSSを生成）
最初の指示で、サイトの骨格が一通りできました。ここで重要なのは 「コンセプトを具体的に伝えること」 です。「かっこいいサイトを作って」だと、AIも困ります。「ヴィンテージ・アメリカンダイナー風」「くすんだ色合い」「レトロなフォント」など、方向性を言語化できるかどうかが結果を大きく左右します。
② 技術選定の相談
ブログやお問い合わせフォームを追加する前に、どのサービスを使うかをAIに相談しました。
私：「ブログ機能を追加したい。CMSは何がいい？
できればNext.jsとの相性がよくて、無料枠があるもので。」
AI：「Next.jsとの相性なら、Sanity・Contentful・microCMSあたりが候補です。
Sanityは管理画面をサイト内に組み込めて、GROQというクエリ言語が柔軟です。
Contentfulは日本語の情報が多め。microCMSは日本製で管理画面が日本語です。」
私：「お問い合わせフォームのメール送信は？」
AI：「Resend・SendGrid・AWS SESあたりが候補です。
Resendは設定が一番シンプルで、Next.jsのAPIルートから数行で呼べます。」
このように、サービスの選定段階からAIに壁打ちしました。最終的にSanityとResendを選びました。AIの提案を聞いた上で、自分でも調査し判断しました。自分で一から調べて比較するよりも、まずAIに候補を出してもらい、それぞれの特徴を聞いてから決める。このやり方は効率が良かったです。
③ ブログ機能の追加
私：「ブログ機能が欲しい。CMSはSanityで。
タグで記事を絞り込めるようにして。」
AI：（Sanityのスキーマ定義、APIクライアント、記事一覧・詳細ページを生成）
④ お問い合わせフォーム
私：「お問い合わせフォームに自動返信メールをつけて。Resendで。」
AI：（APIルート、メールテンプレート、フォームコンポーネントを作成）
⑤ 法的ページの追加
私：「特定商取引法のページとプライバシーポリシーを作って。
お問い合わせフォームにプライバシーポリシーへの同意チェックも追加。」
AI：（法的ページ2枚を生成、フォームにチェックボックスを追加）
法的ページの文面はAIが生成しましたが、内容は自分で確認・修正しました。法的な文書をAIの出力のまま使うのはリスクがあります。
⑥ 細かい調整
私：「フォントサイズが小さい気がする。全体的に16px以上にして。」
AI：（13個のCSSファイルを一括修正）
私：「サービスの順番を Web制作→コンサル→受託開発 にして。」
AI：（ページ内のサービス配列だけでなく、メタデータ、フッター、
Aboutページなど、7ファイルのテキストを全て修正）
この「複数ファイルにまたがる一括修正」は、AIの真骨頂だと感じました。手動でやっていたら、どこかで修正漏れが起きていたと思います。
⑦ 壁打ち・方針の相談
コードを書いてもらうだけでなく、方針を相談する場面もありました。
たとえば、この記事の構成を考えるときも、AIに「こういうブログ記事を書きたい」と相談して、構成案を出してもらいました。壁打ち相手としてのAIは、遠慮なく何度でも相談できるので非常に便利です。デザインの方向性で迷ったとき、機能の優先順位を決めるとき、文章のトーンを考えるとき。「考えをまとめるための対話相手」として、AIはかなり優秀です。
デザインの仕様変更
途中でデザインの方向性を変えたことも書いておきます。
最初は「ヴィンテージ・アメリカンダイナー」で始めましたが、開発が進むにつれて「もっとカートゥーン風のアニメーションがほしい」「もっと遊び心がほしい」と思うようになりました。
人間のデザイナーに対して「やっぱりこうして」と何度も言うのは気が引けます。特にフリーランス同士だと、手戻りの工数や費用の話にもなります。
でもAI相手なら、「やっぱりこの方向で」を遠慮なく言えます。気軽に試行錯誤できるのは、AIとの協業の大きなメリットです。
AIに任せてよかったこと
改めてまとめると、AIに任せてよかったのはこういう作業です。
- CSSの細かい調整 ― フォントサイズ、余白、レスポンシブ対応を全ファイル一括で
- 定型的なページの生成 ― 法的ページ、メタデータ、OGP設定
- 複数ファイルにまたがる一括修正 ― サービス名の順番変更など、漏れが怖い作業
- サービス連携のコード ― Sanity、Resend、VercelなどのAPIを呼ぶ定型的なコード
- SEO対応 ― 構造化データ、OGP、パンくずリストなど、知っていれば書けるが面倒なもの
- 壁打ち ― デザイン方針、記事構成、機能の優先順位などの相談相手
特に「全ページのサービス名の順番を変えて」のような、地味だけど漏れが怖い作業はAIの独壇場でした。
人間がやるべきだったこと
一方で、「これは自分で判断しないとダメだ」と感じた場面も多くあります。
意思決定
- デザインの方向性 ―「ダイナー風にして」「カートゥーンを加えて」は人間が言わないと出てこない
- ビジネス上の判断 ― どのサービスを先に見せるか、どんな文言で訴求するか
- 最終的な「これでいい」の判断 ― AIは選択肢を出してくれるが、選ぶのは自分
AIにはできないこと
- サービスの契約 ― Vercel、Sanity、Resend、ドメインの取得、それぞれアカウントを作って契約するのは人間
- APIキーの発行と管理 ― 各サービスの管理画面でキーを発行し、環境変数に設定する
- 法的文面の確認 ― 特定商取引法やプライバシーポリシーの文面は、AIが生成したものをそのまま使うのはリスクがある
- ドメインのDNS設定 ― ドメインをVercelに向ける設定
ディレクション能力
結局のところ、AIは「超優秀な実装担当」です。
プロジェクトの方向性を決め、「何を作るか」「どう見せるか」を判断する ディレクション は人間がやる必要があります。
言い換えると、「こうしたい」を言語化できる力がますます重要になっています。HTMLの書き方を知っていることも大事ですが、「このページで何を伝えたいか」「ユーザーにどう動いてほしいか」を明確に言葉にできることも、価値を持つ時代になりつつあるのかもしれません。
この構成で始めるなら
もしこの記事を読んで「自分もやってみたい」と思ったら、以下の順番で始めるのがおすすめです。
ステップ1: まずNext.jsを触ってみる
npx create-next-app@latest my-site
cd my-site
npm run dev
これだけで、ローカルにサイトが立ち上がります。
HTML / CSS / JS の基礎があれば、あとはAIに「このページにプロフィールセクションを追加して」のように相談しながら進められます。
ステップ2: Vercelにデプロイする
GitHubにリポジトリを作り、Vercelと連携するだけで公開できます。
ステップ3: Sanityでブログを追加する
記事の管理画面つきのブログを、サイトに組み込めます。
ステップ4: Resendでお問い合わせフォームを作る
フォーム送信 → 自動返信メールの仕組みを作れます。
全部 無料プラン で始められます。
大事なのは「完璧に理解してから始める」のではなく、「作りながら、わからないところをAIに聞く」というスタンスです。
まとめ
このサイトは、ほぼAIとの対話だけで作りました。 でも「AIが全部やってくれた」というわけではありません。
自分がやったこと：
- コンセプトを決める
- 「こうしたい」を言葉にする
- 出来上がったものを見て「これでいい」と判断する
- サービスの契約、APIキーの発行
- 法的な文面の確認
- ドメインの取得と設定
- AIに壁打ちしながら方針を固める
AIがやってくれたこと：
- コードを書く（HTML / CSS / JavaScript）
- 複数ファイルをまたいで一括修正する
- サービス連携（Sanity / Resend）のコードを書く
- CSSの細かい調整を正確にやる
- 記事の構成案を壁打ちする
つまり、AIは「超優秀な実装担当」であり、人間は「ディレクター」をやる必要があります。
WebデザイナーがAIに食われる未来は、たしかに来るのかもしれません。 でもそれは「仕事がなくなる」という意味ではなく、「仕事の中身が変わる」ということなんだと、今回の経験で実感しました。
コードを全部自分で書けることよりも、何を作りたいかを明確に伝える力。 これが、これからのWebクリエイターに一番求められるスキルなのかもしれません。
さいごに
この記事はAIでサイトを作ることを奨励するために書いたわけではありません。 自身の仕事が「AIに取って代わられるのか」を何もせずに論じたくなかったため、実際にやってみました。今回はクライアントワークではないため、まぁまぁなものができましたが、クライアントの細かい要望や、成果を求められる場合において有効かは検証の余地があるかと思います。
「ほぼAIでサイトを作ってみてほしい。」というクライアント様、ぜひお問い合わせくださいw