これまで技術寄りの真面目な話が続いたので、今回は軽めの話。このブログ、公開した直後の見た目は正直ダサかった。

最初の見た目、ただのAstroのサンプルだった

ブログ自体はAstroというフレームワークのスターターテンプレートを土台に作った。動くところまでは早かったんだけど、見た目はそのサンプルそのまま——青系のアクセントカラーに、素っ気ないデフォルトフォント。中身を「アラ熱」に差し替えただけで、見た目は完全に「よくあるブログのサンプル」だった。

これを見て、Claude Codeに向かって最初に放った一言が「ダサい」。せっかく作ってもらったのに身も蓋もない感想だけど、思ったことをそのまま伝えることにしてるので、正直に言った。

「デザイン担当」を作った

さすがに直そうとなったとき、マーケティングの相談と同じやり方を採用した。FigmaやCanvaみたいな外部のデザインツールには頼らず、Claude CodeにHTML/CSSを直接書かせて、実際にブラウザで撮ったスクリーンショットを見せてもらいながら「これでどう?」をやり取りする。俺は出てきたものを見て判断するだけで、手を動かすのは最初から最後までClaude Code、という役割分担。

配色とフォントを変えてもらった

まずは色。青系だったアクセントカラーを、暖色のオレンジに変えてもらった。背景も白ではなく、クリーム色に近い暖色系に。「アラ熱」っていう名前(アラフィフ+粗熱、まだ冷めてない)と、“熱中”というタグラインに合わせて、寒色より暖色の方が合ってる気がしたので、そう伝えた。ダークモードで見たときの色も別途用意してもらってある。

見出しのフォントも、素っ気ない標準フォントから、丸みのあるゴシック体に変えてもらった。これだけで、同じ文章でも受ける印象がだいぶ柔らかくなった。

記事一覧にもダメ出しした

配色を直してもらった後、今度は記事一覧のページを見て「タイトルと日付しかなくて、中身が無いように見える」とClaude Codeに伝えた。たしかに、タイトルと日付が並んでるだけで、クリックする理由が伝わってこない見た目になってた。各記事に説明文の抜粋と「続きを読む→」というリンクを追加してもらって、枠線付きのカードっぽい見た目に直してもらった。

挿絵を描いてもらった

最後に「殺風景だから挿絵が欲しい」とお願いした。ゆるい線画にベタ塗りしたようなイラストの参考画像と、俺自身の写真、愛犬の写真をClaude Codeに渡して、それらに寄せる形で3つのキャラクターをSVGで手描きしてもらった。ラップトップに向かう本人っぽいキャラ、AIの相棒であるロボット、そして愛犬。

このロボットのキャラ、出来上がりを見たら髪の毛(アンテナ)の位置がちょっと浮いていて、思わず「なんかズラっぽいな」と言ってしまった。ただこれが自分の中で妙に気に入ってしまって、「直さなくていい、このままで」とClaude Codeに伝えて、そのまま採用にした。狙って笑いを取りにいったわけではないんだけど、結果的にこのブログの隠れキャラみたいな存在になっている。気になる人は記事のどこかに出てくるので探してみてほしい。

今日の教訓というほどでもない話

今回は特に大きな学びがあるわけじゃなくて、単純に「見た目、後回しにしがちだけど早めに手を入れた方が読んでもらいやすい」というだけの話。ただ、外部のデザインツールを一切使わずに、Claude Codeとのやり取りだけでHTML/CSSとイラストまで全部完結できたのは、地味に嬉しかった発見だった。 あと、めっちゃかっこいいとかデザイニングされてて洗練されてるとかではなくてどこか素朴な緩いデザインが気が抜けててなんか気に入ってる笑 Claude Codeってけっこう茶目っけあるんすねw