一切コーディングせずにAI連携だけでWebサイトを作った話

はじめに

「Zenn と note の自分の記事を一箇所で見られるサイトが欲しい」という思いから、Material Design 3 を使った Web サイトを作成しました。

重要なのは、私は一行もコードを書いていません。

複数の AI ツールに作業を分担させ、私はただ「AI たちの橋渡し役」に徹しました。今回は 完全ノーコード でプロ品質の Web サイトを構築した過程と、その可能性について詳しく記録します。

完成サイト

完成したWebサイトのトップページ

---

完全ノーコード開発の全体像

私の作業内容（やったこと／やらなかったこと）

やったこと	やらなかったこと
日本語で要件を AI に伝える	コードを書く
仕様書をコピー＆ペースト	技術調査に時間をかける
エラーログをコピー＆ペースト	手動でデバッグ

AI 分業システム（誰が何をしたか）

担当 AI	役割
o3 model	要件から詳細仕様書を自動生成
Codex	仕様書どおりに実装コードをフル生成
Cursor	UI の余白や配色を対話で微調整
Claude Code	デプロイ時のエラーを診断し自動修正

最終的な技術スタック（AI が選定・実装）

レイヤー	採用技術	補足
静的サイト生成	Astro	Island Architecture で高速表示
UI コンポーネント	Material Design 3 (@material/web)	軽量 Web Components 実装
ビルド / デプロイ	GitHub Actions	OIDC 認証 + キャッシュ最適化
ホスティング	GitHub Pages	.nojekyll で Jekyll 無効化
RSS パース	xml2js	Promise ベースで非同期処理
自動更新	cron (7:00 JST)	Workflow schedule イベント

---

STEP 1 – 日本語で要望を投げるだけ

AIに要望を伝えたときの実際のプロンプト例

Zenn と note の記事をまとめたい
デザインは Material Design 3
GitHub Pages で公開
毎朝決まった時間に更新

o3 model が返してきた主なアウトプット

カテゴリ	内容
技術スタック選定	Astro + MD3 + GitHub Actions が最適と提案
アーキテクチャ	RSS 取得 → JSON 変換 → 静的ビルドの 3 段構成
パフォーマンス	ビルド時に RSS を取得し、ランタイム外部通信ゼロ
SEO / UX	静的 HTML でクローラビリティ確保、MD3 でレスポンシブ
運用	JST 7:00 = UTC 22:00 の時差計算も自動
制約事項	note 無料 RSS は抜粋のみ等をドキュメント化

---

STEP 2 – 仕様書をコピペするだけ

AIが自動生成した詳細仕様書とリポジトリ構成例

Codex が生成した実装のハイライト：

• RSS パイプライン — xml2js でエラー耐性付きパース。
• MD3 コンポーネント — ES Module で読み込み、CSS カスタムプロパティでテーマカスタム。
• Container Queries — メディアクエリ不要の宣言的レスポンシブ。
• 高速 GitHub Actions — pnpm キャッシュ、最小権限 OIDC、artifact 名の一意化。

---

STEP 3 – UI 微調整も AI に丸投げ

Cursor とのやり取り例：

私の指示	Cursor の修正結果
「カード間を 16px 空けたい」	.articles-grid { gap: 1rem; } を gap: 1.5rem へ
「色をもう少し濃く」	--md-sys-color-primary を #1565C0 に変更
「2 列で良い」	Container Queries のブレークポイントを 960px に再設定

私はブラウザで F5 を押して確認するだけでした。

---

STEP 4 – デプロイエラーも AI が解決

Claude Code が対処したエラーとパッチ：

エラー	原因	パッチ
Jekyll が走って失敗	GitHub Pages はデフォルト Jekyll	public/.nojekyll 追加
Pages Source 未設定	Settings → Pages が空	「GitHub Actions」を選択
Artifact 名重複 (409)	同名 artifact を二重生成	name: github-pages-${{ github.run_id }} で一意化
Workflow 競合	役割重複 YAML が残存	不要 YAML を削除

修正コミットも PR も Claude Code が自動生成、私は Approve & Merge をクリックしただけ。

---

STEP 5 – 毎朝 7 時の自動更新を確認して完了

翌朝、GitHub Actions が定刻で走り、最新記事が自動追加されたことを確認してプロジェクト終了。以降は"放置運用"です。

---

デベロッパー視点での気づき

AI が選んだ技術の妙

• Astro は Island Architecture で LCP が爆速。
• @material/web は純 Web Components、JS バンドルが激減。
• Container Queries はメディアクエリより宣言的 & 保守性◎。
• OIDC + GitHub Pages で PAT 不要、セキュリティも向上。

従来開発 vs AI 連携開発

フェーズ	従来	AI 連携
技術選定	数日悩む	1 行要件で即決
実装	人手でコーディング	Codex がフル生成
デバッグ	Stack Overflow で調査	Claude Code が根本原因を即提示
UI 調整	CSS 試行錯誤	Cursor に要望を伝えるだけ

それでも人間に残る仕事

• アイデアと要件を具体化する力
• ビジネス価値・UX の最終判断
• AI ツール同士をつなぐ設計力

---

まとめ — コードを書かない開発者の誕生

• 完全ノーコードでプロ品質のサイトが作れる
• 複数 AI の連携で単体 AI の限界を超える
• デプロイエラーも AI に丸投げできる時代
• 開発者は「実装者」より AI プロダクトマネージャー に近づく

プログラマー不要時代の入り口を体験しました。強化すべきはキーボードスキルではなく、AI を動かす コミュニケーションスキル かもしれません。

---

付録 — コード断片

コード断片

// RSS パース (src/scripts/fetchFeeds.mjs)
import { Parser } from 'xml2js';
const parser = new Parser({ explicitArray:false, trim:true });

const zennXml = await fetch(`https://zenn.dev/${process.env.ZENN_USER}/feed`).then(r=>r.text());
const noteXml = await fetch(`https://note.com/${process.env.NOTE_USER}/rss`).then(r=>r.text());
const [zenn, note] = await Promise.all([
  parser.parseStringPromise(zennXml),
  parser.parseStringPromise(noteXml)
]);

/* Container Queries によるレスポンシブ */
.articles-grid { display:grid; gap:1.5rem; container-type:inline-size; }
@container (min-width:48rem) { .articles-grid { grid-template-columns:repeat(2,1fr); } }
@container (min-width:75rem) { .articles-grid { grid-template-columns:repeat(3,1fr); } }

# GitHub Actions (build.yml 抜粋)
on:
  schedule:
    - cron: '0 22 * * *'      # 07:00 JST
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v3
        with: { version: 9 }
      - run: pnpm install --frozen-lockfile
      - run: pnpm astro build
      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist
          name: github-pages-${{ github.run_id }}
      - uses: actions/deploy-pages@v4