非エンジニアがAntigravityでWebサイトを作った全記録
HTMLもCSSも書けない非エンジニアが、Antigravityに指示を出すだけでWebサイトを構築した全記録。Eleventy v3 + Netlifyという構成を選んだ理由から、デプロイまでの具体的なやり取りと失敗ポイントを公開。
はじめに
筆者はHTMLもCSSも書けない。JavaScriptの知識はゼロ。
それでも、Antigravityに指示を出すだけでふっけんラボ（このサイト）を構築した。 この記事はその全工程の記録だ。
完成したサイトのスペック
| 項目 | 内容 |
|---|---|
| 構成 | Eleventy v3（静的サイトジェネレーター） |
| ホスティング | Netlify（無料ティア） |
| ドメイン | fukkenlab.com（お名前.com） |
| 記事数 | 10本（PILLAR 3 + SATELLITE 6 + 既存1） |
| 所要時間 | 約8時間（2セッション） |
| 費用 | ドメイン代のみ（約1,500円/年） |
フェーズ1：Eleventyで技術選定（30分）
Antigravityに「非エンジニアでも運用できるブログサイトを作りたい」と相談。
| 候補 | メリット | デメリット | 判定 |
|---|---|---|---|
| WordPress | 知名度No.1 | サーバー管理が必要 | ❌ |
| Eleventy | 超軽量・無料ホスティング | ターミナル操作が必要 | ✅ |
| Next.js | 高機能 | オーバースペック | ❌ |
選んだ理由: 静的サイト＝セキュリティリスク低い。Netlifyで無料ホスティング。ターミナル操作はAntigravityがやってくれる。
フェーズ2：Eleventyプロジェクト初期化（1時間）
Eleventy v3でプロジェクトを初期化して。パッケージ名は fukkenlab。
Antigravityが自動実行した内容:
package.json作成.eleventy.js設定src/ディレクトリ構造の構築- テンプレート（Nunjucks）のセットアップ
フェーズ3：CSS・デザイン設計（2時間）
ここが最も試行錯誤した部分。
失敗1: 「かっこいいデザインにして」→ ダークテーマが生成されたが、ターゲット（慎重派サラリーマン）には読みにくかった
失敗2: 「読みやすくして」→ CSSが全面書き換えられた（この事故の詳細）
成功した指示: 「白背景でInter/Noto Sans JPフォント。カード型レイアウト。クラスターごとにセクション分け」→ 具体的な指示で意図通り完成
💡 教訓: デザインの指示は「イメージ」ではなく「スペック」で伝える。
フェーズ4：3クラスター構造（1時間）
3つのクラスター（Safety / Tools / Direction）で記事を管理。
各クラスターにインデックスページと個別記事ページを作成。
Antigravityが自動生成:
- ディレクトリ構造（
src/safety/,src/tools/,src/direction/） - 各インデックスページ
- ナビゲーション・フッター
- サイト設定（
src/_data/site.json）
フェーズ5：Netlifyデプロイ（30分）
Netlifyにデプロイして。
Antigravityが netlify-cli をインストール→認証→サイト作成→デプロイを実行。ブラウザ認証のみ手動で、それ以外は全自動。
つまずきポイント TOP3
| # | 問題 | 原因 | 解決策 |
|---|---|---|---|
| 1 | CSSが全面書き換え | 指示が曖昧 | 変更箇所とセレクタを具体的に指定 |
| 2 | ビルドエラー連発 | テンプレート構文ミス | 「エラーメッセージを読んで修正して」と指示 |
| 3 | DNS設定が反映されない | ネームサーバー伝播待ち | 通常は数十分〜数時間で反映（最大48時間）。nslookup ドメイン名 で確認 |
⚠️ 始める前に：ハマり回避ルール3つ
| # | ルール | 理由 |
|---|---|---|
| 1 | デザインは「スペック」で伝える | 「かっこいいデザイン」は事故のもと。色・フォント・レイアウトを具体的に |
| 2 | CSSの修正は1プロパティずつ | 「CSSを改善して」と言うとファイルごと作り直される |
| 3 | 作業前に必ずgit commit | 事故っても10秒で復旧できる保険 |
非エンジニアがサイトを作る最短10ステップ
ふっけんラボの構築経験を元に、再現可能な最短手順をまとめた。
| # | やること | 所要時間 |
|---|---|---|
| 1 | Node.jsをインストール | 5分 |
| 2 | Antigravityに「Eleventyでプロジェクト初期化して」と指示 | 5分 |
| 3 | 「白背景、Inter/Noto Sans JPフォント、カード型」とデザイン指示 | 30分 |
| 4 | ナビゲーション・フッターを指示 | 15分 |
| 5 | 記事テンプレート（article.njk）を作成させる | 15分 |
| 6 | 1本目の記事を書く | 1時間 |
| 7 | npx @11ty/eleventy でビルド確認 |
1分 |
| 8 | Gitで初期コミット | 1分 |
| 9 | 「Netlifyにデプロイして」と指示 | 10分 |
| 10 | ドメインを紐付け（お名前.com等でネームサーバー変更） | 10分 |
合計: 約2.5時間で最小構成が公開可能。
まとめ
非エンジニアでも、AIエージェントを使えばWebサイトは作れる。ただし、指示の質がサイトの質を決める。
必要なのはプログラミングスキルではなく、「何を作りたいか」を明確に言語化する力だ。
📚 次に読む
- 👉 AIへの指示設計入門 — 指示の出し方テンプレート
- 👉 OpenClaw vs Antigravity — ツールの使い分け戦略
この記事はAntigravityが構築したサイトについて、Antigravityで書いた記事です。