AI駆動開発でネットミーム検索サイト作ろうとしたら、結局俺駆動開発だった話
こんにちは！ゲンシュンです。
突然ですけど、皆さん日常的にネットミームを使いますよね！？笑
「なんの成果も!!得られませんでした!!」とか「ｴｯﾎｴｯﾎ」のような検索しやすい画像なら適当にググれば調べられますが、「ギャル2人がベッドではしゃいでるあの画像」とか「激しい言い争いをしてる海外の親子が最後に椅子をぶん投げる4コマ風の画像」みたいな、検索が難しくて画像にたどり着くまでに時間がかかって困ったりするじゃないですか！？（きっと
ということで、ネットでよく見るおもしろ画像等のネットミームを検索できるサイト「ネットミームの森」を作りました〜！
画像を一覧表示してフィルターするだけのWebページなのでぶっちゃけ一瞬で作れると思います。お盆休み中にサクッと作って地道に画像を追加していくのも悪くないんですが、最近「AI駆動開発」が流行っているので、バイブコーディングまでとは言いませんがAIにどこまでやらせられるか？という検証も兼ねて、なるべく俺が手を動かすことなくこのアプリを作ろう！となりました。
実装の流れ
UI設計
まず「ネットミームを一覧化し、検索させたいサイトのUI案を4種類ぐらい作って」とAI(今回はClaude Sonnet 4)にお願いしました。UIの仕様決めが目的なので雑なHTMLファイルで良いよ〜みたいな指示をした記憶です。
こんな感じでグリッド形式、サイドバー方式など色んなデザインパターンを作ってくれました。AIは初速アウトプットがすごい！
パソコン前提ならサイドバーが良さそうだけどスマホからの閲覧も考慮するとヘッダー形式がいいな〜とか、年代とかカテゴリとかフィルター出来るといいよな〜みたいな追加の要件をAI君とラリーしていきながら、UI仕様が洗練されていきました。
フロントエンド実装
おおよそのUI仕様が出来たタイミングで「確定したUIの仕様をドキュメントにまとめて」と依頼し、ドキュメント+ぐちゃぐちゃなHTML+CSS+javascriptを回収。次のAI君に引き継ぎ資料として渡しながら、ちゃんとした土台をここから実装してもらいます！
ユースケース仕様書とUI仕様書と雑HTML渡しながら「React + Next.js + TypeScriptで再現させて」と依頼しました。なんかそれっぽい雰囲気の実装はできるんですが、なんか気に入らないというか、微妙だな〜という所が結構あったので何度か作り直しさせました。
それでも個人的に満足しなかったので、「ドメインモデル（いちばん大事なinterfaceだけ）」と「TypeScriptのお作法（振る舞いを除きclass使わないでね、functionではなくアローファンクション使ってね等）」と「ある程度のアーキテクチャ（componentの粒度的な）」はこちらで丁寧に指示をし、あとはAI君に自由に実装させる作戦に。なんか良さそうな実装が出来たので満足！
ベース実装と動くものをサクッと作ってくれたので「約20画像ぐらい読み込まれたら次の画像を読み込ませて」「検索時、入力完了からしばらく経ってからfilterさせて」「スマホ画面で、スクロール中ヘッダーじゃまだからフェードアウトさせて」みたいな追加要望を伝えながら実装動作確認を繰り返します。画像用意が面倒だったので、モック画像適当に用意させて「IS_TESTがtrueのときはこれ」みたいなノリで、検索、スクロール、レスポンシブデザイン等が徐々に実現していきました。まぁ簡単なアプリケーションなので、TypeScriptやComponent設計含めて概ね想定どおりだったんでヨシッ！
品質にムラはあれどコード生成のスピードは半端ないので、AI駆動開発ぽいことが体験できてこの時点でだいぶ満足。結構歯茎出してました
ネットーミーム収集
肝心のネットミーム集めですが「おもしろ画像、ネットミーム等でGoogle画像検索させて、順番に画像を保存する」「その画像がどういう単語で検索されているのか抽出する」をやれば完璧じゃね？と思ったのですが、出来ず！自分がクローリング詳しくないのもあるんですが、google画像検索の結果を取得出来ない雰囲気。
じゃせめてネットミームの単語ぐらいは作ってもらいたいなと思い、自分が用意した画像とそれらに紐づく単語のjsonを渡しながら「2020年以降流行った単語をこの形式のjsonで生成して」と依頼しました。
めちゃめちゃネットミームっぽい何かを生成されるんですが name: "これでいい犬" とか name: "ナルトの叫び" みたいなよくわからん怪文が量産される。。
うーん、これAIより俺のほうが全然詳しくね？？（適切なAIモデルを使っていない説もありえます）
人力収集
ひたすらスマホで検索しては保存する作業を繰り返します。「年代」「元ネタ」機能を作ってしまったがゆえに、「その画像の初出年度」「元ネタはテレビ？アニメ？漫画？」をちゃんと調べざるを得ません。
太古から愛用していた「ニコニコ大百科」と「ピクシブ百科事典」に記事があれば、編集履歴をまず見て最古の年を確認、次にtwitterで「単語 until:yyyy-mm-dd」で検索してSNSの初出年度を調べる、みたいな本当に地獄のような調査を延々とやってました。。。アニメ化された漫画系おもしろ画像が一番厄介で、例えば鬼滅の刃の「判断が遅い」という画像、ネット上の盛り上がりが原作時とアニメ時で2つピークがあるのでちゃんと把握しないといけないという。
これが1画像につき5分ぐらいかかってる。恐ろしい。
人力名寄せ作業
例えばデスノートの「ニア、僕の勝ちだ」という画像あるじゃないですか。これを完全一致でしか検索できないのは不便なので「デスノート」「DEATH NOTE」「夜神月」「ライト」「ぼくの勝ちだ」「ボクの勝ちだ」等、ゆるい条件でHITした方が検索にひっかかりやすいじゃないですか。ということで、1画像ずつ「検索ワード」みたいなのを丁寧に用意してます、人力でｗ
これで俺の貴重なお盆休みは終わりました。今もなお画像の追加作業してます（植林）
アーキテクチャ
AI駆動開発でネットミーム検索サイトを作ろうと意気込んだんですが、結論ありえんぐらい人力だった。。
まとめ
AI、頼む、俺の仕事を奪ってくれwww
Discussion