Claude Codeとバイブコーディングする本棚UI制作記──AIでつくる個人図書館アプリの裏側

Wait 5 sec.

AIを利用した「バイブコーディング」が現実的となり、従来は時間的・技術的に不可能だったプロジェクトが実現可能な時代がやってきています。今回、ソフトウェアエンジニアのMarius Balaj氏は、自宅の本棚に並ぶ数百冊の本を管理するための、デジタル本棚を、AIエージェントのClaude Code とともに作り上げた記録を公開し注目を集めています。同氏は自宅に500冊以上の本を所有しており、本の管理が限界に達していました。自分が何を持っているのかわからなくなり、この問題をどうにか解決したいと思っていたものの、ISBNスキャナーやGoodreadsは、ローカルな出版社や古書には弱く、助けにはなりませんでした。「完璧に管理できないなら意味がない」と思い込み、何度も挫折してきた著者は、ある日ついに腹を決めます。「完璧じゃなくていい。AIと一緒にやれば、面倒な部分は任せられる」と、バイブコーディングによって問題を解決することを決意したのです。データ作り:470枚の写真から始まった同氏は、まずは本棚のすべてを撮影します。スクリプト作成はClaudeに任せ、画像からタイトル・著者・出版社を抽出し、JSON化するパイプラインを構築しました。その結果、約90%は自動で正しく認識し、残り10%は手作業で補正すれば良いことがわかります。新しく買った本も同じ仕組みで追加できることが確認でき、「AIが実装し、人間が判断する」という役割分担が自然に生まれました。カバー画像の取得:API と検索、そして最後は人の手カバー画像に関しては、Open Library APIで取得し、品質の悪いものはGoogle Imagesで再取得します。どうしても、見つからない古書に関しては、Photoshopで手作業で補完します。手作業が必要だったのは460冊中10冊で、「これなら許容できる」というラインを見極めるのは人間の仕事となります。UIづくり:求めたのは本棚らしさ本棚アプリのUIは、最初は単純なカバーのグリッド表示から始まりました。しかし求めていたのは、本棚の質感です。この要望に対し、Claudeは以下のような技術的な提案を行います。カバー画像から色を抽出し、背表紙風に再構成ページ数から背幅を算出微妙なゆらぎを加えてリアルさを演出この、結果、デジタルなのに「本棚の空気感」が漂うUIが完成します。その後、スクロールに合わせて背表紙がわずかに傾くアニメーションを追加し、最初はカクつきがあったものの、Claudeが原因を解明し、Reactのレンダー外で動くスプリングアニメーションに修正します。著者はただ、「気持ちよく動くかどうか」を判断するだったと述べています。最後に残ったのは「味覚」のような役割同氏は、AIがコードを書き、人間は「どこまでで良しとするか」を決める、そして「気持ちよさ」を判断するという役割分担だったと振り返っています。AIが実装を担い、人間が"味"を決める。その関係性が、このプロジェクトを完成へ導いたとまとめています。実際に作られた本棚はオンラインで公開されています。この記事はHacker Newsでも議論されていて、多くのコメントが、「LLMでのバイブコーディングは小規模・独立したプロジェクトに向いている」という点で一致しています。大規模になると依存関係が増え、LLMが文脈を保持できなくなるため、「設計だけAIに手伝わせて、実装は人間がやる」方が良いという意見や、LLMは既存コードに少しだけ手を加えるのが苦手で、抽象化を増やしがちといった意見も寄せられています。バイブコーディングの実践例として参考にしてみてはいかがでしょうか。