S3 + CloudFront + Route 53 で作るノーコード運用サイトの舞台裏

プロローグ：「ホームページ制作」の常識を覆した2日間

「本格的なウェブサイトを作るなら、何週間もかけてコードを書かなければならない」 そんな固定観念を持っていた私が、たった1〜2日で企業レベルのサイトを完成させた話をお聞かせします。しかも、1行もプログラミングコードを書いていません。 この記事は、AWS S3 + CloudFront + Route 53 という本格インフラを、AIエージェントと音声入力だけで構築した実録です。技術的な詳細はもちろん、「なぜこんなことが可能になったのか」「どこでつまずいて、どう乗り越えたのか」までの道のりをお話しします。

!セクションバナー1

第1章：技術構成 ー 見た目よりずっと本格的

「え、これって個人サイト？」と言われるインフラ

正直に言います。このサイトの裏側は、スタートアップや中小企業が使うレベルの本格構成です。

• Route 53：独自ドメイン（pochanglab.com）の取得・DNS管理
• CloudFront：世界中に配置されたCDNで高速配信、HTTPS対応
• S3：静的ウェブサイトホスティング（99.999999999%の可用性）
• GitHub Actions：コード更新から本番反映まで完全自動化

🏗️ インフラの全貌

構成の順番：クライアント → Route 53（DNS） → CloudFront（CDN） → S3（ストレージ）。S3が一番後ろ側で、CloudFrontがクライアント寄りという構成になっています。

開発者が見たら驚く技術スタック

• Next.js 15（App Router）：Reactの最新フレームワーク
• TypeScript：型安全なプログラミング言語
• Tailwind CSS：現代的なCSS設計手法
• Lucide React：美しいアイコンライブラリ

💻 フロントエンド技術

これだけ見ると「うわ、難しそう...」と思うかもしれません。でも安心してください。実際の作業は音声で指示するだけでした。

!セクションバナー2

第2章：魔法の正体 ー AI×音声入力の威力

「話すだけでサイトができる」は本当だった

ここからが、この話の核心部分です。

私がやったことは、本当にシンプルでした：

1. MacBook Airの音声入力を起動（Windowsなら Win + H）
2. 作りたいサイトのイメージを詳しく話す
3. AIエージェント（Cursor）が設計・実装
4. 「ここをもう少し調整して」と音声で指示

それだけです。

音声入力が革命的な理由

なぜ音声入力なのか？

実際に使ってみて分かったのですが、音声入力には文字入力では得られない3つの大きなメリットがあります：

⚡ 思考のスピードで伝えられる 頭に浮かんだアイデアを、考えるスピードでそのまま伝えられます。キーボードで打っていると、途中で何を言いたかったか忘れることがありますが、音声なら一気に話せます。

💪 疲れない 長文を打つのは本当に疲れます。でも話すのは疲れません。むしろ、たくさん話すことで、AIにより詳細な指示を与えられ、出力の精度が劇的に向上します。

🎯 ニュアンスが伝わる 「こんな感じで」「もう少しカジュアルに」といった、文字では表現しにくいニュアンスも、音声なら自然に伝えられます。

実際のプロンプト例：これで本当にサイトができる

実際に私がAIに話しかけた時はこんな感じでした：

「えーっと、AWSのRoute53で、pochanglab.comというドメインを取得しました。まずは世の中にありがちないい感じのホームページの土台を整えて、その上で、どのような内容でホームページを作って欲しいのかは別途、ChatGPTに欠かせた指示書を用意したので添付するね。それ通りに作って。スマホでも見やすいレスポンシブデザインで。それと、日本語と英語の切り替えもできるようにして。サイトマップとRSSフィードも必要です。最終的にはS3とCloudFrontで配信できる静的サイトにしたいので、その辺りも考慮してください。あ、運用手順書もMarkdown形式で作ってもらえると助かります。あと作成後は簡単に更新ができるように、GitHub Actionsでデプロイできるようにしてください。 main branch にmergeされたら自動でデプロイされるような感じ。」

これだけで、本当に動くブログシステムが完成しました。 もちろん、GithubやAWSの認証情報は対話形式で渡したりというのはありました。

!セクションバナー3

第3章：制作実録 ー つまずきと発見の2日間

Day 1 午前：基盤づくりの意外な簡単さ

朝9時：「よし、サイトを作ろう」

まずはドメインの取得から。Route 53でpochanglab.comを取得しました（年額約15ドル）。

次にS3バケットとCloudFrontの設定。実はこれらも、CursorのAIに「AWS CDKでインフラを自動構築してください」と指示しただけで、完全に自動化されました。SSL証明書も含めて、一切手動設定は不要でした。

朝11時：「あれ、もう基盤完成？」

思っていたより早く基盤が完成。拍子抜けするくらい簡単でした。

Day 1 午後：Next.js開発環境との出会い

午後1時：Cursorとの初対面

「Cursor」というAIエージェント統合エディタを使い始めました。最初はCursor Autoを使っていましたが、途中でGPT-5が登場したので切り替えました。

この判断が大正解。月額20ドルを約18ドル超過しましたが、その価値は十分ありました。

Day 1 夕方：最初の大きな壁

午後5時：「YouTubeの動画を表示したいんですが...」

ここで最初の大きな壁にぶつかりました。

私：「YouTubeプレイリストから動画を取得して表示してください」 AI：「申し訳ございませんが、それはできません」

「えー、できないの？」

でも、ここで諦めませんでした。ChatGPTを別途開いて、「YouTube Data APIの使い方」を調べました。そして、その情報をCursorのAIに教えたのです。

すると...

AI：「承知いたしました。YouTube Data APIを使用して実装いたします」

これが「逆教育」の発見でした。AIエージェントに直接聞くより、上位モデルで調べてから教える方が効果的だったのです。

Day 2 午前：多言語対応の奇跡

朝10時：「日本語と英語、両方対応したいな」

私：「日本語と英語の切り替え機能を追加してください」

AIが返してきたのは、完璧に動作する多言語切り替えシステムでした。一言の指示で、予想をはるかに超える機能が実装された瞬間でした。

Day 2 午後：本番環境での試練

午後2時：「あれ？本番で動かない...」

ローカルでは完璧に動いていたのに、CloudFrontにデプロイすると一部の機能が動きませんでした。

これがローカル環境と本番環境の差異という、開発者なら誰もが通る道でした。

• next.config.jsで静的エクスポート設定を明示
• API routeの修正
• ルーティング設計の見直し

解決策：

午後4時：「よし、完全に動いた！」

すべての機能が本番環境でも正常に動作することを確認できました。

!セクションバナー4

第4章：自動化の魔法 ー GitHub Actionsとの出会い

「コードをプッシュしたら勝手にサイトが更新される」

最後に設定したのが、自動デプロイの仕組みでした。

name: Deploy to S3 (Static Export)
on:
  push:
    branches: [ main ]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
      - name: Install dependencies
        run: npm ci
      - name: Build site
        run: npm run build
      - name: Deploy to S3
        run: aws s3 sync ./out s3://$S3_BUCKET --delete
        env:
          S3_BUCKET: ${{ secrets.S3_BUCKET }}
      - name: Invalidate CloudFront
        run: |
          aws cloudfront create-invalidation             --distribution-id $DISTRIBUTION_ID             --paths "/*"
        env:
          DISTRIBUTION_ID: ${{ secrets.CF_DIST_ID }}

これで、コードを更新してGitHubにプッシュするだけで、約1分半後には世界中からアクセスできるようになりました。

!セクションバナー5

第5章：MCP革命 ー Issue管理も自動化

スマートフォンからの深夜の思いつき管理法

これは本当に便利な発見でした。

1. ベッドでスマートフォンから自分のサイトをチェック
2. 気になる点をGitHub Issueに記録（ラベル付きで）
3. 翌朝、AIエージェントに「bugラベルのIssueを全部直して」と指示

🌙 夜のルーティン

実際の指示例：

「GitHub MCPを使って、bugラベルの付いたissueをすべて修正してもらえますか？ブランチを切ってPRを作成してください。PR本文には #<issue番号> を列挙して自動クローズ設定もお願いします。完了後は、デプロイまで実施して、本番URLで動作確認してから報告してください。」

結果：朝の一言で、夜に見つけた問題がすべて解決。

!セクションバナー6

第6章：コストの真実 ー 月額たった数ドルの衝撃

「え、これだけ？」な月額費用

本格的なサイトなのに、月額コストは驚くほど安いのです：

• Route 53：$0.50（ドメイン管理費）
• S3：$1〜3（アクセス数次第）
• CloudFront：$1〜5（配信量次第）
• 合計：月額$3〜9程度

💰 実際の月額費用

• Cursor：$20/月（GPT-5使用時は超過分が発生）
• ChatGPT Plus：$20/月

🛠️ 開発ツール

コストの考え方：開発や他の作業でもCursorやChatGPTを使っているので、サイト制作の原価には含めません。難しい部分は課金モデルに任せて、普段はCursor Autoで進められるので、メンテナンスコストはかかりません。

従来手法との比較

• 従来：企画1週間 + 設計1週間 + 実装2-4週間 = 4-6週間
• AI協業：企画半日 + 実装1-2日 = 2-3日

⏱️ 時間コスト革命

約10-20倍の効率化を実現しました。

!セクションバナー7

第7章：音声入力マスターへの道

OS標準 vs ChatGPT音声：使い分けの極意

音声入力を使い込んで分かった、デバイス別の最適解をお教えします：

• 安定性が高い
• 3-5分の長文でも途切れない
• 精度が非常に高い

🎤 長文・詳細説明 → OS標準の音声入力（macOS標準、Windows: Win + H）

• レスポンスが早い
• 自然な会話形式
• ただし長文には不向きで、OS標準の音声入力の方が安定している

💬 短文・対話 → ChatGPTの音声入力

• 専門用語は音声認識が不安定
• 後から手直しする方が効率的

⌨️ 技術用語 → 手入力で補完

!セクションバナー8

第8章：つまずきから学んだ黄金ルール

ルール1：「小さく、速く、確実に」

AIエージェントの特性を理解する

AIは素晴らしいですが、時として「動いているものを壊してしまう」ことがあります。

• 小さな修正でもこまめにコミット
• 動作確認してからメインブランチにマージ
• 差分は常に薄く保つ

対策：

ルール2：「確認してください」の前に自己確認

「確認依頼の空振り」を防ぐ

以前は、明らかに動かない状態で「確認してください」と言ってしまうことがありました。

改善策： AIエージェント自身にcurlでの動作確認をさせる仕組みを構築。

# 自動確認スクリプト例
curl -s http://localhost:3000/ | grep "実験室" > /dev/null
if [ $? -eq 0 ]; then
  echo "✅ サイト正常動作中"
else
  echo "❌ エラーを検出"
fi

ルール3：「逆教育」の威力

ChatGPTで調べた情報をCursorに教える

これが最も効果的だった手法です：

1. ChatGPT Plusで技術情報を詳しく調査
2. その情報を整理してCursorに教える
3. Cursorが正確に実装してくれる

!セクションバナー9

第9章：Google AdSenseとSEO ー 収益化への道筋

既存ページと同じ方式で確実に

AdSenseなどの将来使うことを見据えてGoogle Analyticsの実装は、既存ページで実証済みの方式をそのまま採用しました。

• 構造化データ（JSON-LD）：記事情報を検索エンジンに正確に伝達
• OpenGraph・Twitter Card：SNSでのシェア時の見栄えを最適化
• サイトマップ自動生成：/sitemap.xml、/sitemap-blog.xml
• RSSフィード：/api/blog/feed.xmlで購読者獲得

📊 SEO対策の全貌

!セクションバナー10

第10章：未来への展望 ー 実験室としての可能性

この記事を読んでいるあなたへ

もしかすると、この記事を読んで「自分には無理そう...」と思われるかもしれません。

でも、私も最初は細かな設定をよく理解していない部分も多くある状態でのスタートでした。

大切なのは完璧を目指さないこと。まずは動くものを作って、それから改善していく。AIエージェントと一緒なら、それが本当に可能なのです。

この「実験室」で今後やりたいこと

• 新しいAIツールの検証記録
• インフラ最適化の実験結果
• ユーザビリティ改善の取り組み
• 収益化戦略の検証データ

🧪 継続実験テーマ

最後に：人間とAIの協業の未来

この記事も、実は音声入力で一気に話した内容をベースに、AIエージェントが構成・執筆しました。

読んでいて気づかれましたか？　人間の体験談と感情を、AIが読みやすい文章に仕上げる。これが、人間とAIの理想的な協業の形かもしれません。