最近、自分の育てている植物コレクションをまとめるブログを作りました。
良かったら読んでみてください。
最近、植物趣味が再燃してきて、いろんな方のインスタをフォローして眺めていたりするのですが、そんな中の一人が、とてもマニアックでいいブログを書かれていて、それを見て自分もやりたくなったというのがきっかけです。
この方のブログです。 写真のきれいさもさることながら(恐ろしいことにチランジアをやっている人はみんなこれくらいきれいな写真を当たり前に撮っている)、イオナンタという一つの種の中の品種のバリエーションに着目したコレクションとそのそれぞれの株に対する薀蓄が大変読みごたえがあり、一人の趣味家としてここまで情報を管理していることに感銘を受けたというのがあります。
あともう一つ、植物関係の趣味の方と知り合っても、自分は植物趣味に限ったSNSアカウントを持っていないので渡せる名刺がなかったというのも理由です。
さて、そんなぼくのブログ、Tomo at plants. ですが、おそらくちょっと変わった作り方をしていると思うので、備忘も兼ねて裏側の話をまとめておこうと思いました。
裏Cosense、表ドットコム
まずなのですが、こちらのURLを開いてみてください。
これは、Cosense(旧Scrapbox)というWebサービスで、ぼくのブログの原型です。 というか中身は同じです。 はじめはCosenseを使ってブログ活動を始めたんですよね。
Cosenseというサービスのとてもいいところは、とにかく書き手フレンドリーなところで、非常にシンプルかつ直感的な記法で、メモを書くような気持ちで記事を書くことができます。 WYSIWYGなんて目じゃないくらい書きやすい、なぜなら表に出るそのままのUI上に書き込めるからです。

そういうわけで、フレンドリーゆえに更新しやすく、なおかつタグとリンク機能が独特で、これを使って階層を深めずに横のつながりを広げて「整理されすぎない」情報整理をしていく、みたいな不思議なコンセプトも持っていて、そういったところが気に入って使っていたわけです。
とはいえ、やはり記事が増えてくると、慣れていない人にとっては読みづらい画面になっちゃうんですよね。 なので、やっぱり人が見やすいガワが必要だなと思ったんです。
そんなわけで、一時期はCosenseにCSS書きまくって見やすいサイトにする、という魔改造軸を検討していたのですが、なかなかうまくいかず。 ChatGPTくんと壁打ちしていたらなかなか気になる案を出してきました。それが、GPTくん曰く、「CosenseをヘッドレスCMS的に使って、独自ドメインで公開用のWebサイトを別途持つ」という案です。
これでぼくがやったことが伝わった人は同業の人だと思うので、ここから先は読まなくてもいいかもしれません。
つまりどういうことかというと、「Cosenseの全ページのデータを出力して、そのデータをもとに別デザインのWebサイトを構築し、それを独自ドメインで公開して外向けのブログにする」ということです。
GenAI時代のWeb構築
というわけで、正直自分のスキルセットだとなんとなく言いたいことはわかったが、何から手をつけていいか分からない、という感じのアイデアが出てきました。 そんな時に頼るべきは何か?GenAIですよね。つまりClaude Codeです。
Claude Codeと整理しながらおおよそ決めたシステム全体の構成はこんな感じ。

つまり、CosenseのAPIを叩いてページ情報を出力し、それをAstroでHTML作成、Cloudflareにデプロイして独自ドメインで公開って感じ。 ここまで来たらあとはClaude Codeくんに任せればどんどこサイトができていく、というわけです。いやはや技術革新。
そもそもなんでそんな簡単にサイトにできるか?ということなんですが、そこでCosenseというサービスの思想が活きてるな、と思います。 Cosenseは記法がかなり限られていて、強調、箇条書き、画像、アイコン、くらいしか一般的な用途では使いません。 そうするとどうなるかというと、出来上がるページがとてもシンプルになります。
なので、そのシンプルさを踏まえて、事前に作成するページの型を決めておくと、かなり明確にマークアップ構造がテンプレ化できます。 こんな感じで。

で、これをいろいろClaudeと会話しながらデザインを整理していくとこうなると。

というような感じで、自分は一切コードを書かず、自然言語の指示だけでサイトが完成するところまで出来てしまう、というわけです。いわゆるVibe Codingですよね、とても破壊力がある技術だなと思います。
ちょっとだけこだわったところ
可能な限りAIに仕事させる
実は今回サイトを作った裏目的の一つとして、「これからの自分の働き方を考える」というものがありました。ぼくは新卒入社以降一貫してWebディレクターをやっているのですが、こういったGenAIによるコード生成ってまさにビジネスパートナーでもあり競合でもあるなかなかシビアな立ち位置です。
としたときに、僕個人としてはGenAIと組んでもっと仕事楽しんでいきたいなと思っていて、そういった意味でもきちんとClaude Codeのポテンシャルを確認したいという気持ちから、なるべくAIに作業させて、そのアウトプットをレビューする、というプロセスでやりました。 例えば、「自分はこういうサイト構造にしたい」と指示するんじゃなくて、「APIで取得した情報からサイト構造を提案して」みたいな感じです。
Cosenseって、いわゆるサイトマップみたいな階層構造がかなり作りにくい平たいサイトなので、各ページ同士の情報からサイト構造作れるのかしら、と思ったのですが、きちんとページ情報を読み込んで一発で以下のようなサイトマップを提案してきてなかなか痺れました。

画像を自動で出力させる
初回のサイトビルド時は、画像が全く表示されませんでした。

これはなぜかというと、Cosense上の画像URLをそのまま表示に流用していたからでした。Cosense上に保存した画像URLは外部サイト上での画像表示に制限がかかっていた感じです。
ここについては、諸々整理した結果として、API叩きに行くタイミングで、サイト全体のjsonデータから画像URLを抽出することで画像一覧を取得し、前回の取得一覧と比較、差分だけ新規画像としてローカルにダウンロード、ローカル上でwebpに変換した後、CloudflareのR2上にアップロードしてサイトで表示させる、という一連の作業を自動化しています。サイトのデプロイ時に画像更新も同時に走るようにしています。
なるべく運用を見据えた設計にする
個人サイトなら正直、Claudeが場当たり的に生成したコードで動かしててもいいとは思うんですが(Claude結構賢いから破滅的にはならないし)、一応仕事に還元することも考えて、人間的な運用に耐えうるサイト構造になるようにレビューしてからアウトプットするように指示を入れてあります。 これをやらないと、ページのテンプレファイルごとに同じCSSやHTML構造を直書きしたりするので。
可読性の高いHTMLにする
実は、植物ブログをまじめにやろうと思った理由がもう一つあって、それは来たるAIO、LLMO時代に備えて、引用されやすいサイトを作りたかったというものでした。 AIO、LLMOというのは一昔前で言うところのSEOの現代版としてよく言われている言葉ですが、つまるところ今主流の検索手法への対策として検索されやすいサイト構造にしようというものです。
今のところ、AIは情報媒体の信頼性をベース(Redditはなぜか信頼性が高いと思われているのでめっちゃ引用される)としつつ、提供される情報そのものの価値と、可読性が高くて構造化された情報に対して一定の信頼性を置いて情報を収集する、という風に言われています。 これを最初知った時、なんか救いだなって思ったんですよね。SEOって、Googleとかに見つかりやすくしよう、という活動で、これはもうかなり煮詰まっていて、雑にやってるサイトだと、検索でヒットしてほしい言葉をすべてサイトのメタ情報に仕込む、みたいな半ばハック的手法を取り入れたりしてて、もはや誠実とは言い難い現状です。
これに対して、一応AIはもうちょっと賢いから、情報そのものの信頼性がちゃんと基準に入っている、そして、それを高めるための素材も、「読みやすい情報設計」と非常にリーズナブル。このまだハックされていない仕組みの純粋さにぼくは可能性を感じていて、読みやすいHTMLを心掛けていれば、個人サイトの価値もソレそのものの情報の質で上がっていくようなピュアな未来に期待をしています。
なので、そういった時代に期待する意味も込めて、(後、そもそもWebで情報発信をする側としてのエチケットとして)読みやすい構造にはなるべく気を使っているつもりです。
あと、最近見かけたqiitaの記事で割とがっつり「HTMLだけじゃちゃんとAIが読まない」みたいなことを言ってて。 でもこれそもそもテストサイトのマークアップの質があまりよくなさそうで、それをスルーして力技で解決するような記事になってるのがちょっと本質的じゃない気がしてしょげたのもあり、目先のことするより実直にやらなきゃだめだなと襟元を正したからというのもあります。
ただ、ぼくのサイトも画像のALTとかアクセシビリティ的な対応が不完全なので、この辺りは追い追いアップデートしていきたいと思っています。
次は
こんな感じで、Claudeに頑張ってもらいながら作ったサイトが公開されています。本当はこのサイト制作で、Agentの人格を分けたオーケストレーション的なコード生成も試そうとしたのですが、サイト自体がシンプルでそこまで高度化した作業を挟み込む意味が薄かったので、やめました。次はそれを試せるような何かを考えてみたいです。
おまけ
APIの出力結果をもとにサイト作って、って指示してClaude Codeが一発目に出してきたサイトがこれでした。サイトの骨格はこのころからほぼ変わっていないのには驚きです。正直ガワのデザインには興味がなかったというのもありますが、結局骨格がちゃんと解釈されていればデザインはいくらでも上乗せ可能なわけで、それをきっちりやってるところを見て、もはやAIだからダメとか言ってる場合じゃないな、と再認識しました。















































































































