会議4項目全ての項を変数

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会議効率シミュレーター</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: linear-gradient(135deg, #667eea  0%, #764ba2  100%);
            min-height: 100vh;
            color: #333 ;
        }
        
        .container {
            background: rgba(255, 255, 255, 0.95);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
        }
        
        h1 {
            text-align: center;
            color: #4a5568 ;
            margin-bottom: 30px;
            font-size: 2.2em;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        }
        
        .formula-display {
            background: linear-gradient(135deg, #f093fb  0%, #f5576c  100%);
            color: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 30px;
            text-align: center;
            font-size: 1.1em;
            font-weight: bold;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .parameter-group {
            margin-bottom: 25px;
            padding: 20px;
            background: linear-gradient(135deg, #a8edea  0%, #fed6e3  100%);
            border-radius: 10px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #2d3748 ;
        }
        
        input[type="range"] {
            width: 100%;
            height: 8px;
            border-radius: 5px;
            background: #e2e8f0 ;
            outline: none;
            margin-bottom: 10px;
            appearance: none;
        }
        
        input[type="range"]::-webkit-slider-thumb {
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea  0%, #764ba2  100%);
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        }
        
        input[type="range"]::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea  0%, #764ba2  100%);
            cursor: pointer;
            border: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        }
        
        .value-display {
            font-size: 1.1em;
            font-weight: bold;
            color: #4a5568 ;
            text-align: center;
            margin-bottom: 10px;
        }
        
        .result {
            background: linear-gradient(135deg, #ffecd2  0%, #fcb69f  100%);
            padding: 25px;
            border-radius: 10px;
            text-align: center;
            font-size: 1.3em;
            font-weight: bold;
            color: #2d3748 ;
            margin: 30px 0;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .reset-btn {
            background: linear-gradient(135deg, #ff6b6b  0%, #ee5a24  100%);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 25px;
            font-size: 1.1em;
            font-weight: bold;
            cursor: pointer;
            display: block;
            margin: 20px auto;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }
        
        .reset-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 7px 20px rgba(0, 0, 0, 0.3);
        }
        
        .interpretation {
            background: linear-gradient(135deg, #e8f5e8  0%, #d4edda  100%);
            padding: 20px;
            border-radius: 10px;
            margin-top: 20px;
            border-left: 5px solid #28a745 ;
        }
        
        .parameter-description {
            font-size: 0.9em;
            color: #666 ;
            margin-top: 5px;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .result.updated {
            animation: pulse 0.5s ease-in-out;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>📊 会議効率シミュレーター</h1>
        
        <div class="formula-display">
            会議時間% = (利息) ÷ (会議有益率) × (才能偏在率) × (時間ムダ率)
        </div>
        
        <div class="parameter-group">
            <label for="interest">利息 (Interest Rate)</label>
            <div class="parameter-description">時間の機会費用を表す係数</div>
            <input type="range" id="interest" min="1.00" max="1.10" step="0.01" value="1.03">
            <div class="value-display" id="interestValue">1.03</div>
        </div>
        
        <div class="parameter-group">
            <label for="beneficial">会議有益率 (Meeting Benefit Rate)</label>
            <div class="parameter-description">参加者が会議を有益と感じる割合</div>
            <input type="range" id="beneficial" min="0.50" max="0.90" step="0.01" value="0.75">
            <div class="value-display" id="beneficialValue">75%</div>
        </div>
        
        <div class="parameter-group">
            <label for="talent">才能偏在率 (Talent Distribution Rate)</label>
            <div class="parameter-description">組織内での才能の偏在度合い</div>
            <input type="range" id="talent" min="0.10" max="0.30" step="0.001" value="0.153">
            <div class="value-display" id="talentValue">0.153</div>
        </div>
        
        <div class="parameter-group">
            <label for="waste">時間ムダ率 (Time Waste Rate)</label>
            <div class="parameter-description">会議を時間のムダと感じる人の割合</div>
            <input type="range" id="waste" min="0.15" max="0.35" step="0.01" value="0.21">
            <div class="value-display" id="wasteValue">21%</div>
        </div>
        
        <div class="result" id="result">
            会議時間割合: 2.9%
        </div>
        
        <button class="reset-btn" onclick="resetValues()">🔄 リセット</button>
        
        <div class="interpretation">
            <h3>💡 解釈</h3>
            <p id="interpretation">現在の設定では、全体の21%が会議時間として使われています。これは適切な範囲内ですが、パラメータを調整することで最適化できます。</p>
        </div>
    </div>

    <script>
        // 初期値
        const defaultValues = {
            interest: 1.03,
            beneficial: 0.75,
            talent: 0.153,
            waste: 0.21
        };
        
        // 要素の取得
        const interestSlider = document.getElementById('interest');
        const beneficialSlider = document.getElementById('beneficial');
        const talentSlider = document.getElementById('talent');
        const wasteSlider = document.getElementById('waste');
        
        const interestValue = document.getElementById('interestValue');
        const beneficialValue = document.getElementById('beneficialValue');
        const talentValue = document.getElementById('talentValue');
        const wasteValue = document.getElementById('wasteValue');
        
        const result = document.getElementById('result');
        const interpretation = document.getElementById('interpretation');
        
        // 計算関数
        function calculateMeetingTime() {
            const interest = parseFloat(interestSlider.value);
            const beneficial = parseFloat(beneficialSlider.value);
            const talent = parseFloat(talentSlider.value);
            const waste = parseFloat(wasteSlider.value);
            
            const meetingTime = (interest / beneficial) * talent * waste;
            
            return {
                meetingTime: meetingTime,
                percentage: (meetingTime * 100).toFixed(1)
            };
        }
        
        // 表示更新関数
        function updateDisplay() {
            const interest = parseFloat(interestSlider.value);
            const beneficial = parseFloat(beneficialSlider.value);
            const talent = parseFloat(talentSlider.value);
            const waste = parseFloat(wasteSlider.value);
            
            // 値の表示更新
            interestValue.textContent = interest.toFixed(2);
            beneficialValue.textContent = (beneficial * 100).toFixed(0) + '%';
            talentValue.textContent = talent.toFixed(3);
            wasteValue.textContent = (waste * 100).toFixed(0) + '%';
            
            // 結果計算
            const calc = calculateMeetingTime();
            result.textContent = `会議時間割合: ${calc.percentage}%`;
            result.classList.add('updated');
            setTimeout(() => result.classList.remove('updated'), 500);
            
            // 解釈の更新
            updateInterpretation(calc.percentage, interest, beneficial, talent, waste);
        }
        
        // 解釈更新関数
        function updateInterpretation(percentage, interest, beneficial, talent, waste) {
            let text = '';
            
            if (percentage < 15) {
                text = '会議時間が非常に少ない状態です。効率的ですが、必要なコミュニケーションが不足している可能性があります。';
            } else if (percentage < 25) {
                text = '適切な会議時間の範囲内です。効率とコミュニケーションのバランスが取れています。';
            } else if (percentage < 35) {
                text = '会議時間がやや多めです。会議の必要性を見直すか、効率化を検討してください。';
            } else {
                text = '会議時間が過多です。大幅な見直しが必要です。会議の数を減らすか、時間短縮を検討してください。';
            }
            
            // 要因分析
            if (interest > 1.05) {
                text += ' 機会費用が高く、時間の価値が重要視されています。';
            }
            if (beneficial < 0.65) {
                text += ' 会議の有益性が低いため、内容の改善が必要です。';
            }
            if (talent > 0.20) {
                text += ' 才能の偏在が大きく、効率的な人材活用が課題です。';
            }
            if (waste > 0.25) {
                text += ' 時間のムダと感じる人が多く、会議の質向上が急務です。';
            }
            
            interpretation.textContent = text;
        }
        
        // リセット関数
        function resetValues() {
            interestSlider.value = defaultValues.interest;
            beneficialSlider.value = defaultValues.beneficial;
            talentSlider.value = defaultValues.talent;
            wasteSlider.value = defaultValues.waste;
            updateDisplay();
        }
        
        // イベントリスナーの設定
        interestSlider.addEventListener('input', updateDisplay);
        beneficialSlider.addEventListener('input', updateDisplay);
        talentSlider.addEventListener('input', updateDisplay);
        wasteSlider.addEventListener('input', updateDisplay);
        
        // 初期表示
        updateDisplay();
    </script>
</body>
</html>