AIに丸投げでブログをまるごと引越し。コード0行・15時間でできたこととコツ

1. ブログの土台を作ってもらう#

まずはAstroのテーマを選びます。
私はFumikaというテーマをもとに作っています。

自分のパソコンでブログ用の空フォルダを作ります。

そのフォルダをVS Codeで開いて、Claude Codeにチャットします。

プロンプト例

このブログテーマ（好きなテーマのURL）をもとにプロジェクトを作りたい

そうすると、AIくんがテーマをコピーして、手元で表示できるところまで進めてくれます。
もし必要なツールのインストールや外部設定が必要な時は、やり方を教えてくれます。

2. ブログ引越しの計画を立ててもらう#

次に、今の状況とやりたいことを説明して、作業計画を立ててもらいます。

プロンプト例

現在WordPressで作成しているブログをAstroに移行したい。

• 現在のブログ：https://xxx.com
• 現在はエックスサーバーでドメインとサーバーを管理
• 独自ドメインのメールアドレスも使用。

公開までに必要な手順を整理して、マークダウンファイルでまとめて。

このプロンプトで今のサイトと、Astroプロジェクトを分析して、リニューアル作業リストを作ってくれる。

1
# ブログ リニューアル作業リスト
2

3
WordPress（エックスサーバー）→ Astro（Cloudflareで公開）への移行の作業一覧。
4

5
## 現在の状況
6
- 【済】記事・固定ページの移行、デザインの刷新、お問合せフォーム
7
- 次にやること：ドメインとメールの切り替え
8

9
## スケジュール（期限のある作業）
10
- サーバー契約の更新日まで：公開とメールの切り替えを済ませる
11

12
## 記事の移行（WordPress → Astro）
13
1. 【済】記事をエクスポートして変換（約145本、画像も一緒に）
14
2. 【済】固定ページ（プロフィールなど）を移行
15
3. 【済】カテゴリ・タグを見直す
16
4. 【決定】WordPressのコメントは移行しない
17

18
## デザインの刷新
19
5. 【済】配色と書体、記事一覧のカード
20
6. 【済】見出し・囲み枠・マーカー
21

22
## お問合せフォーム
23
7. 【済】入力 → 確認 → 送信完了の3ステップ
24
8. 【済】スパム対策と自動返信
25

26
## 公開（Cloudflare）
27
9. 【済】GitHubと連携して、更新したら自動で公開
28
10. 【済】仮のURLで表示を確認
29

30
## ドメイン・メールの切り替え
31
11. 切り替え前に、WordPressをバックアップ
32
12. ネームサーバーをCloudflareに変更（元に戻す手順を確認してから）
33
13. 【決定】メールは転送サービスでGmailに届ける
34

35
## SEO・アクセス解析
36
14. 【済】旧URL → 新URLの転送（64件）
37
15. サイトマップをSearch Consoleに送る
38
16. 【決定】Googleアナリティクスは今のものを引き継ぐ

実際のリストはもっと細かいですが、こんなイメージです。終わった作業には【済】、決めたことには【決定】を付けて、進捗を管理。
「チェックリストを最新化して」というと、進み具合もAIが書き込んでくれます。

3. 145本の記事を一括で変換してもらう#

初期設定を済ませたら、記事のデータを移してきます。

プロンプト例

作業の#1. WordPressの移行をしたいんだけどどんな手順でやればいい？

さっきのチェックリストを開いてやりたい作業手順を聞くと、WordPressのエクスポート機能で、記事を全データダウンロードするように言われます。（管理画面のどこを触ればいいかも教えてくれます。）
そのデータを、Astroのフォルダに置くorチャット欄に添付するだけ。

エクスポートしたファイルを渡すと、変換するプログラムを作ってくれて、約145本の記事と、固定ページ、画像をまとめて変換して、Astroで公開できる形になりました。
しかも、旧URLからの転送も設定してくれたので、検索や外部からのリンクもそのままです。

今までで一番簡単な移行だった。

4. サーバー選びの相談相手になってもらう#

WordPressはエックスサーバーで公開をしていました。

でも、もっと安くできるかも？と思い、AIに質問。

プロンプト例

エックスサーバーを使い続けるのとNetlifyに切り替えるのどっちがコスパいいかな。
今はエックスサーバーと契約。ドメインとメールアドレス、WordPressで使っている。
WordPressはAstroに移す。
エックスサーバーは今後使わなくてもいい。

メールアドレスは今後どう使うか？WordPress以外にもサーバーを使っているか？など、やり取りしていくうちに、Cloudflareというサービスが良いと提案されました。

AI

今回の構成で考えると、Cloudflare Pages(ホスティング)+ Cloudflare Registrar(ドメイン)+ Cloudflare Email Routing(メール転送)を全部Cloudflareに寄せると、管理画面が1つにまとまり、DNS設定の行き来がなくなります。
Cloudflareに一本化する方が構成としてはシンプルになりそうです。

月額固定費はドメイン代のみという状態に近づきます。

選択肢のメリット・デメリットなどを確認しつつ、最終的にはCloudflare Workers（同じCloudflareの、サイトを公開できるサービス）で公開することに決めました。

エックスサーバー：約15,000円/年　→　Cloudflare：ドメイン代約1700円だけ。コストカット！

5. 記事の棚卸しをしてもらう#

今回移行する中で、カテゴリとタグの設定を見直しました。

プロンプト例

SEOに合わせたカテゴリ・タグを見直したいんだけど、記事のタイトル・本文を分析して提案して。

AI

WordPressの記事データとGoogle Search Consoleのデータを頂ければ、カテゴリ案と各記事の改善案を整理しますよ。

今の記事をどう直したらいか、EXCELにまとめてくれました。
（私は記事数が145件なのですぐできましたが、もっと記事数が多いと分割して処理しないといけないかもです。）

例えば

• 同じテーマで2件記事があり、アクセスが分散しているから一つに統合すべし（Instagramの予約投稿の記事を1本にまとめました）
• カテゴリを8つに整理し直し、名前も見直す
• クリックされてない記事のタイトルと説明文を直す

などなど。

合わせて、タイトルを55本見直し、説明文を全145記事に追加しました。

これについてはまた詳しい記事にします。

記事内の記述ミスも拾って訂正してもらえて、ほんとに助かった。
記事が多くなってくると、記事のメンテナンスだけで手間ですもんね。

6. 欲しい機能を「言葉で」作ってもらう#

「お問合せフォームつけて」「未来日で記事も投稿して公開予約もしたい」など、ほしいものをリクエストして作ってもらった。

作ってもらった機能

• お問合せフォーム（スパム対策・自動返信付き）
• 公開予約
• 日英の切り替え
• Obsidianで書いて公開する仕組み
• 記事内の吹き出し、見出し
• スライドショー表示

どんなふうに作っているか、イメージをお伝えすると・・・

プロンプト例

このブログってPPTをスライドショーみたいに出せる？

AI

はい、できます。やり方は3つあり、手間と見え方が違います。

1. Googleスライドで「埋め込み」する（いちばん手軽・コードの変更なし）

・・・（説明・良いところ・気をつけるところ）

2. スライドを画像にして並べる（ブログの中だけで完結）

・・・（説明・良いところ・気をつけるところ）

3. 記事の中でめくれる「スライド枠」を作る（コードの追加が必要）

・・・（説明・良いところ・気をつけるところ）

おすすめ

すぐ出したい、スライドをあとで直すことがある：1（Googleスライドの埋め込み）
見た目や表示の速さを大事にしたい、何度も使う：3（スライド枠を作る）
どれにしますか？3にする場合は、いつものとおり、先に見た目の見本を作ってから実装します。

プロンプト例

見た目を作って提示して

AI

スライド枠の見本を作りました。

決めてもらいたいこと

どの案にするか（組み合わせも可。例：「Aに、Cの全画面ボタンを足す」）
めくったときの動き：スッと切り替わるか、横にスライドするか
スライドの画像を押したときに拡大表示（今の記事の画像と同じ仕組み）にするかどうか
決まったら、記事で次のように書けば使えるように実装します。

プロンプト例

Aで実装して

7. デザインを整えてもらう#

ヘッダーメニューに載せたい内容を変えてもらったり、読みやすいようにフォントのサイズや字体を変えてもらいました。

追加で、記事を書くときに、よく使う装飾も設定してもらいました。

• 見出し
• マーカー
• 囲み枠

プロンプト例

見出しh２、h３、h４のデザインを考えてほしい

プロンプト例

h2はB、h3はCの点線で、色はもっと濃く。h4はBで。

細かく調整をすると実装してくれます。

8. 自分用のマニュアルを作ってもらう#

Astroの仕組みがどう動いているかわからない。
自分でカスタマイズしたくなったときに、どこをさわればいいかわからないと困るぞ、と思い、入り口となる解説資料を作ってもらった。

プロンプト例

あなたは経験豊富なソフトウェアエンジニアであり、新人エンジニアの育成に情熱を注ぐ技術メンターです。
今回作ったAstroのブログの仕組みを対象者が理解し、自分でもプログラムを更新できるように学ぶことを目的とします。
新人エンジニアが理解しやすいように、専門用語は避け、平易な言葉で説明することを心がけてください。

【指示】
このプロジェクト（Astroで作成した個人ブログ）について理解できるようパワーポイントを作ってほしい。
以下の内容を含めてください

• Astroとは何か、WordPressとの違い
• フォルダ構成・各プログラムの概要
• 記事データが公開される仕組み
• ページを追加・更新やデザインのカスタマイズはどのプログラムを変更すればいいか

▼作ってもらったファイル

1 / 14

また、docsフォルダを作り、公開にあたってどんな作業・設定をしたか、記録を残しておいてもらいました。これがあれば、今後、環境を変更するときに便利！

作業リストをファイルに残してもらう#

チャット欄は作業をするたびに、どんどん流れていってしまう。

「リニューアル作業リスト」を使って、何が決まったか・どこまでやったか、AIと作業の共通認識を記録していきました。

この辺は、もっといいやり方があるかもしれない。

わからないことは、そのまま聞く#

何から手をつけていいかわからないので、基本「〇〇したいんだけど、手順を教えて」とか、「〇〇ってできる？」とか、随時聞きながらやりました。

本題の作業から少し脱線して質問だけしたい時は「/btw」というコマンドを使うのが便利。

スクショを送って確認する#

わからない所は、スクショをとって「この設定であってる？」とか「このメニューが見つからない」など随時聞いていました。

WordPressが向いている人#

とはいえ、万人にAstroをおすすめはしないです。
技術的なハードルはWordPressよりも高いから。

自分のプラットフォームを持つには、無料で使えるWordPressはとてもいい。機能が豊富な割にセットアップもすごく楽。使っている人が多いから情報もたくさんあるし。

• 管理画面がほしい人：画面上でブログを書いたり、記事を整理したい人にはWordPressがおすすめです。Astroは管理画面がないので、自分でテキストエディターを使って記事を作成・編集します。もしブラウザ上で見たかったら、他のツールと繋いで使う必要があります。
• 外部委託する可能性がある人：WordPressの設定できる人はたくさんいるので、何かのトラブル対応や追加のカスタマイズは相談がしやすいです。

私がサポートしたいのは「自分でコンテンツを発信できるようになる」ためのサポート。
私は自分でいろんな技術やツールを試しつつ、その方にあったアドバイスをさせていただいています。