AI えらびかた — Next.js × AWS Amplify Hosting メディア基盤

サマリ

プロジェクト	AI えらびかた (タスク別・業界別 AI 比較レビューメディア)
公開 URL	https://ai-erabikata.com/
用途	主要 AI のタスク別・業界別比較記事 + AI セレクター（質問応答型レコメンドツール）
コンテンツ規模	記事 30 本 + 比較ツール 1 + 法律/運営ページ 4 + 動的 sitemap (36 URL)
構成	Next.js (App Router) + AWS Amplify Hosting + Route 53 + ACM
運用形態	main ブランチ push → Amplify webhook で自動ビルド・デプロイ

全体アーキテクチャ

構成図は drawio (AWS 公式アイコン v2026 系) で作成しています。下のビューアは .drawio ファイルを 直接レンダリングしています。zoom / pan / 編集ボタンが使えます。

ソース: /diagrams/ai-erabikata/architecture.drawio （drawio で開けば編集可能）

A. 訪問者の閲覧フロー

1. DNS ― ドメイン ai-erabikata.com を Route 53 hosted zone (ZXXXXXXXXXX) で管理。www サブドメインも同時配信。
2. ACM ― us-east-1 で ai-erabikata.com + www.ai-erabikata.com の証明書を発行・自動更新。
3. AWS Amplify Hosting ― Next.js (App Router) のビルド成果物を配信。CloudFront ベースの CDN + 自動 HTTPS + プレビュー環境を統合提供。
4. カスタムドメイン ― Amplify アプリ dXXXXXXXXXX.amplifyapp.com をエイリアスとして ai-erabikata.com 配下にマッピング。

Amplify を選んだ理由は Next.js App Router の SSG/ISR/Image Optimization に最初からネイティブ対応していること。 S3 + CloudFront 自前配線でも同じことはできますが、output: "export" しない場合の image/route 最適化を 手配する手間が省けます。

B. コンテンツ運用フロー

1. 記事原稿は MDX (Markdown + JSX) でリポジトリに直接書く。AI 各社の出力比較は同一プロンプトで揃え、スクリーンショットや出力例を併記。
2. main ブランチに push すると、Amplify が webhook で検知し、自動ビルド → デプロイ → ドメイン反映まで一気通貫。
3. カテゴリ・タグ・関連記事は MDX frontmatter から動的に生成。?cat=... URL クエリでフィルタ可能。
4. OGP 画像は Next.js の ImageResponse で動的生成し、記事ごとに自動で違う図が出る。

C. 比較ツール「AI セレクター」

/tools/ai-selector に 質問応答型のレコメンドツールを実装しています。

• 5〜7 問の質問に答えると、用途・予算・優先度から ChatGPT / Claude / Gemini の中で「あなたに合う AI」を推奨
• クライアントサイドのみで完結（Lambda 不要、CloudFront キャッシュで応答完結）
• 結果ページから関連記事へ動線

D. SEO + 計測

• 構造化データ (JSON-LD): Article / FAQPage（記事末尾の用語解説） / BreadcrumbList / WebSite を全記事に埋め込み
• 動的 sitemap.xml: 記事数の増加に追従。記事 30 + 静的 6 = 36 URL
• RSS フィード: /rss.xml で記事更新を配信、Feedly 等の取り込みに対応
• GA4 計測: ユーザー行動分析のためのタグを全ページに実装
• 記事ページの読了支援: パンくず / 目次 (TOC) / 関連記事 / シェアボタン / 読書プログレスバー / スクロールトップ

採用判断のポイント

項目	採用	理由
フロント	Next.js (App Router)	SSG + Image Optimization + ImageResponse の OGP 自動生成、MDX が一級扱い
ホスティング	AWS Amplify Hosting	Next.js ネイティブ対応、push 即デプロイ、CloudFront ベースで日本配信も速い
DNS / TLS	Route 53 + ACM (us-east-1)	www / apex 両方を 1 証明書でカバー、自動更新
計測	GA4	無料、Search Console と統合、EE-A-T 計測の事実上の標準
SEO 軸	2 軸絞り込み（業界 × タスク）	レッドオーシャン回避、ロングテールに振る

運用上の工夫

• 記事の 1 次情報化: 同一プロンプトで全 AI を回した自前のスクリーンショット・出力比較を必ず併載
• カテゴリ絞り込み URL: ?cat=programming など URL クエリで動的フィルタ、シェア URL がそのまま絞り込み済みになる
• ダークモード対応: localStorage + prefers-color-scheme 両対応、深夜閲覧の負担軽減
• PWA manifest: ホーム画面追加対応、再訪率改善期待
• カスタム 404: 関連記事のおすすめを表示して離脱率を抑える

これからやる予定

• 記事の継続投下と KW クラスタの偏り見直し
• 競合 KW の上位記事リライト・内部リンク強化
• サイト内検索とフィルタ UI の改善

関連リンク

• 本番サイト ai-erabikata.com
• AI セレクター（比較ツール）
• RSS フィード
• ← Works 一覧へ戻る