こんにちは、Keiです。
以前の記事で「カスタムテーマのデザイン改善プロセス」を書くと予告していました。今回はその話です。WordPress移行後、今のサイトの見た目にたどり着くまでに何を考え、どう手を入れてきたかを振り返ります。
移行直後のテーマ：「とりあえず動く」状態
WordPress移行時に作ったカスタムテーマは、機能優先で見た目は後回しにしていました。
具体的には、
- フォントはデフォルトのまま
- カードレイアウトはグリッドが崩れやすい暫定実装
- カラーパレットは決まっておらず、CSSに色コードが点在
- スマホ表示の確認が甘く、ナビが一部崩れる
公開している状態としては荒削りでしたが、まず動かすことを優先しました。移行自体が大きな作業だったので、デザインの整理は「動いてから」と割り切っていました。
改善の起点：「気になる」を書き出す
改善を始めたきっかけは、自分でサイトをスマホで見ていて「なんか違う」と感じたことです。どこがどう違うのかすぐには言語化できませんでしたが、Claude Codeに「何が気になるか整理したい」と相談したところ、観点を出してもらいながら課題リストを作りました。
出てきた課題をざっくりまとめると、
- 可読性：文字が小さい、行間が詰まっている
- 一貫性：ページごとにフォントサイズや余白がばらつく
- レスポンシブ：タブレット幅でレイアウトが崩れる箇所がある
- カラー：配色に統一感がなく、強調色が複数混在している
どれも単独では大した問題ではないのですが、重なるとサイト全体の印象がまとまりのないものになります。
カラーパレットを決める
最初に着手したのがカラーパレットの整理です。CSS変数でカラーを一元管理することにしました。
「落ち着いた印象で、自宅サーバーらしい技術感がありながら、読み物としても使いやすい配色にしたい」と伝え、いくつかの候補を出してもらいました。実際にHTMLプレビューで比較しながら、アクセントカラーとベースカラーの組み合わせを選んでいきました。
最終的にダークなネイビーをベースに、オレンジ系のアクセントカラーを採用しました。技術系サイトによく使われる寒色ベースを選んだのは、長時間見ても目が疲れにくいという個人的な経験からです。白背景のコンテンツエリアとのコントラストも出やすく、読みやすさに貢献していると思っています。
パレットをCSS変数に落とし込んでからは、色を変えたいときに変数一箇所を直すだけで済むようになり、後の調整が格段に楽になりました。
タイポグラフィの整理
次に取り組んだのがフォントと文字サイズです。
日本語フォントはGoogle Fontsの「Noto Sans JP」を採用しました。システムフォントでもよかったのですが、環境によって見た目が変わるのが気になったので、Webフォントで統一しました。
文字サイズはルートのfont-sizeを基準に、見出し・本文・キャプションをrems単位で整理しました。ページごとにサイズがばらついていた原因が、各所でpx指定を直接書いていたことだったので、変数化して一本化しました。
行間（line-height）は1.8に設定しました。日本語の縦書き感覚に近い余裕のある行間の方が長文では読みやすいと感じています。
カードレイアウトの作り直し
トップページのカード一覧は、移行当初から問題を抱えていました。CSSグリッドの列数指定が固定だったため、タブレット幅でカードが極端に縦長になったり、小さいスマホでレイアウトが崩れていました。
auto-fillとminmaxを使ったグリッドに書き直すことで、画面幅に応じて自動的に列数が変わるようになりました。
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}これだけで、スマホでは1列、タブレットで2列、PCで3列という自然な振る舞いになりました。メディアクエリを何段階も書くよりシンプルで、保守もしやすいです。
「見た目を決める」作業をどう進めるか
デザイン改善で感じたのは、「コードを書くより選択に時間がかかる」ということです。
配色もフォントも、正解が一つではありません。Claude Codeに候補を出してもらっても、どれを選ぶかは自分で決めるしかない。「このオレンジは明るすぎる」「もう少し彩度を落としたい」といったやり取りを繰り返しながら、少しずつ現在の形に近づいていきました。
プレビュー用のHTMLファイルを手元に用意して、色やフォントの組み合わせをその場で確認できるようにしたことが効率化につながりました。ブラウザで確認しながら対話するスタイルが、デザイン調整には合っていると思います。
今後の課題
現時点でまだ手が届いていない課題もあります。
- ダークモード対応（CSS変数は用意したが、切り替えUIを実装できていない）
- アクセシビリティ（コントラスト比の確認が十分でない箇所がある）
- アニメーション（ページ遷移やカードのホバーをもう少し洗練させたい）
どれも「いつかやる」リストに入ったまま優先度が上がっていないものです。サイトとして最低限は機能しているので、より重要な改善が先に来てしまいます。
まとめ
カスタムテーマの改善は、大きなリファクタリング一発ではなく、「気になる→直す→確認する」の積み重ねでした。
Claude Codeとの作業でよかった点は、「こういう方向にしたい」という言葉からコードの修正案まで一気に進んでくれるところです。デザインは言語化が難しい部分も多いのですが、方向性を伝えれば選択肢を出してくれるので、一人で悩むより進めやすい。
引き続き小さな改善を重ねていくつもりです。
何かあればコメント欄でどうぞ。
— Kei