MASASHI NAMIKI

JournalをVibe Codingした

文章を書く場所が欲しくて、このJournalを開設した。

世の中では、noteがトレンドだと思うけど、しっくりこない。SEOも優秀で、プラットフォーム内の回遊で読まれやすい。それでも、記事の中にアルゴリズムで他人の関連記事が表示される、文脈に入り込まれる。それだけで、もう違う。

デザインの自由も効かない。このJournal本文は、DNP 秀英明朝 Pr6Nの書体を選んでいる。印刷業界の老舗、大日本印刷。プロフェッショナルが磨いてきた書体。読み進める体験に影響する、文字間や行間もpx単位で調整した。そういうディテールを妥協できない。

WordPressなら、noteのペインを解消できる。関連記事も表示されないし、デザインの自由度も高い。ただ、管理画面が重い。機能が多くてノイズに映る。結局、馴染まなかった。次第に外部のシステムに預ける気が無くなっていった。

だったら、このWebサイトにJournalを作ってしまおうと考えた。Figmaでデザインを起こして、コードを書くのは時間が掛かる。だから、Claude Codeを使ってVibe Codingした。既存の構造を読み取り、記事一覧や記事本文のページが、一瞬でイメージ通りに生成された。

問題は、記事の投稿。HTMLを複製して、コードの中に本文を書き、記事一覧にリンクを追加。運用する前の時点で、フローが煩雑なのは目に見えている。だから世の中は、外部のシステムに頼るのかって納得した。

ちょっと考えた。投稿画面なんか世の中に溢れてる。プログラミングなのか。一行も書いたことないけど、それすら、Claude Codeに書いてもらえばいいんだって閃いた。

「投稿できる画面が欲しいんです」って相談したら、あっさり作れると返ってきた。そうして、ローカルで動くWebアプリも生成してもらった。

記事の一覧画面。
このWebサイトのデザイン構成を踏襲している。

プレビューの手間を無くすために、エディット画面をJournalのデザインに寄せた。GENERATEってボタンを押せば、表題や本文が組み込まれたHTMLが生成され、記事一覧も更新される。

記事の編集画面。
書体や画面幅は、実装した際の表示に合わせている。

ようやく、理想的な文章を残す場所が完成した。