1. プロジェクトの背景と要件
今回の診断サイト制作では、以下の条件が求められました。
-
柔軟性： 診断ロジックや質問内容が未確定で、作りながらブラッシュアップしたい。
-
拡張性： 今回の仕組みをベースに、別なドメイン・別のサイトへ水平展開したい。
-
運用性： プログラムがわからなくても、HTMLや管理画面の操作だけで更新を完結させたい。
-
体験： ユーザーの離脱を防ぐため、画面遷移（URL遷移）なしでサクサク動かしたい。
2. 採用した解決策：ヘッドレスWordPress
これらを実現するために、WordPressを「サイトの器」としてではなく、「データの箱（API）」として使用する手法を採用しました。
構成のポイント
-
バックエンド（管理画面）： WordPressのカスタム投稿とカスタムフィールドを活用。
-
フロントエンド（表示側）： バニラJS（生のJavaScript）によるシングルページ構成。
3. 制作会社様にとっての「3つのメリット」
① 「プログラム不要」で中身をブラッシュアップ
質問文、選択肢、診断結果の数値、イラスト画像……。これらすべてをWordPressの管理画面から編集可能にしました。エンジニアにコード修正を依頼することなく、ディレクターやクライアント様の手で、公開直前まで内容を追い込むことができます。
② 「バニラJS」による高いメンテナンス性
クライアント様がAIを活用した「パイプコーディング」を運用していたことがわかったため、本プロジェクトではあえてバニラJSでの実装を選択しました。
ReactやVue.jsといったモダンなフレームワークは、構文ルールや複雑な依存関係が「パイプコーディング」の障壁となることが想像できます。バニラJSであれば、コンパイルも不要でAIの出したコードを直接反映できるため、クライアントのプロンプトに対応しやすいからです。
③ 「テーマを作らない」ことによるコスト最適化
今回は「ヘッドレス」という名の通り、WordPress側のテーマ制作は行っていません。 既存のテーマをホワイトアウトさせて「データの送受信」に特化させることで、見えない部分の作り込みをカット。その分、デザインの自由度やUIの向上にリソースを割くことが可能になりました。
4. エンジニアの目線：あえて「作り込みすぎない」
今回の設計で大切にしたのは、「エンジニアがいないと何もできない状態」を作らないことです。
-
HTMLベースの組み込み： フロントエンド側は、特定のIDを振ったHTMLにJSを読み込ませるだけ。コーダーの方が、通常のサイト制作と同じ感覚でデザインを調整できます。
-
水平展開の容易さ： コア部分はREST APIで共通化されているため、別の診断を作る際も、WordPress側の設定をコピーするだけでスピーディに立ち上げが可能です。
制作ポイント
-
フロントエンド： バニラJS（コンパイル不要、URL遷移なし）
-
バックエンド： WordPress（REST API活用、カスタムフィールドで柔軟な編集）
-
拡張性： 質問の増減や、別ドメインへの水平展開も容易
-
メリット： デザインの完全自由化 ＋ クライアント自身でのコンテンツ更新可能能力
こんな時にご相談ください
「ガチガチのシステム開発」にするほどではないけれど、「既存のプラグインでは自由度が足りない」。そんな案件に、今回のヘッドレスWP構成は非常に相性が良いです。
「中身が固まっていないけれど、とりあえず箱だけ作っておきたい」
「一つのシステムを使い回して、複数の診断ツールを量産したい」
「デザインにはこだわりたいが、運用の手間は最小限にしたい」
技術の押し付けではなく、プロジェクトの規模や予算に合わせた「最適な引き算」をご提案します。もし似たような課題をお持ちでしたら、まずは壁打ち相手としてお気軽にお声がけください。