Claude Code と Claude Design で「全自動更新コナンイベントまとめサイト」を作成した

はじめに

タイトルの通り、Claude Code/Claude Design で一行もコード書かずにWebサイトを作成しました。

完成した Web サイトは下記です。

最新のコナンのイベント情報を自動で収集し、再デプロイすることなく反映する仕組みになっています。

設計、Agent や Skill の役割分担、データ構造、デザインの方針、レスポンシブ対応、画像の取得ロジック等々、全部 Claude Code と Claude Design に任せて、一行もコード書くことなく完成しました。

作る動機

きっかけはしょうもなくて、友達と飲んでるときに「彼女がコナン好きなんだけど、コラボカフェとかポップアップとかまとまったサイトがなくてさ」と言われたことでした。

確かに調べてみると、コナンのイベントは公式サイトにはまとまっておらず、かなり色んなサイトに散らばっており、ファンは X と Google を行き来して情報を集めるしかない状態でした。（他のアニメも同じな気がしますが...）

ちょうど Claude Code と特に Claude Design をがっつり触ってみたかったので、作ってみた感じです。

全体の構成

ざっくり全体像は下記の形です。
①データ収集パイプライン と ②Web フロントエンド の 2 ブロックで、その間を events.json が繋いでいます。

• データ収集パイプライン … 各種サイトや SNS を回ってイベント情報を集めて events.json を生成する仕組み
• Web フロントエンド … その JSON を読んで一覧表示する Next.js のサイト

1. 設計フェーズ：何が必要かを Claude と一緒に決めた

初めに設計の段階で、「コナンのイベント情報収集サイトを作るには何が必要か」を Claude Code と詰める作業でした。決めた内容は大きく下記の 4 つです。

1-1. どんな Agent が必要か

「**重い Web fetch をする Agent **」が一つだけ必要という結論になりました。
各種サイトや SNS を横断して HTML をごっそり取ってくる作業は、生 HTML がメインの会話を埋め尽くすのでコンテキストを隔離したいためです。

1-2. どんな Skill が必要か

「収集してきた候補をどう処理して events.json に落とすか」を分解して、4 つの Skill にを作成することにしました。（各 Skill の詳細は次章で記載）

• オーケストレータ … パイプライン全体の指揮役
• レビュー … 候補コナンイベントを精査してデータセットに採用するか決める
• OCR … 画像しかソースがないコナンイベントの文字起こし
• ソース管理 … 情報源の信頼度を継続的に再採点する

1-3. データ構造をどうするか

コナンイベント 1 件をどう表現するかを考え、JSON オブジェクト 1 個でイベントを表現するスキーマにしました。

フィールド	内容
id	イベントの一意 ID
title	表示タイトル
category	大分類（劇場版 / コラボキャンペーン / カフェ / 展覧会 / プラネタリウム 等）
subcategory	小分類（より細かい種別）
start_date	開始日
end_date	終了日。null は終了未定
venue	会場名 + 地域（関東 / 関西 / 全国 など）
url	公式ページの URL
image_urls	公式ページから抽出した OGP 画像
sources	採用根拠となった sources.yaml 上のソース ID（複数）
confidence	low / medium / high — レビューゲート専用、UI には出さない
last_verified	最後に検証した日。skip_ids 注入や source-management の判定に使う

例：

{
  "id": "campaign-2026-konica-minolta-planetarium-conan",
  "title": "プラネタリウム『名探偵コナン 閃光の宇宙船』上映",
  "category": "other",
  "subcategory": "planetarium",
  "start_date": "2025-07-18",
  "end_date": null,
  "venue": {
    "name": "コニカミノルタプラネタリウム5館",
    "region": "全国"
  },
  "url": "https://planetarium.konicaminolta.jp/program/conan/",
  "image_urls": ["https://.../conan_B5_BG.jpg"],
  "sources": ["brand-konicaminolta", "news-prtimes-conan"],
  "confidence": "low",
  "last_verified": "2026-04-25"
}

1-4. データの格納場所をどう分けるか

「単一書き手の原則」 を最初に敷いておきました。
複数の Agent や Skill が同じファイルを書くと、並列実行したときに必ず壊れるためです。誰が何を書くかをこの段階で固定したのが、後になって効きました。

---

2. Agent と Skill の中身

名前	種別	ファイル	役割
conan-collector	Subagent	.claude/agents/conan-collector.md	重い Web fetch 担当
オーケストレータ	Skill	SKILL.md	パイプライン全体の指揮役
レビュー	Skill	review.md	候補イベントを events.json に採用するか判定
OCR	Skill	ocr.md	画像だけが情報源のイベントを文字起こし
ソース管理	Skill	source-management.md	情報源の信頼度を継続的に再採点

それぞれの詳細を記載します。（細かいロジックは長くなりそうなので割愛します...）
何度もいいますがこのロジックなども Claude が考えてくれたものになります。

2-1. conan-collector（唯一の Subagent）

各種イベント情報を取得する Agent。下記の 6 フェーズで動かしています。

2-2. オーケストレータ Skill

「何をどの順で動かすか」を管理する指揮役 Skill。
「コナンのイベントを更新して」などで起動し、下記のフロー通り動作します。

2-3. レビュー Skill

Collector Agent が出した候補を events.json に採用するか判定する Skill。
採用判定のロジックでは、取得したイベント候補情報の信頼度を「High・Midium・Low」と判定し、下記の条件で採用するか決めています。下記が例です。

状況	結果
公式 / 大手ニュースで title+date+URL が揃ってる	🟢 high
ローソン公式ドメインで「ローソン×コナン」告知	🟢 high（brand-primary）
イベント情報はないがニュースサイトの 2 件で title+date 一致	🟡 medium
アニメイトタイムスだけで他に裏付け無し	🔴 low
画像だけ、OCR で文字起こし	🔴 low
公式 X だけで 18 ヶ月先の映画情報	❌ 棄却
唯一のソースの URL が 404	❌ 棄却

2-4. OCR Skill

Collector が「画像だけが情報源」と判断したものを ocr-queue.jsonl に積み、それを文字起こしする Skill。
画像形式で情報が載っているキャンペーンも意外と多く、これがないとごっそり取りこぼしました。

2-5. ソース管理 Skill

情報源の自己改善ループを行うSkill。
Agent実行後の最後に sources.yaml を保守する Skill で、貢献しないソースを徐々に降格させていく仕組みです。新しく見つけたソースやブランドは「候補」として積むだけで、本採用は人間が承認するまでしない、という保守的な自己改善ループにしています。

3. デプロイ・配信構成

技術スタック下記です。
データ配信とアプリホスティングを分離するため Vercel Blob を挟んで、それ以外は Vercel に集約しました。無料で抑えたかったため、どのサービスを利用するかは人間が少し考えました。

領域	採用
言語	TypeScript（Web）／ Python（パイプライン補助）
フロントフレームワーク	Next.js 16（App Router）
スタイリング	Tailwind v4
データ配信	Vercel Blob（public access）
ホスティング	Vercel
デプロイ	main push で自動デプロイ
ローカル開発	環境変数未設定で ローカル events.json にフォールバック

工夫した点としては、データ配信とアプリホスティングを分離したことです。
これにより、コナンのイベント情報を更新する、つまり events.json を Blob へアップロードするだけで再デプロイなくイベント情報が更新される仕組みになりました。

4. デザイン作成：ChatGPT → Claude → Claude Design → Claude Code のリレー

ここが今回いちばん面白かったところです。下記の Youtube を参考に、デザインは複数の AI のリレーで作りました。

【激震】外注なら30万のWebサイト、Claude Design × GPT image 2で作ってみた！

実施した各ステップが下記です。

ステップ 1：ChatGPT の GPT Image 2.0 で UI 画像/パーツを生成

最初は ChatGPT に UI デザインを生成してもらうように頼みました。プロンプトは下記です。

あなたはプロのWebデザイナーです。遊び心のあるWebページのデザインを考えてください。

目的：コナンのイベントをまとめて見やすくする

ターゲット：コナンファン

コンテンツの内容は下記です。
https://conan-events.vercel.app/
//これまで作成した Agent/Skill を基に Web アプリの大枠だけ作ったもの

ただし、見やすくなる要素（カレンダー）などがあれば追加で出してもらっても全然大丈夫です。

そうすると下記のような画像が生成されました。

クオリティが高いことにはびっくりしましたが、著作権がもろアウトな気がしたので、「著作権を考慮して」と再度頼んで完成した画像が下記。

めっちゃいい感じ。 次に下記のプロンプトを実行し、デザインのパーツに分解しました。

この画像のWebデザイン用の素材を一枚の画像にまとめてください。
要件： 
- 番号をそれぞれ割り振ってください 
- 各素材をグリッド状に整列 
- 十分な余白を確保 
- 素材同士が重ならない 
- 一つ一つが独立して見える 
- 白背景（切り抜きしやすい） 
 
素材： 
- 抽象図形（ぐにゃぐにゃ・丸・グラデーション） 
- 装飾（矢印・星・ドット・手書き戦） 高解像度でシャープに

で完成したのが下記。

ステップ 2：Claude にパーツ分解させる

GPT が出した UI 画像/パーツを更に細分化して一つ一つの画像ファイルにしたいため、Claude で下記のプロンプトを実施しました。

これら二つの素材はWebページの素材に使いたいと思っています。
さらに透過したいので、一つ一つの画像に分割してください。

これで各パーツごとに画像ファイルが生成されました。

ステップ 3：Claude Design に渡して HTML 化

ここまでくれば後はデザインを作るだけです。
ステップ1、2 で生成した画像ファイルを Claude Design に全て渡し、下記のプロンプトを実施しました。

上記のWebサイトのデザインと素材画像を渡しましたので、
それを基に忠実にWebページを作ってみてください

作成されたのが Tailwind 入りの 1 つの HTML ファイルです。クォリティが高すぎる。。。

ステップ 4：Claude Code に HTML を渡して Next.js 実装

最後に、ステップ 3 で出来た HTML ファイルを Claude Code に渡し、下記のプロンプトを実施。

HTML ファイルを忠実に Next.js のコンポーネントに分割し、Web アプリを実装して。

コンポーネント分割は Claude が自然な単位（SiteShell, Calendar, OngoingPanel, AreaMap, ...）で勝手に切ってくれ、この HTML デザイン通りの Web アプリが完成しました。クォリティがた（略

5. 細かい調整

Web アプリは完成しましたが、後は細かい修正点があったので下記の点を修正しました。

1. ファビコン/OG 画像の作成
2. レスポンシブルデザイン対応（PC/スマホどちらの画面にも対応）
3. お気に入り機能実装
4. イベント画像の自動取得

6. 完成

完成したものが下記です。

特にイベント一覧ページが見やすくなりお気に入りです。

データ更新をする場合は、「コナンのイベントを更新して」と Claude Code に指示するだけで、Agent/Skill が起動しサイト更新されます。特に再デプロイも不要です。

振り返り

想像していた何倍以上ものクォリティでただただ驚きでした。
しかも完成までにかかった時間は計8時間もかかってないくらいだと思います。人間が一から実施すると考えると、どれぐらい早くなったか皆さんも早々できるかと思います。

また繰り返しになりますが、このプロジェクトで自分は一行もコードを書いていません。この精度まで出せるのであれば、本当に非エンジニアが作成できる世の中になるかもしれませんね。。。

次やりたいこと

• この Agent/Skills を定期実行したい。そうすると完全自動化でイベント情報を収集する Web アプリが完成する。Preview だが Claude routines を使えばできそうでした。
• コード生成、アプリのレビューなどまだまだ Agent/Skill 化できるところがあるので、もう少し自動化する仕組みを詰めて、汎用化させたいです。
• CI/CD を組み込みたい。今回は手動で Github リポジトリに push 等していましたが、Github 連携が Claude でもできるそうなのでそこも自動化したいなと思いました。
• デザイン生成フローの自動化もしたいですね。ただ Chat GPT の課金が必要そう。。

さいごに

vibe coding でアプリ作成は試したことがありましたが、デザインまでこのクォリティでできることに本当にびっくりでした。これからは「コードが書けるか」より「AI をどう使いこなせるか」に大きく変わってきそうだなと実感しました。

何か作るときの参考に少しでもなれば幸いです。