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

こんにちは!

サラリーマンでありながら副業の収入で生きている篠山ゆうと(shinoyama_yuuto)です。

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

Yulaくらげ

どんなプラグインなの?

篠山ゆうと

どんなサイトにも導入しやすいプラグインだよ!

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

篠山ゆうと

まだまだ改善の余地はありますが!

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

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

篠山ゆうと

この記事でプラグインの説明の最後に配布方法も記載してます!

本記事の信頼性
篠山ゆうとプロフィール(記事の信頼性)
篠山ゆうと(@shinoyama_yuuto

この記事を書いている篠山ゆうとはブログ歴6年、Webマーケティング歴10年のサラリーマン副業ブロガーです。副業のおかげで本業へのストレスや不安もなくなり、現在はサラリーマンとして充実の社会保障を受けながら副業で毎月100万円以上を稼いでいます。このYulagでは、収入を増やしたいサラリーマンの人向けに副業ノウハウを紹介しています。

目次

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

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

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

です。

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

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

実際のデモ

Logo

あの名作から話題作まで

いま読んで欲しいマンガ診断

質問に答えていくだけで、おすすめのマンガを提案します。
思わぬ出会いがあるかもしれません。

あの名作から話題作まで

いま読んで欲しいマンガ診断

Q 1/3

アナタは男性ですか?女性ですか?

女性
男性

あの名作から話題作まで

いま読んで欲しいマンガ診断

Q 2/3

好きなマンガのジャンルはなんですか?

サスペンス系
学園系
恋愛系
戦闘系

あの名作から話題作まで

いま読んで欲しいマンガ診断

Q 3/3

完結しているマンガを読みたいですか?

完結していなきゃイヤだ
完結していなくてもOK
あなたにオススメの漫画は・・・
Logo

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

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

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

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

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

ユーザーのメリット
サイト運営者のメリット
  • 文字を読み込まずに直感的な操作
  • 診断結果の信頼性が向上
  • 納得した購買行動への寄与
  • SNSシェア・リピートの期待
  • サイト滞在時間増加
  • CV寄与
  • 行動データ収集

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

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

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

Yulaくらげ

高すぎるよ…

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

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

ESK(easy診断コンテンツ)の3つのポイント

1.設問は一問一答形式

回答内容ごとに設問が分岐するタイプだと設定が複雑化してしまいます。あらかじめ作成した設問の内容は固定にすることで初心者でも直感的に扱いやすくしています。

2.ロジックは重み分けを採用

ユーザーが選んだ回答による結果ページの振り分け方法については重み分けを採用しました。各設問の選択肢ごとにポイントを振り分け、最終的に一番ポイントが高い結果を表示します。

3.自由なカスタマイズが可能

どんなサイト・どんなひとでも扱いやすいよう、カスタマイズ幅は無限です。テキスト内容・カラー・フォントサイズ・背景デザインなどすべて自由に変更できます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Yulaくらげ

重み分け?

篠山ゆうと

ちょっとだけ難しいから詳しく解説するね!

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

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

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

Yulaくらげ

たしかに振り分けできない回答パターンもあるよね!

そこで、女性が好みやすい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へ飛ばすことも自由自在です。

篠山ゆうと

TOPページで使うなら詳細ページ、個別記事内で使うなら広告主LPへのリンクなど使い分けできます!

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

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

ロゴあり・背景画像ありの場合
ロゴあり・背景を2色コントラストにした場合

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

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

篠山ゆうと

もちろん配色は単色でもOK!サイトのイメージに合わせて好きに変えれます!

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

表紙のテキストサイズ通常
表紙のテキストサイズを小さくした場合(個別に変更可能)

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

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

篠山ゆうと

文字数が多い場合はテキストサイズを小さくしたり、サイト全体の文字サイズに合わせた調整など細かく設定できます!

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

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

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

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

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

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

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

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

表紙の設定

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

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

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

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

背景画像の推奨サイズ

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

設問ページの設定

設問ページデザイン

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

設問項目の登録

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

設問回答の設定

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

結果ページの設定

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

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

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

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

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

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

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

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

篠山ゆうと

重み分けの入力結果は「ステータス」タブで一覧を確認できます!

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

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

[diagnosis_content]
記事内ではこのようになっていればOK。
サイドバーやウィジェットではカスタムHTMLを使用してください。

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

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

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

Yulaくらげ

タダって最高!

篠山ゆうと

改修も予定しているので無料配布期間は4月いっぱいの1ヶ月です!

無料配布の受け取り方法

STEP
篠山のTwitterをフォロー

篠山のTwitter(shinoyama_yuuto)をフォローしてください

STEP
DMで「ESK(easy診断コンテンツ)」の受け取り希望の旨を連絡

DMで「ESKが欲しい」とお送りいただければプラグインファイルをお渡しします。

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

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

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

篠山ゆうと

そのままでも機能等には何ら制限はありません。

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

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

Yulaくらげ

複数回の診断ができるからユーザーとしてもより納得した結果を得ることができるね!

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

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

篠山ゆうと

皆さんからの感想やレビューをもとに今後の改善に繋げていきたいのでご協力いただけると嬉しいです!

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

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

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

無料配布期間は4月30日まで

篠山のTwitterをフォローする
よかったらシェアしてね!
  • URLをコピーしました!
目次