救世主タイプ診断

救世主型リーダーシップ診断

STEP 1
メイン特性
STEP 2
サブ特性
STEP 3
具体的行動
問題に直面したとき、あなたはどのようなアプローチを取りますか？ 
<!DOCTYPE html>
<html>
<head>
  <style>
    .quiz-container {
      max-width: 800px;
      margin: 0 auto;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .title {
      text-align: center;
      color: #1a1a1a;
      font-size: 24px;
      margin-bottom: 30px;
    }
    
    .subtitle {
      text-align: center;
      color: #666;
      font-size: 16px;
      margin-bottom: 20px;
    }
    
    .progress {
      width: 100%;
      height: 8px;
      background: #eee;
      border-radius: 4px;
      margin-bottom: 30px;
    }
    
    .progress-bar {
      height: 100%;
      background: #4A90E2;
      border-radius: 4px;
      transition: width 0.3s ease;
    }
    
    .step-indicator {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;
    }
    
    .step {
      flex: 1;
      text-align: center;
      color: #999;
      font-size: 14px;
      position: relative;
    }
    
    .step.active {
      color: #4A90E2;
      font-weight: bold;
    }
    
    .question {
      font-size: 18px;
      color: #333;
      margin-bottom: 20px;
      line-height: 1.5;
    }
    
    .options {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    
    .option-button {
      width: 100%;
      padding: 15px 20px;
      border: 2px solid #eee;
      border-radius: 8px;
      background: white;
      text-align: left;
      font-size: 16px;
      color: #333;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .option-button:hover {
      border-color: #4A90E2;
      background: #f8f9fa;
    }
    
    .result {
      text-align: center;
    }
    
    .result-title {
      font-size: 20px;
      color: #1a1a1a;
      margin-bottom: 20px;
    }
    
    .result-types {
      margin: 20px 0;
      padding: 20px;
      background: #f8f9fa;
      border-radius: 8px;
    }
    
    .result-type {
      font-size: 18px;
      color: #333;
      margin-bottom: 10px;
      text-align: left;
    }
    
    .result-description {
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      margin: 20px 0;
      text-align: left;
      line-height: 1.6;
      border: 1px solid #eee;
    }
    
    .reset-button {
      background: #4A90E2;
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
      transition: background 0.2s ease;
    }
    
    .reset-button:hover {
      background: #357ABD;
    }
.share-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.share-button {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.share-button:hover {
  opacity: 0.8;
}

.share-x {
  background-color: #000000;
  color: white;
}

.share-button svg {
  margin-right: 8px;
  width: 16px;
  height: 16px;
}
  </style>
</head>
<body>
  <div class="quiz-container">
    <h1 class="title">救世主型リーダーシップ診断</h1>
    
    <div id="quiz-content">
      <div class="step-indicator">
        <div class="step active">STEP 1<br>メイン特性</div>
        <div class="step">STEP 2<br>サブ特性</div>
        <div class="step">STEP 3<br>具体的行動</div>
      </div>
      
      <div class="progress">
        <div class="progress-bar" style="width: 33%"></div>
      </div>
      
      <div id="step1">
        <div class="question">
          問題に直面したとき、あなたはどのようなアプローチを取りますか？
        </div>
        <div class="options">
          <button class="option-button" onclick="nextStep('christ')">
            理想的な未来像を示し、完全な解決を目指す
          </button>
          <button class="option-button" onclick="nextStep('buddha')">
            現実的な一歩から始め、着実な進歩を重ねる
          </button>
          <button class="option-button" onclick="nextStep('muhammad')">
            明確なルールと体制を確立し、組織的に解決する
          </button>
        </div>
      </div>
      
      <div id="step2" style="display: none;">
        <div class="question">
          変革を起こす際、あなたが最も重視することは？
        </div>
        <div class="options">
          <button class="option-button" onclick="nextStep2('apocalyptic')">
            既存の限界を超える革新的な転換
          </button>
          <button class="option-button" onclick="nextStep2('mystic')">
            内面的な気づきと深い変容
          </button>
          <button class="option-button" onclick="nextStep2('sage')">
            実践的な知恵と具体的な指導
          </button>
          <button class="option-button" onclick="nextStep2('liberator')">
            集団の解放と社会的な変革
          </button>
        </div>
      </div>
      
      <div id="step3" style="display: none;">
        <div class="question">
          具体的な行動において、あなたの特徴的なアプローチは？
        </div>
        <div class="options">
          <button class="option-button" onclick="showResult()">
            ビジョンを共有し、人々の意識を変える
          </button>
          <button class="option-button" onclick="showResult()">
            具体的な方法論を示し、実践を導く
          </button>
          <button class="option-button" onclick="showResult()">
            システムを構築し、持続的な変革を実現する
          </button>
        </div>
      </div>
    </div>
    
<div id="result" style="display: none;">
  <div class="result">
    <div class="result-title"></div>
    <div class="result-types">
      <div class="result-type" id="main-type"></div>
      <div class="result-type" id="sub-type"></div>
    </div>
    <div class="result-description" id="result-description"></div>
    <div class="share-buttons">
      <a href="#" onclick="shareToX(); return false;" class="share-button share-x">
        <svg viewBox="0 0 24 24" fill="white">
          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
        </svg>
        Xでシェア
      </a>
    </div>
    <button class="reset-button" onclick="resetQuiz()">もう一度診断する</button>
  </div>
</div>
<script>
let mainType = '';
let subType = '';
let approachType = '';

const typeDescriptions = {
  'christ': 'キリスト型（完全な救済を目指すタイプ）',
  'buddha': '仏陀型（段階的な成長を重視するタイプ）',
  'muhammad': 'ムハンマド型（社会システムの改革を重視するタイプ）',
  'apocalyptic': '終末論的救世主型',
  'mystic': '神秘主義者型',
  'sage': '賢者・師匠型',
  'liberator': '民族解放者型'
};

const resultDescriptions = {
  // キリスト型の組み合わせ
  'christ-apocalyptic': {
    title: '革新的救済者型',
    description: `
特徴：
・強力なビジョン提示能力
・危機的状況における決断力
・革新的なソリューションの創造

現代における役割：
テクノロジー革新者や組織変革者として、既存の限界を超える新しいパラダイムを創造できます。

成功のヒント：
・具体的な実現プロセスの設計
・段階的な移行計画の策定
・周囲の理解と支持の獲得
    `
  },
  'christ-mystic': {
    title: '変容的導師型',
    description: `
特徴：
・強い共感力と癒しの能力
・個人の内面的成長の支援
・深い精神的つながりの構築

現代における役割：
トランスフォーメーションコーチや精神的指導者として、人々の本質的な変容を支援できます。

成功のヒント：
・実践的なアプローチの統合
・具体的な成果の可視化
・持続可能な変容プロセスの確立
    `
  },
  'christ-sage': {
    title: '智慧の伝道者型',
    description: `
特徴：
・体系的な知識の伝授
・個別的な成長支援
・実践と理論の統合

現代における役割：
教育者や人材開発リーダーとして、人々の潜在能力を最大限に引き出すことができます。

成功のヒント：
・段階的な学習プロセスの設計
・個別ニーズへの対応
・継続的なフィードバック
    `
  },
  'christ-liberator': {
    title: '社会変革型救済者',
    description: `
特徴：
・強い社会的使命感
・集団の力の活用
・システミックな問題解決

現代における役割：
社会起業家や人権活動家として、社会的課題の解決に貢献できます。

成功のヒント：
・持続可能な解決策の設計
・多様なステークホルダーとの協働
・長期的なビジョンの維持
    `
  },
  // 仏陀型の組み合わせ
  'buddha-apocalyptic': {
    title: '漸進的革新者型',
    description: `
特徴：
・現実的な変革プロセス
・持続可能なイノベーション
・バランスの取れた判断力

現代における役割：
持続可能なイノベーターとして、着実な進歩と革新を両立させることができます。

成功のヒント：
・明確なマイルストーンの設定
・実験と検証の繰り返し
・柔軟な戦略の調整
    `
  },
  'buddha-mystic': {
    title: '実践的悟達者型',
    description: `
特徴：
・体験的学習の重視
・内面の変容と外面の実践の統合
・個別的な成長支援

現代における役割：
マインドフルネス指導者として、実践的な気づきの道を示すことができます。

成功のヒント：
・具体的な実践方法の提示
・段階的な気づきのプロセス
・日常生活での統合
    `
  },
  'buddha-sage': {
    title: '実践的指導者型',
    description: `
特徴：
・体系的な指導方法
・実践的なスキル開発
・個別的な成長支援

現代における役割：
スキル開発トレーナーや実践的教育者として、確実な成長を支援できます。

成功のヒント：
・明確な学習ステップの設計
・実践機会の提供
・継続的なフィードバック
    `
  },
  'buddha-liberator': {
    title: '漸進的解放者型',
    description: `
特徴：
・持続可能な社会変革
・実践的なコミュニティ支援
・段階的なエンパワーメント

現代における役割：
コミュニティ開発リーダーとして、持続可能な社会変革を実現できます。

成功のヒント：
・具体的な行動計画の策定
・コミュニティの能力開発
・長期的な自立支援
    `
  },
  // ムハンマド型の組み合わせ
  'muhammad-apocalyptic': {
    title: 'システム革新者型',
    description: `
特徴：
・システミックな問題解決
・組織的な変革推進
・明確な規範の確立

現代における役割：
デジタルトランスフォーメーションリーダーとして、組織全体の変革を導けます。

成功のヒント：
・包括的な変革計画の策定
・効果的な移行管理
・持続可能なシステムの構築
    `
  },
  'muhammad-mystic': {
    title: '文化変革者型',
    description: `
特徴：
・深い文化的理解
・組織的な価値観の確立
・個人と組織の調和

現代における役割：
組織文化コンサルタントとして、持続的な文化変革を実現できます。

成功のヒント：
・価値観の明確化と共有
・実践的な文化変革プログラム
・長期的な定着支援
    `
  },
  'muhammad-sage': {
    title: 'システム構築者型',
    description: `
特徴：
・体系的なナレッジマネジメント
・組織的な学習システム
・実践的な規範の確立

現代における役割：
組織開発コンサルタントとして、持続可能な成長システムを構築できます。

成功のヒント：
・知識共有の仕組み作り
・実践的な研修システム
・継続的な改善プロセス
    `
  },
  'muhammad-liberator': {
    title: '社会システム改革者型',
    description: `
特徴：
・システミックな社会変革
・組織的な解放運動
・実践的な行動規範

現代における役割：
社会システム改革者として、持続可能な社会変革を推進できます。

成功のヒント：
・包括的な変革戦略の策定
・多様なステークホルダーとの協働
・持続可能なシステムの構築
    `
  }
};

function nextStep(type) {
  mainType = type;
  document.getElementById('step1').style.display = 'none';
  document.getElementById('step2').style.display = 'block';
  document.querySelector('.progress-bar').style.width = '66%';
  document.querySelectorAll('.step')[1].classList.add('active');
}

function nextStep2(type) {
  subType = type;
  document.getElementById('step2').style.display = 'none';
  document.getElementById('step3').style.display = 'block';
  document.querySelector('.progress-bar').style.width = '100%';
  document.querySelectorAll('.step')[2].classList.add('active');
}

function showResult() {
  document.getElementById('quiz-content').style.display = 'none';
  document.getElementById('result').style.display = 'block';
  
  const combination = `${mainType}-${subType}`;
  const result = resultDescriptions[combination];
  
  // タイトルを更新
  document.querySelector('.result-title').textContent = 
    `診断結果：${result.title}`;
  
  // タイプ情報を表示
  document.getElementById('main-type').textContent = 
    `メイン特性: ${typeDescriptions[mainType]}`;
  document.getElementById('sub-type').textContent = 
    `サブ特性: ${typeDescriptions[subType]}`;
  
  // 結果の説明文を表示（改行を保持）
  document.getElementById('result-description').innerHTML = 
    result.description.replace(/\n/g, '<br>');
}

function resetQuiz() {
  mainType = '';
  subType = '';
  approachType = '';
  
  document.getElementById('step1').style.display = 'block';
  document.getElementById('step2').style.display = 'none';
  document.getElementById('step3').style.display = 'none';
  document.getElementById('result').style.display = 'none';
  document.getElementById('quiz-content').style.display = 'block';
  
  document.querySelector('.progress-bar').style.width = '33%';
  
  document.querySelectorAll('.step').forEach((step, index) => {
    if (index > 0) step.classList.remove('active');
  });
}
function shareToX() {
  const combination = `${mainType}-${subType}`;
  const result = resultDescriptions[combination];
  
  // シェアするテキストを作成
  const shareText = 
    `【救世主型リーダーシップ診断】\n` +
    `診断結果：${result.title}\n` +
    `私は${typeDescriptions[mainType]}×${typeDescriptions[subType]}でした！\n\n` +
    `#救世主型リーダーシップ診断\n` +
    `${window.location.href}`;
  
  // Xの共有URLを作成
  const shareUrl = 
    `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}`;
  
  // 新しいウィンドウで共有画面を開く
  window.open(shareUrl, '_blank', 'width=550,height=420');
}
</script>
</body>
</html>

救世主型リーダーシップ診断

STEP 1
メイン特性
STEP 2
サブ特性
STEP 3
具体的行動
問題に直面したとき、あなたはどのようなアプローチを取りますか？ 
<!DOCTYPE html>
<html>
<head>
  <style>
    .quiz-container {
      max-width: 800px;
      margin: 0 auto;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .title {
      text-align: center;
      color: #1a1a1a;
      font-size: 24px;
      margin-bottom: 30px;
    }
    
    .subtitle {
      text-align: center;
      color: #666;
      font-size: 16px;
      margin-bottom: 20px;
    }
    
    .progress {
      width: 100%;
      height: 8px;
      background: #eee;
      border-radius: 4px;
      margin-bottom: 30px;
    }
    
    .progress-bar {
      height: 100%;
      background: #4A90E2;
      border-radius: 4px;
      transition: width 0.3s ease;
    }
    
    .step-indicator {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;
    }
    
    .step {
      flex: 1;
      text-align: center;
      color: #999;
      font-size: 14px;
      position: relative;
    }
    
    .step.active {
      color: #4A90E2;
      font-weight: bold;
    }
    
    .question {
      font-size: 18px;
      color: #333;
      margin-bottom: 20px;
      line-height: 1.5;
    }
    
    .options {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    
    .option-button {
      width: 100%;
      padding: 15px 20px;
      border: 2px solid #eee;
      border-radius: 8px;
      background: white;
      text-align: left;
      font-size: 16px;
      color: #333;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .option-button:hover {
      border-color: #4A90E2;
      background: #f8f9fa;
    }
    
    .result {
      text-align: center;
    }
    
    .result-title {
      font-size: 20px;
      color: #1a1a1a;
      margin-bottom: 20px;
    }
    
    .result-types {
      margin: 20px 0;
      padding: 20px;
      background: #f8f9fa;
      border-radius: 8px;
    }
    
    .result-type {
      font-size: 18px;
      color: #333;
      margin-bottom: 10px;
      text-align: left;
    }
    
    .result-description {
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      margin: 20px 0;
      text-align: left;
      line-height: 1.6;
      border: 1px solid #eee;
    }
    
    .reset-button {
      background: #4A90E2;
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
      transition: background 0.2s ease;
    }
    
    .reset-button:hover {
      background: #357ABD;
    }
  </style>
</head>
<body>
  <div class="quiz-container">
    <h1 class="title">救世主型リーダーシップ診断</h1>
    
    <div id="quiz-content">
      <div class="step-indicator">
        <div class="step active">STEP 1<br>メイン特性</div>
        <div class="step">STEP 2<br>サブ特性</div>
        <div class="step">STEP 3<br>具体的行動</div>
      </div>
      
      <div class="progress">
        <div class="progress-bar" style="width: 33%"></div>
      </div>
      
      <div id="step1">
        <div class="question">
          問題に直面したとき、あなたはどのようなアプローチを取りますか？
        </div>
        <div class="options">
          <button class="option-button" onclick="nextStep('christ')">
            理想的な未来像を示し、完全な解決を目指す
          </button>
          <button class="option-button" onclick="nextStep('buddha')">
            現実的な一歩から始め、着実な進歩を重ねる
          </button>
          <button class="option-button" onclick="nextStep('muhammad')">
            明確なルールと体制を確立し、組織的に解決する
          </button>
        </div>
      </div>
      
      <div id="step2" style="display: none;">
        <div class="question">
          変革を起こす際、あなたが最も重視することは？
        </div>
        <div class="options">
          <button class="option-button" onclick="nextStep2('apocalyptic')">
            既存の限界を超える革新的な転換
          </button>
          <button class="option-button" onclick="nextStep2('mystic')">
            内面的な気づきと深い変容
          </button>
          <button class="option-button" onclick="nextStep2('sage')">
            実践的な知恵と具体的な指導
          </button>
          <button class="option-button" onclick="nextStep2('liberator')">
            既存の権力からの解放と社会的な変革
          </button>
        </div>
      </div>
      
      <div id="step3" style="display: none;">
        <div class="question">
          具体的な行動において、あなたが好むアプローチは？
        </div>
        <div class="options">
          <button class="option-button" onclick="showResult()">
            ビジョンを共有し、人々の意識を変える
          </button>
          <button class="option-button" onclick="showResult()">
            具体的な方法論を示し、実践を導く
          </button>
          <button class="option-button" onclick="showResult()">
            システムを構築し、持続的な変革を実現する
          </button>
        </div>
      </div>
    </div>
    
    <div id="result" style="display: none;">
      <div class="result">
        <div class="result-title">診断結果</div>
        <div class="result-types">
          <div class="result-type" id="main-type"></div>
          <div class="result-type" id="sub-type"></div>
          <div class="result-type" id="approach-type"></div>
        </div>
        <div class="result-description" id="result-description"></div>
        <button class="reset-button" onclick="resetQuiz()">もう一度診断する</button>
      </div>
    </div>
  </div>

  <script>
    let mainType = '';
    let subType = '';
    let approachType = '';
    
    const typeDescriptions = {
      'christ': 'キリスト型（完全な救済を目指すタイプ）',
      'buddha': '仏陀型（段階的な成長を重視するタイプ）',
      'muhammad': 'ムハンマド型（社会システムの改革を重視するタイプ）',
      'apocalyptic': '終末論的救世主型',
      'mystic': '神秘主義者型',
      'sage': '賢者・師匠型',
      'liberator': '民族解放者型'
    };
    
    function nextStep(type) {
      mainType = type;
      document.getElementById('step1').style.display = 'none';
      document.getElementById('step2').style.display = 'block';
      document.querySelector('.progress-bar').style.width = '66%';
      document.querySelectorAll('.step')[1].classList.add('active');
    }
    
    function nextStep2(type) {
      subType = type;
      document.getElementById('step2').style.display = 'none';
      document.getElementById('step3').style.display = 'block';
      document.querySelector('.progress-bar').style.width = '100%';
      document.querySelectorAll('.step')[2].classList.add('active');
    }
    
    function showResult() {
      document.getElementById('quiz-content').style.display = 'none';
      document.getElementById('result').style.display = 'block';
      
      document.getElementById('main-type').textContent = 
        `メイン特性: ${typeDescriptions[mainType]}`;
      document.getElementById('sub-type').textContent = 
        `サブ特性: ${typeDescriptions[subType]}`;
      
      const description = getResultDescription(mainType, subType);
      document.getElementById('result-description').textContent = description;
    }
    
    function getResultDescription(main, sub) {
      const descriptions = {
        'christ-apocalyptic': 'あなたは革新的なビジョンと完全な変革を追求するリーダーです。現状の限界を打破し、新しい時代を切り開く力を持っています。',
        'christ-mystic': '深い共感力と変容的な影響力を持つリーダーです。個人の内面的な変化を通じて、周囲に大きな影響を与えることができます。',
        'buddha-sage': '実践的な知恵と段階的な成長を重視するリーダーです。確実な進歩と持続可能な変化を生み出す力があります。',
        'muhammad-liberator': 'システム変革と集団の解放を追求するリーダーです。具体的な規範とビジョンを通じて、社会的な変革を実現できます。'
      };
      
      return descriptions[`${main}-${sub}`] || 
        'あなたは独自の特徴を持つリーダーです。複数の要素を組み合わせた独特のアプローチで、変革を導くことができます。';
    }
    
    function resetQuiz() {
      mainType = '';
      subType = '';
      approachType = '';
      
      document.getElementById('step1').style.display = 'block';
      document.getElementById('step2').style.display = 'none';
      document.getElementById('step3').style.display = 'none';
      document.getElementById('result').style.display = 'none';
      document.getElementById('quiz-content').style.display = 'block';
      
      document.querySelector('.progress-bar').style.width = '33%';
      
      document.querySelectorAll('.step').forEach((step, index) => {
        if (index > 0) step.classList.remove('active');
      });
    }
  </script>
</body>
</html>

ホーム
タイトルとURLをコピーしました