WordPress→Lovable：100記事ブログを2日で移行した技術選定と3フェーズ戦略

この記事で得られること

• WordPressからモダンな静的サイトへの移行戦略
• Lovable（AI駆動のWeb開発ツール）を使った高速実装の実例
• SEOを守りながらURL構造を刷新する3フェーズ移行手法
• ChatGPTを活用した要件整理とプロンプト設計の実践例

前提情報

• 移行元：WordPress（5年運用・約100記事）
• 移行先：Lovable + Markdown管理
• URL構造：完全刷新（/index.php/<slug>/ → /ja/blog/<slug>/）
• 実装期間：約2日間

なぜ今、移行したのか

技術選定の背景

2025年後半、Lovableを触って感じたのは「ウェブサイト構築のスピード感が桁違い」ということでした。

WordPressも悪くはありません。でも：

• カスタマイズに時間がかかる
• プラグイン依存が多い
• Git管理が標準ではない
• 多言語対応が後付け

一方、Lovableは：

• LLMを使った高速プロトタイピング
• モダンなフロントエンド技術スタック
• Markdown + Git管理が標準
• 最初から多言語前提の設計が可能

「これからはLovableを使う」と決めたとき、同時に思いました。今、移行すべきじゃないか、と。

決断を後押しした要素

1. Git it Writeで事前準備していた

   • WordPressのプラグイン「Git it Write」で既にMarkdown管理していた
   • 移行のハードルが下がっていた

2. URL構造の技術的負債

   • /index.php/<slug>/という古い構造
   • 多言語対応を考えると限界

3. 記事数がまだ100記事

   • 200、300記事になる前に決断すべき

技術選定：なぜLovableだったのか

Lovableとは

Lovable（旧GPT Engineer）は、自然言語でWebアプリを構築できるAI駆動の開発プラットフォームです。

特徴：

• プロンプトベースでUI/UX設計
• React + TypeScript + Tailwind CSS
• 即座にプレビュー・デプロイ可能

Lovableを試してみたい方へ
この記事を読んで興味を持たれた方は、こちらの招待リンクからLovableを試せます。実際に触ってみると、「自然言語でここまでできるのか」という驚きがあると思います。

他の選択肢との比較

選択肢	メリット	デメリット	選ばなかった理由
Next.js手書き	完全な制御	実装時間	2日で完成しない
Gatsby	静的サイト特化	GraphQL学習コスト	オーバースペック
Hugo	ビルド速度最速	テンプレート学習コスト	AI活用との相性
Lovable	AI駆動で高速実装	細かい制御は手書きに劣る	✅ 採用

Hugoについて補足
Hugoは非常に高速で、カスタマイズ性も高い優れたツールです。しかし、Go言語のテンプレート記法を学習する必要があり、「自然言語でプロンプトを書く→即座にUIが生成される」というLovableの開発体験とは方向性が異なります。

今回のプロジェクトでは「2日間での実装」「AI駆動の開発」を重視したため、Hugoの学習コストを避けてLovableを選択しました。静的サイトジェネレーターとしてのHugoの性能は素晴らしく、「速度最優先」「完全な制御」が必要なプロジェクトでは最有力候補になると思います。

URL設計の選択：A案 vs B案

提示された2つの選択肢

ChatGPTとの対話で、明確な選択肢が提示されました。

A案：URL維持プラン（安全・保守的）

旧：/index.php/<slug>/
新：/index.php/<slug>/（そのまま）

• メリット：SEOダメージ最小
• デメリット：技術的負債の継続

B案：URL再設計プラン（成長重視）

旧：/index.php/<slug>/
新：/ja/blog/<slug>/（日本語）
    /en/blog/<slug>/（英語）

• メリット：多言語対応・長期的な強さ
• デメリット：短期的なSEOダメージ

SEO回復の見通し

ChatGPTが示してくれた回復期間の目安：

初期混乱： 1〜2週間（順位一時下落）
再評価：   3〜8週間（301経由で評価移行）
回復：     2〜4か月（旧URLと同等）
成長：     3〜6か月〜（構造改善効果）

重要な判断基準
「3年後も同じURL構造でいいか？」

答えがNoなら、記事数が少ない今が移行タイミング。

結論：B案を選択

3フェーズ移行戦略

最も重要だったのは、「段階的移行」の設計でした。

フェーズ1：デザイン確定（検索エンジン非公開）

目的： SEOに影響を与えずにUI/UXを完成させる

実装内容：

<!-- 全ページに設定 -->
<meta name="robots" content="noindex, nofollow">

# robots.txt
User-agent: *
Disallow: /

やったこと：

• Lovableで基本UI構築
• コンポーネント設計
• レスポンシブ対応

やらなかったこと：

• sitemap.xml生成
• canonical設定
• 本番公開

フェーズ2：マッピング・記事移行

目的： 旧URL→新URLの完全な対応付け

実装した内容：

1. 旧URL一覧の抽出

# sitemap.xmlから抽出
curl https://tielec.blog/sitemap.xml | \
  grep -oP '(?<=<loc>)[^<]+' > urls.txt

2. マッピング表の作成

old_url,slug,new_url
/index.php/wordpress-to-lovable/,wordpress-to-lovable,/ja/blog/wordpress-to-lovable/

3. Markdown移行

# Git it Writeでエクスポート済みのMDを配置
content/ja/posts/wordpress-to-lovable.md

課題と対処：

• 8割：自動マッピング成功
• 2割：手動確認が必要
  • カテゴリ変更があった記事
  • スラッグに特殊文字
  • 過去にURL変更履歴あり

フェーズ3：本番切替

目的： SEOを守りながら公開

実装内容：

// 301リダイレクト（Next.js例）
module.exports = {
  async redirects() {
    return [
      {
        source: '/index.php/:slug',
        destination: '/ja/blog/:slug',
        permanent: true, // 301
      },
    ]
  },
}

<!-- hreflang設定 -->
<link rel="alternate" hreflang="ja" href="https://tielec.blog/ja/blog/wordpress-to-lovable/" />
<link rel="alternate" hreflang="en" href="https://tielec.blog/en/blog/wordpress-to-lovable/" />
<link rel="alternate" hreflang="x-default" href="https://tielec.blog/ja/blog/wordpress-to-lovable/" />

切替時チェックリスト：

• 301リダイレクト動作確認
• noindex解除
• sitemap.xml生成・送信
• Search Console設定
• 主要記事の動作確認

Lovableへのプロンプト設計

最終プロンプト（抜粋）

ChatGPTと議論を重ねて完成したプロンプトは約1,000単語でした。

重要だったのは：

■ 今回のスコープ（フェーズ1専用）

やること：
- ブログ全体のベースデザイン
- 多言語前提のUI設計
- 将来のURL再設計に耐えられる構造

やらないこと（重要）：
- 本番公開
- SEO対応（canonical / hreflang / sitemap）
- slugの確定
- 旧WordPress URLとのマッピング
- 301リダイレクト

ポイント：

• 「やらないこと」を明示することで、Lovableが余計な実装をしない
• フェーズ1の役割を限定

移行元URLの扱い

■ 移行元ブログについて（参照用）

移行元URL：https://tielec.blog/

このURLは以下の目的でのみ参照してください：
- 情報量・記事構成の把握
- デザイン参考

以下の用途では使用しないでください：
- URL構造の踏襲
- slugの確定
- SEO設計

「参照はOK、真似はNG」を明示することで、デザインの質を上げつつ、URL設計は独立させました。

実装期間：2日間の内訳

Day 1：基本構造

• 午前： 要件整理（ChatGPTと対話）
• 午後： Lovableプロンプト作成・実装開始
• 夜： UI調整・コンポーネント設計

Day 2：機能追加

• 午前： 記事一覧・詳細ページ
• 午後： カテゴリ・タグ・検索機能
• 夜： レスポンシブ対応・最終調整

比較：WordPressで同じことをやると？

• サーバー準備：半日
• テーマ選定・カスタマイズ：1〜2日
• プラグイン設定：半日
• 多言語対応：1日

合計：3〜4日（Lovableの約2倍）

移行後の現状

SEOの影響

現時点（移行直後）：

• PVへの大きな影響は見られない
• Search Consoleで監視中
• 長期的な影響は不明

今後の予定：

• 3ヶ月後の定点観測
• 主要記事の順位追跡
• 結果は続報として公開予定

運用の変化

良くなった点：

• Markdown + Git管理で履歴管理が明確
• PRベースのレビューフローが可能
• 多言語対応の準備が整った

これから取り組むこと：

• 記事執筆スピードの向上
• 英語記事の追加
• Git管理フローの定着

学んだこと

1. AI駆動開発の威力

LovableとChatGPTの組み合わせで、従来の半分以下の時間で実装できました。

ポイント：

• 要件整理にChatGPT
• 実装にLovable
• それぞれの役割を明確に

2. 段階的移行の重要性

一気にやろうとすると、判断が雑になります。3フェーズに分けたことで：

• フェーズごとに立ち止まって考える余白
• SEO事故のリスク最小化
• 各段階での学習機会

3. 「やらないこと」の明示

AIへのプロンプトでも、プロジェクト設計でも、制約が品質を高めることを実感しました。

まとめ

5年・100記事のブログ移行は、決して簡単ではありませんでした。でも：

• Git it Writeで事前準備していた
• ChatGPTで要件を明確化した
• Lovableで高速実装した
• 3フェーズ戦略でリスクを分散した

これらが揃ったことで、2日間での移行が実現しました。

SEOの回復はこれから。でも、長期的に見れば、今が移行のベストタイミングだったと信じています。

もし同じ状況なら、迷わずB案を選びます。

技術的負債は、時間とともに膨らみます。向き合うタイミングを見極めて、投資に変える。それが、エンジニアとしての判断だと思います。

AI駆動開発に興味がある方へ
この記事で紹介したLovableは、プロンプトベースでWebアプリを構築できるツールです。「本当にそんなに速いの？」と思われた方は、ぜひ実際に試してみてください。

特に、「アイデアはあるけど実装に時間がかかる」と感じているエンジニアには、新しい選択肢になると思います。

---

参考

• Git it Write - WordPress公式プラグインページ
• Git it Write - GitHub - ソースコード
• Git it Write 公式ドキュメント - 使い方・詳細
• Lovable - AI駆動のWeb開発プラットフォーム
• 多言語サイトとURL構造 - Google

---

補足説明：

Git it Writeは、GitHubリポジトリのMarkdownファイルをWordPressの投稿として自動公開できるプラグインです。

主な機能：

• GitHubのMarkdownファイルをWordPress投稿として同期
• Webhook対応（リポジトリ更新時に自動プル）
• 階層構造のサポート
• フロントマター（メタデータ）対応

このプラグインを使っていたことが、今回のスムーズな移行につながった重要な伏線でした。

---

こうした判断や内省のプロセスを、
エンジニア向けにもう少し整理して書いています。

興味があれば、こちらにまとめています。
https://tielec.blog/