AIと格闘したブログデザイン——クワイエットラグジュアリーを目指して2日間やり直した記録

はじめに

ブログの立ち上げが完了した翌日、次の課題はデザインだった。PaperModのデフォルトは機能的だが、素っ気ない。率直に言えば「20年前のホームページみたい」という感想が出るレベルだ。

目指したのはクワイエットラグジュアリー。派手さや装飾ではなく、余白・文字組み・色数の少なさで上質に見せるデザインだ。

結論から言うと、このデザイン実装だけで丸2日かかった。 しかも何度もやり直した。AIに任せれば一発で決まると思っていたが、そうはならなかった。

デザイン方針を決める

まずAIにデザイン方針を言語化してもらった。

• ベースカラーは白〜オフホワイト
• 文字色は真っ黒ではなくチャコールグレー
• アクセントカラーはグレージュ1色のみ
• 余白を十分に取る
• アニメーションは最小限
• 原色・強い青・派手なグラデーションは禁止

高級感は「静けさ」と「整ったレイアウト」で表現する。 これがコンセプトだ。

最初の実装——メモ帳みたいになった

方針が決まったのでClaude Codeで assets/css/extended/custom.css を作成した。PaperModはこのファイルを用意しておくと自動で読み込んでくれる。

しかし結果は散々だった。

1回目： 文字が背景と同化して見えなくなった。 2回目： 修正したら今度はメモ帳みたいになった。 3回目： CSSをリセットしてデフォルトに戻した。

原因はPaperModが独自のCSS変数（--theme・--primary・--contentなど）で色を管理していることだった。bodyに直接色を指定しても、PaperModの変数が上書きしてしまう。正しくはCSS変数ごと上書きする必要があった。

:root {
  --theme: #ffffff;
  --primary: #1A1A1A;
  --content: #1A1A1A;
}

この仕様を把握するまでに何度もやり直した。AIも最初は正しい方法を提案できなかった。

ダークモード問題

白背景を指定したのに、スマホで確認すると真っ黒になった。

原因はスマホ自体がダークモード設定になっていたことだ。PaperModは prefers-color-scheme: dark を検知して自動的にダークモードに切り替える仕様になっている。

このブログではダークモード自動切り替えを無効にして、常に白背景で表示することにした。.dark クラスとメディアクエリの両方を上書きして対処した。

ちなみにClaude.aiのアプリでHTMLプレビューを確認していたが、アプリ自体がダークモードを強制適用する仕様で、どれだけCSSで上書きしても黒くなり続けた。プレビューの限界に気づくまで時間を溶かした。

参考サイトを決めてから加速した

行き詰まったところで参考サイトを探した。最初はシンプルなガジェット系ブログを参考にした。白背景・サンセリフフォント・カード型レイアウトの構成だ。

しかしそれでもまだ「普通のブログ感」が抜けなかった。

そこであるラグジュアリブランドの公式サイトを参考にすることにした。クワイエットラグジュアリーといえばこのブランドのイメージだ。実際にChrome in Claudeでサイトを確認してみた。

参考にしたポイントはこうだ。

• ロゴが中央配置・超細字・letter-spacing広め
• ナビは極限までシンプル
• 余白が「意図的」に作られている
• フォントは細身のセリフ体
• コンテンツが左右いっぱいに広がっている

一番の差はコンテンツ幅と余白だった。 今のブログは max-width で中央に固めすぎていて、左右に何もない状態になっていた。そのブランドのサイトは左右いっぱいに使いつつ余白を「意図的に」作っている。

フォント選定

見出しと本文でフォントを使い分けることにした。

• ロゴ・見出し：Cormorant Garamond（細身のセリフ体）
• UI・ナビ・日付：Outfit（細身のモダンサンセリフ）
• 本文：Noto Sans JP（読みやすさ優先）

この3種類の組み合わせで「和の読みやすさ×欧文の品格」を出す構成にした。

ビルドエラーとの格闘

デザインが概ね固まったところで、新たな問題が発生した。

layouts/index.html に post_list_item.html というpartialを呼び出す記述をしていたが、このファイルはPaperModに存在しない。その結果、Cloudflare Pagesのビルドがエラーになり、変更がサイトに反映されない状態が続いた。

しかもビルドエラーに気づくのが遅れた。

理由はキャッシュだ。Cloudflareのキャッシュが残っていたため、ブラウザで確認しても古いページが表示され続けた。「なぜ変更が反映されないのか」と何度もCSSを修正し直したが、そもそもビルドが失敗していたのだ。

Cloudflareダッシュボードでデプロイログを確認して初めてエラーに気づいた。その後、Cloudflareのキャッシュを「Purge Everything」で全削除して解決した。

変更が反映されない場合はまずビルドログを確認する。 これが今回の教訓だ。

構造の見直し——固定ページが記事一覧に混在していた

デザインが落ち着いたところで別の問題が発覚した。プライバシーポリシー・免責事項・運営者情報・お問い合わせが記事一覧に混在していた。

原因は固定ページを content/posts/ に置いていたことだ。content/pages/ に移動してセクションを分け、ナビメニューの固定ページリンクをフッターに移した。これでトップページには記事だけが表示されるようになった。

URL設計——/log/に統一

記事のURLを /posts/記事名/ から /log/記事名/ に変更した。

hugo.toml に1行追加するだけで完結する。

[permalinks]
  posts = "/log/:slug/"

将来ガジェット系の記事を書くときは /gadget/記事名/ という別カテゴリーにする予定だ。

最終的なデザイン構成

2日間の格闘を経て落ち着いた構成はこうだ。

まとめ

デザインはAIに任せれば一発で決まると思っていたが、そうはならなかった。AIは提案できるが、実際にブラウザで見て「違う」と判断するのは人間だ。 また、ビルドエラーのチェックを怠ったことで無駄な時間を過ごした。

次回はSEO設計と記事運用フローについて書く予定だ。