Skip to content

Instantly share code, notes, and snippets.

@YujiFukami

YujiFukami/簡易業務改善の効果シミュレーター

Created June 23, 2025 07:56
Show Gist options
  • Save YujiFukami/2993fcc61b806ede0311bf23815688c3 to your computer and use it in GitHub Desktop.
Save YujiFukami/2993fcc61b806ede0311bf23815688c3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
簡易業務改善の効果シミュレーター
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
font-family: 'Segoe UI', sans-serif;
font-size: 15px;
background-color: #f5f7fa;
margin: 30px;
color: #333;
}
h3 {
background-color: #4CAF50;
color: white;
padding: 10px;
border-radius: 6px;
}
fieldset {
border: 1px solid #ccc;
border-radius: 8px;
padding: 16px;
margin-bottom: 20px;
background-color: #fff;
}
legend {
font-weight: bold;
padding: 0 6px;
}
.input-group {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 12px;
}
label {
flex: 1 1 180px;
}
input[type="number"] {
width: 60px;
margin-left: 4px;
}
.result {
background-color: #e6f4ea;
padding: 12px;
border-radius: 8px;
font-weight: bold;
line-height: 1.6;
margin-top: 10px;
}
#highlightResult {
font-size: 18px;
color: #d32f2f;
background-color: #fff3cd;
padding: 10px;
margin-top: 12px;
border-radius: 8px;
border-left: 6px solid #ffa000;
}
/* レスポンシブ対応 */
@media (max-width: 600px) {
.input-group {
flex-direction: column;
}
label {
flex: 1 1 100%;
}
input[type="number"] {
width: 100px;
}
}
</style>
</head>
<body>
<h3>簡易業務改善の効果シミュレーター</h3>
<fieldset>
<legend>改善前の作業情報</legend>
<div class="input-group">
<label>1日の作業時間：<br>
<input type="number" id="dailyHour" min="0" step="1" value="1" oninput="calculate()"> 時間
<input type="number" id="dailyMin" min="0" max="59" step="5" value="0" oninput="calculate()"> 分
</label>
<label>年間回数：<br>
<input type="number" id="annualTimes" min="0" step="1" value="200" oninput="calculate()">
</label>
<label>作業する人数：<br>
<input type="number" id="peopleCount" min="1" step="1" value="1" oninput="calculate()">
</label>
<label>時間単価（円）：<br>
<input type="number" id="hourlyRate" min="0" step="100" value="4500" oninput="calculate()">
</label>
</div>
</fieldset>
<div class="result" id="beforeResult"></div>
<fieldset>
<legend>改善後の作業情報</legend>
<div class="input-group">
<label>改善後の作業時間：<br>
<input type="number" id="reducedHour" min="0" step="1" value="0" oninput="calculate()"> 時間
<input type="number" id="reducedMin" min="0" max="59" step="5" value="20" oninput="calculate()"> 分
</label>
</div>
</fieldset>
<div class="result" id="afterResult"></div>
<div id="highlightResult"></div>
<script>
function calculate() {
const h1 = Number(document.getElementById("dailyHour").value);
const m1 = Number(document.getElementById("dailyMin").value);
const times = Number(document.getElementById("annualTimes").value);
const people = Number(document.getElementById("peopleCount").value);
const rate = Number(document.getElementById("hourlyRate").value);
const beforeHour = h1 + m1 / 60;
const totalHoursBefore = beforeHour * times * people;
const costBefore = totalHoursBefore * rate;
document.getElementById("beforeResult").innerHTML =
`✅ 年間作業時間：${totalHoursBefore.toFixed(1)} 時間<br>` +
`✅ 年間人件費：¥${Math.round(costBefore).toLocaleString()}`;
const h2 = Number(document.getElementById("reducedHour").value);
const m2 = Number(document.getElementById("reducedMin").value);
if (!h2 && !m2) {
document.getElementById("afterResult").innerHTML = "";
document.getElementById("highlightResult").innerHTML = "";
return;
}
const afterHour = h2 + m2 / 60;
const totalHoursAfter = afterHour * times * people;
const costAfter = totalHoursAfter * rate;
const savedHours = totalHoursBefore - totalHoursAfter;
const savedCost = costBefore - costAfter;
document.getElementById("afterResult").innerHTML =
`✅ 削減時間：${savedHours.toFixed(1)} 時間<br>` +
`✅ 削減人件費：¥${Math.round(savedCost).toLocaleString()}`;
document.getElementById("highlightResult").innerHTML =
`💡 <strong>この改善で年間最大 <span style="font-size: 22px;">¥${Math.round(savedCost).toLocaleString()}</span> の人件費削減が見込めます！</strong>`;
}
window.onload = calculate;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment