Builder

診断を作り、HTMLとして持ち帰る。

質問・回答・診断結果・CTAリンクを編集すると、プレビューに反映されます。記事やLPに置ける診断コンテンツを、小さく試せる形で作れます。

Edit

質問・回答・結果

Output

HTMLコピー

Note

まずは下書き記事やテストページで表示を確認してください。

Basic Settings

基本設定

診断全体のタイトル、説明文、アクセントカラーを設定します。

診断タイトル説明文アクセントカラー

Questions

質問と回答

回答ごとに紐づける結果を選びます。読者の選択に応じて、結果表示が切り替わります。

Question 1

質問文

Answer 1Result

Answer 2Result

Answer 3Result

Question 2

質問文

Answer 1Result

Answer 2Result

Answer 3Result

Question 3

質問文

Answer 1Result

Answer 2Result

Answer 3Result

Results

診断結果

結果ごとに説明文とCTAリンクを設定します。記事内の次の行動へつなげる部分です。

Result 1

結果タイトル結果説明文

CTAボタン文言CTAリンク

Result 2

結果タイトル結果説明文

CTAボタン文言CTAリンク

Result 3

結果タイトル結果説明文

CTAボタン文言CTAリンク

HTML Output

HTMLをコピーする

作成した診断コンテンツを、記事や固定ページに貼れるHTMLとして出力します。

Next Step

WordPressに貼る場合は、カスタムHTMLブロックで設置できます。公開前に下書き記事で表示を確認してください。

WordPress設置方法を見るフィードバックを送る

Generated HTML

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>あなたに合うサービス診断</title>
  <style>
    :root {
      --main-color: #7C9A92;
      --bg: #f9fafb;
      --card: #ffffff;
      --border: #e5e7eb;
      --text: #111827;
      --muted: #6b7280;
      --shadow: 0 12px 32px rgba(17, 24, 39, 0.06);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: linear-gradient(180deg, #f9fafb 0%, #ffffff 100%);
      color: var(--text);
    }

    .polkuz-shell {
      max-width: 760px;
      margin: 0 auto;
      padding: 32px 16px 48px;
    }

    .polkuz-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 24px;
      box-shadow: var(--shadow);
      padding: 24px;
    }

    .polkuz-eyebrow {
      margin: 0;
      color: var(--main-color);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }

    .polkuz-title {
      margin: 12px 0 0;
      font-size: clamp(26px, 4vw, 38px);
      line-height: 1.15;
      letter-spacing: -0.03em;
    }

    .polkuz-description {
      margin: 14px 0 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.8;
    }

    .polkuz-questions {
      margin-top: 28px;
      display: grid;
      gap: 16px;
    }

    .polkuz-question {
      border: 1px solid #f3f4f6;
      border-radius: 20px;
      background: #fafafa;
      padding: 18px;
    }

    .polkuz-question h2 {
      margin: 0;
      font-size: 15px;
      line-height: 1.7;
    }

    .polkuz-answers {
      margin-top: 14px;
      display: grid;
      gap: 10px;
    }

    .polkuz-answer {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: #fff;
      padding: 14px 16px;
      text-align: left;
      font-size: 14px;
      font-weight: 700;
      color: #374151;
      cursor: pointer;
      transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    }

    .polkuz-answer:hover {
      transform: translateY(-1px);
    }

    .polkuz-answer.is-selected {
      border-color: var(--main-color);
      color: var(--main-color);
    }

    .polkuz-result {
      margin-top: 24px;
      border: 1px solid var(--border);
      border-radius: 24px;
      background: #fff;
      padding: 22px;
      box-shadow: var(--shadow);
    }

    .polkuz-result-label {
      margin: 0;
      color: #9ca3af;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .polkuz-result-title {
      margin: 10px 0 0;
      font-size: 22px;
      line-height: 1.35;
    }

    .polkuz-result-description {
      margin: 12px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.8;
    }

    .polkuz-cta {
      display: inline-flex;
      width: 100%;
      align-items: center;
      justify-content: center;
      margin-top: 18px;
      border-radius: 16px;
      padding: 14px 18px;
      background: var(--main-color);
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      text-decoration: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .polkuz-cta:hover {
      opacity: 0.92;
      transform: translateY(-1px);
    }

    .polkuz-reset {
      width: 100%;
      margin-top: 12px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: #fff;
      padding: 13px 18px;
      color: #4b5563;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
      transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .polkuz-reset:hover {
      background: #f9fafb;
      transform: translateY(-1px);
    }

    @media (min-width: 768px) {
      .polkuz-shell {
        padding: 48px 24px 64px;
      }

      .polkuz-card {
        padding: 32px;
      }
    }
  </style>
</head>
<body>
  <div class="polkuz-shell">
    <div class="polkuz-card" id="polkuz-app"></div>
  </div>

  <script>
    const config = {"title":"あなたに合うサービス診断","description":"いくつかの質問に答えるだけで、あなたに合うサービスや商品タイプをチェックできます。","mainColor":"#7C9A92","questions":[{"id":"q1","text":"今いちばん重視したいことは？","answers":[{"id":"q1-a1","label":"コスパを重視したい","resultId":"type-a"},{"id":"q1-a2","label":"使いやすさを重視したい","resultId":"type-b"},{"id":"q1-a3","label":"サポートを重視したい","resultId":"type-c"}]},{"id":"q2","text":"どんな状態に近いですか？","answers":[{"id":"q2-a1","label":"まずは情報収集したい","resultId":"type-a"},{"id":"q2-a2","label":"比較して選びたい","resultId":"type-b"},{"id":"q2-a3","label":"すぐに申し込みたい","resultId":"type-c"}]},{"id":"q3","text":"理想の導線は？","answers":[{"id":"q3-a1","label":"解説記事へ誘導したい","resultId":"type-a"},{"id":"q3-a2","label":"比較ページへ誘導したい","resultId":"type-b"},{"id":"q3-a3","label":"申込みページへ誘導したい","resultId":"type-c"}]}],"results":[{"id":"type-a","title":"じっくり理解タイプ","description":"まずは記事や解説コンテンツへ誘導し、読者の理解を深める導線と相性が良いタイプです。","ctaLabel":"おすすめ記事を見る","ctaUrl":"https://example.com/article"},{"id":"type-b","title":"比較検討タイプ","description":"複数の商品やサービスを比較しながら、納得して選べる導線と相性が良いタイプです。","ctaLabel":"比較ページを見る","ctaUrl":"https://example.com/compare"},{"id":"type-c","title":"すぐ行動タイプ","description":"すでに検討が進んでいる読者に向けて、申込みや詳細ページへ自然に誘導する導線と相性が良いタイプです。","ctaLabel":"詳細を見る","ctaUrl":"https://example.com/lp"}]};

    (function () {
      const app = document.getElementById("polkuz-app");
      const selectedAnswerIds = {};

      function escapeHtml(value) {
        return String(value)
          .replace(/&/g, "&amp;")
          .replace(/</g, "&lt;")
          .replace(/>/g, "&gt;")
          .replace(/"/g, "&quot;")
          .replace(/'/g, "&#39;");
      }

      function sanitizeUrl(value) {
        const url = String(value || "").trim();

        if (
          url.startsWith("http://") ||
          url.startsWith("https://") ||
          url.startsWith("/") ||
          url.startsWith("#") ||
          url.startsWith("mailto:") ||
          url.startsWith("tel:")
        ) {
          return url;
        }

        return "#";
      }

      function sanitizeHexColor(value, fallback) {
        const trimmed = String(value || "").trim();
        return /^#[0-9a-fA-F]{6}$/.test(trimmed) ? trimmed : fallback;
      }

      function getTopResult() {
        const score = {};

        for (const question of config.questions) {
          const selectedAnswerId = selectedAnswerIds[question.id];
          const answer = question.answers.find((item) => item.id === selectedAnswerId);

          if (!answer) continue;

          score[answer.resultId] = (score[answer.resultId] || 0) + 1;
        }

        let topResultId = null;
        let topScore = -1;

        for (const [resultId, count] of Object.entries(score)) {
          if (count > topScore) {
            topScore = count;
            topResultId = resultId;
          }
        }

        if (!topResultId) return null;
        return config.results.find((result) => result.id === topResultId) || null;
      }

      function isComplete() {
        return config.questions.length > 0 && config.questions.every((question) => selectedAnswerIds[question.id]);
      }

      function renderAnswer(question, answer, mainColor) {
        const isSelected = selectedAnswerIds[question.id] === answer.id;
        const selectedStyle = isSelected
          ? ' style="border-color:' + mainColor + ';background-color:' + mainColor + '14;color:' + mainColor + ';"'
          : "";
        const selectedClass = isSelected
          ? "polkuz-answer is-selected"
          : "polkuz-answer";

        return (
          '<button type="button" class="' +
          selectedClass +
          '"' +
          selectedStyle +
          ' data-question-id="' +
          escapeHtml(question.id) +
          '" data-answer-id="' +
          escapeHtml(answer.id) +
          '">' +
          escapeHtml(answer.label || "回答") +
          "</button>"
        );
      }

      function renderQuestion(question, questionIndex, mainColor) {
        return (
          '<section class="polkuz-question">' +
          '<h2>Q' +
          (questionIndex + 1) +
          '. ' +
          escapeHtml(question.text || "質問文") +
          '</h2>' +
          '<div class="polkuz-answers">' +
          question.answers.map((answer) => renderAnswer(question, answer, mainColor)).join("") +
          "</div>" +
          "</section>"
        );
      }

      function render() {
        const result = isComplete() ? getTopResult() : null;
        const mainColor = sanitizeHexColor(config.mainColor, "#4f46e5");
        const questionsHtml = config.questions.map((question, questionIndex) => renderQuestion(question, questionIndex, mainColor)).join("");
        const resultHtml = result
          ? '<section class="polkuz-result">' +
            '<p class="polkuz-result-label">診断結果</p>' +
            '<h2 class="polkuz-result-title">' + escapeHtml(result.title || "結果タイトル") + '</h2>' +
            '<p class="polkuz-result-description">' + escapeHtml(result.description || "結果の説明文が入ります。") + '</p>' +
            '<a class="polkuz-cta" href="' + sanitizeUrl(result.ctaUrl || "#") + '" target="_blank" rel="nofollow sponsored noopener noreferrer">' +
            escapeHtml(result.ctaLabel || "詳しく見る") +
            '</a>' +
            '<button type="button" class="polkuz-reset" id="polkuz-reset">もう一度診断する</button>' +
            "</section>"
          : "";

        app.innerHTML =
          '<p class="polkuz-eyebrow">POLKUZ Diagnosis</p>' +
          '<h1 class="polkuz-title">' + escapeHtml(config.title || "診断タイトル") + '</h1>' +
          '<p class="polkuz-description">' + escapeHtml(config.description || "診断の説明文が入ります。") + '</p>' +
          '<div class="polkuz-questions">' +
          questionsHtml +
          "</div>" +
          resultHtml;

        app.querySelectorAll(".polkuz-answer").forEach((button) => {
          button.addEventListener("click", () => {
            const questionId = button.getAttribute("data-question-id");
            const answerId = button.getAttribute("data-answer-id");

            if (!questionId || !answerId) return;

            selectedAnswerIds[questionId] = answerId;
            render();
          });
        });

        const resetButton = document.getElementById("polkuz-reset");
        if (resetButton) {
          resetButton.addEventListener("click", () => {
            for (const key of Object.keys(selectedAnswerIds)) {
              delete selectedAnswerIds[key];
            }
            render();
          });
        }
      }

      render();
    })();
  </script>
</body>
</html>

Preview

プレビュー

編集した内容を確認しながら、質問の流れやCTAの見え方を調整できます。

Live Preview

あなたに合うサービス診断

いくつかの質問に答えるだけで、あなたに合うサービスや商品タイプをチェックできます。

Progress

0 / 3

Q1. 今いちばん重視したいことは？

Q2. どんな状態に近いですか？

Q3. 理想の導線は？

Result

すべての質問に回答すると、ここに診断結果が表示されます。

Note

生成したHTMLは、WordPressのカスタムHTMLブロックなどで試せます。公開前にPC・スマホ両方で表示を確認してください。