このサイトを、ほぼ話しかけるだけで作った

いま読んでいるこのサイトは、私がほとんどコードを書かずに作りました。やりたいことを日本語でAIに伝えて、返ってきたものを見て、また直してもらう。その繰り返しです。世間でバイブコーディングと呼ばれている作り方です。

きっかけ

矢本さんのサイトをVibeで作り直したという記事を読んだことが直接のきっかけでした。note、X、Substackと、発信の場所がばらけていて追いにくい。その課題が自分とまったく同じだったのです。

矢本さんはcatnose.meを参考にしたと書いていました。私はその矢本さん自身のサイトを下敷きにしました。プロフィールと、厳選した記事と、全発信を時系列に並べたタイムライン。あの構成をお手本にしています。

やってみて分かったこと

作り方は驚くほど素直です。「タイムラインをカード形式にして」「サービスへのリンクは他と見分けづらいから変えて」と頼むと、そのとおりに形になります。私はマーケターで、専業のエンジニアではありません。それでも実運用に耐えるサイトが組み上がりました。

矢本さんは記事の中で、品質を担保するには要件やデザインの定義をしっかり作り込むことが大事だと書いていました。作ってみて、この指摘に強く納得しました。手を動かす部分より、「何を、なぜ作りたいのか」を言葉にできるかどうかが効いてきます。ここは、日ごろの提案書づくりと地続きの感覚でした。

技術構成

備忘も兼ねて、いまの構成を残しておきます。

• フレームワーク: Astro 6 と Tailwind CSS 4。静的サイトとして書き出しています
• ホスティング: Cloudflare Pages。独自ドメインで公開しています
• デザイン: デジタル庁デザインシステムのトークンを土台にしました。配色やフォント、余白の基準をそこから借りています
• コンテンツ集約: noteの全記事をアーカイブとして保存し、Substackと手動追加のXと合わせて1つのタイムラインに統合しています
• 自動更新: GitHub Actionsで毎朝フィードを取得し、更新があれば自動で公開まで走ります
• 配信: 統合したタイムラインをRSSでも配信しています

おわりに

一点だけ、正直に書いておきます。バイブコーディングは万能ではありません。矢本さんが「複雑な構造物を素人が修理工場に持ち込む感覚」と表現していたとおり、中身を理解しないまま進めると、直せない場所が必ず出てきます。だからこそ、上流を言葉にする力が要ります。

とはいえ、個人のサイトをこの手軽さで持てる時代になったのは、素直におもしろいと感じています。散らばっていた自分の発信が、ようやく一つの場所に集まりました。