Claude Codeで自分のサイトを作った話——AWSアップデート自動要約サイト ankuro.dev
「AWSのアップデートって多すぎて追えない」
そんな悩みを持ちながら、Claude Codeと雑談していたら「じゃあ自動でまとめるサイトを作ればいいじゃないですか」と返ってきた。
それが ankuro.dev の始まりだ。
何を作ったか
ankuro.dev は、AWSのAI関連アップデートをRSSから自動収集し、Claude APIで日本語要約して公開するサイトだ。
主な機能はこうなっている：
- AWSの公式RSSから新着アップデートを自動取得
- AI関連キーワードでフィルタリング（Bedrock、SageMaker、Amazon Q など）
- Claude Haiku で日本語要約（タイトル・概要・変更点・影響・まとめ）
- Next.js で静的サイトとして生成・Vercel でホスティング
- Cloudflare DNS で独自ドメイン（ankuro.dev）を設定
技術スタック
| 分類 | 使ったもの |
|---|---|
| フレームワーク | Next.js 14（App Router、静的エクスポート） |
| スタイリング | Tailwind CSS |
| ホスティング | Vercel |
| DNS | Cloudflare |
| AI要約 | Claude Haiku（Anthropic API） |
| データ収集 | Python スクリプト（RSS解析） |
| コンテンツ管理 | JSON ファイル（updates.json） |
静的エクスポート（output: "export"）を選んだのは、Vercelへのデプロイが一番シンプルで、サーバー不要のため運用コストがゼロになるからだ。
自動収集の仕組み
scripts/fetch_updates.py が中心的な役割を担っている。流れはこうだ：
- AWSの公式RSSフィード（
aws.amazon.com/new/feed/）を取得 - タイトル・説明文をAI関連キーワードでフィルタリング
- 新規エントリのみ Claude Haiku に渡して日本語要約を生成
data/updates.jsonに追記して保存
Claude に渡すプロンプトは、タイトル・概要・変更点・影響・まとめを構造化JSONで返させる設計にした。これにより詳細ページのセクション構成が自動で揃う。
実際に動かしてみると、1件あたり数秒で処理が完了し、Claude Haiku のコストは30件処理しても数円以下だった。
SEOへの取り組み
個人サイトを作るならSEOは最初から考えておきたかった。やったことはこの通り：
メタデータ
- Next.js の
generateMetadataで全ページに title・description を設定 - OGP タグ（og:title, og:description, og:image）の追加
- Twitter Card 対応
構造化データ
- 詳細ページに Article スキーマ（JSON-LD）を埋め込み
- Google リッチリザルト対応
クロール対応
app/sitemap.tsで動的サイトマップを生成public/robots.txtを設置
静的エクスポートなのでサーバーサイドの処理はないが、ビルド時に全ページが静的 HTML として生成されるため、クローラーにはフレンドリーな構成になっている。
Claude Code と一緒に作った感想
今回のサイトは、Claude Code と会話しながら少しずつ作り上げた。コードを書くだけでなく、「このページの構成どう思う？」「SEO的にはどうすればいい？」という相談にも答えてくれた。
印象的だったのは、こちらが「なんとなくこうしたい」と言うと、具体的な実装方針を提示してくれる点だ。
たとえば「AIアップデートの件名が英語だけど、日本向けだから見づらい」と伝えたら：
- 既存データへのバックフィルスクリプトの提案
- Claude API を使ったタイトル翻訳の実装
- 新規エントリのプロンプト修正
の3点をまとめてやってくれた。
一人で全部考えながら作ると疲弊するが、「一緒に考えてくれる相手」がいることで、思考のループが早く回る感覚がある。
今後やりたいこと
- AWS公式ページの本文取得による要約の精度向上
- ブログ記事の充実（このサイトに移転中）
- モバイル表示の改善
まだ作り途中だが、「まず動くものを出す」を優先して進めてきた。完璧を待つより、小さく動かして改善する方が続く。
ankuro.dev をぜひ見てみてほしい。