🔬 不器用パパの休日
📘 学習ログ

WordPressをやめてClaude Codeでブログをリニューアルした話

WordPressでブログを運営していたけれど、管理画面が使いこなせない。記事を書くよりも設定をいじっている時間のほうが長い——そんな状態が続いていた。Claude Codeに手伝ってもらえば、会話だけでサイトを作り直せるんじゃないか。そう思って、ブログの全面リニューアルに踏み切った。

やってみた理由

きっかけは2つあった。

  1. WordPressの管理画面が使いこなせなかった — テーマ設定、プラグイン管理、DB操作……多機能すぎて非エンジニアには手に余っていた。記事を書くという本来の目的より、システムの管理に時間を取られていた
  2. Claude Codeに全部任せたかった — AIをインターフェースにしてブログを構築してもらう。管理画面を一切開かず、ターミナルでの会話だけで完結させたかった。それ自体が「AIで作る側になる」というブランドの体現になると考えた

やったこと

すべてClaude Codeとの会話で進めた。大きく分けて5つのフェーズがある。

Phase 1：SSH接続の準備

WSL2からXserverへSSH接続できるようにした。

  • SSH公開鍵をXserverパネルに登録
  • ~/.ssh/config にXserver用の設定を追加
  • ssh xserver で接続確認

Phase 2：Astroプロジェクトの作成

ローカル（WSL2）にAstroのブログテンプレートを作成した。

  • ~/Blog/bukiyou-papa-blog/ にAstro v5プロジェクトを構築
  • Tailwind CSS v4でスタイリング
  • Noto Sans JPフォントを導入
  • ダークモード対応

Phase 3：サイトデザインの構築

Claude Codeに設計要件を伝えて、トップページから各ページまで一気に作ってもらった。

  • ヒーローセクション（ブランドコピー＋CTA）
  • カテゴリ入口（4分割カード）
  • 最新記事一覧（カード型レイアウト）
  • 環境セクション（「この研究所の装備」）
  • レスポンシブ対応（スマホ・タブレット・PC）
  • About / Profile / Setup / Contact / Privacy Policy ページ

Phase 4：WordPress記事の移植

既存9記事をWordPressからMarkdownに変換した。

  • SSH経由でWP-CLIを使って記事本文を取得
  • 画像もXserverから取得して public/images/posts/ に配置
  • アフィリエイトリンクをテキストリンクに整理
  • トラッキングピクセルを .tracking divにまとめる
  • スラッグはSEO維持のため旧URLと同一を維持

Phase 5：デプロイ

ビルドしてXserverにアップロードし、WordPressと差し替えた。

  • npm run build でHTML生成
  • SFTPでXserverの公開ディレクトリにアップロード
  • WordPressファイルはバックアップフォルダに退避
  • Google Analyticsを設定
  • お問い合わせフォーム（Googleフォーム）を設置

結果

WordPressからAstro静的サイトへの完全移行が完了した。

  • 全30ページ構成のサイトが稼働
  • 9記事すべてをスラッグ維持のまま移植
  • 管理画面を一切開かずに運用できる体制が整った
  • スマホでの表示確認もOK

作業期間は実質2日（3月8日〜9日）。そのほとんどがAIとの相談・方針決定の時間で、実装はClaude Codeがやってくれた。

うまくいった点

  1. 管理画面を一切開かなくてよくなった — 記事の追加もデザイン変更もターミナルでの会話だけで完結する。これが一番大きい
  2. Claude Codeとの相性が最高だった — Astroはファイルベースの構成なので、Claude Codeが直接読み書きできる。WordPressのようにDBが絡まないのでシンプル
  3. 設計情報をCLAUDE.mdに集約できた — プロジェクト設計書を .claude/CLAUDE.md に書いておくことで、毎回説明不要で作業を開始できる
  4. 「AIで作ったサイト」自体が実績になった — ブランドコピー「AIで作る側になるまでの記録」を、サイトそのもので体現できた

失敗・課題

  1. デザインをもっとこだわりたい — 現状でも有料テーマ級のクオリティにはなったが、まだ改善の余地がある。余白やタイポグラフィ、アニメーションなど細部を詰めていきたい
  2. 方針決定に時間がかかった — WordPress継続かAstro移行か、複数のAIに相談して行ったり来たりした。最初から「会話で全部やりたい」という本音を軸に判断すればもっと早かった
  3. OGP画像の日本語フォント — 自動生成されるOGP画像で日本語フォントの表示が完璧ではない。改善が必要

次にやること

  • デザインの改善 — UI/UXを詰めて、より見やすく使いやすいサイトにする
  • 新規記事の量産 — 6セクションテンプレートで実験ログをどんどん積み上げる
  • Google Search Consoleのサイトマップ再送信 — Astro版の sitemap-index.xml を登録する
  • アフィリエイトの強化 — Amazonアソシエイトへの参加、記事内への自然なリンク配置
  • WordPressの完全削除 — バックアップを確認してから wp-backup/ を削除する

この実験で使った機材

  • XServerドメイン — このブログのサーバー・ドメインはエックスサーバーで運営しています