チャットGPT、ジェミナイなどAIが発展し、過去には多くのコストをかけて開発者に依頼して開発するプログラムやプラグインをAIを活用して直接開発を試みるユーザーが増えています。コーディングの知識がなくても簡単な機能のプラグインを難しくないように開発が可能ですが、複雑な機能はAIの助けを借りても初心者にも容易ではない課題かもしれません。
WordPressを活用して単純なウェブサイトを越えて、一つの小規模なWebアプリケーション（SaaS）として機能する機能の実装に対する需要が着実に増えているようです。しばらく前に、1人のクライアントから興味深い作業依頼を受けました。
重要な要件は、「ユーザー WordPress 問い合わせフォーム（Form）を通じてデータを提出すると、これを基にチャットGPT（OpenAI API）が分析し、カスタマイズされた結果レポートを提供するシステム」を構築することでした。単純なチャットボット連動ではなく、バックエンドで独自のスコアリングロジックを経てAIの ハルシネーション（幻覚）を防ぎ、最終的に印刷可能なすっきりとしたUIの結果ページを出力する多少深刻な作業でした。
初心者として、このようなタイプのAIオートメーションプラグインを作成したい場合は、どのように構造を設計し、開発を進めるのが良いかについて簡単に考えてみましょう。
プロジェクト企画・アーキテクチャ設計
単にユーザーの入力値をそのままOpenAI APIに投げると、奇妙な答え（ハルシネーション）が出たり、クライアントが望む規格化されたレポートを取得することは容易ではないようです。したがって、 途中でデータを洗練し、ガイドラインを与えるバックエンドサーバーロジックが必要です。
全体的なシステムフローを次のように企画してみました。
- ユーザー入力： Quformプラグインを使用して作成された視覚的に構成されたアンケートフォームを通じて、ユーザーはアンケートエントリを作成して送信します。コンタクトフォームプラグインは、WPFormsやNinja Formsなどの他のプラグインの使用も可能です。
- サーバースコアリング（プライマリタブレット）： 提出されたデータに基づいて、カテゴリ別スコアの合計、注意（Caution）フラグ、戦略（Strategy）フラグなどの内部ロジックの計算
- API通信： 原文データ、計算されたスコアとフラグ、管理者が設定したプロンプトをまとめてOpenAI APIに送信する
- 結果出力： AIが生成したカスタムレポートをテキストだけでなく、カード型UIと画像自動マッチングを通じて視覚的にレンダリング（A4印刷最適化を含む）
このような「中間データの精密化とスコアリングプロセス」が必要な代表的なビジネス例は次のとおりです。
- カスタマイズされた健康と栄養食の設計： ユーザーの身長、体重、活動量だけをAIに伝えて食事を絞ると、非現実的なカロリーをお勧めする危険があります。バックエンドから BMI（体質量指数）と基礎代謝量を正確な公式で一次計算した後、この確定した数値に基づいてAIに食事レポートを作成するように制御できます。
- 金融および投資傾向分析レポート： 投資家のリスク受容度（Risk Tolerance）をAIが恣意的に判断するようにしてはいけません。アンケートフォームで入力されたデータを独自のロジックにスコア化して「安全追求型」、「積極投資型」などの結果を先に確定した後、AIはその結果に合った案内フレーズのみを有利に生成するように制限できます。
- パーソナルカラー＆ビューティー製品おすすめ： 診断結果によって推奨すべき自社ブランドの化粧品ラインナップが決まっている場合に便利です。サーバーロジックを使用して、ユーザーの肌タイプに合った「推奨製品コード（Strategy Flag）」をあらかじめマッチングしてAPIに転送すると、AIがサードパーティ製品や奇妙な製品を推奨することをソースブロックできます。
- 不動産ローンと法律の自動相談： ローン規制や法的条件は基準が非常に厳しいです。 AIが勝手に判断しておくと、条件が合わない顧客に「ローンが可能になる」という誤った期待を与える危険が大きい。したがって、サーバーロジックは最初に顧客の条件を計算し、「ローン不可」かどうかを確実に打ちます。 AIは、この確定した結果を伝え、顧客にはない理由を丁寧に説明し、他の現実的な代替案を案内する役割だけを実行させることができます。
その結果、バックエンドのスコアリングロジックは AIの創造性を借りて、ビジネスの専門性と正確性は徹底的にサーバーによって制御される重要な安全装置 役割を果たします。
私はユーザーが提出したデータをチャットGPTが分析し、ユーザーに適したレンズを推奨するプラグインを作ってみました。現在、目の状態、推奨レンズ群、推奨理由、度数、両眼戦略などを提示する結果ページを作成しています。重要なのは、下図のように、推奨レンズ群をチャートとして提示するように構成することでした。 JSとCSSを使用して、クライアントが望むデザインでチャートを実装しました。
段階的開発プロセス
Step 1: 視覚的な問い合わせフォームインタフェースの構築
一般的なテキスト入力フォームは、ユーザーの直帰率を高めることができます。 MBTIテストや心理テストのように直感的で退屈しないように、画像やアイコンを選択できるフォーム環境を設定しました。
Quformという有料プラグインを使用しました。
- 質問グループを作成し、段階的に回答を送信します。たとえば、1つまたは2つまたは3つの質問に回答し、下の「次へ」ボタンを押して次の質問グループに移動し、最初から過度の質問が表示され、ユーザーの負担を軽減し、直帰率を下げます。
- 選択オプションで画像を入れることができ、顧客が望む視覚的な問い合わせフォームを作成
Step 2: バックエンドスコアリングロジックの実装（ハルシネーション制御）
ユーザーがフォームを送信すると、データを傍受して分析を開始します。
- 事前に定義されたスコア表（Array）に基づいて入力値をマッピングします。
- 特定の危険因子や注意事項が見つかった場合は、Caution Flagを付与します。このプロセスにより、AIに「このユーザーはAアイテムのスコアが高く、Bアイテムに注意する必要があります。この基準に合わせてレポートを作成してください」と明確な指示を出すことができます。
ツールは、ユーザーに正確な医療情報を提供することではなく、ユーザーにきれいで洗練されたデザインで、そのような結果（？）を視覚的な情報と共に提供することです。
そのため、ユーザーが問い合わせフォームを入力して送信すると結果ページに移動しますが、ChatGPTは分析してレポートを作成中に画面ロードメッセージを表示し、結果レポートにはグラフィック要素を含めました。
ステップ3：プロンプト管理機能とDBの最適化
AIの結果はプロンプトによって決定されるため、クライアントが直接プロンプトをテストして変更できる WordPress 管理者設定ページを開発しました。
💡開発のヒント（パフォーマンスの最適化）：プロンプトのように長いテキスト設定をwp_optionsテーブルに保存するときは、初期ロード速度（TTFB）の低下を防ぐためにautoloadプロパティをnoに設定する必要があります。不要なオプションデータが毎回ロードされるのを防ぎ、データベースを軽く快適に保つことができます。
ステップ 4: OpenAI API 連動および非同期処理 (AJAX)
組み合わせ ペイロード（Payload） WordPress 組み込み関数 wp_remote_post() を活用して OpenAI API に転送します。 APIレスポンスには通常数秒の時間がかかるため、画面がフリーズしているように見えないように、フロントエンドではAJAX非同期通信を適用し、ローディングアニメーションを実装してUXを改善しました。
OpenAI APIモデルでは、コストとパフォーマンスを考慮してgpt-5-miniを選択しました。
※1件あたりのトークン使用量基準：入力約2,000トークン+出力約800トークン（セクション別レポート1件）
| 모델 | 入力 | 出力 | 1件あたりの費用 | 月100件 | パフォーマンス |
|---|---|---|---|---|---|
| gpt-5-ナノ | $0.05 | $0.40 | 約0.04ウォン | 約4ウォン | ⭐⭐ |
| gpt-5-ミニ | $0.25 | $2.00 | 約0.2ウォン | 約20ウォン | ⭐⭐⭐ |
| gpt-4.1-ナノ | $0.10 | $0.40 | 約0.1ウォン | 約10ウォン | ⭐⭐ |
| gpt-4.1-ミニ | $0.40 | $1.60 | 約0.3ウォン | 約30ウォン | ⭐⭐⭐ |
| gpt-4o-mini | $0.15 | $0.60 | 約0.1ウォン | 約14ウォン | ⭐⭐⭐ |
| gpt-5.4-ナノ | $0.20 | $1.25 | 約0.14ウォン | 約14ウォン | ⭐⭐⭐ |
| gpt-5.4-ミニ | $0.75 | $4.50 | 約0.5ウォン | 約50ウォン | ⭐⭐⭐⭐ |
| gpt-5.4 | $2.50 | $15.00 | 約1.7ウォン | 約170ウォン | ⭐⭐⭐⭐⭐ |
ログオンオプションページでGPTモデルを選択できるようにしました。
GPTモデルを変更すると、時々エラーが発生することもあるようです。 GPTモデルによっては、サポートされていない機能がある可能性があります。モデルは、上記のように多くの選択肢を提供するのではなく、ほんの数個しかサポートしないようにするのも大丈夫です。
gpt-5-miniモデルを使用した場合、1件あたりのコストは0.01ドル以下で安価なレベルでした。 0.01ドルであっても1日に1000件ずつ提出されると、1日100ドルの費用が発生します。しかし、1日にこのように多くのユーザーが利用するサイトは珍しくないかと思います。
ステップ5：カスタムUIのレンダリングと印刷の最適化
APIから返されたJSON形式のデータを解析し、最終結果ページに振り分けます。
- 画像自動マッチング： AIが推薦した結果、カテゴリに合わせてサーバに保存された画像が動的に出力されるように処理しました。
- 印刷用CSS（
@media print): ウェブ上のカラフルなレイアウトがA4用紙にきれいに印刷されるように、印刷時に不要なヘッダーやフッターは隠して余白とカードの割合を調整する印刷専用スタイルシートを適用しました。
Step 6: カスタムポストタイプ（CPT）を活用したバックオフィス結果管理
クライアントの初期要件には記載されていませんが、サービスの完成度と継続的な運用管理のために WordPress 管理者ページで生成されたすべてのレポート履歴を確認できます カスタムポストタイプ（Custom Post Type、CPT） 機能を追加しました。
ユーザーがフォームを送信し、AIがレポートをレンダリングした後、その結果が一度に揮発して消えるのではなく、管理者通知パネルに「投稿」の形式で自動的に保存されるようにデータベース構造を設計しました。
単にフロントエンドで派手な結果を見せることにとどまらず、収集されたデータを資産化し、今後のメンテナンスとサービスの改善まで考慮しました。
Q＆A： WordPress AI連動プラグインの開発
Q1. OpenAI APIを連動してもサイトの読み込み速度が遅くなりませんか？
A. フロントエンドで非同期通信（AJAX）を利用してロードを処理するため、ウェブサイトの初期応答速度（TTFB）には影響しません。ただし、チャットGPTがデータを分析してレポートを生成するのに時間がかかります。結果ページにリダイレクトされた後、結果が表示されるまでロード画面が表示されるようにできます。
Q2.ユーザーが入力したデータがAIに送信されるときにセキュリティ上の問題はありませんか？
A. 名前や連絡先など、個人を識別できる機密情報はAPIに送信されません。バックエンドから徹底的に数値およびフラグ形式の非識別データに変換し、OpenAIに転送するように設計します。さらに、Cloudflare WAFなどの強力なWebファイアウォールルールを設定して、悪意のあるボットやスクレーパーのランダムなフォームの送信をブロックしてセキュリティを強化することもできます。
Q3.開発完了後のAPI使用料やメンテナンスはどうなりますか？
A. プラグイン自体は WordPress 内部で駆動されるため、ホスティング費用以外に、OpenAI API 使用量に応じた従量制料金のみ発生します。テキストベースのAPIは、処理コストが非常に安い方です。一緒に WordPress 管理画面でプロンプトを直接変更できる構造で開発されるため、軽量コンテンツ変更のための追加の開発メンテナンスコストを削減することができます。
OpenAI APIのコストは1件あたり0.01ドル以下と非常に低いレベルですが、多くのユーザーがフォームを送信するとコストが増加する可能性があります。しかし、現実的にコストが負担になるほどユーザー数が多い場合はまれです。
Q4.特定のコンタクトフォームプラグインのみを使用する必要がありますか？
A. いいえ。開発例では、ビジュアルテンプレート（画像選択など）に優れたQuformを活用していますが、Contact Form 7、WPForms、Gravity Formsなど、ほとんどの人気フォームプラグインと連動が可能です。各プラグインが提供する独自のフックを活用して、バックエンドデータを傍受してAPIと通信する方法で柔軟にカスタム開発を進めることができます。
最後に、
AIの発展により、今やプラグインを専門開発者だけでなく一般人も開発できる時代になりました。それにもかかわらず、コーディングについてまったくわからない場合は、プログラムやプラグインを開発するのは簡単ではありません。
特に、顧客が望むプラグインを作成するには、顧客の要件を理解し、顧客から十分な情報を提供することが重要です。プラグインを開発するときは、セキュリティの問題、速度の問題なども考慮し、今後のメンテナンスが容易になるように設計することも重要だと考えられます。
コメントを残す