Claude Codeでブログサイトを一気に組んだ話 ─ sai-blog

ブログを作りたい、と思いついたのが昨日の夜。コンセプトを口頭で30分話して、 PPTで構想資料を出してもらって、そのまま素HTMLの雛形まで一気に組んでもらった。所要時間は実質90分。Claude Codeでここまで早くなるのか、と少し驚いている。

ポイントは「最初の30分で構想を全部固めること」だった。何を書く媒体か、誰に届けたいか、 design-saiという本体サイトとの差別化軸はどこか。ここを曖昧にしたままワイヤー作業に入ると、必ず後戻りする。前職で何度も経験した。

なぜ素HTMLから始めたか

Astroで雛形を作る選択肢もあった。むしろ最初はそうしようと思っていた。でも、まず1つわかったのが「ブログとしての読みやすさ」は、フレームワーク選定より先に固めるべきだ、ということ。

フォントサイズ・行間・文字間・1行の最大文字数。この4つを最初に詰めれば、あとはどんなフレームワークでも実装できる。逆に、ここを後回しにすると、「Astro入れたけど結局読みにくい」という最悪のパターンになる。

ニュース記事系のサイトを5つくらい見て回った。note、朝日新聞デジタル、 The Verge、WIRED、New York Times。本文サイズはどれも 16〜18px、行間 1.7〜1.95、コンテンツ幅 600〜780px に収まっていた。

結果、sai-blogの本文は 17px / line-height 1.95 / max-width 720px に落ち着いた。note より少し大きめ、朝日とほぼ同じ、The Vergeより行間広め。長文を読み続ける疲労を最小化することを最優先にした。

余白は「広めに」とkoから言われていた。これも最初に規約として固めた。段落間 1.6em、セクション間（h2 前後）2.4em / 0.6em、関連記事ブロックの前は 80px。数字を決めてしまえば、あとは機械的に守るだけだ。

余白は装飾ではなく、読者の目線を案内するレール。詰め込まれた文章は読まれない。

design-sai（本体）はブルーアクセントで「冷静・プロフェッショナル」を演出している。 sai-blog はマスタード（#D4A84B）アクセントで「親しみ・温度」を出す。書体は共通だけど、配色とリズムで完全に別人格を作る。

このブログには3つの軸を置く予定。

書くペースは、無理しないこと。月に4本でも、2本でも、書きたいときに書く。ブログの寿命を決めるのは、最初の3ヶ月の更新頻度ではなく、3年続くかどうかだから。

─── というわけで、これが最初の記事になります。次は「Claude × MCPで業務時間を週10時間削った話」を書く予定。AI軸のスタートとして、実例ベースで。