レコプラ

AI・副業に役立つ有益ブログ

Claude CodeでWordPressテーマを開発 | 予約決済も内蔵

189 views
約26分

当サイトはアフィリエイト広告を利用しています

Claude CodeでWordPressテーマを開発 | 予約決済も内蔵

※本記事にはプロモーション(アフィリエイトリンク)が含まれます。

非エンジニアの私が、Claude Code WordPress 開発でクライアントのサイト一式を作りました。そのまま納品まで持っていきました。独自テーマ、予約決済プラグインの自作、顧客専用の共有アルバム。この3つを、実際の管理画面のスクショ付きで公開します。

同等の受託開発を外注すれば数十万円というのが、私が実務で見てきた相場感です。既存プラグインの寄せ集めでは、決済も写真の共有も理想どおりにいかない。「非エンジニアがAIで本当にWebシステムを作れるのか」を、動くところまで検証した記録です。

この記事の結論(先に言い切ります)

非エンジニアでも、Claude Code WordPress 開発は完走できます。オリジナルテーマとStripe予約決済、共有アルバムまで自作して納品できました。ただしAIに丸投げでは動きません。料金の正しさ、決済の鍵の扱い、写真の閲覧制限。この安全の設計は、人間が言葉にして詰める必要があります。

この記事で分かることは4つです。

  • 非エンジニアがAIコーディングでWordPressのWebシステムを納品できた実例
  • WordPress 予約 決済 プラグインを自作する具体的な中身(Stripe連携・二重予約防止)
  • 子どもの写真を守る共有アルバムの多層防御
  • AIに任せた部分と、人間が詰めた「安全の設計」の境界線

書いているのは、AIコンサルの実務でシステムを納品してきた「ゆうき」です。今回の依頼主は、出張撮影サービスを営む個人事業主のクライアント。私はその作り手として受託し、開発から本番運用まで持っていきました。

まず、AIで作れるのか触ってみたい人へ

「自分にも作れるのか」は、手を動かすと一番早く分かります。私がどう非エンジニアのまま開発まで持っていったか。その記録は非エンジニアがClaude Codeで自動化を始めた実録と、AIコーディングツールの比較にまとめました。ツール選びで迷っている段階なら、先に読んでおくと回り道が減ります。

Claude Codeで何ができるかを見る

非エンジニアがAIでWordPressサイトを納品できたのか

結論から言います。できました。AIコーディングで独自テーマ、予約決済プラグイン、共有アルバムの3点を作りました。クライアントの本番サーバーで今も動いています。

作った3点の全体像

今回納品したのは、次の3つです。数字はすべて実際の規模です。

作ったもの規模役割
独自クラシックテーマ約7,000行のPHP・19ページテンプレートサイトの見た目とページ構造
予約決済プラグイン(自作)約9,900行・20ファイルStripe決済・予約自動確定・管理画面
顧客専用の共有アルバムプラグインに内蔵撮影後の写真を安全に納品

3点とも、既存の販売プラグインを買って設定しただけではありません。要件に合わせてPHPから書き起こしました。書いたのは私ではなくClaude Codeですが、何をどう作るかの指示と検証は私が担いました。

非エンジニアの私のスペック

私はコードをゼロから書ける人間ではありません。PHPの文法を暗記しているわけでもない。それでもAIコーディングで1万7千行規模のコードを本番に載せられました。理由は後半のワークフローで具体的に書きます。

大事なのは、作業の中身が変わったことです。非エンジニアがWebシステムを作る仕事は「AIに要件を伝える力」と「動作を確かめる力」に置き換わりました。文法を書く力は、もう最優先ではありません。この非エンジニア Webシステムを作る流れは、後半で順を追って見せます。

作ったもの① Claude Code WordPress 開発で組んだ独自クラシックテーマ

1つ目は、WordPressの独自クラシックテーマです。規模は約7,000行のPHP、ページテンプレートは19枚。モノクロ基調のデザインで、静的HTMLからビルドして本番運用しています。

既製テーマを使わず自作した理由

出張撮影サービスのサイトは、写真の見せ方が命です。既製テーマの装飾に合わせると、肝心の写真が窮屈になる。だから余白と写真の比率をクライアントの要望どおりに組みました。

クラシックテーマを選んだのは、ブロックテーマより中身を細かく制御できるからです。PHPのテンプレート階層をそのまま使えるので、Claude Codeへの指示も具体的にできました。

静的HTMLからビルドする流れ

先にデザインを静的HTMLで固め、それをビルドスクリプトでWordPressテーマに変換しました。この順番だと、見た目の確認とテーマ化を分けられます。非エンジニアには、この分割が効きました。

19枚のテンプレートは、トップ、料金、予約、よくある質問など、ページごとに用意しています。1枚ずつClaude Codeに作らせ、ブラウザで表示を確かめる。この繰り返しで7,000行まで積み上がりました。

Stripe予約はWordPressで自作できる?

できます。私はWordPress 予約 決済 プラグイン 自作という形で、既製品を買わずに書き起こしました。規模は約9,900行、20ファイル構成です。Stripe Checkoutと連携し、入金確認で予約が自動確定します。

WordPress 予約 決済 プラグイン 自作の利点は、料金体系も予約枠の管理も要件どおりに組めることです。既製の予約プラグインだと、決済の細かい条件が合わないことが多い。だから最初から自作を選びました。

Stripeのイベントを起点に、予約確定の処理を自動で走らせる設計にした

カード情報を自社サーバーで持たない設計

Stripe 予約 WordPressの構成で一番気を使ったのは、カード番号の扱いです。カード番号はStripeのホスト画面で入力され、私たちのサーバーを一切通りません。これはPCI SAQ-A相当の安全設計です。SAQ-Aは、カード情報を自社で保持しない事業者向けの、最も負担が軽い審査区分を指します。カード入力をStripe側に寄せる方式は、Stripe公式ドキュメント(Checkout・2026年8月1日取得)の構成に沿っています。

カード番号はStripe側で入力される。自社サーバーはカード情報に触れない

カード情報を自分のサーバーで受け取ると、漏えい時の責任が段違いに重くなります。だからClaude Codeへの指示でも、決済画面はStripeのホスト画面に任せる形を最初に固めました。

Stripe 予約 WordPressを安全に組む第一歩は、この責任の線引きです。カード情報に触れないと決めるだけで、守るべき範囲が一気に狭まります。

Webhookで入金を確認して予約を自動確定

入金の確認は、Stripeからのwebhookで受け取ります。購読しているイベントは checkout.session.completed の1件だけ。決済が完了すると、この通知が届いて予約が自動で確定します。

購読するイベントは checkout.session.completed の1件に絞った

ただし、webhookは誰でも似た通知を送りつけられる入口です。そこで受け取った通知はHMAC-SHA256の署名検証を通してから処理します。署名が合わなければ捨てる。この検証が予約自動確定の安全弁です。

署名検証はStripeが公式に推奨する手順です。Stripe公式ドキュメント(Webhooks・2026年8月1日取得)でも、この検証手順が定義されています。タイムスタンプと署名を突き合わせ、SHA256のHMACで照合する流れです。私はこの公式手順に沿って実装しました。

二重予約を防ぐ仕組みと料金の正

予約システムで怖いのは、同じ枠が二重に埋まることです。対策として、空き枠と先約をマージし、保存の直前にもう一度チェックする。ここで先約があれば、保存はそこで止まります。

料金は、サーバー側の定義だけを正としました。ブラウザから送られてくる金額は信用しません。必ずサーバー側で再計算して照合する。この一手で、金額を書き換える不正を防げます。

予約コードは、見間違いやすい0・O・1・Iの4文字を除いて発行します。電話やメールで伝えるとき、この4文字があると必ず取り違えが起きるからです。銀行振込や現金の支払いも選べるようにしました。

作ったもの③ 顧客専用の共有アルバム

3つ目は、撮影後の写真を渡すための共有アルバムです。子どもの写真も多く含まれるため、閲覧制限を何層にも重ねました。写真の実ファイルは公開ディレクトリの外に置いています。

写真ファイルへの直リンクを塞ぐ

写真の実ファイルは、公開領域の外の保護ディレクトリに保存します。さらに.htaccessで直リンクを遮断しました。URLを知っていても、ファイルに直接はアクセスできません。

写真の配信は、専用の配信エンドポイントを毎回通します。このエンドポイントが、認証と公開期間を毎回チェックしてから画像を返す。ここを通らない限り、写真は表に出ません。

パスワードのハッシュ保存と自動ロック

閲覧パスワードは、平文では保存しません。ハッシュ化して保存します。仮にデータベースを覗かれても、元のパスワードは復元できません。

アルバムには公開日と失効日を設定できます。失効日を過ぎると自動でロックがかかり、写真が見られなくなります。納品後にいつまでも公開が続く事故を、仕組みで防ぎました。検索避けとしてnoindexとX-Robots-Tagも入れています。

データベース操作は全てプリペアドステートメント

データベースへのアクセスは、すべてプリペアドステートメントで書きました。これでSQLインジェクションを塞ぎます。子どもの写真を扱う以上、ここは妥協できない部分です。

守りは5層です。公開ディレクトリ外の保存、.htaccessの遮断、パスワードのハッシュ化、公開期間の自動ロック、配信エンドポイントの再チェック。これを重ねて、写真の流出リスクを下げました。

AIに丸投げで動く?安全の設計は人間が詰める

結論は「丸投げでは動かない」です。AIコーディングでコードは高速に出せます。ですが、決済と個人情報と子どもの写真の責任は、人間が要件を言葉にしないとAIは詰めきれません。

鍵をコードに持たせない

Stripeの秘密鍵や署名シークレットは、コードに一切書きません。運営者がWordPressの管理画面で入力した値を読むだけです。ログにも出しません。

鍵はコードに埋め込まず、管理画面で入力した値を読む形にした

この方針は、AIに指示しないと自動では出てきませんでした。私が「鍵はコードに持たない」と要件で言い切ったから、その形になった。ここが人間の仕事です。

webhookの署名検証は必ず入れる

webhookの署名検証は、決済の信頼を守る要です。署名を検証せずに通知を信じると、偽の入金通知で予約を確定させられてしまいます。だから署名検証を必須にしました。

webhookエンドポイントと署名シークレットの概要。署名検証で偽通知を弾く

サーバー側で必ず再計算する

料金も、在庫の空き枠も、サーバー側で再計算するのが原則です。ブラウザから来た値を信じない。この考え方を最初に固めておくと、後から穴が生まれにくくなります。

今回のAIコーディング 実例から言えることがあります。AIは「動くコード」は速いが「安全なコード」は指示待ちだ、ということです。安全の要件を人間が並べて初めて、堅い実装になります。このAIコーディング 実例が、非エンジニアの判断材料になればうれしいです。

納品して終わりじゃない。AIコーディングなら機能を足し続けられる

作ったのは、この3点で終わりではありません。納品したあとも、運用しながら機能を足しています。AIコーディングだと、追加開発に構えずに済むからです。おかげでプラグインは約9,900行・20ファイルまで育ちました。

まず予約フォームに「LINEで予約」を足しました。LINEログインを通すと、その場で友だち追加まで終わります。以降は前日リマインドを自動でLINEに届けられる。お店側がお客様のLINE IDを聞き出す必要はありません。

受付メールと確定メールも自動で送ります。お礼などの販促メールには、ワンクリックの配信停止リンクを付けました。ただし予約の受付や確定といった取引メールは、配信停止に関係なく必ず届けます。ここは止めてはいけない連絡だからです。

予約履歴とは別に、手入力できる顧客台帳も足しました。問い合わせフォームにはハニーポットとレート制限を入れ、スパムを弾いています。追加した機能もデータベース操作は全てプリペアドステートメントで書きました。

大事なのは、こうした機能を後から少しずつ積めることです。最初に3点を納品し、運用しながら足していく。AIコーディング WordPress 開発だと、この積み増しが重くなりません。非エンジニアでも、育て続けられます。

Claude Code WordPress 開発で使ったAIコーディングの進め方

ここが非エンジニアにとって一番リアルな部分です。私のワークフローは一度で固まっていません。3回変わりました。ターミナルが苦手なところからのスタートです。

ターミナル嫌悪からデスクトップ版へ

最初、私はターミナルの黒い画面が苦手でした。コマンドを打つこと自体に身構えてしまう。そこでまず、画面で操作できるデスクトップ版から入りました。

この選択は正解でした。いきなりコマンド操作を強いられると、非エンジニアはそこで手が止まります。まず慣れることを優先しました。

Antigravity併用からClaude Code呼び出しに一本化

次に、AntigravityというAIコーディング環境を併用しました。エディタで見ながら作業できるので、コードの全体像が掴みやすい。デスクトップ版と行き来しながら進めました。

最終的には、Antigravity内のターミナルからClaude Codeを呼び出す形に一本化しました。苦手だったターミナルも、エディタの中にあると心理的な抵抗が消えます。この流れはClaude CodeとAntigravityを併用した実録にも詳しく書いています。

1機能ずつ作って確かめる

進め方の核は、1機能ずつ作って動かすことです。予約フォーム、決済、確認メール、アルバム。まとめて頼まず、1つ動いたら次へ進む。この刻み方が、非エンジニアが完走できた最大の理由です。

自作の前提は、自分のWordPress環境です

予約決済も共有アルバムも、動かす土地としてWordPressが入るレンタルサーバーが要ります。私が実案件で使って安定していたのはConoHa WINGでした。表示が速く、WordPressの導入も画面から数分で終わります。まだサーバーを持っていないなら、ここから始めるのが遠回りになりません。実績と安定性を最優先するなら、国内シェアの大きいエックスサーバーも本番運用に耐える選択肢です。


ConoHa WINGでWordPress環境を用意する

サーバー選びで迷うなら、エックスサーバーとConoHa WINGの比較と、WordPressの始め方ガイドを先に読むと判断が早くなります。

Claude Code WordPress 開発の正直なデメリットと、これから作る人へ

いいことばかり書くつもりはありません。Claude Code WordPress 開発には、非エンジニアがつまずく現実の壁があります。ここを知らずに始めると、途中で止まります。

丸投げでは動かない・保守は自分持ち

1つ目。AIに丸投げしても動くシステムにはなりません。料金の正、鍵の扱い、写真の閲覧制限。この要件を人間が言葉にして渡さないと、穴のある実装が出てきます。

2つ目。保守は自分持ちです。WordPress、PHP、Stripeの仕様は変わります。作って終わりではなく、変更に追従し続ける前提で持つ必要があります。ここを外注に頼れないのが、自作の代償です。

まず小さく1機能から始める

3つ目。非エンジニアがいきなり全部作るのは重すぎます。私も予約フォーム1枚から始めました。1機能が動く体験を先に取れば、次への不安は消えていきます。

それでも、外注で数十万円かかる開発を自分の手元に持てる意味は大きい。要件を変えたいとき、その日のうちに直せる。この機動力は、丸ごと外注では手に入りません。デメリットを飲んでも、作り手になる価値はここにあります。

環境が整っているかを先に確認する

始める前に、動かすサーバーとWordPressが要ります。必要なのはPHP8.0以上が動く環境です。PHP8.0は名前付き引数やunion型を導入したバージョン。詳細はPHP公式リリースノート(8.0・2026年8月1日取得)にまとまっています。そこさえ満たせば、今回の構成はそのまま載ります。表示速度と安定性で私が選んだのは、ConoHa WINGとエックスサーバーでした。

作り手になる第一歩を、2つ同時に踏み出す

外注は高い。既製の寄せ集めでは理想に届かない。その板挟みを抜ける道が、AIコーディングで自作することでした。悩みを解決する順番はシンプルです。まずAIコーディングの土地勘をつける。次に動かすサーバーを用意する。あとは1機能ずつ作る。この3手で、非エンジニアでも作り手に回れます。今日できるのは最初の2手です。

非エンジニア×AI自動化の実録を読む
ConoHa WINGでサーバーを用意する

作ったものを仕事につなげたいなら、Claude Codeで副業を始める手順もあわせてどうぞ。今回のような受託の入口が具体的にイメージできます。

まとめ

非エンジニアの私が、Claude Code WordPress 開発で3点を作り、クライアントに納品しました。独自テーマ、予約決済プラグイン、共有アルバムです。約7,000行のテーマと、約9,900行・20ファイルのプラグインが、今も本番で動いています。

作れます。ただしAIに丸投げでは動きません。カード情報を自社で持たない、webhookは署名検証する、料金はサーバー側で再計算する。この安全の設計は、人間が要件にして初めて実装されます。

非エンジニア Webシステムを作る挑戦で分かったのは、文法よりも要件を言葉にする力が効くということです。この非エンジニア Webシステムを作る道は、AIコーディング 実例としてそのまま再現できます。

始めるなら、AIコーディングの土地勘と、動かすサーバーの2つから。AIコーディングツールの比較WordPressの始め方を押さえれば、最初の一歩でつまずきません。小さく1機能から、作り手になっていきましょう。

よくある質問(FAQ)

Q1. 非エンジニアでもClaude Codeでwordpressサイトを開発できますか?

できます。私は文法を暗記していない非エンジニアですが、約1万7千行のコードを本番に載せました。要件を伝える力と動作を確かめる力があれば、Claude Code WordPress 開発は進められます。

Q2. WordPressで予約決済プラグインを自作できますか?

できます。私は約9,900行・20ファイルのWordPress 予約 決済 プラグインを自作しました。Stripe Checkoutと連携し、入金確認で予約が自動確定します。

Q3. Stripe予約はWordPressで安全に組めますか?

組めます。カード番号はStripeのホスト画面で入力され、自社サーバーを通りません。webhookは署名検証を通し、料金はサーバー側で再計算します。この3点でStripe 予約 WordPressの安全性を確保しました。

Q4. AIに丸投げすれば動くシステムが作れますか?

作れません。AIは動くコードを速く出しますが、安全の要件は指示待ちです。料金の正、鍵の扱い、写真の閲覧制限は、人間が言葉にして詰める必要があります。

Q5. 二重予約はどう防いでいますか?

空き枠と先約をマージし、保存の直前にもう一度チェックします。ここで先約があれば保存を止めます。これで同じ枠が二重に埋まる事故を防ぎます。

Q6. 決済の鍵はどこに置いていますか?

コードには一切置きません。運営者がWordPressの管理画面で入力した値を読むだけです。ログにも出しません。

Q7. 顧客専用の共有アルバムはどう守っていますか?

写真は公開ディレクトリ外に保存し、.htaccessで直リンクを遮断します。パスワードはハッシュ保存、公開期間で自動ロック、配信は毎回認証を再チェックする5層防御です。

Q8. 非エンジニアがWebシステムを作る費用はどれくらいですか?

外注なら数十万円が目安です。自作なら、レンタルサーバー代とAIコーディングツールの費用に抑えられる。ただし保守は自分持ちになります。

Q9. どのレンタルサーバーが必要ですか?

PHP8.0以上が動くWordPress対応のサーバーが要ります。私が実案件で使って安定していたのはConoHa WINGとエックスサーバーでした。

Q10. どうやってAIコーディングを進めましたか?

ターミナルが苦手だったのでデスクトップ版から入りました。次にAntigravityを併用。最終的にAntigravity内のターミナルからClaude Codeを呼ぶ形に一本化しました。1機能ずつ作って確かめる進め方です。

Q11. クラシックテーマとブロックテーマ、どちらで作りましたか?

クラシックテーマで作りました。PHPのテンプレート階層をそのまま制御でき、AIへの指示も具体的にできるからです。規模は約7,000行、19ページテンプレートです。

Q12. まず何から始めればいいですか?

1機能から始めてください。私も予約フォーム1枚から作りました。1つ動く体験を先に取ると、次への不安が消えます。並行してAIコーディングの土地勘とサーバーの準備を進めます。

著者 ゆうき

AIコンサルの実務で、AIコーディングを使ったシステムの開発と納品をしています。もともとは非エンジニア。ターミナルの黒い画面が苦手なところから始めました。今はクライアントのWebシステムをAIで作って納品するところまで来ています。等身大の実録を、レコプラで書いています。

公開日 2026年8月1日(最終更新 2026年8月2日)

出典・参考(いずれも2026年8月1日取得)

この記事を書いた人

この記事を書いた人:ゆうき

中小企業DX化コンサルタント × システム開発者
1987年生まれ / 高卒スタートから中小物流会社の業務改善責任者へ。

「大手コンサルを使わず、現場の泥臭いアナログ環境からシステム化を推進する」をモットーに活動。18年間の実務経験と、最新のAI(ClaudeやChatGPT)を組み合わせた「現場で本当に使える」確かなノウハウを発信しています。

分野と強み(Experience/Expertise)

  • 物流・DX化の最前線(歴18年):デジタルのない環境からIT化の全工程を実践。15社へのシステム導入で成功率99%、年間労働時間を35%削減。
  • AI・システム実務活用:ClaudeやChatGPT、バイブコーディング技術を駆使し、最新ITを机上の空論ではなく「現場の成果」に変換。(累計5,000万円以上のコスト削減実績)
  • 本業の知見を活かした副業展開:採用代行(成功率85%向上)やコンテンツ制作の手法を横展開し、個人でも最高月収35万円を達成。

読者へのお約束(Trustworthiness)

当ブログでは、18年間にわたる失敗と成功の実体験、そして自腹での検証に基づき、「実際に使って役立った情報・安全に稼げたノウハウ」だけを忖度なしで発信します。机上の空論ではないリアルな解決策で、あなたのビジネスや副業を支援します。

お問い合わせ:info @desire-planet.com

ロリポップ!なら大人気のWordpressも簡単インストール!
あなたもWordPressでブログデビューしちゃおう!!




ADVANCED SEO TECHNOLOGY

2026年 完全版
AIブログ記事自動生成キット

verified
Anti-AI-Smell
100
layers
Schema
6層構造
language
NEXT GEN
AIO/GEO
speed
High Speed
30分量産
Starting at ¥980〜
今すぐ導入する arrow_forward
NEW 2026 EDITION
AIブログ記事自動生成キットのイメージ

無料テンプレ配布中

AIにExcelを正確に指示する
2枚見せテンプレ

関数を覚える話ではありません。今の表と、欲しい表。この2枚の渡し方だけをまとめました。 AIが行をこっそり飛ばしていないか確かめる検算3チェックもつけています。

LINEでテンプレを受け取る

友だち追加するとすぐにリンクが届きます。いつでもブロックできます。

Leave A Reply

*
*
* (公開されません)

Share / Subscribe
Facebook Likes
Posts
Hatena Bookmarks
Pinterest
Pocket
Evernote
Feedly
Send to LINE