運営しているジャズ初心者向けメディア「しろうとJAZZ」に、独自の診断プログラムを実装しました。来訪者が2つの質問（パラメータ）に答えるだけで、パーソナライズされた「おすすめのジャズ名盤」が算出されるシステムです。
通常の記事とは異なるインタラクティブなUIを導入し、「ジャズを聴き始めた方に自分に合った名盤を紹介したい」というミッションからスタートした企画ですが、プラグインに依存せず一から自前で構築したことで、デザインの自由度・レスポンス速度・運用性のすべてを掌握できる形に仕上がりました。
本記事では、システム設計の意図から実装プロセス、そして本番環境へのデプロイ時に重視した「運用設計（環境制約への対処）」までを、ログとして記録します。「WordPressに動的な診断コンテンツを組み込みたい」と考えている方の参考になれば幸いです。
MISSION BACKGROUND
なぜ診断システムを開発したのか
ジャズ入門者が最初に直面する壁は、「名盤が多すぎて、何から聴けばいいか分からない」という情報過多です。世の中には「名盤50選」のようなまとめ記事が無数に存在しますが、初心者にとってはターゲットが広すぎて、かえって選択を難しくしています。
そこで、来訪者の現在の好みを2つの質問でスキャンし、最適な1枚をピンポイントで提示する診断コンテンツを企画しました。
「あなたに向けた1枚」という切り口は、まとめ記事にはない「自分ごと化」を生み出し、初心者の背中を強く押すことができます。
SYSTEM DESIGN
設計における3つの要件
入力パラメータは「直感（気分）」に絞る
ターゲットはあくまで初心者のため、専門用語を完全に排除しました。「どんなジャズが聴きたい気分か（5択）」「聴き方のスタンス（3択）」の2問のみでパラメータを取得し、15パターンの結果へ分岐させるミニマルな構成です。設問数を増やせば精度は上がりますが、離脱率（エラー）も高まります。気軽なユーザー体験を最優先に設計しました。
出力結果は「占い」のようなUXで提示
15パターンそれぞれに、回答傾向を性格タイプに見立てた解説文を用意しました。「あなたは○○なタイプ」とラベリングすることで読み物としてのエンターテインメント性が上がるかなと。（本当はもっと読み応えのあるものにしたかったのですが…）
著作権に準拠したビジュアル生成
アルバムのジャケット画像は、著作権の観点からそのまま使用することができません。そこで、レコード盤とタイトルテキストを組み合わせた「擬似ジャケット」をCSSで描画し、診断結果のパラメータに応じてカラーリングが動的に変化する仕様にしました。実際の画像を使わずとも「自分だけの一枚」という特別感を演出しつつ、Apple Musicの公式埋め込みプレイヤーを連動させることで、即座に試聴可能な環境を構築しています。
TACTICS
プラグイン非依存の独自実装
WordPressに診断コンテンツを導入する際、既存の専用プラグインを使用する選択肢もありますが、今回はHTML / CSS / JavaScriptを用いた完全な自己完結型（スクラッチ実装）を採用しました。
理由は明確で、プラグインによる「デザイン・ロジックの制約」を排除し、自社メディアの世界観を100%反映させるためです。また、外部プラグインの増加はサイトの表示遅延やセキュリティリスクの増大を招きます。自前でコードを組むことで、これらをすべて自身の管理下に置くことができます。
SYSTEM ARCHITECTURE
設置設計：環境ごとの制約
本プロジェクトにおいて、同業の方に最も役立つ知見がこのセクションです。動的なコンテンツをWordPressにデプロイする際、「作ること」自体よりも、「実際の環境で安定稼働させること」のほうにハードルが存在します。
今回の構成では、記事本文にJavaScriptを直接記述するのではなく、JavaScriptをテーマファイル側に分離（デカップリング）し、記事本文には一切のコードを持たせないアーキテクチャを採用しました。これが結果的に最も堅牢な設計となります。
記事本文に直接コードを記述すると、エディターの自動整形機能や、サーバーのWAF（Web Application Firewall）によるセキュリティ干渉をダイレクトに受けてしまいます。意図しないコードの書き換えによるシステムの破壊を防ぐため、ロジックとコンテンツを完全に切り離しました。これにより、今後記事の編集・保存を行ってもシステムが影響を受けることはありません。
テーマ側に記述したJavaScriptは全ページで読み込まれますが、診断のコンテナ要素が存在するページでのみ発火するよう、1行の判定制御を組み込んでいます。目的のページ以外には一切干渉せず、保存によるコード破損とも無縁の、極めて安定した構成を実現しました。
動くものを作ることと、それを本番環境で運用し続けることの間には、意外と距離があります。この切り分けと対処にこそ、実務レベルの価値が宿ると実感しています。
MISSION SUMMARY
総括
自社メディアだからこそ、企画立案からシステム実装、環境対応までを、すべて一気通貫で完遂することができました。プラグインというブラックボックスに依存せず、妥協なくやり切ったことで、パフォーマンスと運用性の両方を手元に残せたことが最大の成果です。
自社運用で蓄積したこの知見と実装力は、そのままクライアントの皆様への「実行支援」に直結します。「オウンドメディアにインタラクティブな機能を追加したい」「回遊率を上げる確かな仕掛けがほしい」といったミッションがありましたら、実装面・運用面の勘所も含めて、GANCHAN 11号が妥協なくサポートいたします。
[ DATALINK ] 実際に稼働している診断システムは、以下のデータリンクよりご確認いただけます。 あなたの気分に共鳴する一枚を、ぜひスキャンしてみてください。