yamotty.me のデザインを、書架の形に作り替えました。2012年から書いてきた記事137本を背表紙として棚に並べ、ニュースレターも「書架だより」と名前を改めています。

なぜ書架にしたのか

このサイトには、14年分の記事と、Podcastなど外部での更新をまとめて載せています。件数だけ見れば8割はPodcastですが、軸はあくまでブログです。

これまでは、記事とPodcastを新しい順に並べたタイムラインでした。最新のものは見つけやすい反面、14年書き続けてきた量が見えません。書架なら、背表紙の数と厚みがそのまま積み重なりになります。記事を書かなかった2013〜2015年も、棚の空きとしてそのまま見えます。

一方で、凝った演出は記事を読む邪魔にもなります。見せ場はホームの書架1か所に絞り、記事のページは目次と読了位置のある、静かな組版にしました。

Claude Codeの活用

最初に頼んだのは、Awwwards（Webデザインの国際的なアワード）で賞を獲れる水準を目指した案づくりです。Claude Codeは実際の記事データを使って、今のデザインを磨く案、全投稿を年輪状に配置する案、書架の案の3つを作り、デザインの比較検討やフィードバックはArtifact（ブラウザで開けるページ）で行いました。

最近は仕事でつくるレポートや、一人で実装までしているプロダクトもすべてArtifactを経由してClaudeとやり取りしていますが、革命的に便利だなあ、と思っています。

Claudeの挙動で面白かったのは自己採点で、組み上がったデザインに対して審査エージェントに制作意図を伝えず画面だけを見せ、Awwwardsの配点で採点させました。

欠点を直して撮り直すのを5回繰り返しましたが、最高は7.53点で、目標の8.0点には届かず。届かなかった理由として、和文組版の細部が弱いと自己申告してきました。

こいつ、なりきり力が高ぇ、と思いました。

設計で工夫したところ

• 背表紙の厚みは、字数の平方根に比例させています。初めは記事の字数に比例させようとしたのですが、中央値が3千字ほど、最長が約1万8千字と6倍近い差があり、そのまま比例させると長い記事だけが極端に太くなるという不確実性にぶつかりましたw

• 色は最初のタグで決まります。9つのタグに藍、生成、鶯、弁柄といった伝統色を割り当て、背の文字とのコントラストが4.5:1以上になるように選びました。新しい本ほど右に並びます。

• 記事の末尾には奥付と、愛読者カードの形をしたニュースレターの登録フォームを置きました。本を読み終えて、はさみ込みのはがきを手に取るような流れを狙っています。

• 同じ背表紙の絵は、SNSで共有されるカバー画像やメールの見出しにも使い回しています。カバーは背表紙に日本語の題を縦に、右側に英語の題を置いて、1枚を日本語版と英語版で共用できるようにしました。

実装で難しかったところ

難しかったのは、どれも日本語と縦書きまわりでした。

• 採用したZen Kaku Gothic Newには、句読点や括弧の余白を詰める機能（palt）がありません。CSSの自動詰めが効かないため、約物を1文字ずつ囲んで個別に詰めています。

• カバーやメールの画像を作るライブラリ（satori）は、縦書きに対応していません。1文字ずつ縦に積み、句読点や括弧は縦書き用の字形に置き換えて組みました。

• メールの見出し画像は当初、必要になったときにサーバーで描く方式でしたが、Vercel（ホスティング先）では最初の描画が10秒の制限を超えてしまいました。最終的に、記事を公開するときに画像を書き出しておく方式に切り替えています。

私は本を読んだりコレクションしたりすることに全く趣を感じない人間なのですが、自分が書いてきた文章はそれぞれ「本を書くつもり」くらいの熱量で書いてきた自負があるので、それを書架のデザインで表現するのは筋が良いな、と思い気に入ってます。