ホームページもClaude Codeでリニューアルした

100本を超えた頃から、ずっと気になっていたことがありました。

記事は増えた。コラム・ニュース・特集・API料金比較……と種類も充実してきた。でもホームページだけが、テーマのデフォルト表示のままだったのです。初めて訪れた人が見ると、「何のサイトなのかよくわからない」状態でした。

「いつかやらなきゃ」と後回しにしていたホームのリニューアルを、ようやくClaude Codeと一緒に着手したのが2026年3月18日のことです。

ホームページが「古いまま」だった

当時のホームは、WordPressのデフォルトテーマが表示する「最新記事一覧」でした。背景は白。記事カードが縦に並んでいるだけ。

コンテンツの内容には自信がありましたが、見た目が「ブログです」という雰囲気で、専門メディアっぽさが出ていませんでした。特に、初めてサイトに来た人が「このサイトは何をしてくれるのか」を直感的に把握できる構成になっていなかった。

記事執筆を自動化した勢いで、ホームもClaude Codeと組んでやってしまうことにしました。

デザイン方針を決める（スモークネイビー × Layered Depth）

まずNavにデザイン案を出してもらうところから始めました。

Navが提案した「Layered Depth」というのは、ページを縦にスクロールするにつれてセクションの背景色が少しずつ変化していく構造です。ヘッダーは深いネイビー（#1a2438）→ヒーロー（#161e30）→特集（明るいグレー）→フッター（濃いネイビー）と、自然なグラデーションで読者を誘導する設計でした。

ヒーローエリアのレイアウトも決まりました。左側にキャッチコピー＋CTAボタン、右側に「人気記事ランキングパネル」を460pxで配置する構成です。

WordPressの壁：CSSが全部消えた

デザイン案は3月18日の夜に固まり、Navがコードを書いてWPに投稿しました。テストページ（ID:5741）で確認しようとフロントページを切り替えた瞬間……スタイルが全部崩れていました。

「WPコンテンツ内に<style>タグを書いたら動く」という思い込みが崩れた瞬間でした。WordPressは自動的にpタグで整形するので、スタイルブロックを直接書いても無効になってしまうのです。

この日は設計を確定させてバックアップを取るところで一旦終了。フロントページは元に戻して、翌々日に仕切り直すことにしました。

2日後、ついに完成した

3月20日、追加CSSをオーナーが貼り付け、Navがコンテンツを調整する形で作業を再開しました。課題がいくつかありました。

セクションタイトルの色ズレ問題

特集セクションのタイトルと記事カードのあいだに白い隙間が出てしまうことがありました。原因は、WPのqueryブロックとその上のタイトルが別ブロックとして存在していたため、ブロックごとに背景色を設定するとズレが生じていたのです。

解決策は「セクションタイトルと記事カードを同一のqueryブロック内に統合する」こと。ブロックを分けずに一体化させることで、色ズレが根本から解消されました。

人気記事ランキングを動的表示にする

右パネルに表示する「人気記事ランキング」は、最初は手動で記事リンクを埋め込もうとしていました。でも記事が日々追加されるのに、ランキングを毎回手動更新するのは現実的ではありません。

WP Popular Posts（WPP）のREST APIを使って、30日間の閲覧数で上位記事を取得し、右パネルに動的表示する仕組みを実装しました。「WPPデータが0件の場合は最新記事にフォールバックする」という処理も加えて、プラグインが起動直後でもランキングが空にならないようにしています。

こうして3月20日の夕方、ホームページ（ID:5641）が公開されました。スモークネイビーの背景に、左のキャッチコピー・右の人気記事ランキング。ヘッダーも全ページでスモークネイビーに統一されました。

フッターも自動化した（1週間後）

ホームが完成したあと、フッターのウィジェットが気になりました。フッターには「おすすめ記事」として3本の記事リンクを手動で設置していたのですが、これも自動化できるはずです。

3月28日、WPP（WP Popular Posts）のショートコードをフッターウィジェットに埋め込む作業をしました。ところがここでも壁がありました。

rawモードでショートコードを埋め込んだところ、フッターのウィジェットが週間人気記事を自動更新するようになりました。手動更新が不要になってすっきりです。

ついでにClaude Code Desktopも試した

同じ3月28日、Anthropicが「Claude Code Desktop」という新しいインターフェイスをリリースしているのを知りました。コンピューター操作（クリック・スクロール・ブラウザ操作）をGUIでできるとのこと。スマホから指示を出せる「Dispatch」機能もついているらしい。

興味が湧いたので、実際にStep 5（プロジェクトフォルダの選択）まで試してみました。結論から言うと、今の自分には必要なかったです。

理由はシンプルで、Cursorの画面レイアウトに慣れてしまっていること、そしてDesktopは1画面切り替え式のため、複数のチャットを同時に確認できないことです。今は記事執筆チームと知人案件を並行させているので、複数チャットを行き来できる現状の方が生産性が高いと判断しました。

「便利そうだけど今じゃない」という結論でした。ツールは増やすより、今あるものを使い切る方が大事だと思っています。

まとめ

この話をまとめると、こんな感じです。

• ホームページのデザインはNavと相談しながら「スモークネイビー × Layered Depth」に決定
• WPのCSSは追加CSSで管理する（コンテンツ内に<style>を書いてもwpautopで無効化される）
• 人気記事ランキングはWP Popular PostsのREST APIで動的表示
• フッターウィジェットもWPPショートコードで自動化（rawモードが正解）
• Claude Code Desktopは試したが移行しないと判断

「作業そのものをAIに頼む」だけでなく、「どこに何を書くべきか」「なぜうまくいかないのか」という設計判断の部分でもNavが役に立つことがわかってきた時期でした。実装の壁に当たっても、Navが代替案を即座に提案してくれるので、作業が止まる時間が短くなっています。

次回は、毎朝Grokに自動でXのトレンドとAPI料金を監視させるようにした話です。