本文へスキップ
MYARMAI
無料登録
AIツールclaude codeword press

【実録】Claude CodeだけでWordPress改修＆AIチャットボット実装した手順

「WordPressのデザインを修正したい」「チャットボットを組み込みたい」──こうした要望を、コードを1行も手打ちせずにAIとの対話だけで実現できたらどうでしょうか？

今回、Claude Code（Anthropic社のAI開発CLI）を使って、WordPressサイトのデザイン修正からAIチャットボットの実装まで、約1時間で完了しました。

この記事では、実際に行った作業内容と、Claude Codeの実力をお伝えします。

今回のサイトの状況

  • WordPress + Twenty Twenty-Five子テーマ
  • トップページはカスタムテンプレートでダークテーマ
  • 固定ページ（お問い合わせ等）はデザインが未整備
  • チャットボット未実装

Claude Codeで実施した7つの作業

1. サービスセクションのデザイン改善

課題：トップページのサービスカードがほぼ透明で見づらかった

やったこと：

  • グラスモーフィズム風カード（半透明 + ぼかし効果）に変更
  • 青いグローボーダーを追加
  • 各サービスにアイコンを追加
  • ホバーエフェクト（浮き上がり + 光る影）を実装

「サービスの箇所が見づらいので修正して」と伝えただけで、Claude Codeがデザイン案を3パターン提示。選択するとCSSとHTMLを自動で書き換えてくれました。

2. 固定ページのテンプレート作成

課題：お問い合わせページが親テーマのデフォルト（白背景）のまま

やったこと：

  • ダークテーマ統一のpage.phpを新規作成
  • Contact Form 7のフォーム要素もダークテーマに対応
  • 入力欄、送信ボタン、エラーメッセージ、送信完了メッセージをすべてスタイリング

「トップページを参考に修正して」という指示だけで、トップページのデザインを分析し、統一感のあるテンプレートを生成してくれました。

3. 個別記事テンプレートの作成

やったこと：

  • ブログ記事用のsingle.phpを新規作成
  • 記事メタ情報（日付・カテゴリ）のデザイン
  • 引用ブロック・コードブロック・テーブル等のダークテーマ対応
  • 「ブログ一覧に戻る」ナビゲーション追加

4. AIチャットボットの実装

これが今回の最大の成果です。

「サイトに組み込むチャットボットを制作できますか？AI開発について聞いたら提案して無料相談に誘導する感じで」と依頼しただけで、以下が自動生成されました：

  • フロントエンド：サイト右下に表示されるチャットウィジェット（CSS + JavaScript）
  • バックエンド：WordPress AJAX経由でGemini APIを呼び出すPHP処理
  • システムプロンプト：MYARM AIのサービス内容を理解し、適切に提案・誘導するAI設定

チャットボットの機能：

  • ユーザーのAIに関する相談に自然な日本語で応答
  • 3つのサービス（AIシステム開発・AI×営業支援・AI人材育成）に基づいて提案
  • 無料相談ページへ自然に誘導
  • 会話履歴を保持して文脈のある対話
  • スマホ対応のレスポンシブデザイン

5. ローカルプレビュー環境の構築

WordPressはPHP + データベースが必要なため、通常はローカルで簡単にプレビューできません。Claude Codeに相談したところ、PHPを使わない静的HTMLプレビューファイルを自動生成してくれました。

ブラウザでHTMLファイルを開くだけで、CSSの変更をすぐに確認できるようになりました。

6. スクショ共有の効率化

Claude Codeはターミナルベースのツールなので、画像のCtrl+V貼り付けができません。そこで「ss」と2文字打つだけでクリップボードの画像を保存するコマンドを作ってもらいました。

$ ss
C:\Users\...\clip_20260221_022521.png

これにより、エラー画面やデザインのスクショをすぐにAIと共有できるようになりました。

7. サービス名変更・ニュースセクション改善

細かな修正も対話で完了：

  • サービス名の変更（「AI開発・スクール」→「AIシステム開発」等）
  • ニュースセクションに「ブログ一覧を見る」リンクを追加
  • Contact Form 7の入力項目テンプレートも生成

Claude Codeを使って感じたメリット

コードを知らなくても指示できる

「サービスの箇所が見づらい」「トップページを参考に修正して」といった日本語の指示だけで、CSSやPHPのコードが生成されます。プログラミング知識がなくても、やりたいことを言葉で伝えればOKです。

ファイルの構造を自動で把握する

Claude Codeはプロジェクト全体のファイル構成を自動で読み取ります。「どのファイルを修正すべきか」を人間が判断する必要がありません。WordPressの親テーマ・子テーマの関係や、プラグインの構成も理解した上で提案してくれます。

複数ファイルを一気に生成・編集

チャットボットの実装では、CSS・JavaScript・PHPの3ファイルを整合性を保ちながら同時に生成。手作業なら数時間かかる作業が数分で完了しました。

トラブル対応もリアルタイム

今回、ファイルアップロード後にサイトが表示されなくなるトラブルが発生しました。スクリーンショットをClaude Codeに見せたところ、原因を即座に特定し、復旧手順を案内してくれました。

作業時間の比較

作業内容 手作業の場合 Claude Code
サービスセクション改善 1〜2時間 約5分
固定ページテンプレート作成 2〜3時間 約5分
個別記事テンプレート作成 2〜3時間 約5分
AIチャットボット実装 4〜7日 約30分
その他細かな修正 1〜2時間 約5分
合計 5〜8日 約52分

注意点

FTPアップロードは慎重に

今回、wp-config.phpのFTP転送で文字化けが発生し、サイトが一時的にダウンしました。重要なファイルを編集する際は、必ずバックアップを取り、サーバーのファイルマネージャーでの直接編集も検討してください。

APIキーの管理

チャットボットのようなAPI連携機能を実装する場合、APIキーの管理が必要です。今回はGemini API（Google）を使用し、予算上限の設定方法までClaude Codeに案内してもらいました。

キャッシュのクリア

WordPressでキャッシュプラグイン（LiteSpeed Cache等）を使用している場合、ファイルをアップロードしても変更が反映されないことがあります。更新後は必ずキャッシュをパージしましょう。

まとめ

Claude Codeを使えば、WordPressサイトのデザイン修正からAIチャットボットの実装まで、対話だけで実現できます。

特に印象的だったのは以下の3点です：

  1. 日本語で指示するだけでプロ品質のコードが生成される
  2. スクショを見せるだけでエラーの原因特定・解決策を提示してくれる
  3. 複数ファイルの整合性を保ちながら同時に編集できる

AI開発ツールの進化により、Web制作の効率は劇的に変わりつつあります。

「自社サイトにもAIを導入したい」「業務をAIで効率化したい」とお考えの方は、ぜひ一度ご相談ください。

無料相談はこちら

公開日 2026/02/21

関連記事