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構成は非常に相性が良いです。

• 「中身が固まっていないけれど、とりあえず箱だけ作っておきたい」

• 「一つのシステムを使い回して、複数の診断ツールを量産したい」

• 「デザインにはこだわりたいが、運用の手間は最小限にしたい」

技術の押し付けではなく、プロジェクトの規模や予算に合わせた「最適な引き算」をご提案します。もし似たような課題をお持ちでしたら、まずは壁打ち相手としてお気軽にお声がけください。