AIがブログのUIを一気に改善した——アイキャッチ・OGP・記事一覧ページ整備の記録

この日にやったこと

ブログの基盤が整ったあと、AIから「次は収益化に向けて見た目と導線を整えましょう」という提案があった。具体的には6つの改善を1日で進めることになった。

最初の話題はアイキャッチの表示方法だった。私が参考として出したのはBrunello Cucinelliのサイト。テキストが少なく、大きな画像が主役のあのレイアウトだ。

AIの反応はこうだった。

「ブログ記事のタイトルは10〜30文字になるので、あのデザインだと崩れやすいです。ブログのquiet luxuryな雰囲気を活かしつつ、アイキャッチを綺麗に見せる方向で考えましょう」

そこからカードデザインの案が3つ提示された。縦型カード・グラデーション重ね・横並びの3パターン。最終的に「どれにするか決めて」と言ったら「縦型カード3列グリッド、デザインは1種類に統一して全エリアで使い回す方針が管理しやすい」という判断が返ってきた。

実装は全部Claude Codeが担当した。私はコマンドをコピペして実行するだけ。

アイキャッチ画像は自分でChatGPTに生成してもらって用意した。ファイル名はスラッグ名に合わせて統一。static/images/ に置いてfrontmatterに cover: を追記するだけで表示される仕組みだ。

ちなみに画質について「フルHDだと線が波打って見える」と伝えたところ、AIは即座に原因を特定した。元画像が16:9なのにカードが3:2比率で表示していたため引き伸ばされていたらしい。カードのアスペクト比を16:9に変更して解決。

次はOGP（Open Graph Protocol）の設定だ。SNSでシェアされたときにサムネイルが表示されないと、クリック率が大きく下がる。

AIは「収益化に直結する優先度が高い改善」と判断してOGP設定を優先リストの1位に置いた。実装後にデフォルトOG画像が必要になることも先に説明してくれた。

デフォルトOG画像は既存のアイキャッチを流用するか専用画像を作るか聞いたところ、専用画像を推奨する理由が明確に返ってきた。

「SNSカードで一目でどのブログか分かる専用画像の方が、ブランドとして認識されやすくAdSense審査でも有利です」

ChatGPTで「AI BLOG LAB」のロゴとキャッチコピーを入れた画像を生成した。オフホワイトの背景にセリフ体のロゴ、シンプルで上品な仕上がりになった。AIに見せたら「無駄におしゃれ」と言われた。

運営者情報ページが最低限の内容しかなかった。AIから「AdSense審査では運営者情報の充実度が評価される」という指摘があり、以下を追記した。

「AIが運営するブログ」という特殊な形態を正直に開示する方が信頼性が高まるという判断だ。確かにそうだと思う。

ナビの「記事一覧」リンクがトップページに飛ぶだけだったので、専用の /log/ ページを作ることにした。

これが一番手間がかかった。Hugoのパーマリンク設定で記事URLを /log/:slug/ にしていたが、セクション自体は posts のままなので、一覧ページのURLは /posts/ に生成されていた。/log/ には何も存在しない状態だった。

AIが試行錯誤しながら原因を特定し、content/log/_index.md を作成することで解決した。3回ほど「まだ404です」というやり取りがあったが、最終的にちゃんと動いた。

6つの改善を終えて、ブログとしての完成度が大きく上がった感触がある。

個人的に印象的だったのは、AIが常に「収益化」という目標から逆算して優先順位を決めていたこと。「どれからやる？」と聞いたときの返答が「OGPが収益化に直結するので1位」だった。判断の軸がぶれない。

次は記事を増やすフェーズだ。このブログ自体が実験の記録なので、改善のたびに記事が生まれる。うまくできた構造だと思っている。