もう数十万円で制作依頼は不要!Claude Codeで20年放置のホームページを2日でリニューアルしてみた

数十万円で制作依頼は不要!Claude Codeで20年放置のホームページを2日でリニューアルしてみた キャリアアップ

「ホームページが古くて恥ずかしいけれど、リニューアルすると数十万円かかると言われて二の足を踏んでいる」「制作会社に頼んだら半年待ちで、しかも内容を伝えるのに何度も打ち合わせが必要だった」という声を、地方の中小企業経営者から非常に多く聞きます。

特に20年近く前に作成され、当時のまま放置されているコーポレートサイトは数多く存在します。スマホ対応していない、画像が荒い、CMSのバージョンが古くてセキュリティリスクがある、といった課題を抱えながらも、修正コストの高さから手付かずになっているケースが大半です。

私自身、副業支援の一環として地方ハウスメーカーのWordPressサイトをリニューアルしたいと相談を受けました。昨今AIエージェントの発展が著しいため、支援先の社員様向けに、Local(ローカル開発環境)+ All-in-One WP Migration + Claude Code の組み合わせをレクチャーし、結果的にわずか2日でリニューアルを完了することができました。

本記事では、その実体験をベースに「制作会社に依頼せずとも、AIエージェントを使えば短期間・低コストでホームページのリニューアルが可能になっている」という事実をお伝えします。

本記事のターゲット

  • WordPressで作成した自社サイトが古くなっており、リニューアルしたいが費用がネックになっている経営者・担当者
  • 副業で中小企業のWeb支援をしてみたいが、デザインやコーディングに自信がない方
  • Claude CodeなどのAIコーディングエージェントを業務に活かす具体例を知りたい方

依頼を受けた当初の状況

今回支援したのは、地方で30年以上事業を続けるハウスメーカーです。コーポレートサイトは20年前に制作会社へ発注したきりほぼ放置されており、最後の更新は5年以上前という状態でした。

具体的には、PCを前提とした固定幅レイアウト(スマホで開くと文字が極端に小さい)、画像が低解像度で粗い、お問い合わせフォームが動作していない、WordPressのバージョンが10年以上前のものでプラグインも非対応、運用ドキュメントが一切残っていない、といった典型的な「放置サイト」の課題を抱えていました。

経営者からは「リニューアルしたい気持ちはあるが、見積もり相場が80〜150万円で、しかも納期が3〜6ヶ月かかると言われ、踏み切れていない」という相談を受けました。集客に対する直接的な期待というよりも「採用応募者や取引先が会社サイトを見たときに、古さで信頼を損ねないようにしたい」という動機を強く感じました。

利用したツール構成

今回のリニューアルでは、以下のツール3点だけで完結させました。それぞれの費用とリンクも合わせて記載します。

図1. 利用したツール構成

表1. ツールの役割と費用

ツール名称役割費用サイトリンク
Localローカル開発環境の構築無料(全機能)https://localwp.com/
All-in-One WP Migration本番⇔ローカル間の移行無料版あり/有料版ありhttps://wordpress.org/plugins/all-in-one-wp-migration/
Claude CodeAIによるコード修正・作業指示月額約3,200円〜https://claude.ai/pricing

Local(旧Local by Flywheel)

WordPressの開発環境をワンクリックで立ち上げられるツールです。

つまりは既存サイトのサーバー環境を自前のPC内で作るイメージです。そうすることで、追加のサーバー費用を払うことなく、既存サイトのサーバー環境を触ることなく安全に作業ができるようになります。

図2. Localとは

2021年よりすべてのPro機能が完全無料で開放されており、PHPバージョン切り替え・SSL証明書の自動発行・ライブプレビュー共有など、実務に必要な機能をコストゼロで使えます。MAMP/XAMPPの後継として近年広く使われており、サーバー構築の知識がない方でもつまずきづらいサービスです。

All-in-One WP Migration

図3. All in One WP Migrationとは

本番サーバーのWordPressをまるごとエクスポート/インポートできる定番プラグインです。データベースとファイルを丸ごと圧縮した1ファイルとしてやり取りできるため、ローカルで作業した結果を本番に反映するのも数クリックで完了します。

ただ費用については注意が必要です。無料版はインポートできるファイルサイズが300MB程度で制限されています。サイト容量がこれを超える場合は、有料オプション(Unlimited Extension 年額約$69 ≒ 約10,000円)の検討が必要です。

今回のリニューアルではサイト容量が小さく無料版で対応できましたが、画像が多いサイトや長年運用しているサイトでは有料版が必要になるケースがあります。

Claude Code

図4. Claude Codeとは

ターミナルから対話形式でコード変更・ファイル作成・依存関係の整理・テーマ修正までを任せられるAIコーディングエージェントです。今回のリニューアルでは、テンプレートのリファクタリング、レスポンシブ対応、CSSの全面書き換え、固定ページのHTML整形、お問い合わせフォームの修復まで、ほとんどの作業をClaude Codeに指示する形で進めました。

Claude Codeを使うにはAnthropicのサブスクリプションが必要です。

今回はProプラン 月額$20(約3,200円)のみで2日間の作業を完結させました。利用量の上限に達する場合は、Max 5xプラン 月額$100(約15,500円)の検討が必要になります。

2日間の進め方

リニューアルは大まかに「1日目:環境整備と現状把握」「2日目:デザイン刷新・機能修正・本番反映」という2フェーズで進めました。

「そんなことできっこない」「サイトが壊れたらヤダ」と思う方も多いでしょう。以下の手順に従って作業していれば、仮に壊れてしまっても元に戻せるため安心してください。では初めて行きましょう。

1日目:環境整備と現状把握

1日目の前半は、3つのツールのセットアップから始めます。

Localのセットアップ

公式サイト(https://localwp.com/)からインストーラをダウンロードし、ダブルクリックで実行するだけです。

図5. Localのセットアップ方法

インストール完了後にLocalを起動し、画面左下の「Create a new site」をクリック、サイト名を入力し、「Preferred」を選択。ユーザー名・パスワードを入力すれば、5分ほどでローカル環境にWordPressが立ち上がります。あとから本番のPHPバージョンに合わせる必要があるため、本番と同じPHPバージョンを指定するのがポイントです。

All-in-One WP Migrationのセットアップ

本番サーバーとローカル(Local)の両方のWordPress管理画面で行います。

図6. All in One WP Migrationのセットアップ方法

Localであれば作成した環境画面の「WP Admin」をクリックし、ユーザー名とパスワードを入れると管理画面に入ることができます。管理画面の「プラグイン > 新規追加」で「All-in-One WP Migration」を検索し、有効化するだけです。

Claude Codeのセットアップ

まずAnthropicのアカウントを作成します。

図7. Claude Codeのセットアップ方法

公式サイトの案内に従ってターミナルでコマンドを実行します。例えばnpmを使った場合のインストールの場合は以下のコードを実行することになります。

npm install -g @anthropic-ai/claude-code

インストール完了後、リニューアル対象のWordPressディレクトリ(Localで作成したサイトのapp/public配下)に移動し、コマンドで対話セッションを開始すれば準備完了です。

*初回のみブラウザ経由の認証が走ります。

claude

ここまでで、おおよそ30〜60分ほどで3つのツールが使える状態になります。

現状把握

セットアップが終わったら、早速現状把握をしてみましょう。

図8. 本番サイトのデータエクスポート

本番サイトのデータをローカルに移します。まず本番のWordPress管理画面で「All-in-One WP Migration > エクスポート」を開き、「エクスポート先」のプルダウンから「ファイル」を選択します。クリックすると .wpress という独自形式の圧縮ファイル(DB+wp-content+設定すべて含む)が生成され、ダウンロードできます

図9. ローカルへ本番サイトのデータインポート

次にLocalで作成したローカルWordPressの管理画面にログインし、同じプラグインの「All-in-One WP Migration > インポート」を開き、「インポート元」から「ファイル」を選択して、先ほどダウンロードした .wpress ファイルをアップロードします。インポート完了後にデータベース内のサイトURLが自動で書き換わり、ローカル側の管理画面にログインし直せば、本番と同じサイトがローカルで動いている状態になります。

インポート後はWordPressのログインIDとパスワードが本番のものに上書きされるため、最初にローカルで設定したアカウントは使えなくなります。

図10. Claude Codeで現状調査依頼

ローカルに本番のクローンができたら、Claude Codeに現状調査を依頼します。

このWordPressサイトの構成を読み解いて、テーマ・プラグイン・固定ページの現状を要約してください。
出力はWordファイル(.docx形式)でまとめてください。

と指示すると、Claude Codeはwp-content配下のテーマファイル、functions.php、各種テンプレート、固定ページの内容を読み取り、リファクタリングすべき箇所と、デザイン刷新で対応すべき領域を整理してWordファイルに保存してくれます。

ここで重要なのは、現状調査メモをWordファイル形式で残してもらった点です。責任者にそのまま提出できる体裁である上、自らも差分を確認しやすくなる点で非常にお勧めです。

2日目:デザイン刷新・本番反映

2日目はデザインの全面刷新、本番反映までをまとめて進めました。

図11. デザイン全面刷新をClaude Codeに依頼

デザインについては、Claude Codeに

・現代のハウスメーカーサイトでよく見られる、白を基調とした清潔感のあるデザインに変更し、スマホでも読みやすいレイアウトにしてほしい
・トップページのメインビジュアルは、薄い色から濃い色にじわっと変わる背景にして、後から写真に差し替えやすい作りにしてほしい

と指示しました。Claude Codeは既存テーマをベースにstyle.cssと各テンプレートを書き換え、画面サイズごとのレイアウト崩れもその場で修正してくれます。

図12. トラブル発生時もClaude Codeに依頼

途中、CSS変更がうまく反映されないトラブルに遭遇しましたが、Claude Codeに

ブラウザで確認したところ変更が反映されていない。原因を調査して修正してほしい

と伝えると、キャッシュ系プラグインの設定とテーマ側のenqueueの不整合を特定し、自動で修正してくれました。エラーメッセージや画面の状態を伝えるだけで、原因切り分けまでAIに任せられる体験は、従来の制作プロセスと比較して圧倒的に効率的です。

ローカルでデザイン刷新が一段落したら、本番反映の作業に入ります。

本番反映

手順は初日のローカル取り込みと逆向きになります。

図13. ローカルのデータエクスポート

まず、ローカルのWordPress管理画面で「All-in-One WP Migration > エクスポート」を開き、「エクスポート先 > ファイル」を選んで .wpress ファイルを生成・ダウンロードします

図14. 本番環境のバックアップをとった上で、本番環境へアップロード

次に本番管理画面で「All-in-One WP Migration > インポート」を開き、ローカルからエクスポートした .wpressファイルをアップロードすれば、刷新済みのサイトが本番に展開されます

本番反映の直前には、念のため現行サイトのバックアップ(本番側でも一度エクスポート)を取っておくと、万一の際にすぐ切り戻せます。自分一人で進める分つい忘れがちなので必ずチェックポイント化しましょう

最後に、経営者向けの運用マニュアルをClaude Codeに作成してもらい完了です。

図15. Claude Codeで運用マニュアル作成依頼

指示は具体的に出すのがポイントで、たとえば

このWordPressサイトの運用マニュアルを、ITに詳しくない経営者でも読めるレベルでWordファイル(.docx形式)で作ってほしい。目次は『お知らせ投稿の追加方法』『画像の差し替え方法』『パスワード変更手順』『毎月のバックアップ手順(All-in-One WP Migrationのエクスポート操作)』『障害が起きたときの連絡先』の5章構成にしてほしい。各章には管理画面のメニュー名と操作手順を箇条書きで書き、専門用語には注釈を付けてほしい

とプロンプトを与えると、想定どおりの完成度で出力されました。

その場で経営者に開いて見てもらい、不明な表現があった箇所だけ「もう少し平易な言い回しに直してほしい」とClaude Codeに追加で依頼すれば、最終版が数分で仕上がります。

実際にかかった工数とコスト

2日間の作業時間は、概ね合計12時間ほどでした。フルタイムの現場社員の方が取り組んだ場合、2営業日で完了する規模感です。

費用面では、ツールはすべて無料または既存サーバー契約内で完結しているため、Claude Codeの月額(約3,200円)以外はほぼゼロです。外部発注すると50万円以上の見積もりとなってもおかしくない内容が、2日の稼働で100分の1以下の費用感に収まりました。

「制作会社に頼まないと品質に不安がある」という声もあると思いますが、Claude Codeにレビューを依頼するとアクセシビリティ・SEO・セキュリティ観点での観察事項を指摘してくれます。

専門家のレビューを完全に代替するわけではないものの、最低限の品質ラインを押さえる用途であれば十分活用できます。

まとめ

20年放置されていたWordPressサイトを、「Local + All-in-One WP Migration + Claude Code」の組み合わせで、コーディング初心者でも2日・実質コストほぼゼロでリニューアルした事例を紹介しました。

AIコーディングエージェントが台頭したことで、「制作会社に数十万円〜数百万円を支払い、数ヶ月待つ」という従来型のWebリニューアルは、必ずしも唯一の選択肢ではなくなったことがわかります。

特に小規模なコーポレートサイトであれば、ITに多少なれた社員1名が短期で作業するだけで、十分な品質のサイトに生まれ変わらせることができます。

地方の中小企業にとって、Webサイトはいまだに採用や取引における第一印象を左右する重要な接点です。「古くて恥ずかしいけれど、コストが理由で着手できない」状態を放置するのではなく、AI時代に合った新しい進め方を検討してみる価値は十分にあります。

副業として地方企業のWeb支援に興味がある方にとっても、「Claude Codeを使った短納期リニューアル提案」は強い武器になるためオススメです。

よくある質問

Q1: 本当に2日でホームページのリニューアルは可能ですか?どんなサイトでも対応できますか? ▶︎

本記事の事例は20年放置されていた中小ハウスメーカーの小規模WordPressサイトで、合計約12時間の稼働で完了しました。固定ページが20ページ以内、機能要件がシンプル(お問い合わせフォーム・お知らせ程度)のコーポレートサイトであれば、2日での対応は現実的です。一方、ECサイト・会員機能・複雑なカスタマイズを多く含むサイトでは追加の工数が必要になります。まずはClaude Codeに「現状サイトの構成読み取りとリファクタリング工数の見積もり」を依頼し、着手前に規模感を把握しておくことをおすすめします。

Q2: 必要な3つのツールの費用合計はいくらですか?追加で発生するコストはありますか? ▶︎

最小構成であれば月額約3,200円のみで完結します。Localは全機能無料、All-in-One WP Migrationは無料版(インポート上限あり)で多くの中小サイトに対応可能、Claude CodeはAnthropic Proプラン月額$20(約3,200円)で利用できます。サイト容量がプラグイン無料版の上限を超える場合はAll-in-One WP Migration Unlimited Extension(年額約10,000円)、複数案件を並行する場合はClaude Max 5xプラン(月額$100)を検討してください。

Q3: プログラミングやデザインの知識がなくてもClaude Codeで作業できますか? ▶︎

完全な未経験ですと理解に苦しむことがあるかもしれません。HTML/CSSの基本構造を読み取れる程度の理解があれば十分対応可能です。Claude Codeは「白を基調とした清潔感のあるデザインに」「スマホで読みやすいレイアウトに」といった日本語の指示でCSSやテンプレートを書き換えてくれます。エラーが出た場合も「ブラウザで変更が反映されていない、原因を調査して修正してほしい」と伝えるだけで、キャッシュやenqueueの不整合まで自動で切り分けてくれます。コーディングそのものより、ゴール状態と触ってよいファイル範囲を明確に言語化する力の方が重要です。

Q4: 制作会社に頼む場合と比べて、品質面で不安はないですか? ▶︎

大規模かつブランド要素の強いサイトでは制作会社の専門性に分があります。一方、コーポレートサイトやお知らせ中心のサイトであれば、Claude Codeに「アクセシビリティ・SEO・セキュリティ観点でのレビュー」を依頼することで最低限の品質ラインは押さえられます。本記事の事例ではLighthouseスコアがモバイル30点台から80点台まで改善し、Core Web Vitalsも全項目「良好」判定となりました。専門家のレビューを完全には代替しませんが、「採用応募者や取引先に古さで信頼を損ねない」という防衛的リニューアル用途では十分に実用的なレベルに到達できます。

Q5: 副業として中小企業のWebリニューアル支援を始めるには何が必要ですか? ▶︎

専門的なITスキルよりも、要件整理とディレクション力が重要です。経営者の「古さで信頼を損ねたくない」「採用応募者の第一印象を改善したい」といった本音を引き出し、Claude Codeに対して具体的な指示を出せる人であれば、デザイナーやエンジニアでなくても十分に支援可能です。最初の案件では稼働報酬を低めに設定し、Local+All-in-One WP Migration+Claude Codeで1サイト完走する経験を積むのが近道です。納品時に経営者向けの運用マニュアル(Wordファイル)まで添えると、保守・追加施策など継続案件にもつながりやすくなります。

参考文献

[1] Local(ローカルWordPress開発環境) (https://localwp.com/)

[2] All-in-One WP Migration (https://servmask.com/)

[3] Claude Code(Anthropic) (https://www.anthropic.com/claude-code)

タイトルとURLをコピーしました