12タイプ診断 | 縦画像特化

３つの質問で12通りに分岐する診断テストテンプレート。

3つの質問（2択→3択→2択）で、12通りの回答に分かれる診断テストタイプのテンプレートです。シンプルなページ数で構成されており、無料版でもご利用いただけます。質問2の3択を2択にすることで、8タイプ診断にも対応可能です。

このテンプレートは縦長（スマートフォン壁紙）画像に特化しておりますが、簡単に比較できるよう診断結果Type-01〜04は3:4、Type-05〜08は1:1、Type-09〜12は9:19.5比率のサンプル画像が使われています。

このテンプレートの編集には「CMS」と「デザインエディター」両方を用います。簡単なStudioの操作知識を要することが見込まれますので事前に「エディタで試す」よりご確認ください。

質問・回答文はそのままでもOK。

初期設定では「今日のラッキーカラー診断」として12色に分岐する簡単な質問・回答文をご用意しました。（※ChatGPTで出力した文章をたたき台に制作した問答文となっております。）こちらはそのまま使っても、作品に合わせて調整していただいても問題ありません。

全体を通して質問は９種類、回答は20種類必要となります。

ストーリー仕立てや性格診断など、作品のテイストに合わせて自由にアレンジしてお使いください。また、サイトデザインのアレンジ等にも制限は設けておりませんので、こちらをたたき台として使っていただいても！

【5/13】当テンプレートのための診断コンテンツ問答集サンプル4種を公開しました！
https://note.com/mokuzu_shohin/n/n86b9daca3fdb

ポートフォリオ以外で作品を広める新たな方法を。

診断コンテンツを通して、既存作品に新たな体験価値をプラスすることを目的に制作しました。

診断結果ページでは作品にまつわる説明や関連作品紹介・購入リンク・Xシェア（要設定）など「その先へ」の行動を促す工夫を盛り込みました。

初期設定では画像（※webp形式）を保存できますので、スマートフォン壁紙やアイコン配布などにご活用ください。（不要な場合は非表示にできますが、一箇所「デザインエディター」上で調整が必要となります。）

より具体的な使用感をお試ししたい方はページ下部の「制作者本人も活用しています」の項目をご覧ください。

Xシェアや作品購入リンクを設定することでより効果的な導線を。

Studio公式記事 を参考に埋め込みリンクを実装することでXシェアボタンを設置することができます。

また、診断結果ページのスクリーンショットをシェア時のカバー画像として流用できるよう、トップページの情報量を調節しデザインしました。

使用例

例１）「ラッキーカラー診断」

イラストレーターやフォトグラファーなどクリエイターの方を想定。新たな作品との出会い方を探索できるコンテンツに！（既に問答文が設定されています。）

例2）「本日の格言」「今日の四字熟語」

ロゴデザイナーや小説家・書道家など特殊な文字・文章を書く方を想定。タイポグラフィを文脈に乗せて発信するツールに！（※ご自身で問答文を考えていただく必要があります。）

例3）「相性診断」

グループ活動をする方やタレント事務所の方を想定。推しメンバーとの新たな出会い方になりますように！（※ご自身で問答文を考えていただく必要があります。）

例4）「ぴったりなフレーバー」

分岐別におすすめの飲食物やボディケア用品のプロモーションに！（※ご自身で問答文を考えていただく必要があります。）

例5）「選択肢に沿って分岐するストーリー」

最終ストーリー部分の挿絵を壁紙としてプレゼントする仕組みができそう！（※ご自身で問答文を考えていただく必要があります。）

🌟一つだけに絞る必要はありません。これはポートフォリオ等のコンテンツ蓄積型サイトではないので「エンターテイメントとして、季節やトレンドに合わせた模様替え」を前提に一つのWebサイトを様々なアレンジで活用し、通年Xシェアで盛り上がれるような運用も可能だと考えています。詳しくはnote記事の項目「¥12,800÷12通り＝¥1066......?」（※現在の販売価格は¥7,980）をご覧ください。

テンプレートのページ構成

1. トップページ

2. 質問１〜３（CMSによる共通ページ）

3. 診断結果 (CMSによる共通ページ)

4. クリエイタープロフィール（モーダル）

5. 画像ダウンロード（モーダル）

6. 404 Not Found

各CMSモデルの主な設定項目

上部画像の構成図も併せてご覧ください。

• Q１〜３ 質問モデル（全9種）

  • 質問文

• A１〜２ 回答モデル（全20種）

  • 回答文

• A３ 診断結果（12通り）

  • タイトル（色名）/二つ名（作品名など）/カラーコード/壁紙画像/カバー画像/作品販売リンク/本文（リッチテキスト）

デザインエディターから直接編集していただく主な設定項目

• クリエイタープロフィール（SNSリンクなど）

• 全結果共通で表示される関連作品情報（説明、画像、リンク）

• Xシェアボタン（埋め込みコード、ハッシュタグなど）

テンプレートの機能に関する補足

• 質問と回答は後から繋ぎ替え可能

• 質問、回答、診断結果は基本的にCMS上で管理

• 診断結果ページの関連作品紹介は回答ごと/全結果共通の2パターン対応

• 診断結果ページのスクリーンショットをSNSシェア時のカバー画像として流用可能

ご質問はStudioコミュニティを中心にご活用ください！

Studioの基本操作についてのご質問は、Studio公式コミュニティ「Studio Community Japan」 でテンプレートタイトル「12タイプ診断」を本文中に明記していただいた上でご投稿いただければ積極的にお答えいたします。（購入通知を受け取ったのち、見回りの強化を予定しています。）

他バリエーションのご要望などありましたら、テンプレートURLを含む形でXにご投稿いただければ積極的に確認いたします。

その他ご質問・不具合等ございましたら、Studio.Storeテンプレートデザイナー詳細プロフィールページのメールアイコンからお問い合せください。

制作者本人も運用しています。

■ 作例「まどろみドリンク案内」

https://slumbering-brew-finder.studio.site/

テンプレート実装の都合上空欄となっている項目がありますので、それらを設定した場合やSNSシェア時の表示などは、こちらでお試しください！【02/01更新：Beta版新基盤へ移行対応済。高速になりました。】

■ 長文の紹介 「タイプ診断体験を通して作品をプロモーションできるStudioテンプレート「12タイプ診断 | 縦画像特化」Webサイトを(AIと)制作しました。

https://note.com/mokuzu_shohin/n/nd59cae6a7e0f 」

その他にも関連記事がありますので、ご興味あればぜひ。

制作時のお役立ちガイド記事

■【Studioテンプレート「12タイプ診断 | 縦画像特化」ご購入者さまへ】デザインエディター基本設定の図解ガイド

https://note.com/mokuzu_shohin/n/nd4df2278f24d?app_launch=false

■ 12タイプ診断コンテンツのための診断テーマ例&全分岐の質問・回答集サンプル 4種

https://note.com/mokuzu_shohin/n/n86b9daca3fdb

テンプレート更新情報・お知らせ

25.12.13 新エディタ切替に伴う不具合修正、画像・動作の軽量化を行いました。（大きな外観の変更はありません）

25.12.19 アイコン位置の不具合を修正しました。

25.12.27 価格の見直しを行いました。

26.03.09 テンプレート説明画像5枚目・CMSモデル詳細を追加しました。（テンプレートそのものの更新はありません）

26.03.25 当テンプレートはWebサイト内と同じフォントでサムネイル作成ができるよう、GoogleFontsからフォントを選定しています。しかし、先日「FONTPLUSフォントの利用が確認された」旨のメール通知を受け取っており調査を行ったところ、外観や設定上では該当フォントの使用は見当たらず、制作履歴に残っていることに起因する可能性が高いという見解に至りました。そのため、テンプレートご購入者様のプロジェクトへの影響はない見込みです。万が一FONTPLUSフォントを使用していない状況下で通知を受け取られた方がいらっしゃいましたら、ご一報いただけますと幸いです。

26.05.13 診断コンテンツに使える問答サンプル集についてのnote記事を公開しました。