> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Kameleoonへようこそ

> Kameleoonは、実験、フィーチャー管理、パーソナライゼーションを通じて、チームがより良いデジタル体験を提供できるよう設計された強力な統合プラットフォームです。

export const Quiz = () => {
  const translations = {
    en: {
      ui: {
        questionLabel: (current, total) => `Question ${current} of ${total}`,
        resultTitleSingle: "Your recommended solution",
        resultTitleMulti: "Your personalized solution mix",
        retake: "↺ Retake the quiz"
      },
      questions: [{
        question: "What is your team's primary objective?",
        options: [{
          text: "Launch UI/UX tests rapidly using AI",
          weights: {
            pbx: 3,
            personalization: 1,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Safely roll out backend changes and reduce risk",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 3,
            mcp: 1
          }
        }, {
          text: "Experiment fast with AI and transpose winning tests into the codebase behind flags",
          weights: {
            pbx: 2,
            personalization: 0,
            feature: 2,
            mcp: 0
          }
        }, {
          text: "Personalize the user journey based on behavioral data",
          weights: {
            pbx: 1,
            personalization: 3,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Integrate Kameleoon with custom LLM tools or workflows",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 1,
            mcp: 3
          }
        }]
      }, {
        question: "How technical is the person managing the experiments?",
        options: [{
          text: "Mostly non-technical (Marketer, PM) using a visual editor",
          weights: {
            pbx: 2,
            personalization: 2,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Highly technical (Engineer) writing code and managing infrastructure",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 2,
            mcp: 2
          }
        }]
      }, {
        question: "Where do you plan to deploy your experiments?",
        options: [{
          text: "Strictly on the front-end website",
          weights: {
            pbx: 2,
            personalization: 2,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Across web, mobile, and server-side applications",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 3,
            mcp: 0
          }
        }, {
          text: "Within an IDE like Cursor or via custom AI agents",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 0,
            mcp: 3
          }
        }]
      }],
      results: {
        pbx: {
          icon: "🪄",
          title: "Web experimentation and PBX",
          description: "Generate variations instantly and test without touching code. Prompt-Based Experimentation (PBX) transforms your ideas into working experiments using natural language.",
          linkText: "Get started with PBX →"
        },
        feature: {
          icon: "🚦",
          title: "Feature experimentation",
          description: "Control deployments and reduce risk. Feature Experimentation lets you decouple deployment from release and target specific segments server-side.",
          linkText: "Explore feature flagging →"
        },
        mcp: {
          icon: "🤖",
          title: "Kameleoon MCP server",
          description: "Build advanced AI integrations. The Kameleoon MCP Server acts as a bridge between Kameleoon and your IDE (like Cursor), enabling you to manage experiments directly from your code editor.",
          linkText: "View MCP server docs →"
        },
        personalization: {
          icon: "✨",
          title: "Web personalization",
          description: "Tailor the user journey in real-time. Leverage CRM and behavioral data to deliver personalized content across your website.",
          linkText: "Launch a personalization →"
        }
      }
    },
    fr: {
      ui: {
        questionLabel: (current, total) => `Question ${current} sur ${total}`,
        resultTitleSingle: "Votre solution recommandée",
        resultTitleMulti: "Votre combinaison de solutions personnalisée",
        retake: "↺ Refaire le quiz"
      },
      questions: [{
        question: "Quel est l'objectif principal de votre équipe ?",
        options: [{
          text: "Lancer rapidement des tests UI/UX grâce à l'IA",
          weights: {
            pbx: 3,
            personalization: 1,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Déployer en toute sécurité des changements backend et réduire les risques",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 3,
            mcp: 1
          }
        }, {
          text: "Expérimenter rapidement avec l'IA et transposer les tests gagnants dans le code derrière des feature flags",
          weights: {
            pbx: 2,
            personalization: 0,
            feature: 2,
            mcp: 0
          }
        }, {
          text: "Personnaliser le parcours utilisateur à partir de données comportementales",
          weights: {
            pbx: 1,
            personalization: 3,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Intégrer Kameleoon à des outils LLM ou workflows personnalisés",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 1,
            mcp: 3
          }
        }]
      }, {
        question: "Quel est le profil technique de la personne qui gère les expériences ?",
        options: [{
          text: "Principalement non technique (Marketing, PM) utilisant un éditeur visuel",
          weights: {
            pbx: 2,
            personalization: 2,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Très technique (Ingénieur) écrivant du code et gérant l'infrastructure",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 2,
            mcp: 2
          }
        }]
      }, {
        question: "Où prévoyez-vous de déployer vos expériences ?",
        options: [{
          text: "Strictement sur le site front-end",
          weights: {
            pbx: 2,
            personalization: 2,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Sur le web, le mobile et les applications côté serveur",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 3,
            mcp: 0
          }
        }, {
          text: "Dans un IDE comme Cursor ou via des agents IA personnalisés",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 0,
            mcp: 3
          }
        }]
      }],
      results: {
        pbx: {
          icon: "🪄",
          title: "Expérimentation web et PBX",
          description: "Générez des variations instantanément et testez sans toucher au code. L'expérimentation basée sur les prompts (PBX) transforme vos idées en expériences fonctionnelles en langage naturel.",
          linkText: "Démarrer avec PBX →"
        },
        feature: {
          icon: "🚦",
          title: "Feature experimentation",
          description: "Maîtrisez vos déploiements et réduisez les risques. La Feature Experimentation vous permet de découpler le déploiement de la mise en production et de cibler des segments spécifiques côté serveur.",
          linkText: "Découvrir le feature flagging →"
        },
        mcp: {
          icon: "🤖",
          title: "Serveur MCP Kameleoon",
          description: "Créez des intégrations IA avancées. Le serveur MCP Kameleoon fait le lien entre Kameleoon et votre IDE (comme Cursor), vous permettant de gérer vos expériences directement depuis votre éditeur de code.",
          linkText: "Voir la documentation du serveur MCP →"
        },
        personalization: {
          icon: "✨",
          title: "Personnalisation web",
          description: "Adaptez le parcours utilisateur en temps réel. Exploitez les données CRM et comportementales pour diffuser des contenus personnalisés sur votre site.",
          linkText: "Lancer une personnalisation →"
        }
      }
    },
    de: {
      ui: {
        questionLabel: (current, total) => `Frage ${current} von ${total}`,
        resultTitleSingle: "Ihre empfohlene Lösung",
        resultTitleMulti: "Ihr personalisierter Lösungsmix",
        retake: "↺ Quiz erneut starten"
      },
      questions: [{
        question: "Was ist das wichtigste Ziel Ihres Teams?",
        options: [{
          text: "UI/UX-Tests schnell mit KI starten",
          weights: {
            pbx: 3,
            personalization: 1,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Backend-Änderungen sicher ausrollen und Risiken reduzieren",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 3,
            mcp: 1
          }
        }, {
          text: "Schnell mit KI experimentieren und erfolgreiche Tests hinter Feature-Flags in den Code übertragen",
          weights: {
            pbx: 2,
            personalization: 0,
            feature: 2,
            mcp: 0
          }
        }, {
          text: "Die User Journey auf Basis von Verhaltensdaten personalisieren",
          weights: {
            pbx: 1,
            personalization: 3,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Kameleoon mit eigenen LLM-Tools oder Workflows integrieren",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 1,
            mcp: 3
          }
        }]
      }, {
        question: "Wie technisch ist die Person, die die Experimente verwaltet?",
        options: [{
          text: "Überwiegend nicht-technisch (Marketing, PM) mit visuellem Editor",
          weights: {
            pbx: 2,
            personalization: 2,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Sehr technisch (Engineer), schreibt Code und verwaltet Infrastruktur",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 2,
            mcp: 2
          }
        }]
      }, {
        question: "Wo planen Sie, Ihre Experimente auszuspielen?",
        options: [{
          text: "Ausschließlich auf der Frontend-Website",
          weights: {
            pbx: 2,
            personalization: 2,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Über Web-, Mobile- und serverseitige Anwendungen hinweg",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 3,
            mcp: 0
          }
        }, {
          text: "In einer IDE wie Cursor oder über eigene KI-Agenten",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 0,
            mcp: 3
          }
        }]
      }],
      results: {
        pbx: {
          icon: "🪄",
          title: "Web-Experimentation und PBX",
          description: "Erstellen Sie Varianten sofort und testen Sie, ohne Code anzufassen. Prompt-Based Experimentation (PBX) verwandelt Ihre Ideen mithilfe natürlicher Sprache in lauffähige Experimente.",
          linkText: "Mit PBX starten →"
        },
        feature: {
          icon: "🚦",
          title: "Feature Experimentation",
          description: "Steuern Sie Deployments und reduzieren Sie Risiken. Feature Experimentation entkoppelt Deployment und Release und ermöglicht serverseitiges Targeting bestimmter Segmente.",
          linkText: "Feature Flagging entdecken →"
        },
        mcp: {
          icon: "🤖",
          title: "Kameleoon MCP-Server",
          description: "Bauen Sie fortgeschrittene KI-Integrationen. Der Kameleoon MCP-Server fungiert als Brücke zwischen Kameleoon und Ihrer IDE (z. B. Cursor) und lässt Sie Experimente direkt aus Ihrem Code-Editor verwalten.",
          linkText: "MCP-Server-Dokumentation ansehen →"
        },
        personalization: {
          icon: "✨",
          title: "Web-Personalisierung",
          description: "Passen Sie die User Journey in Echtzeit an. Nutzen Sie CRM- und Verhaltensdaten, um personalisierte Inhalte auf Ihrer Website auszuspielen.",
          linkText: "Personalisierung starten →"
        }
      }
    },
    ja: {
      ui: {
        questionLabel: (current, total) => `質問 ${current} / ${total}`,
        resultTitleSingle: "おすすめのソリューション",
        resultTitleMulti: "あなたに合ったソリューションの組み合わせ",
        retake: "↺ もう一度挑戦する"
      },
      questions: [{
        question: "あなたのチームの主な目標は何ですか？",
        options: [{
          text: "AIを活用してUI/UXテストを素早く実施する",
          weights: {
            pbx: 3,
            personalization: 1,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "バックエンドの変更を安全にリリースし、リスクを軽減する",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 3,
            mcp: 1
          }
        }, {
          text: "AIで素早く実験し、勝利したテストをフィーチャーフラグの背後でコードベースに組み込む",
          weights: {
            pbx: 2,
            personalization: 0,
            feature: 2,
            mcp: 0
          }
        }, {
          text: "行動データに基づいてユーザーのジャーニーをパーソナライズする",
          weights: {
            pbx: 1,
            personalization: 3,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "KameleoonをカスタムLLMツールやワークフローと連携する",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 1,
            mcp: 3
          }
        }]
      }, {
        question: "実験を管理する担当者のテクニカルレベルは？",
        options: [{
          text: "主に非技術系（マーケター、PM）でビジュアルエディターを使用",
          weights: {
            pbx: 2,
            personalization: 2,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "技術系（エンジニア）でコードを書きインフラを管理",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 2,
            mcp: 2
          }
        }]
      }, {
        question: "実験をどこで展開する予定ですか？",
        options: [{
          text: "フロントエンドのウェブサイトのみ",
          weights: {
            pbx: 2,
            personalization: 2,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "ウェブ、モバイル、サーバーサイドアプリケーションにまたがって",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 3,
            mcp: 0
          }
        }, {
          text: "CursorなどのIDEやカスタムAIエージェント経由",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 0,
            mcp: 3
          }
        }]
      }],
      results: {
        pbx: {
          icon: "🪄",
          title: "Webエクスペリメンテーションと PBX",
          description: "バリエーションを即座に生成し、コードを変更せずにテストできます。プロンプトベースエクスペリメンテーション（PBX）は自然言語を使ってアイデアを実際の実験に変換します。",
          linkText: "PBXを始める →"
        },
        feature: {
          icon: "🚦",
          title: "フィーチャーエクスペリメンテーション",
          description: "デプロイを制御しリスクを軽減します。フィーチャーエクスペリメンテーションを使うと、デプロイとリリースを切り離し、サーバーサイドで特定セグメントをターゲットにできます。",
          linkText: "フィーチャーフラグを探索する →"
        },
        mcp: {
          icon: "🤖",
          title: "Kameleoon MCPサーバー",
          description: "高度なAI統合を構築します。Kameleoon MCPサーバーはKameleoonとIDE（Cursorなど）の橋渡しをし、コードエディターから直接実験を管理できます。",
          linkText: "MCPサーバーのドキュメントを見る →"
        },
        personalization: {
          icon: "✨",
          title: "Webパーソナライゼーション",
          description: "ユーザーのジャーニーをリアルタイムでカスタマイズします。CRMデータや行動データを活用して、ウェブサイト全体でパーソナライズされたコンテンツを配信します。",
          linkText: "パーソナライゼーションを開始する →"
        }
      }
    },
    es: {
      ui: {
        questionLabel: (current, total) => `Pregunta ${current} de ${total}`,
        resultTitleSingle: "Su solución recomendada",
        resultTitleMulti: "Su combinación personalizada de soluciones",
        retake: "↺ Volver a hacer el cuestionario"
      },
      questions: [{
        question: "¿Cuál es el objetivo principal de su equipo?",
        options: [{
          text: "Lanzar rápidamente tests de UI/UX con IA",
          weights: {
            pbx: 3,
            personalization: 1,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Desplegar cambios de backend de forma segura y reducir riesgos",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 3,
            mcp: 1
          }
        }, {
          text: "Experimentar rápido con IA y trasladar los tests ganadores al código detrás de feature flags",
          weights: {
            pbx: 2,
            personalization: 0,
            feature: 2,
            mcp: 0
          }
        }, {
          text: "Personalizar el recorrido del usuario a partir de datos de comportamiento",
          weights: {
            pbx: 1,
            personalization: 3,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Integrar Kameleoon con herramientas LLM o flujos de trabajo personalizados",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 1,
            mcp: 3
          }
        }]
      }, {
        question: "¿Qué perfil técnico tiene la persona que gestiona los experimentos?",
        options: [{
          text: "Principalmente no técnico (Marketing, PM) usando un editor visual",
          weights: {
            pbx: 2,
            personalization: 2,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Muy técnico (Ingeniero) escribiendo código y gestionando infraestructura",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 2,
            mcp: 2
          }
        }]
      }, {
        question: "¿Dónde planea desplegar sus experimentos?",
        options: [{
          text: "Únicamente en el sitio web front-end",
          weights: {
            pbx: 2,
            personalization: 2,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "En web, móvil y aplicaciones del lado del servidor",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 3,
            mcp: 0
          }
        }, {
          text: "En un IDE como Cursor o a través de agentes de IA personalizados",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 0,
            mcp: 3
          }
        }]
      }],
      results: {
        pbx: {
          icon: "🪄",
          title: "Experimentación web y PBX",
          description: "Genere variaciones al instante y haga tests sin tocar el código. La experimentación basada en prompts (PBX) convierte sus ideas en experimentos funcionales mediante lenguaje natural.",
          linkText: "Empezar con PBX →"
        },
        feature: {
          icon: "🚦",
          title: "Feature experimentation",
          description: "Controle los despliegues y reduzca riesgos. Feature Experimentation le permite desacoplar el despliegue del lanzamiento y segmentar grupos específicos del lado del servidor.",
          linkText: "Descubrir el feature flagging →"
        },
        mcp: {
          icon: "🤖",
          title: "Servidor MCP de Kameleoon",
          description: "Cree integraciones de IA avanzadas. El servidor MCP de Kameleoon actúa como puente entre Kameleoon y su IDE (como Cursor), permitiéndole gestionar experimentos directamente desde su editor de código.",
          linkText: "Ver la documentación del servidor MCP →"
        },
        personalization: {
          icon: "✨",
          title: "Personalización web",
          description: "Adapte el recorrido del usuario en tiempo real. Aproveche los datos de CRM y de comportamiento para ofrecer contenido personalizado en todo su sitio web.",
          linkText: "Lanzar una personalización →"
        }
      }
    }
  };
  const resultLinks = {
    pbx: "/user-manual/experimentation/web-experimentation/prompt-based-experiments/get-started",
    feature: "/developer-docs/feature-experimentation/get-started/overview",
    mcp: "/mcp/mcp-server",
    personalization: "/user-manual/web-personalization/set-up-and-launch-a-personalization"
  };
  const detectLanguage = () => {
    if (typeof window === 'undefined') return 'en';
    const seg = window.location.pathname.split('/').filter(Boolean)[0];
    return ['fr', 'de', 'es', 'ja'].includes(seg) ? seg : 'en';
  };
  const [lang, setLang] = useState(detectLanguage);
  useEffect(() => {
    setLang(detectLanguage());
    const onChange = () => setLang(detectLanguage());
    window.addEventListener('popstate', onChange);
    return () => window.removeEventListener('popstate', onChange);
  }, []);
  const t = translations[lang] || translations.en;
  const questions = t.questions;
  const buildLink = key => {
    const base = resultLinks[key];
    return lang === 'en' ? base : `/${lang}${base}`;
  };
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [scores, setScores] = useState({
    pbx: 0,
    feature: 0,
    mcp: 0,
    personalization: 0
  });
  const [showResult, setShowResult] = useState(false);
  const handleAnswer = weights => {
    const newScores = {
      pbx: scores.pbx + (weights.pbx || 0),
      feature: scores.feature + (weights.feature || 0),
      mcp: scores.mcp + (weights.mcp || 0),
      personalization: scores.personalization + (weights.personalization || 0)
    };
    setScores(newScores);
    if (currentQuestion + 1 < questions.length) {
      setCurrentQuestion(currentQuestion + 1);
    } else {
      setShowResult(true);
    }
  };
  const getTopResults = () => {
    const sorted = Object.entries(scores).sort(([, a], [, b]) => b - a);
    const topScore = sorted[0][1];
    if (topScore === 0) return [{
      key: 'pbx',
      ...t.results.pbx
    }];
    return sorted.filter(([, score]) => score >= topScore - 1 && score > 0).slice(0, 2).map(([key]) => ({
      key,
      ...t.results[key]
    }));
  };
  const resetQuiz = () => {
    setCurrentQuestion(0);
    setScores({
      pbx: 0,
      feature: 0,
      mcp: 0,
      personalization: 0
    });
    setShowResult(false);
  };
  if (showResult) {
    const results = getTopResults();
    return <div className="mt-8 mb-8">
        <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-6 mt-0">
          {results.length > 1 ? t.ui.resultTitleMulti : t.ui.resultTitleSingle}
        </h3>

        <div className={`grid gap-4 ${results.length === 1 ? 'grid-cols-1' : 'grid-cols-1 md:grid-cols-2'}`}>
          {results.map((result, index) => <div key={index} className="p-4 sm:p-6 border border-slate-200 dark:border-slate-800 rounded-2xl bg-gradient-to-br from-slate-50 to-white dark:from-slate-900 dark:to-slate-800 shadow-sm flex flex-col h-full">
              <div className="text-3xl sm:text-4xl mb-3 sm:mb-4">{result.icon}</div>
              <h4 className="mt-0 text-lg sm:text-xl font-bold text-slate-900 dark:text-white mb-2 sm:mb-3">
                {result.title}
              </h4>
              <p className="text-slate-600 dark:text-slate-300 text-sm leading-relaxed mb-4 sm:mb-6 flex-grow">
                {result.description}
              </p>
              <div className="mt-auto">
                <a href={buildLink(result.key)} className="inline-flex items-center justify-center w-full sm:w-auto px-4 py-2.5 sm:py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-semibold transition-colors no-underline shadow-sm">
                  {result.linkText}
                </a>
              </div>
            </div>)}
        </div>

        <div className="mt-8 pt-6 border-t border-slate-200 dark:border-slate-700 flex justify-center">
          <button onClick={resetQuiz} className="text-sm text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 font-medium transition-colors bg-transparent border-none cursor-pointer flex items-center gap-2">
            {t.ui.retake}
          </button>
        </div>
      </div>;
  }
  const progressPercentage = currentQuestion / questions.length * 100;
  return <div className="p-4 sm:p-8 border border-slate-200 dark:border-slate-800 rounded-2xl bg-white dark:bg-slate-900 mt-8 mb-8 shadow-sm">
      <div className="mb-8">
        <div className="flex justify-between items-center mb-3">
          <span className="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest">
            {t.ui.questionLabel(currentQuestion + 1, questions.length)}
          </span>
        </div>
        <div className="w-full bg-slate-100 dark:bg-slate-800 rounded-full h-1.5 overflow-hidden">
          <div className="bg-blue-600 h-1.5 rounded-full transition-all duration-500 ease-out" style={{
    width: `${progressPercentage}%`
  }}></div>
        </div>
      </div>

      <h3 className="text-xl font-bold mb-6 text-slate-900 dark:text-white leading-snug mt-0">
        {questions[currentQuestion].question}
      </h3>

      <div className="flex flex-col gap-3">
        {questions[currentQuestion].options.map((option, index) => <button key={index} onClick={() => handleAnswer(option.weights)} className="group w-full flex justify-between items-center text-left p-4 border-2 border-slate-100 dark:border-slate-800 rounded-xl bg-white dark:bg-slate-900 hover:border-blue-500 dark:hover:border-blue-500 hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">
            <span className="font-medium text-slate-700 dark:text-slate-200 group-hover:text-blue-700 dark:group-hover:text-blue-400 transition-colors">
              {option.text}
            </span>
            <span className="text-blue-500 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200 font-bold">
              →
            </span>
          </button>)}
      </div>
    </div>;
};

## パスを選択する

あなたの役割や、今構築しようとしているものに最適なポータルを選択してください。

<CardGroup cols={2}>
  <Card title="ユーザーマニュアル" icon="book-open" href="/user-manual/home/user-manual-overview">
    マーケター、プロダクトマネージャー、およびQAチーム向け。実験の作成、構成、分析方法、パーソナライゼーションの管理、Widget Studioの使用方法を学習します。
  </Card>

  <Card title="開発者ドキュメント" icon="code" href="../developer-docs/home/developer-docs-overview">
    エンジニアおよび技術チーム向け。実装ガイド、SDKリファレンス、APIドキュメント、エッジコンピュートスターターキットを見つけてください。
  </Card>
</CardGroup>

***

## どこから始めればよいかわからない方へ

この簡単な3問のクイズに答えて、お使いの技術スタックとユースケースに必要なドキュメントを正確に見つけてください。

<Quiz />

***

## AIアシスタントでドキュメントを使う

質問をしたり、ステップごとのガイダンスを得たり、Kameleoonのナレッジベース全体を直接AIツールから探索したりできます。

<Card title="KameleoonドキュメントをAIで活用する" icon="sparkles" href="/mcp/use-docs-with-ai">
  任意の記事をClaudeまたはChatGPTでワンクリックで開いたり、Claude Desktop、Cursor、VS Codeなど用の永続的なMCPサーバーを構成したりできます。
</Card>

***

## コア機能

実験、フィーチャー管理、パーソナライゼーションをWeb、モバイル、バックエンド環境にまたがる1つのプラットフォームに統合します。

<CardGroup cols={2}>
  <Card title="Web実験とPBX" icon="app-window" href="/user-manual/experimentation/web-experimentation/prompt-based-experiments/get-started">
    自然言語プロンプトを使用してバリエーションを即座に生成するか、ビジュアルエディタを使って任意のWebサイトやシングルページアプリでコピー、デザイン、レイアウトをテストできます。
  </Card>

  <Card title="フィーチャー実験" icon="toggle-right" href="../developer-docs/feature-experimentation/get-started/overview">
    デプロイメントとリリースを切り離します。新機能を段階的にロールアウトし、サーバーサイドの実験を実行し、ターゲットを絞ったフィーチャーフラグでリスクを削減します。
  </Card>

  <Card title="Webパーソナライゼーション" icon="wand-sparkles" href="/user-manual/web-personalization/set-up-and-launch-a-personalization">
    行動データ、CRM統合、またはデータウェアハウスを活用して、特定のユーザー向けにリアルタイムで調整されたエクスペリエンスを提供します。
  </Card>

  <Card title="高度な分析" icon="chart-line" href="/user-manual/experiment-analytics/analyze-results/results-page/results-page-structure">
    Kameleoonのマルチ統計エンジン(CUPED、ベイジアン、または逐次テスト)による信頼性の高いリアルタイムの結果にアクセスできます。
  </Card>
</CardGroup>

***

## Kameleoonの技術スタックを探索する

Kameleoonをどこにでもデプロイできます。既存のエコシステムに完璧に適合する十数種類以上のSDK、REST API、および統合を提供します。

<AccordionGroup>
  <Accordion title="Web SDK" icon="file-code">
    JavaScript、TypeScript、React、Vue、PHP、Python、Ruby、Go、またはJavaを使用して、実験をすばやく実装します。

    [Web SDKを探索する →](../developer-docs/sdks/web-sdks/js-sdk)
  </Accordion>

  <Accordion title="モバイルSDK" icon="smartphone">
    iOS、Android、Flutter、React Native SDKを使用して、ネイティブアプリにフィーチャーフラグと実験を導入します。

    [モバイルSDKを探索する →](../developer-docs/sdks/mobile-sdks/ios-sdk)
  </Accordion>

  <Accordion title="API" icon="server">
    KameleoonのRESTおよびJS APIを使用して、プログラムで実験を制御し、ワークフローを自動化し、カスタムデータを注入します。

    [APIを探索する →](../developer-docs/apis/overview)
  </Accordion>
</AccordionGroup>
