ClaudeとWordPressで「ニーヒロ試行実験室」を作った全記録

ClaudeとWordPressで「ニーヒロ試行実験室」を作った全記録

こんにちは!ニーヒロです。

今回は、AI「Claude」と一緒にWordPressブログを一から設定した体験をお届けします。古いPHPで動かなくなったWordPressから、最新のSWELLテーマまで、すべての過程をリアルタイムで記録しました。

目次

なぜClaudeに相談したのか?

実は、既存のWordPressブログがあったのですが、PHPが古すぎて動かない状態に…。記事もほとんどない状況だったので、「いっそのこと最新の環境で作り直そう!」と思い立ちました。

Claudeはこの手のサポートが得意なので、相談しながら一緒に設定を行っていくことにしました。

一枚一枚スクショをとって指示を出してもらうようにしていました。

「ニーヒロ試行実験室」誕生の瞬間

サイト名の設定

最初に決めたのがサイト名。Claudeと相談しながら「ニーヒロ試行実験室」に決定。

キャッチフレーズは「思考と試行は連鎖する」にしました。

AI関連の実験や日記を書くブログなので、実験室という名前がぴったりでした。

Claudeと進めた設定の全手順

1. エックスサーバーでのクリーンインストール

古いWordPressを完全削除して、新規インストールからスタート。Claudeが段階的に手順を教えてくれたので、迷うことなく進められました。

ポイント:

  • WordPress簡単インストールを使用
  • データベースも新規作成
  • ブログ設定からhttps://で設定する

2. 最初の大きな壁:リダイレクトエラー

インストール直後に「ERR_TOO_MANY_REDIRECTS」エラーが発生!画面に表示されたのは「このページは動作していません」の文字…。

原因: データベースを削除してしまったのが原因。

解決法: Claudeが的確に原因を特定してくれて、WordPressを削除して再インストールを行い解決しました。

3. SWELLテーマの導入

次に、有料テーマ「SWELL」をインストール。

手順:

  1. SWELL本体をアップロード・有効化
  2. SWELL子テーマをアップロード・有効化
  3. アクティベート(ライセンス認証)

Claudeが「子テーマを有効化することが重要」と教えてくれたおかげで、最初から正しい設定ができました。

4. SWELL設定の最適化

ここが意外と奥が深かった部分。Claudeと一緒に以下を設定:

高速化設定:

  • 動的なCSSをキャッシュ
  • 外部リンクのブログカードキャッシュ
  • 内部リンクのブログカードキャッシュ
  • トップページコンテンツキャッシュ

構造化データ:

  • 運営組織の名前:「ニーヒロ試行実験室」
  • URL:https://ai-tsukai-master.com
  • 設立者情報の設定

jQuery・Font Awesome:

  • 不要な読み込みを停止して軽量化

機能停止:

  • PV計測機能停止(Googleアナリティクスを使うため)
  • LP機能停止(使わないため)
  • 広告タグ管理停止(広告予定なしのため)

5. 外観カスタマイズの楽しい時間

メインビジュアルの調整

最初はメインビジュアルが大きすぎてコンテンツが見えない状態でした。Claudeと相談しながら調整:

  • 画像サイズ:1200×400ピクセル
  • 高さ:60vh に設定

これで下のコンテンツも見えるバランスの良いサイズになりました。

ファビコン設定

NIHIROキャラクターのファビコンを設定。最初Claudeに聞いたのですが、最新のSWELLでは設定画面が少し変わっていたので、Perplexity AIにも確認して無事設定できました。

メニュー作成

シンプルな3つのメニューを作成:

  • ホーム
  • AI日記
  • このブログについて
  • お問い合わせ

Claudeが「記事を書く前にナビゲーション構造を作っておくとユーザビリティが向上する」とアドバイスしてくれました。

6. お問い合わせフォームの作成

Contact Form 7でフォームを作成。最初は中身が空っぽでしたが、Claudeの指示で:

  1. お問い合わせ→新規追加
  2. デフォルトフォームをそのまま使用
  3. ショートコードを固定ページに貼り付け

あっという間に完成しました。

7. SEO設定の重要な作業

SEO SIMPLE PACKの基本設定

SWELL制作者が開発したSEOプラグインを使用。基本情報の設定を行いました。

Googleアナリティクス設定

新規でGA4アカウントを作成。Claudeが設定手順を段階的に説明してくれたので、初心者でも迷いませんでした。

設定したID: G-S79DVCZJDJ

Googleサーチコンソール設定

なんと、Googleアナリティクスを設定済みだったおかげで、所有権が自動確認されました!HTMLタグなどの手動設定は不要でした。

Claudeとの対話で印象的だったポイント

1. 段階的で分かりやすい指示

Claudeは複雑な設定を小さなステップに分けて説明してくれます。「まずはこれをやって、次にこれ」という感じで、初心者でも迷わずに進められました。

2. 問題の的確な診断

リダイレクトエラーが発生した時、症状を伝えただけで原因を正確に特定してくれました。人間だと「とりあえずこれ試してみて」となりがちですが、Claudeは論理的に原因を推測してくれます。

3. 「なぜそうするのか」の説明

単に手順を教えるだけでなく、「なぜその設定が必要なのか」を説明してくれるので、理解が深まります。

4. 安全重視のアドバイス

「一度に全部変更せず、段階的に」「バックアップを取ってから」など、安全性を重視したアドバイスが印象的でした。

困ったポイントと解決法

問題1:リダイレクトエラー

症状: 「ERR_TOO_MANY_REDIRECTS」
原因: http://とhttps://の設定不整合
解決: https://での再インストール

問題2:メインビジュアルが大きすぎる

症状: ファーストビューでコンテンツが見えない
原因: 元の画像の比率のバランスで表示が上手くいかなかった
解決: 幅1200px 高さ400pxの3:1にして解決

問題3:お問い合わせページが空っぽ

症状: Contact Form 7をインストールしただけで中身なし
原因: フォーム作成を忘れていた
解決: フォーム作成→ショートコード設置

完成したブログの特徴

表示速度の最適化

  • SWELLの高速化機能
  • 不要なプラグイン・機能の停止
  • 画像の遅延読み込み

SEO対応

  • 構造化データ
  • Googleアナリティクス
  • Googleサーチコンソール
  • パーマリンク最適化

ユーザビリティ

  • レスポンシブデザイン
  • 分かりやすいメニュー
  • お問い合わせフォーム

ClaudeとPerplexity AIの使い分け

今回の設定では、主にClaudeをメインに進めましたが、一部でPerplexity AIも活用しました。

Claude:

  • 総合的な設定サポート
  • 段階的な手順説明
  • 問題解決のアドバイス

Perplexity AI:

  • 最新バージョンの具体的な画面操作
  • リアルタイムな情報確認

複数のAIを使い分けることで、より確実な設定ができました。

Claudeを使って良かったこと

  1. 24時間いつでも相談できる
  2. 専門知識が豊富 – WordPress、SWELL、SEO設定まで
  3. 段階的なサポート – 初心者にも分かりやすい
  4. 安全性重視 – リスクのある操作は事前に警告
  5. 理由も説明してくれる – 単なる手順書ではない

今後の展望

このブログ「ニーヒロ試行実験室」では、AI関連の実験や日記を投稿していく予定です。

  • ChatGPTとの対話実験
  • 画像生成AIの試行錯誤
  • プログラミング学習記録
  • AI活用のライフハック

今回のように「AI × 何か」の組み合わせで面白い実験をしていきたいと思います。

まとめ:ClaudeでWordPress設定は本当に可能だった

結論として、ClaudeはWordPress設定の優秀なサポーターでした。

専門的な知識がなくても、Claudeと対話しながら進めることで、ちゃんと設定ができました。特に印象的だったのは:

  • 問題が発生した時の的確な診断力
  • 安全性を重視したアドバイス
  • 初心者にも分かりやすい説明

これからWordPressでブログを始めたい人、AIの可能性を探りたい人の参考になれば嬉しいです。

次の実験もお楽しみに!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次