AIでブログを「Kudo Shu Library」にアップデートしました
大学1年生(2016年)の頃に始めたブログ「そうは言っても工藤さん」から、僕の各媒体での発信を集約したライブラリ「Kudo Shu Library(KSL)」にアップデートしました。
最近はAIを使って、いわゆるバイブコーディングで遊んでいます。その一環でKSLの開発をしてみましたので、背景や方法などについて記録しておきたいと思います。
課題：なぜ開発するか
1. コンテンツが散在し、検索性が低い
- ブログ、Instagram、note、podcastなど各媒体でコンテンツを発信している
- そのため、全てのコンテンツを集約し、検索できるようにしたい
- 「ここを見とけばOK!!」という場所がほしい
2. 年間4万円のコスト
- じわじわとサーバー代とドメイン代がかかっていた
- 自主開発で使用しているVercelに統一して削減したい
- 今年は寄付たくさんしたいので、1,000円でも浮かしたい
→確認したところ、お名前.comに何にも使っていないサーバー代を年30,000円も払っていたことが判明。即解約。
3. 通知機能がない
- Instagramストーリーズではブログ/noteの更新投稿はしているが、見逃しも多い
- 僕のコンテンツを待ってくださるレアな方々に、しっかり届くように通知機能をつけたい
→ver1.0では、最小機能で出すべく、通知機能は一旦ステイした
方法：どう開発したか
最近、主にInstagramストーリーズで「在庫管理appつくった！」「シフトappつくってる！」など発信すると、興味を持ってくださる方からコメントいただくことが多いです。
「私も作りたい！」 という方のために、2026年2月27日現在の僕のバイブコーディング(AIを使ってコードを自分で書かずに開発することを指すらしい)の方法を記録しておきます。
ほぼ2年前の2024年2月7日には「WordPress、ノーコードで作れるようになってる！すげぇ！」と言ってたのに、時代の進歩は本当に凄まじいです。
WordPressでFigma気分で開発できた（ブログデザインをアプデしました）
kudoshu07.com
about me
- できること：webデザイン、簡単な要件定義
- できないこと：コードの読み書き(本当に少しだけ読める)
各手順で使用するツール
| 手順 | 使用ツール | 概要 |
|---|---|---|
| 課題書き出し | Notion | 要件定義の元となる課題をバババとNotionに書き連ねました。 |
| 大まかな機能案 | A4コピー用紙、Notion | A4コピー用紙に必要な機能構成を書き出して、Notionにテキストで文章をまとめました。 |
| 要件定義 for v0 | ChatGPT | A4コピー用紙の写真とNotionにまとめた文章をChatGPTにおくり、「v0に送るために最適な要件定義のプロンプトを作って」をお願いさせていただきました。 |
| 大まかなコード生成 | v0 | v0にさっきのプロンプトを投げて、簡単なデザインとコードを作成していただきました |
| 微修正していく | エディタ：Visual Studio Code エージェント：Codex |
v0が作ってくださったコードをエクスポートし、VS Codeでファイルを開いて、Codex(ChatGPTのコードを手伝ってくださるモード?)に相談させていただきながら、微修正を重ねました。 |
| 管理・公開！ | GitHub→Vercel | GitHubに微修正したコードをどんどんcommitしていき、最終的にVercel(v0と同じ会社?)で最新状態で公開してくれました |
補足：BESTは分かりまへん
この方法は、僕が元々Shopifyの編集をVS Codeでしていたり、ChatGPTに課金していたりという文脈に沿って、大学の先輩でありCodatum COOの 智哉さんに教えていただきました。
AIの進歩は凄まじく、もう情報を追いかけるのは諦めて、とりあえず”触ってみる"を優先しています。Geminiが良いやら、Claude Codeがすごいやら、色々と聞きますが、競争原理が全てのサービスを時間をかけながら一定ラインまで進化させるだろうと期待してます。
アウトプット
HOME画面：Twitterライク
中学の頃から大好きだったTwitter(今は離脱)を参考に、3カラムで構成。
中央のタイムラインで、ブログ・note・Instagram・podcastなど全てのコンテンツが時系列で表示される。
ブログ記事：noteライク
ブログコンテンツは、noteのように余計なものを表示せず、文章に集中できるようにしています。
また、ノリでいいね機能も簡単につけてみました。（いいねしてみてね）
記事執筆：VS Codeで書く
WordPressを失ったため、ブログの執筆はVS Code上で行っています。今回の記事もVS Code上で書いていますが、不慣れなため、慣れるまでは時間かかりそう。
バイブコーディングの感想
バイブコーディング、正直、めっっっっっちゃくちゃに楽しい！
自分が作りたいものが、AIとの日本語のコミュニケーションでどんどんと形になっていく感覚は、本当に感動的です。
非エンジニアの感覚としては、今までエンジニアメンバーと会話していた感覚でCodexと会話して、10-60秒後には実装までやってくれちゃってるような感覚です。
もちろん、セキュリティが求められる部分や運用コストが高い部分など、論点は色々あるのは理解しつつ、とにかくめちゃくちゃ楽しいです。
興味ある人はぜひやってみてください...！多分、やり方に関しては、このブログよりもYouTubeとかで見た方がわかりやすいと思いますが、一事例としてここに残しておきます（いつかAIのご飯になって、お役に立てるはず）。