診断コンテンツを簡単にサイトへ導入できるプラグイン作りました｜ESK（easy診断コンテンツ）

タイトルにもある通りですが、この1ヶ月間せっせとプラグインを作ってました。

プラグイン制作ははじめてのことなので、あぁでもない、こうでもないと模索した結果、現状では満足できるものが出来たと思っています。

篠山個人としては現状の出来栄えに満足していますが、よりたくさんの人に使用感を試してもらいフィードバックやレビューをもらいたいという想いから期間限定ですがプラグインを無料配布させてもらいます。

※無料配布なので、一部不具合など生じる場合がありますがご了承ください

ESK(easy診断コンテンツ)とは

ESK(easy診断コンテンツ)はその名の通り、

• 誰でも簡単に導入できて
• 手軽に診断コンテンツをサイトに組み込める
• プラグイン

です。

プラグイン型なのでインストールいただければ、複数のサイトに使用可能です。

ESK(easy診断コンテンツ)では診断コンテンツと呼ばれる、質問と回答によって結果ページが分けられる機能をサイトに追加できます。

実際のデモ

ESK(easy診断コンテンツ)の導入により、ユーザビリティの向上および適切なコンテンツへの誘導が可能になります。

ESK(easy診断コンテンツ)の開発背景

診断コンテンツは従来より、一部のコンテンツメディアで使用されていました。

診断コンテンツを導入することにより、ユーザーは視覚的/直感的に目的のコンテンツへと辿り着くことができます。

また、サイトオーナー側としてもSNSシェアなどによるPV増加/購買行動の促進/データ収集など複数のメリットが挙げられます。

一方で診断コンテンツの導入はハードルが高いものでした。

• 設問コンテンツのロジック
• 回答結果のロジック
• デザインの調整

これらをすべて自分好みのように作ろうとするとオーダーメイドになってしまい、制作会社に依頼した場合の相場では20万〜となります。

同様にプラグインにおいても、あまり評判の良いものは提供されておらず、個人のブログ運営者などからすると手が届きにくいものでした。

ESK(easy診断コンテンツ)ではこういった背景を踏まえ、以下の3つのポイントで制作しました。

ESK(easy診断コンテンツ)の基本機能

①設問数は自由に増減可能

設問数は自由に設定できます。

あまりに設問数が多いと、ユーザーが途中離脱しやすくなるため2問～8問程度に留めるのが良いでしょう。

②回答選択肢も自由に増減可能

選択肢の数も設問ごとに増減可能です。

2～6個程度の選択肢を用意してあげることをオススメします。

PCとスマホ両方の見栄えを良くするために偶数個の選択肢を推奨しています

③結果ページは回答によって任意のページを表示

結果ページも好きなだけ作ることができます。

ほとんどの方は結果ページを4～6つ程度作れば診断コンテンツとして成り立つでしょう。

どの結果ページが表示されるかは、ユーザーが選んだ回答によって結果が変わるように設定できます。

結果ページを大量に作ると、重み付けロジックが大変になるので極力増やしすぎないことを推奨しています

結果ページの算出ロジックには重み分けという考え方を用いてます。

例えばおすすめ漫画の診断コンテンツの場合、結果ページを4つ用意したとします。

1. ドラゴンボール
2. デスノート
3. ちはやふる
4. 君に届け

設問1で「あなたは男性ですか？女性ですか？」とあり、女性と答えた場合には一般的には「③ちはやふる」もしくは「④君に届け」をオススメしますが、「①ドラゴンボール」や「②デスノート」を女性が読まないとは限りません。

そこで、女性が好みやすい3と4の結果に寄る度合いを強くしつつ、1と2の選択肢を消さない考え方が重み分けです。

この場合、

1. ドラゴンボール：1点
2. デスノート　　：1点
3. ちはやふる　　：2点
4. 君に届け　　　：2点

という重み付けを設定します。

設問がこの一問の場合、「③ちはやふる」もしくは「④君に届け」が結果として表示されます。

続いて設問2で「完結している漫画を読みたいですか？」に対して回答が「はい」の場合の重み分けは以下となります。

1. ドラゴンボール：1点
2. デスノート　　：1点
3. ちはやふる　　：0点
4. 君に届け　　　：1点

2022年4月現在で「ちはやふる」は完結していないので上記例としています。
上記設問2で完結していない「ちはやふる」を確実に結果に表示させたくない場合は「ちはやふる」以外の点数を10点など高得点に設定すれば他の設問結果を考慮しても表示されなくなります。

設問1と2を踏まえ、結果ページの点数は以下になります。

最終的な算出ロジック

1. ドラゴンボール：(設問1)1点 ＋ (設問2)1点＝(合計)2点
2. デスノート　　：(設問1)1点 ＋ (設問2)1点＝(合計)2点
3. ちはやふる　　：(設問1)2点 ＋ (設問2)0点＝(合計)2点
4. 君に届け　　　：(設問1)2点 ＋ (設問2)1点＝(合計)3点

最終的に結果ページに表示されるのは「④君に届け」となる仕組みです。

④結果ページには商品画像やリンクを設置可能

結果ページは診断コンテンツにおいてもっとも重要なページです。

結果ページの目的は

• サイト内の適切なコンテンツへの誘導
• 広告主サイトへの誘導

のどちらかのケースが多いかと思います。

いずれのパターンにおいても、文言・商品画像・リンク先をページごとに変更可能としています。

そのため、結果ページで表示した商品の詳細ページに飛ばすことも広告主のLPへ飛ばすことも自由自在です。

ESK(easy診断コンテンツ)のデザインカスタマイズ

①背景やロゴ挿入を自由に変更可能

表紙には背景カラーもしくはお好きな背景画像をセットできます。

設問ページではタイトル部分のメインカラーと設問内容・回答選択肢部分のサブカラーの2色をお好きな色合いに変更可能です。

②表紙/設問ページ/回答ページの文言/文字サイズは自由に変更可能

各ページの文言内容・文字サイズは自由に変更可能です。

文字サイズはPCとスマホで分けて設定できるため、モバイルユーザーが多いサイトでも違和感なく利用可能です。

ESK(easy診断コンテンツ)の使い方

ESK(easy診断コンテンツ)は大きく3構成によって成り立っています。

• 表紙
• 設問ページ
• 結果ページ

プラグインのインストール

Zip形式のプラグインファイルの状態で、

プラグイン＞新規追加＞プラグインのアップロード＞ファイルを選択

と進みZipファイルを選択したら「今すぐインストール」を押します。

インストールが完了したら「有効化」します。

表紙の設定

プラグインの有効化が完了したら、サイドバーに「診断コンテンツ」が表示されます。

各種設定はこちらから行います。

「表紙ページ」タブから各種設定ができます。

背景画像URLを設定すると画像が優先、画像URLを空白にするとカラーコード（背景色）が優先されます。
背景色は異なるカラーコードを入力するとコントラストに、同色のコード入力で単色になります。

背景画像の推奨サイズ

• PC：767px × 510px
• スマホ：340px × 570px

設問ページの設定

設問ページデザイン

設問ページのデザインは「診断ページ」タブから各種設定が可能です。

設問項目の登録

設問項目は「質問」タブから登録を行います。

設問回答の設定

設問回答の選択肢は「回答」タブからプルダウンで質問を選択後、回答を入力します。

結果ページの設定

結果ページのパターン登録

結果ページのパターン登録は「結果」タブから

• メイン結果文
• 画像URL
• ボタンリンク
• サブ結果文

を1セットとして複数パターン登録可能です。

結果ページの重み分け登録

「重み分け」タブにて、先述した重み分けのロジックを参考に、結果・質問・回答ごとに重みを入力します。

任意の数字（1や2など）を順番に登録していきます。

重みの設定では数値のみの入力となります。”点”などは入力しないでください

ショートコードをサイト内に設置

最後にESK(easy診断コンテンツ)を設置したい場所に以下のショートコードを入力します。

[diagnosis_content]

ESK(easy診断コンテンツ)の無料配布受け取り方法

無料配布にあたり、特に条件は定めておりません。

以下の手順でご連絡いただければ、Twitter経由でプラグインファイルをお渡しします。

無料配布の受け取り方法

諸事情により配布の遅延・急遽停止になる可能性があることをご了承ください

クレジット表記の削除方法

初期配布時点ではESK(easy診断コンテンツ)の結果ページにクレジット表記を入れさせてもらっています。

ESK(easy診断コンテンツ)の使用感を実際に皆さんのサイトでお試しいただき、レビュー投稿をいただければクレジット表記の削除済プラグインを再配布させていただきます。

その場合、クレジット表記があった場所にはESK(easy診断コンテンツ)の表紙に戻るリンクが設置されます。

レビューを書いていただけた方は篠山のTwitter（shinoyama_yuuto）までDMにてご連絡ください。

レビュー内容は当サイト内にてご紹介させていただく場合がございます

ESK(easy診断コンテンツ)利用の注意

プラグインの無料配布にあたり、いくつか注意点がございます。

1. プラグインファイルの改変は禁止しています
2. プラグインの無償・有償に関わらず二次配布および商用利用は禁止です
3. 全テーマにおける動作確認はしておりません（現時点では有名テーマのみ動作確認済です）
4. 一サイトにつき一セットの組み合わせのみの対応となります
5. 当プラグインの使用による損失や損害について一切の責任を負いかねます