個人サイトをWordPressからAstro Modularに移行しました

苔庭アルシェ（このサイト）を、WordPress（テーマ：Cocoon）から Astro Modular に全面移行しました。この記事では何をどう変えたのかを備忘録としてまとめます。

移行の概要

移行前：WordPress + Cocoon（無料テーマ）。固定ページ24件、ブログ記事21件。
移行後：Astro Modular をベースに、Cloudflare Workersでホスティング。
執筆環境はObsidian + Vault CMSプラグインに変更。Markdownで直接執筆し、Gitで管理する形に。

WordPressの管理画面での執筆・プラグイン依存から離れ、Markdown・Git・静的サイトという構成に切り替えたのが今回の一番大きな変更です。

サイト構成・URL設計の見直し

固定ページの入れ子構造を、旧サイトの「キャラクター別」から新サイトの「フォーマット別」に組み替えました。

旧URL	新URL	変更理由
`/character/kage/utau/`	`/downloads/utau/kage/`	UTAU音源だけ・MYCOEIROINKだけを横断的に見たい人の動線を優先
`/character/kage/corpus/`	`/downloads/voice-corpus/`	コーパスは苔色かげのみのため単一ページに統合
`/character/kage/mycoeiroink/`	`/downloads/mycoeiroink/kage/`	同上の方針を適用
`/character/yamo/utau/`	`/downloads/utau/yamo/`	同上
`/character/yamo/mycoeiroink/`	`/downloads/mycoeiroink/yamo/`	同上
`/character/terms-of-use/`	`/downloads/terms-of-use/`	ダウンロード関連としてグルーピング
`/vrchat-poster/`	`/downloads/vrchat-poster/`	同上
`/link/`	`/links/`	複数形化
`/character/download/`	（廃止）	各配布ページにBOOTHリンクを統合したため不要に
`/blog/`	`/posts/`	Astro Modularの標準ルーティングに合わせる
`/<記事スラッグ>/`（フラット）	`/posts/<記事スラッグ>/`	一覧ページ配下に統一

判断のポイントは以下のとおりです。

/character/はキャラクター紹介のハブに徹させ、音源そのものの解説・配布は/downloads/配下に集約。UTAU/MYCOEIROINKといったフォーマット単位で情報を探しやすくしました。
ブログ記事のスラッグ自体は変更せず維持。ほとんどがrx6600xtやgamecube-battery-replacementのような英数字ケバブケースで、SNSや外部からの参照が残っている可能性を考慮しました。プレフィックスの/blog/→/posts/だけでも影響があるため、スラッグまで変えるとリダイレクト設計が煩雑になります。
/blog/→/posts/は301リダイレクトで解決。Astro Modularの標準ルーティング（src/pages/posts/）は/posts/固定でハードコードされています。テーマ本体を改造して/blog/のままにする選択肢もありましたが、今後のテーマのアップデートに追従することを優先して、テーマ標準に従いました。

移行後も旧URLを踏んで404にならないよう、astro.config.mjsのredirectsに旧URL→新URLの301リダイレクトを全件登録しています（記事21件+固定ページの構造変更分）。

コンテンツ移行の流れ

WordPress管理画面から WXR形式でサイト構造をエクスポート。
wordpress-export-to-markdown でXMLをMarkdownに変換し、フロントマター（title/description/date/tagsなど）を整形。パス構造が深く、変換に失敗したページはWordPressの編集画面からプラグインを使って個別にMarkdownをエクスポート。
Astro Modularのコンテンツコレクション形式（src/content/posts/, src/content/pages/）に合わせて配置。画像はattachments/に相対参照で格納。
本文中の直書きURLを、後述する自動リンクカード生成に置き換え。内部リンクは相対参照に修正。
Markdownで表現しきれないレイアウトをHTMLに書き換え、CSSを記述。
移行中に内容を改善できるところを検討し、反映。

ブログ記事全21本と固定ページ24件（うち1件は廃止）を移行しました。技術系記事はShikiによるシンタックスハイライトが自動でかかるようになり、WordPress時代よりコードブロックの可読性が上がっています。

Astro Modularテーマ側のカスタマイズ

フォント：Poppins + M PLUS 1p（CDN配信）

見出し・本文フォントをPoppinsに変更し、フォント配信をlocal（セルフホスト）からcdn（Google Fonts CDN経由）に切り替え。
日本語グリフはPoppinsに含まれないため、M PLUS 1pをフォールバックとしてfont-familyに追加（'Poppins', 'M PLUS 1p', ...）。等幅フォント（JetBrains Mono）側にも同様のフォールバックを追加し、コードブロック内の日本語コメントなどが欠けないようにしています。
getGoogleFontsUrl()のロジックを拡張し、本文・見出し・モノスペースの3系統から使用フォントを自動収集してGoogle Fonts CDNのURLを組み立てるように変更。フォントごとに異なるウェイト指定（M PLUS 1pは100;300;400;500;700;800;900）にも対応。

日本語向けの文字数・読了時間ロジック

Astro Modularのデフォルトは英語の「単語数（スペース区切り）」を前提にした実装でした。日本語は単語間にスペースがないため、素のままでは記事の文字数・読了時間が正しく出ません。

抜粋・文字数カウントを、空白区切りの単語数から空白を除いた文字数ベースに変更。
読了時間の計算式を、英語の「200～250 words/分」ベースから日本語の「500文字/分」ベースに変更（日本語の平均読書速度400～600文字/分の中間値を採用）。
表示文言も"3 min read"のような英語表記から"3分"という日本語表記に変更。

自動リンクカード（remark-link-card-plus）の導入

本文中に裸で貼ったURLを、OGP画像・タイトル・説明文付きのリンクカードとして自動描画するremark-link-card-plusを新規導入。
botブロックや404でOGP画像の取得に失敗するホスト・URLを「サムネイル無効リスト」として登録し、壊れた画像が出ないようフォールバック処理を追加。

カスタムCSSレイヤーの新規構築

Astro Modularにはテーマカラー用のCSS変数体系がありますが、サイト全体のスタイルはsrc/styles/custom/配下に新規のCSSレイヤーとして追加しています。

ファイル	内容
`theme.css`	ライト/ダークのデザイントークン（配色・罫線・フォーカスリング・モーション設定）
`typography.css`	本文・見出し・リスト・引用・コード・表・画像の文字組みの詳細設定
`layout.css`	メインコンテンツ幅やグリッド/フレックスのレイアウトユーティリティ（`ta-`プレフィックスでTailwindとの衝突を回避）
`components.css`	カード・リンクカード・Notice（成功/警告/危険/情報）・バッジ・タグ・区切り線・定義リストなど
`buttons.css`	ボタンの基本形・バリアント・サイズ・サービス別配色（SoundCloud/YouTubeなど）
`embeds.css`	YouTube/SoundCloud/Bandcamp/Spotify/Xなどの埋め込み共通スタイル
`pages/discography.css`	ディスコグラフィーページ専用（アルバムカードグリッドなど）
`pages/download.css`	ダウンロードページ専用（配布物リスト・ファイル情報テーブルなど）
`utilities.css`	Tailwindにない独自ユーティリティのみ

合計で約2,300行を新しく追加しました。既存のglobal.cssはこれらを読み込むエントリーポイントとして再構成しています。

その他の設定変更

プロフィール画像：デフォルトで無効（enabled: false）だったものを有効化し、表示位置もフッターからヘッダーへ変更。
ナビゲーション：サイト固有の構成（Discography / Works / Character / Downloads / Aboutなど）に全面書き換え。Contactページは使用しないためリンクを撤去。
CSP：frame-srcにSoundCloudのドメインを追加し、埋め込みプレイヤーがブロックされないよう調整。
改行コード：LFに統一し、Obsidian（Windows/Mac混在）での編集時に意図しない差分が出るのを防止。
表示まわりのバグ修正：モバイル幅でのテーブルの不自然な余白、ダウンロードカードの横はみ出し、special系コンテンツの画像パス解決など、実際にコンテンツを流し込む過程で見つかった表示崩れを個別に修正。

まとめ

WordPress + Cocoonでの運用は手軽さがある一方、テーマの詳細なカスタマイズやMarkdownベースでの執筆には不向きな部分がありました。Astro Modular + Obsidian（Vault CMS）の組み合わせに移行したことで、

Gitでの差分管理ができる
Markdownで直接執筆でき、Obsidianの各種プラグイン（コールアウト・埋め込みなど）がそのまま使える
静的サイトのためCloudflare Workers上で高速に配信できる

というメリットが得られました。一方で、日本語サイト特有の文字数カウント・読了時間計算のように、テーマ側の英語前提のロジックを個別に手直しする必要がある箇所もありました。今後Astro Modular本体がアップデートされた際は、このあたりのカスタム差分を見ながら追従していく予定です。

真の目的は、維持費の節約にあります。ConoHa WINGを契約していましたが、WordPressから移行したことで不要になりました。契約満了後はドメインの更新料だけで済みます。レジストラもCloudflareに移管する予定で、ConoHa WINGが1年契約でおよそ¥13,000だったのが、Cloudflareでのドメイン代が.comと.spaceでそれぞれ1年$10.46と$25.20。日本円でおよそ¥5,837（※$1≈¥163.69）となり、年間およそ¥7,000の節約が見込めます。

そして、移行作業の補助にClaudeのProプランを活用しました。そもそもAstroに移行することを提案してくれたのもチャットAIでした。デスクトップアプリ版のClaudeでチャットのリサーチ機能を使ったり、Coworkでローカルファイルを読み込ませてタスクを行わせたり、Claude Codeでコーディングを代行させたり……。様々な場面でAIエージェントが役に立ちました。この記事もClaudeに書かせたドラフトから執筆しました。