Dev Log

PHP未経験がAIで「保守管理プラグイン」を1時間で自作。クライアント継続率を高めた開発実録

PHP未経験がAIで「保守管理プラグイン」を1時間で自作。クライアント継続率を高めた開発録
assistage

Web制作の仕事をしていると、避けて通れないのが「納品後の保守管理」です。

毎月保守費用をいただいていても、大きなトラブルが起きなければ、クライアントからは「何もしていない」ように見えてしまいがち。

「これ、お金を払う意味ある?」と思われて解約されてしまう……そんな経験はないでしょうか。

「だったら、守っている証拠を管理画面に見える化すればいい」

そう思い立ち、私は「保守契約管理プラグイン」を自作することにしました。

私はエンジニアではありません。PHPコードも書けません。 しかし、AI(Gemini/ChatGPT)とVS Codeを使うことで、構想から実装まで、わずか1時間で完成しました。

今回は、その「開発プロセス」と、完成した「実務直結型プラグイン」の全貌を公開します。

完成物:安心を可視化する「保守管理プラグイン」

まずは、1時間で作ったプラグインの機能をご覧ください。

1. ダッシュボードで「契約状況」が一目瞭然

WordPressのダッシュボード(トップ画面)に、現在の保守契約状況をカード形式で表示させました。

ダッシュボードを開くと一番上に契約状況が表示されます。
ダッシュボードを開くと一番上に契約状況が表示されます。

「今期の修正回数」「残り回数」「契約期間」がログインするたびに目に入ります。

これだけで、クライアントは「管理されている安心感」を得られますし、「あと何回修正できますか?」といった問い合わせも減り、無茶な修正依頼(回数オーバー)の抑制にもなります。

修正依頼はこれまで通りチャットやメールで行い、双方が内容に合意してから作業に取り掛かります。

ポイントは「事前の見積もり」です。

工数がかかる修正の場合は、事前に「この作業は2回分の消費になります」とお伝えし、納得していただいてから着手します。

このワンクッションがあるため、「勝手に回数が減らされた」「思ったより減っていた」という認識のズレが起きず、クライアントにとっても大きな安心材料となります。

2. 管理者専用の「保守契約管理」メニュー

サイドメニューに「保守契約管理」を追加し、クリックすると専用の管理画面が開きます。

画面は使いやすいよう、以下の3つのタブで構成しました。

  1. 契約状況: クライアントにも見える確認画面
  2. 契約設定: 管理者(私)だけが設定できる画面
  3. 修正履歴管理: 作業ログを残す画面
タブ切り替えで情報を整理。シンプルで見やすいUIにこだわりました。
タブ切り替えで情報を整理。シンプルで見やすいUIにこだわりました。

3. 「オーナーユーザーID」によるシンプル権限管理

ここが工夫したポイントです。

「契約設定」や「修正履歴」をクライアントにいじられては困ります。

そこで、「特定のユーザーID(私)」でログインしている時だけ、編集タブが表示されるように制御しました。

ユーザーID「1」の時だけ設定画面が出る仕様。
ユーザーID「1」の時だけ設定画面が出る仕様。

WordPressの複雑な権限グループ(ロール)管理のコードを書かずとも、ID指定(画像では「1」)だけで管理機能をロックする。

これもAIに提案させた「実務ハック」の一つです。

4. データベース不要の軽量設計

データはすべてWordPress標準の wp_options テーブルに保存する仕様にしました。

別途データベースを用意する必要がないため、このプラグインファイルを1つコピーするだけで、他の全クライアントのサイトに即導入可能です。

開発の裏側:コードは書かない。「指示書」を書く。

「どうやって1時間で作ったの?」と驚かれますが、秘訣は「AIの使い方」にあります。

多くの人は、AIにいきなりコードを書かせようとして失敗します。

私は「AIのリレー」を行いました。

Step 1:構想と要件定義(Gemini / ChatGPT)

まず、チャットAI(GeminiやChatGPT)に、日本語で相談します。

「クライアントの修正回数を管理したい」「ダッシュボードに出したい」と要望を伝え、「エンジニアに渡すための詳細な要件定義書(指示書)を書いて」とお願いします。

私がやったのは、「欲しい機能」を伝えただけ

裏側の仕組み(wp_optionsを使うことや、タブ切り替えの仕様など)は、すべてAIが構成してくれました。

Step 2:実装(VS Code + Code Agent)

次に、VS Codeを開きます。

私は「ChatGPT Code Agent」(拡張機能)を使用しています。

ここでやることは一つ。

Step 1で作った「指示書」を貼り付けるだけです。

指示が明確なので、AIエージェントは迷いません。

「タブ機能を実装しました」「ダッシュボード用ウィジェットを追加しました」と、猛スピードでファイルを作成していきます。

修正履歴の追加画面。ここに入力されたデータがダッシュボードに反映されます。
修正履歴の追加画面。ここに入力されたデータがダッシュボードに反映されます。

Step 3:エラー修正もコピペのみ

もちろん、途中でエラーが出ることもあります。

その場合も、自分でコードを直しません。

エラー文をコピーして「直して」と言うだけ。

数回のやり取りで、完動するプラグインが出来上がりました。

私が開発できた裏には、実は『AIマネジメント』という思考法がありました

まとめ:AIは「魔法の杖」ではなく「優秀な部下」

このプラグインのおかげで、私のクライアントワークは劇的に変わりました。

  • 信頼の獲得: 「しっかり管理してくれている」という可視化。
  • トラブル回避: 「あと何回修正できますか?」という不毛なやり取りの消滅。
  • 業務効率化: 全クライアントに同じプラグインを入れるだけで管理体制が整う。

重要なのは「プログラミング言語を覚えること」ではありません。

「現場の課題を見つけ、AIという部下に的確に指示を出すこと」です。

このサイト「AI Work Hack」では、こうした「非エンジニアだからこそできる、現場視点のAI活用術」をこれからも発信していきます。

ABOUT ME
LON | AI Work Hacker
LON | AI Work Hacker
非エンジニア実装家 / AI業務委託
「コードは書かない。AIを操る。」

普段は業務委託のプロとして、AI企業のLINE運用や自動化システム構築を担当。

エンジニア経験ゼロから、AIだけを武器にツールを自作する「実務ハック」を研究中。
記事URLをコピーしました