店長マネジメント課題診断（3分チェック）は、無料で会員登録無しでご利用いただけます。ぜひ一度お試しください。

/* グローバルスタイル */ body { font-family: ‘Inter’, ‘Noto Sans JP’, sans-serif; background-color: #f3f4f6; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 2rem 1rem; } .quiz-container { width: 100%; max-width: 768px; background-color: white; padding: 2rem; border-radius: 1.5rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } /* 質問カードのスタイル */ .question-card { border: 2px solid #e5e7eb; border-radius: 1rem; margin-bottom: 1.5rem; overflow: hidden; transition: all 0.3s ease; } /* 質問文の強調 */ .question-text { font-size: 1.25rem; font-weight: 700; color: #1f2937; padding: 1rem 1.5rem; background-color: #f9fafb; border-bottom: 1px solid #e5e7eb; } /* 選択肢のカスタムデザイン */ .answer-option { display: flex; align-items: center; padding: 1rem 1.5rem; cursor: pointer; transition: background-color 0.2s; border-bottom: 1px solid #f3f4f6; } .answer-option:last-child { border-bottom: none; } .answer-option:hover { background-color: #eff6ff; } .answer-option input[type=”radio”] { margin-right: 1rem; accent-color: #4f46e5; } .answer-option label { flex-grow: 1; font-weight: 500; color: #374151; cursor: pointer; } /* 診断結果エリア */ #result-section { padding: 2rem; background-color: #f0f9ff; border-radius: 1rem; border: 2px solid #bfdbfe; } .result-title { font-size: 1.75rem; font-weight: 800; color: #1e40af; margin-bottom: 1rem; border-bottom: 3px solid #60a5fa; padding-bottom: 0.5rem; } .result-advice { background-color: #ffffff; border-radius: 0.75rem; padding: 1.5rem; border-left: 5px solid #3b82f6; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .result-advice.no-issue { border-left: 5px solid #10b981; } /* ボタンデザイン */ .button-primary { background-color: #f59e0b; color: white; font-weight: 700; padding: 1rem 2rem; border-radius: 9999px; transition: background-color 0.3s, transform 0.2s; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); display: inline-block; text-decoration: none; } .button-primary:hover { background-color: #d97706; transform: translateY(-1px); } // 診断ロジックと状態管理 const quizData = [ { id: 1, text: “スタッフの仕事の質や成果がバラバラで、個々の能力に応じたフィードバックができていない。”, category: “育成”, answerA: “いいえ (できている)”, answerB: “はい (できていない)”, correctKey: “A” }, { id: 2, text: “過去1年でスタッフが3ヶ月以内に辞めることが常態化しており、採用活動が常に追いつかない。”, category: “人”, answerA: “いいえ (定着している)”, answerB: “はい (定着しない)”, correctKey: “A” }, { id: 3, text: “売上目標を達成するために、具体的な行動計画やKPI（中間目標）をスタッフと共有できていない。”, category: “売上”, answerA: “いいえ (共有できている)”, answerB: “はい (共有できていない)”, correctKey: “A” }, { id: 4, text: “自分の業務（プレイヤー業務）に追われ、スタッフの育成や環境整備といったマネジメントに時間が割けていない。”, category: “時間”, answerA: “いいえ (時間が割けている)”, answerB: “はい (時間が割けていない)”, correctKey: “A” }, { id: 5, text: “新しい業務を教える際、マニュアルやチェックリストがなく、OJTが店長の経験と勘に頼っている。”, category: “育成”, answerA: “いいえ (マニュアルがある)”, answerB: “はい (マニュアルがない)”, correctKey: “A” }, { id: 6, text: “スタッフのモチベーションや不満を把握するための1on1面談を定期的に実施する仕組みがない。”, category: “人”, answerA: “いいえ (仕組みがある)”, answerB: “はい (仕組みがない)”, correctKey: “A” }, { id: 7, text: “競合店の状況や、自店のPOSデータなどの数値分析を週に1回以上、徹底して行えていない。”, category: “売上”, answerA: “いいえ (分析できている)”, answerB: “はい (分析できていない)”, correctKey: “A” }, { id: 8, text: “シフト作成や発注業務など、定型的な業務をスタッフに権限委譲できておらず、全て自分で抱え込んでいる。”, category: “時間”, answerA: “いいえ (委譲できている)”, answerB: “はい (抱え込んでいる)”, correctKey: “A” }, { id: 9, text: “スタッフの頑張りを行動面から評価する基準がなく、結果（売上など）だけで評価している。”, category: “育成”, answerA: “いいえ (行動も評価している)”, answerB: “はい (結果のみ評価している)”, correctKey: “A” }, { id: 10, text: “採用の際、職場の「雰囲気」や「価値観」を求職者に明確に伝える採用ブランディングができていない。”, category: “人”, answerA: “いいえ (ブランディングできている)”, answerB: “はい (ブランディングできていない)”, correctKey: “A” }, { id: 11, text: “客層や季節の変動、イベントなどを考慮した「今週のイチオシ商品」や「販促計画」がない。”, category: “売上”, answerA: “いいえ (計画がある)”, answerB: “はい (計画がない)”, correctKey: “A” }, { id: 12, text: “店長会議や朝礼が長くなりがちで、議題や結論が明確に定まっていない。”, category: “時間”, answerA: “いいえ (短く明確である)”, answerB: “はい (長く曖昧である)”, correctKey: “A” }, ]; // 診断結果の解説データと対応リンク const resultDescriptions = { “なし”: { title: “🏆 現状、最優先で取り組むべき課題はありません”, description: “素晴らしいです！あなたは店舗マネジメントの基本的な仕組みを既に確立しています。現状維持ではなく、次のステージ（多店舗展開準備、新たな収益源の創出など）に向けた戦略的なアクションに時間を使いましょう。”, color: “text-green-600”, emoji: “🎉”, url: “https://pbo-pbc.com/store-manager-manual/” }, “育成”: { title: “🎓 育成・評価の仕組み”, description: “あなたの店舗は、スタッフの能力を最大限に引き出すための仕組みと評価制度がボトルネックです。マニュアルの不在、評価基準の曖昧さがスタッフの成長意欲を削いでいます。公平な評価と体系的な指導計画を導入し、一人ひとりのパフォーマンスを向上させましょう。”, color: “text-red-600”, emoji: “🎓”, url: “https://pbo-pbc.com/personnel-evaluation-system-intro-8-1/” }, “人”: { title: “🧑‍🤝‍🧑 離職・採用の構造”, description: “あなたの店舗の課題は、人材の定着と確保にあります。高い離職率や採用難は、コミュニケーション不足や職場文化の訴求力の低さが原因かもしれません。定着率を高めるための1on1面談や、魅力的な採用ブランディングを緊急で導入する必要があります。”, color: “text-red-600”, emoji: “🧑‍🤝‍🧑”, url: “https://pbo-pbc.com/chain-resignation-prevention-strategy/” }, “売上”: { title: “📈 売上・目標管理の戦略”, description: “売上が伸び悩む根本的な原因は、目標達成に向けた戦略的な approach の欠如です。単なる「頑張れ」ではなく、データに基づいたKPI設定と、具体的な販促計画が必要です。データ分析に基づき、売上アップの道筋を明確にしましょう。”, color: “text-red-600”, emoji: “📈”, url: “https://pbo-pbc.com/store-level-marketing-intro-6-1/” }, “時間”: { title: “⏱️ 業務効率・時間管理”, description: “あなたは日々の業務に追われ、本来のマネジメント業務に時間を割けていません。シフト作成や発注といった定型業務の効率化と権限委譲が最優先課題です。時間の使い方を見直し、店長が考えるべき「戦略的な仕事」に集中できるように仕組みを作りましょう。”, color: “text-red-600”, emoji: “⏱️”, url: “https://pbo-pbc.com/manager-manual-record-management-2-1/” } }; let currentQuestionIndex = 0; let scores = { “育成”: 0, “人”: 0, “売上”: 0, “時間”: 0 }; const priorityOrder = [“育成”, “人”, “売上”, “時間”]; // HTML要素の参照 const startScreen = document.getElementById(‘start-screen’); const quizSection = document.getElementById(‘quiz-section’); const resultSection = document.getElementById(‘result-section’); const quizForm = document.getElementById(‘quiz-form’); const progressBar = document.getElementById(‘progress-indicator’); const nextButton = document.getElementById(‘next-button’); const prevButton = document.getElementById(‘prev-button’); const submitButton = document.getElementById(‘submit-button’); const solutionButton = document.getElementById(‘solution-button’); // カスタムメッセージボックス window.alertMessage = function(message) { const existingBox = document.getElementById(‘custom-message-box’); if (existingBox) existingBox.remove(); const box = document.createElement(‘div’); box.id = ‘custom-message-box’; box.className = ‘fixed top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-50 z-50’; box.innerHTML = ` `; document.body.appendChild(box); } // クイズ開始 window.startQuiz = function() { startScreen.classList.add(‘hidden’); quizSection.classList.remove(‘hidden’); currentQuestionIndex = 0; scores = { “育成”: 0, “人”: 0, “売上”: 0, “時間”: 0 }; sessionStorage.clear(); window.loadQuestion(currentQuestionIndex); } // 質問をロード window.loadQuestion = function(index) { quizForm.innerHTML = ”; const q = quizData[index]; const currentQId = `q${q.id}`; const questionHtml = ` `; quizForm.innerHTML = questionHtml; const previousAnswer = sessionStorage.getItem(currentQId); if (previousAnswer) { document.getElementById(`${currentQId}-${previousAnswer}`).checked = true; } window.updateProgress(index); window.updateButtons(index); } window.updateProgress = function(index) { const percentage = ((index + 1) / quizData.length) * 100; progressBar.style.width = `${percentage}%`; } window.updateButtons = function(index) { prevButton.classList.toggle(‘hidden’, index === 0); if (index === quizData.length – 1) { nextButton.classList.add(‘hidden’); submitButton.classList.remove(‘hidden’); } else { nextButton.classList.remove(‘hidden’); submitButton.classList.add(‘hidden’); } } window.nextQuestion = function() { const q = quizData[currentQuestionIndex]; const selectedOption = document.querySelector(`input[name=”q${q.id}”]:checked`); if (!selectedOption) { window.alertMessage(“どちらかを選択してください。”); return; } sessionStorage.setItem(`q${q.id}`, selectedOption.value); currentQuestionIndex++; window.loadQuestion(currentQuestionIndex); } window.prevQuestion = function() { if (currentQuestionIndex > 0) { currentQuestionIndex–; window.loadQuestion(currentQuestionIndex); } } window.submitQuiz = function() { const q = quizData[currentQuestionIndex]; const selectedOption = document.querySelector(`input[name=”q${q.id}”]:checked`); if (!selectedOption) { window.alertMessage(“最後の質問に回答してください。”); return; } sessionStorage.setItem(`q${q.id}`, selectedOption.value); scores = { “育成”: 0, “人”: 0, “売上”: 0, “時間”: 0 }; for (const data of quizData) { const answerKey = sessionStorage.getItem(`q${data.id}`); if (answerKey === ‘B’) { scores[data.category]++; } } let maxScore = -1; let resultCategory = “”; for (const key of priorityOrder) { const score = scores[key]; if (score > maxScore) { maxScore = score; resultCategory = key; } } if (maxScore === 0) { resultCategory = “なし”; } window.displayResult(resultCategory); } // 結果の表示とリンク設定 window.displayResult = function(category) { quizSection.classList.add(‘hidden’); resultSection.classList.remove(‘hidden’); const resultData = resultDescriptions[category]; if (!resultData) return; document.getElementById(‘final-result-category’).innerHTML = resultData.title; document.getElementById(‘result-description’).textContent = resultData.description; document.getElementById(‘final-result-category’).className = `text-center text-3xl font-black mb-6 ${resultData.color}`; document.getElementById(‘result-emoji’).innerHTML = resultData.emoji; // 【重要】ボタンのリンク先を診断結果に合わせて動的にセット solutionButton.href = resultData.url; const adviceBox = document.getElementById(‘advice-box’); if (category === ‘なし’) { adviceBox.classList.add(‘no-issue’); document.getElementById(‘advice-core’).textContent = “【診断結果】”; } else { adviceBox.classList.remove(‘no-issue’); document.getElementById(‘advice-core’).textContent = “【課題の核心】”; } sessionStorage.clear(); } window.resetQuiz = function() { resultSection.classList.add(‘hidden’); startScreen.classList.remove(‘hidden’); currentQuestionIndex = 0; sessionStorage.clear(); }