【前編】BTCインサイト──次世代CMS「Sanity」で公式サイトを作るまでの泥臭いバイブコーディング記

前回の記事「VS Codeの導入方法（Mac編）──バイブコーディングの"作業場"を整える」で準備万端な僕は、いよいよ「実践」的なバイブコーディングを開始します。

それはつまり、”人様に公開できる本格的なWebサービスを完成させる”こと。それもバイブコーディングだけで.....。

手始めに何を作ろうかといろいろ考えたのですが、どうせなら今の活動と連動する “自分のWebサービス” を作りたいなと。

僕のメイン業務（当時）は BTCインサイトというビットコインに関するニュースレターの運営ですから、やっぱりフォーカスするなら「コレだよね！」と、題材もすぐに決まりました。

そして、せっかくバイブコーディングを始めたのだから、次世代CMSを使ってゼロから公式サイトを構築してみたい──そんな想いが高まったのです。

そこで目に止まったのが【Sanity】というヘッドレスCMS。

バイブコーディング界隈では「WordPressより圧倒的に向いている」と推奨されていて、特にイケハヤさん（※僕は別にファンでも信者でもないですが）も一時期よく言及していました。

今でこそかなりSanityを使いこなせるようになりましたが、当時は導入だけで”何度”心が折れそうになったことか。

しかも、Sanity を動かすにはNext.jsやTailwindという“新しい技術仕様”の存在が不可欠だったことを、僕はこのときまだ知りません（これが本当に苦労した…… 笑）。

もちろん、Next.jsやTailwindはプログラマー界隈では当たり前の存在かもしれません。ですが、ノンプログラマーの僕にとっては、完全に“未知の世界”。

この技術たちが、のちに僕のバイブコーディング生活においてSanity以上に重要な存在になっていくなんて、当時は思いもしませんでした（それはまた別の記事でお話しします）。

前置きが長くなりましたので、本題に戻りましょう。

この記事では、そんな僕がバイブコーディングとともに、次世代CMS「Sanity」を使ってBTCインサイト公式サイトを作るまでに直面した泥臭い日々を、ありのままに綴っていきます。

Sanityって何者？

生理用品みたいな名前のキミは誰？

正直に言うと、最初にSanityという名前を見たとき、僕の頭には「サニタリー？生理用品のこと？」としか浮かびませんでした（笑・・失敬）。

でも、バイブコーディング界隈では

WordPressより柔軟で、コードと相性が良い
初心者でも扱いやすい“ヘッドレスCMS”
Next.js（※記事後半で説明します）との相性が抜群

と、やたら推されていたんです。

たとえばイケハヤさんも「バイブコーディングするならSanity一択」とよく言及していました（※くり返しますが、僕は別に彼のファンでも信者でもありません）。

僕自身がBTCインサイトというビットコインを扱う“ニュースレター”を任されていることもあり、どうせ作るならメディア運営と相性の良い何かを作りたいなと。

そんな想いもあって、ヘッドレスCMSのSanityが候補に急浮上したわけです。

ヘッドレスCMSって何？

さて、ここで少し技術的な話もしておこうと思うのですが、

ヘッドレスCMSとは、コンテンツを管理するCMS ＝バックエンド（サーバー、データベース）と、コンテンツを表示するヘッド＝フロントエンド（Webサイト、アプリなど）が分離したシステム

の総称です。

いや、まったく意味不明ですよね！（笑）僕も最初に学んだときは「？？？」だったので、もう少しわかりやすく説明してみます。

① CMSとは？

CMS（Content Management System）＝コンテンツ管理システムのこと。

簡単に言えば、

記事・画像・カテゴリーなどの “中身（コンテンツ）” を管理するための仕組み

です。

たとえば、ブログ運営に人気なWordPressも代表的なCMSの1つ。

記事タイトルを入力
本文を書く
画像をアップロードする
公開ボタンを押す

など、こういった“サイトの中身の管理”をすべてやってくれるシステムのことを”CMS”と言います。

② ヘッドとは？

一方、ヘッドレスCMSのヘッドとは、

「ヘッド（Head）」＝画面に表示される“見た目（フロントエンド）」の部分

を指します。

サイトのデザイン
ボタンの配置
文字のフォント
画像の並び方

こういった“ユーザー（読者）から見える部分”が ”ヘッド（＝頭）”です。

③ では、ヘッドレスCMSとは？

もうお分かりですね。

ヘッドレスCMSとは、ヘッド（＝見た目）がない状態 → 見た目を持たないCMS

という意味です。

つまり、

中身（データ管理）はCMSが担当する
見た目（フロント）は自分で作る

という“分業スタイル”になります。

＜参考動画＞

ヘッドレスCMSとSanityについては、この動画などがとても参考になりました（英語解説です）。

Sanityがバイブコーディングに人気な理由

Sanityのように、分業スタイルをとれるヘッドレスCMSのメリットは、バイブコーディングを駆使してフロント側（見た目＝ヘッド）を自分の好きなデザインで自由に作れる点にあります。

従来のCMSは、テーマ・テンプレートに縛られてしまうので、「カスタマイズがやりずらい」とか「プログラマーじゃなきゃ難しい」という問題がありました。

対してSanityをはじめとしたヘッドレスCMSは、「バイブコーディングを使えば、簡単かつ自由にカスタマイズできる！」という“ノンプログラマーの理想形”──。

なので、僕らのような文系を中心に一気に広まっていったのでした。

ですが──。

ここまで読んでみると、「なんだ、ヘッドレスCMSって合理的じゃん」「Sanityいいじゃん」と思われるかもしれません。

僕もまさにそうでした。理屈としては、とてもスマート。むしろ未来的。

ただし問題は、“見た目は自分で作る”という部分です。

ヘッドがないということは、裏を返せば「フロントは全部自分で組み立てる」ということ。

つまり、Next.jsやTailwindといった技術に真正面から向き合わなければならないという意味でもありました。

このときの僕は、まだその本当の難易度を理解していません。

「まあ、Geminiがいるし、なんとかなるでしょ！」

── そんな甘い考えが、のちに何度も打ち砕かれることになるのですが、長くなりましたので【後編】に続きます。