EmDashでデザイン・フォーム・SEOを作り直す手順｜移行後の仕上げ

連載「WordPressからEmDashへ移行する」の第4回です。第3回で記事を取り込んだサイトを、本番に切り替える前に、元のWordPressと同じ水準まで仕上げます。直すのは、見た目、URL、お問い合わせフォーム、画像の重さ、SEOの5つです。

WordPressのテーマやプラグインの機能は、EmDashには移りません。移らなかったものを1つずつ見つけて、代わりを用意する作業です。

コードの変更はすべてClaude Code（パソコンの中でコマンドを打ったりファイルを書き換えたりしてくれるAI）に頼みました。人が操作したのは、フォームの作成、ロボット判定のキーの設定、送信テストだけです。

この記事で出てくる言葉

手順1：デザインを作り直す

第2回で選んだテンプレート（サイトのひな形）は、黒が基調の英語のブログでした。これを土台に、今のサイトのスクショを見本にして、Claude Codeに作り直してもらいました。WordPressのテーマのファイルは使っていません。

筆者がClaude Codeに伝えた方針を、頼み方の形にすると次のようになります（実際に打った文そのものではありません）。

今のサイトのスクショを見本に、テンプレートを白基調・青のデザインに作り直して。メニュー・トップ・カテゴリー一覧はコードで固定して、記事の中身からは変えられないようにして

できあがったのは、次のような作りです。

• 共通：白が基調で青（#0065DE）。ロゴと6項目のメニュー、グレーのフッター。スマホではメニューを折りたたみます。
• トップ：背景画像と検索ボックス、サイトの考え方、カテゴリー3つ、新着マニュアル9件
• 記事ページ：白いカードと右のサイドバー（検索、最近の投稿、カテゴリー）
• カテゴリー・タグ・記事一覧：カードの3列表示
• 検索ページと「見つかりません」のページを日本語にしました。
• テンプレートにあった読了時間やダークモードの切り替えは消しました。

Claude Codeの作業は約1時間半でした。人の操作はありません。

手順2：記事のボックスとURLを元に戻す

手順2-1：ボックスの色と枠を戻す

第3回で見つかったとおり、取り込んだ記事の「✅ この記事で解決できること」などのボックスは、文章は残っているのに、色と枠が消えていました。

そこで、記事のHTMLを表示する部品を作り直してもらいました。style だけは残し、スクリプトなどの危険なものは、これまでどおり消します。表の罫線も消えていたので、EmDashの表の部品に合わせて見た目の設定（CSS）を足しました。

手順2-2：URLをWordPressと同じにする

テンプレートの記事のURLは /posts/記事名 でした。WordPressは /記事名/ です。このままだと、検索結果やSNSに残っている古いURLが「見つかりません」になります。

• /記事名/ で記事を表示するページを作りました。
• /posts/記事名 に来た人は、/記事名/ に転送します。
• あとで、コンテンツタイプ（記事の種類）の設定にあるURLの形も /posts/{slug} から /{slug}/ に直しました。こうしないと、サイトマップやMCPが返すURLが古い形のままになります。

手順2-3：日本語のURLを表示できるようにする

お問い合わせページと、日本語のタグ62件が「見つかりません」になりました。

手順2-4：古いURLを全部確かめる

旧サイトのURL 129件（投稿32、固定ページ3、カテゴリー4、タグ90）を、新しいサイトで1件ずつ開いてもらいました。結果は、129件すべて表示できました。

なお、出し直した（デプロイした）直後に、古い表示や「見つかりません」が残ることがありました。Cloudflareのキャッシュが原因で、数分で直りました。

手順3：お問い合わせフォームを作る

旧サイトは、WordPressのプラグイン「Contact Form 7」でフォームを作っていました。EmDashには中身が移らず、本文に [contact-form-7 …] という文字がそのまま残りました。

調べると、EmDash公式の「Formsプラグイン」がありました。管理画面でフォームを作れて、送信内容は管理画面に保存されます。ロボット判定（Turnstile）と通知メールにも対応しています。自分で作るのをやめて、これを使いました。

手順3-1：プラグインを入れる（Claude Code）

Claude Codeが次の作業をしました。

npm install @emdash-cms/plugin-forms

• 設定ファイル astro.config.mjs のプラグインの欄に、formsPlugin({ defaultSpamProtection: "turnstile" }) を足しました。スパム対策の初期値を、Turnstileにする設定です。
• フォーム用の見た目を読み込み、送信ボタンを旧サイトと同じ青にしました。
• 出し直しました（デプロイ）。

手順3-2：管理画面でフォームを作る

ここからは人が操作します。管理画面は英語表示です。

1. 左メニューの「プラグイン」の下に「Forms」と「Submissions」が増えています。「Forms」を開きます。
2. 「No forms yet」と表示されます。右上の「New Form」を押します。

1. 「Name」に「お問い合わせ」、「Slug」に「contact」を入れます。
2. 「Add Field」で項目を足します。

作った項目は4つです。

• 氏名（text、必須）
• メールアドレス（email、必須）
• 題名（text、必須）
• メッセージ本文（textarea、任意）

1. 「Create Form」を押します。
2. 一覧に「お問い合わせ / contact / active」と表示されれば完成です。

Settingsの初期値は英語（「Thank you for your submission.」「Submit」）です。筆者は最終的に、送信ボタンを「送信」に、完了メッセージを「お問い合わせありがとうございます。内容を確認のうえ、ご連絡いたします。」にしました。

手順4：ロボット判定（Turnstile）を設定して、ページに入れる

手順4-1：Cloudflareでウィジェットを作る

1. Cloudflareのダッシュボード（管理画面）で「Application security」→「Turnstile」を開きます。
2. 「Add widget manually」と「Set up with Spin」（AIに任せる新しい機能）の2つが出ます。筆者は「Add widget manually」でウィジェットを作りました。
3. 作ると、サイトキーとシークレットキーが表示されます。

手順4-2：EmDashにキーを入れる

1. EmDashの管理画面で、「管理者」→「プラグイン」を開きます。
2. emdash-formsの設定を開きます。
3. 「Turnstile Site Key」と「Turnstile Secret Key」に、手順4-1のキーを入れます。
4. 「設定を保存」を押します。

手順4-3：お問い合わせページにフォームを入れて公開する

1. 管理画面で「Pages」→「お問い合わせ」を開きます。
2. 本文で「/」を入力してコマンドを出し、「Form」を選びます。
3. 「Formを挿入」の画面で「お問い合わせ」を選び、「Insert」を押します。

1. 本文にFormのブロックが入ります。
2. 右上の「今すぐ公開」を押します。

手順5：送信テストをする

手順5-1：AIが操作するブラウザでは送れない

最初に、Claudeが操作するアプリ内のブラウザ（自動で操作するブラウザ）でテストしました。Turnstileが「検証に失敗しました」になり、送信すると「Something went wrong. Please try again.」と出ました。管理画面に保存された件数は0件のままです。

手順5-2：普段のブラウザで送る

1. 普段使っているブラウザで、お問い合わせページを開きます。
2. 項目を入れて「送信」を押します。
3. Turnstileに「成功しました!」、その下に「お問い合わせありがとうございます。…」と表示されれば成功です。

送信の内容は、管理画面の「Submissions」に保存されていました。

通知メール（送信があったときに自分に届くメール）は、この時点では設定できませんでした。Forms 0.2.12の管理画面には、通知先を入れる欄がありません。また、メールを送るしくみ（Cloudflare Email Sending）も必要です。第5回で、ドメインを切り替えるときに設定しました。それまでは「Submissions」で確認します。

手順6：カード画像を軽くする

トップや記事一覧のカード画像が、元の大きさのまま届いていました。最大で幅1600px、1枚約1MBです。画像を小さく表示する指定（width={480}）を書いても、縮小されていませんでした。

原因は2つありました。どちらもClaude Codeが直しました。

• 原因1：EmDashの画像の部品は、幅と高さの両方がわからないと縮小しません。WordPressから来たアイキャッチには、高さの情報がありませんでした。高さ（height={270}、16:9）を足しました。
• 原因2：縮小してよい画像のアドレスの一覧（image.remotePatterns）が空でした。

設定ファイル astro.config.mjs に、仮アドレスと本番のアドレスの2つを手で足しました。範囲は、EmDashの画像の置き場所（/_emdash/api/media/file/）だけに限っています。

image: {
  remotePatterns: ["<Worker名>.<名前>.workers.dev", "manual-chang.com"].map((hostname) => ({
    protocol: "https",
    hostname,
    pathname: "/_emdash/api/media/file/**",
  })),
},

結果、トップの9枚の合計は、2.76MBから84KBになりました（約33分の1）。形式もWebP（軽い画像の形式）になりました。初回だけ縮小した画像を作るので少し遅いですが、2回目からはキャッシュで速くなります。

縮小は、Cloudflare Imagesの「変換」として数えられます。無料枠は月5,000種類なので、記事が約35本なら余裕があります。

手順7：GA・OGP・サイトマップを点検する

最後に、Claude CodeにSEOまわりを点検してもらいました。見つかったことと、直したことは次のとおりです。

直したあと、説明文、検索エンジン向けの設定、canonical、転送、サイトマップ（記事32件と固定ページ2件）を確かめました。旧URL 129件も、すべて表示できるままでした。

うまくいかないときは

まとめ

• WordPressのテーマやプラグインの機能は移りません。移らなかったものを見つけて、1つずつ代わりを用意します。
• メニューやトップページはコードで固定すると、AIが記事を書いても骨組みが崩れません。
• 移行した記事のボックスは、styleを残す表示用の部品で元の色に戻せます。
• URLはWordPressと同じ /記事名/ にそろえ、古いURLを全部開いて確かめます。
• お問い合わせフォームは、EmDash公式のFormsプラグインとTurnstileで作れます。送信テストは人が普段のブラウザで行います。
• 画像が縮小されていなくてもエラーは出ません。実際の大きさを測って確かめます。

この回の終わりの時点で、仮アドレスのサイトは、見た目・URL・フォーム・SEOまで元のWordPressと同じ水準になりました。本番のmanual-chang.comは、まだ古いWordPressのままです。

次回は、第5回「ドメインをCloudflareに切り替える手順｜EmDash移行の仕上げ」です。ネームサーバーの変更、パスキーの登録し直し、フォームの通知メールの設定を扱います。

連載の他の回

• 第1回 【図解】WordPressからEmDashへ移行する手順（準備編）
• 第2回 EmDashをCloudflareに立ち上げる手順｜作成からログインまで
• 第3回 WordPressの記事をEmDashに移す手順｜無料プランで止まった時の対処
• 第5回 ドメインをCloudflareに切り替える手順｜EmDash移行の仕上げ
• 第6回 ClaudeとEmDashのMCP連携｜記事を下書き保存する手順