ここで、一つ告白をしなければならない。
今あなたが読んでいるこの文章。この画面。このデザイン。このブログプラットフォーム自体が、この物語の中で作られたプロダクトのひとつだ。
つまり、あなたは今、物語の内側にいる。
説明しよう。
このブログは「STOMPS」というプラットフォームの上で動いている。STOMPSは、僕がClaude Codeと一緒に作ったマルチサイト対応のブログ基盤だ。Astro 5で構築し、Tailwind CSS 4でスタイリングし、MDXでコンテンツを書き、Fly.ioにデプロイしている。
アラタ: 怪獣ログだけじゃなくて、複数のブログを同じ基盤で運用したい。共通の仕組みを使い回して、サイトごとの設定だけ変えれば新しいブログが立ち上がるような構成にできないか。 クロ: テンプレート化ですね。site.config.tsにサイト固有の設定を集約して、コンポーネントはpropsで差分を吸収する設計はどうでしょう。
最初のブログは「怪獣ログ」だった。テック系の雑記ブログ。それが軌道に乗ったあと、この物語——「121,805通のメッセージ」を載せるための場所が必要になった。
普通なら、noteやはてなブログに書けばいい。でも僕は、自分で作ることを選んだ。半年前なら考えられない選択だ。
この物語を載せるためのブログを、STOMPS基盤で作る。「chronicle」というプロジェクト名にする。デザインはダークテーマ中心で、物語に没入できるような雰囲気にしたい。
いいですね。STOMPSのテンプレートから新しいサイトを生成して、site.config.tsをchronicle用にカスタマイズしましょう。カラーパレット、フォント、レイアウトを物語向けに調整します。
このブログには、いくつかの専用コンポーネントがある。
一つは「ChronicleChat」。この物語の中で、僕とクロとハッチの会話を表示するためのコンポーネント。左にボーダーラインが入って、話者の名前がラベルで表示される。あなたが今まさに読んでいる、あの会話形式のブロック。
もう一つは「LogEntry」。ログファイルからの抜粋を表示するコンポーネント。ダークな背景にモノスペースフォント、行番号とタイムスタンプ付き。まるでターミナルの画面を覗き込んでいるような見た目。
アラタ: ChronicleChatコンポーネント。speaker propsで’A’（アラタ）、‘C’（クロ）、‘T’（ハッチ）を指定。それぞれ色とアイコンが変わる。 クロ: CHARACTER_MAPをsite.config.tsに定義して、そこからスピーカー情報を取得する設計にしましょう。拡張性も考慮して。
物語を語るための道具を、物語の中で作っている。メタ構造。入れ子。でも、これが現実だ。
考えてみてほしい。
半年前にターミナルを開いた人間が、今、ブログプラットフォームを運用している。記事を書いて、MDXファイルとして保存して、gitでコミットして、CIが自動でビルドして、Fly.ioにデプロイされる。SNSへの投稿も自動化されている。アナリティクスも自動で収集されている。
その全てのパイプラインを、僕が設計した。Claude Codeと一緒に。
ちょっと待て。つまりお前の物語を読んでる人は、お前が作ったプラットフォームの上でそれを読んでるってことか。
そういうこと。
メタすぎて頭がおかしくなりそうだ。
でも考えてみろよ。これ以上の「証明」があるか？ 物語の中で「プロダクトを作った」と書くだけなら、誰にでもできる。でも、読者がまさに今そのプロダクトを体験しているんだ。これは嘘がつけない。
あなたがスクロールしているこのページ。
表示速度、フォントの読みやすさ、ダークモードの配色、レスポンシブデザイン。これらは全て、Claude Codeとの対話の中で調整されたものだ。
あなたがもし「読みやすいな」と感じたなら、それは半年間の対話の成果だ。「読みにくいな」と感じたなら、それは僕がまだ成長の途上にあるということだ。どちらにしても、これが僕の現在地だ。
$ fly deploy —app stomps-chronicle ==> Building image ==> Pushing image ==> Creating release ==> Monitoring deployment —> v12 deployed successfully
v12。12回目のデプロイ。最初のデプロイから、12回の改善を重ねている。
このブログを読んでいるあなた。あなたは読者であると同時に、僕のプロダクトのユーザーでもある。この文章を読み終えるまでの数分間、あなたは僕が作ったものの中にいた。
それが、僕の証明だ。