AIに「それ、毎日使う？」と聞かれてCMSを作ることになった話

冒頭でも書きましたが、このブログはSanityというCMSで記事を管理しています。

CMSというのはContent Management Systemの略で、日本語にすると「コンテンツ管理システム」です。
WordPressもCMSのひとつで、ブログを書いている人なら名前くらいは聞いたことがあるかもしれません。
Webサイト上のコンテンツ（記事や画像など）を作成・編集・公開するための仕組みのことです。

お店に例えると、お客さんが目にする店頭の商品棚が、Webサイトに表示されている記事やページです。
CMSは、その裏にあるバックヤードのようなものです。
新しい商品を入荷して棚に並べたり、値札を付け替えたり、売れ残りを棚から下げたりする。その裏側の管理業務を担っているのがCMSです。

自分はSanityを日常的に使っているので、CMSの仕組みはなんとなくわかっていました。
でも、自分でCMSを作ったことはありませんでした。

CMSを作ってみようと思ったきっかけは、「次に何を作ろうか」をAIに相談したことです。

この記事では、なぜCMSを作ることになったのかを書いています。
全4回のシリーズで、途中で何を言われているかわからなくなったりイラっときたりした場面も含めて記録しました。

「Link-in-Bioアプリを作りましょう」にNoと言った話

少し前に、Claudeと一緒に「Insight Notes」というメモアプリを作りました。
もともとはGeminiというAIに提案されたアイデアで、それをClaudeと検討しながら改良して完成させたものです。
これがClaude Codeで作った初めてのアプリで、記事の作成・取得・更新・削除（CRUD）の基本を一通り学ぶことができました。

その勢いで、次は何を作ろうかとGeminiに相談してみたところ、「自分専用のLink-in-Bioアプリ」を提案されました。
LinktreeのようなプロフィールリンクページをNext.jsとSupabaseで自作しましょう、という内容です。
提案自体は論理的で、認証機能やデータベースのセキュリティも学べるし、完成したら自分のポートフォリオにもなるとのことでした。

この提案をそのまま、今度はClaudeに共有して、どう思うか聞いてみました。

返ってきた答えは、こうでした。

技術的には正しい、でも「誰のため？」という問いが弱い

Claudeは、Link-in-Bioアプリ自体にはすでにLinktreeやBio.linkなどの無料サービスがたくさんあること、「自前で作った」という学習価値はあっても、それ自体が資産になるかは疑問だということ、そして何より、こう聞いてきました。

Link-in-Bioは、自分で毎日使うものになりますか？

これはけっこう刺さりました。
確かに、Insight Notesが良かったのは、実際に自分で使うアプリだったからです。
使っているうちに「ここが不便だな」と気づいて、それが改善のきっかけになった。Link-in-Bioを作ったとして、それを毎日開くかと言われると、正直そうはならないと思いました。

そこでClaudeが代わりに提案してきたのが、「記事の下書き管理・公開管理ができるシンプルなCMSもどき」でした。
認証機能はLink-in-Bioと同様に学べて、しかも自分がブログをやっている以上、実際に使い続けられる可能性がある。

こうして、CMSもどきを作ることに決まりました。

コードを書く前にやったこと

CMSを作ると決まって、すぐにコードを書き始めたわけではありません。

Claudeに「じゃあ始めましょう」と伝えたとき、最初に返ってきたのはコードではなく、「まずproduct-requirements.md（要求定義書）を作りましょう」という提案でした。
プロジェクトの「北極星」になるドキュメントで、コードは1行も書かずに、まず「何を作るか」を言語化することに集中するという進め方です。
Insight Notesのときも同じ流れだったので、ここは迷いなく進められました。

Claudeから「CMSもどきと言っても幅が広い、どのくらいの機能感を想定していますか？」と聞かれて、こう答えました。

MarkdownでブログのようなコンテンツをCRUDできて、下書き・公開の状態管理がある。カテゴリ管理やタグもあるくらいでいいのではないでしょうか。複数人で使うところまでは行かなくていいと思います。

この段階でClaudeが「今は決めなくていい」と判断したものもありました。
たとえば、公開ページを作るかどうか。公開ページを入れると認証の複雑さが増すから、まずはCRUDと管理画面に集中して、公開ページは後から検討しましょうという判断です。
タグの管理UIも同じで、「まずタグをテキスト入力で実装して、専用のUIが必要かどうかは使ってみてから考えましょう」と言われました。

こうやって要求定義書ができあがり、次はNext.jsとSupabaseのセットアップに進みました。

次の記事では、4つのサービスを使った土台作りから、ログイン機能、記事のCRUD実装までを書いています。

Vibe Codingで作ったものの全体像は、まとめ記事にまとめています→
Vibe Codingとは？プログラミング未経験の40代がAIだけでブログとアプリを作った記録