ブログ移行プロジェクト進捗 #4 ─ サイトの見た目をまるごと作り直した

前回の進捗から1週間。今回はデザインを一新した回だった。

Pinterest で参考を見てから動かした

いきなり画面を触り始めるのではなく、先に Pinterest で方向を確認する手順を挟んだ。「実装前に Pinterest を見てほしい」という要望を受け、Claude Code のスキルとして調査を先行させる仕組みを作った。コピーも同様で、参考を見てから言葉を詰める流れにするスキルを用意した。

ホームの見た目を複数案から検討し、余白を広く取ったシンプルな技術系スタイルに揃えた。ホームだけで終わらせず、記事ページ・検索・アーカイブ・タイムマシンにも同じトーンを適用した。

左上の hide10.com の文字列表記を専用ワードマーク SVG に差し替えた。h の位置・サイズ・余白、ライト/ダーク切り替え時の見え方をそれぞれ調整し、ライト用とダーク用の2種類を用意した。

ヒーローエリアのコピーは最初の案を捨て、何度か作り直した。ヒーロー内の英語ラベルも減らし、日本語ベースに寄せた。

記事カードのアイキャッチ幅を広げ、SVG が端で切れる問題を直した。検索ページは入力即時実行をやめて遅延検索に変え、ボックスの文字位置と余白も調整した。

デザイン変更の過程でダークモードが崩れた。背景とカードの色がちぐはぐになり、ボタン類が暗い背景に埋もれた。面の色を揃え直し、ダークモード用ロゴを作り直し、onthisday の文字色崩れや年別アーカイブの余白崩れも個別に直した。フッター周りの不要な GitHub Issues 案内も削除した。

X に URL を貼るとアイキャッチが出ないことがあったので、ogp.jpg があればそれをカード画像として優先する実装を入れた。最近の記事には追加済み。

ai.hide10.com に本館の見た目が反映されていなかったので、サブドメイン用の設定とビルドスクリプトを修正した。GitHub Actions が submodule 参照ズレで失敗していた問題も直した。