住宅ローンシミュレーター

住宅ローンの月々の返済額と総支払額を簡単に計算できる無料シミュレーターです。 元利均等返済と元金均等返済の比較、ボーナス返済の影響を視覚的に理解できます。

目次

Chart.js版(グラフあり)

住宅ローンシミュレーター

返済計画の比較と総支払額のシミュレーション

月々の返済額 ¥0
総返済額 ¥0
利息総額 ¥0

⚠️ 注意事項

  • 計算された数値は、あくまでもシミュレーションであり、実際の返済計画を保証するものではありません。
  • 本シミュレーションでは保証料、事務手数料、団体信用生命保険料等の諸費用は考慮していません。
  • 金利タイプ(固定/変動)による金利変動は考慮していません。

免責事項

本シミュレーションは住宅ローンの検討における参考情報提供のみを目的として作成されたもので、特定の金融機関の商品を推奨したり、個々の利用者の特定の資金計画を保証するものではありません。住宅ローンの借入判断は、ご自身の判断と責任でなされるようお願いします。万一、本シミュレーションに基づいて損害を被ったとしても、当方は一切その責任を負うものではありません。

コピー用コード

<!--
================================================
WordPress カスタムHTMLブロック用コード
住宅ローンシミュレーター通常版
================================================
機能元利均等/元金均等返済繰上返済シミュレーションボーナス返済対応
セキュリティ】✅ ブラウザ内完結通信ゼロ
利用規約無償無保証投資判断は自己責任
外部依存Chart.js 4.4.0 (CDN経由遅延読み込み)
================================================
-->

<!-- MSIM:STYLE-START -->
<style>
.housing-loan-simulator * {margin:0; padding:0; box-sizing:border-box}
.housing-loan-simulator {font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; line-height:1.6; color:#333}
.housing-loan-simulator .container {max-width:1200px; margin:0 auto; background:#fff; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,.1); padding:30px}
.housing-loan-simulator h1 {font-size:28px; margin:0 0 10px; color:#1a1a1a; text-align:center}
.housing-loan-simulator .subtitle {font-size:14px; color:#666; text-align:center; margin:0 0 30px}
.housing-loan-simulator h2 {font-size:20px; margin:30px 0 20px; color:#1a1a1a}
.housing-loan-simulator h3 {font-size:16px; margin:20px 0 15px; color:#555}
.housing-loan-simulator .input-section {display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin:0 0 30px}
.housing-loan-simulator .input-group {display:flex; flex-direction:column}
.housing-loan-simulator .input-group label {font-size:14px; font-weight:600; margin:0 0 8px; color:#555}
.housing-loan-simulator .input-group input,
.housing-loan-simulator .input-group select {padding:12px; border:2px solid #e0e0e0; border-radius:8px; font-size:16px; transition:.3s; background:#fff}
.housing-loan-simulator .input-group input:focus,
.housing-loan-simulator .input-group select:focus {outline:0; border-color:#3498db; box-shadow:0 0 0 3px rgba(52,152,219,.1)}
.housing-loan-simulator .input-group input:hover,
.housing-loan-simulator .input-group select:hover {border-color:#b0b0b0}
.housing-loan-simulator .results-section {display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; margin:0 0 30px; padding:20px; background:#f8f9fa; border-radius:8px}
.housing-loan-simulator .result-item {display:flex; flex-direction:column; align-items:center; padding:15px; background:#fff; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.05)}
.housing-loan-simulator .result-label {font-size:13px; color:#777; margin:0 0 8px; font-weight:500}
.housing-loan-simulator .result-value {font-size:24px; font-weight:700; color:#3498db}
.housing-loan-simulator .result-value.interest {color:#e74c3c}
.housing-loan-simulator .result-value.total {color:#2ecc71}
.housing-loan-simulator .chart-section {position:relative; height:400px; margin:30px 0}
.housing-loan-simulator .chart-section canvas {width:100%!important; height:100%!important}
.housing-loan-simulator .disclaimer-section {margin-top:30px; padding:20px; background:#fff3cd; border-left:4px solid #ffc107; border-radius:4px}
.housing-loan-simulator .disclaimer-section .disclaimer-title {font-size:13px; font-weight:600; color:#856404; margin:0 0 10px}
.housing-loan-simulator .disclaimer-section ul {margin:0 0 15px 20px}
.housing-loan-simulator .disclaimer-section li {font-size:12px; color:#856404; margin:0 0 6px; line-height:1.6}
.housing-loan-simulator .disclaimer-section .disclaimer-text {font-size:12px; color:#856404; line-height:1.6; margin:0}

@media (max-width:768px) {
  .housing-loan-simulator .container {padding:20px}
  .housing-loan-simulator h1 {font-size:24px}
  .housing-loan-simulator .input-section {grid-template-columns:1fr}
  .housing-loan-simulator .results-section {grid-template-columns:1fr}
  .housing-loan-simulator .chart-section {height:300px}
}
</style>
<!-- MSIM:STYLE-END -->

<!-- MSIM:HTML-START -->
<div class="housing-loan-simulator" data-tool="housing-loan" data-version="1.0.0">
  <div class="container">
    <h1>住宅ローンシミュレーター</h1>
    <p class="subtitle">返済計画の比較と総支払額のシミュレーション</p>

    <div class="input-section">
      <div class="input-group">
        <label>借入金額(万円)</label>
        <input type="number" data-ms-loan-amount value="3000" min="100" max="100000" step="100">
      </div>
      <div class="input-group">
        <label>年利率(%)</label>
        <input type="number" data-ms-interest-rate value="1.5" min="0.1" max="10" step="0.1">
      </div>
      <div class="input-group">
        <label>返済期間(年)</label>
        <select data-ms-loan-period>
          <option value="10">10年</option>
          <option value="15">15年</option>
          <option value="20">20年</option>
          <option value="25">25年</option>
          <option value="30">30年</option>
          <option value="35" selected>35年</option>
        </select>
      </div>
      <div class="input-group">
        <label>返済方式</label>
        <select data-ms-repayment-type>
          <option value="equal-payment" selected>元利均等返済</option>
          <option value="equal-principal">元金均等返済</option>
        </select>
      </div>
      <div class="input-group">
        <label>ボーナス返済割合(%)</label>
        <input type="number" data-ms-bonus-ratio value="0" min="0" max="50" step="5">
      </div>
    </div>

    <div class="results-section">
      <div class="result-item">
        <span class="result-label" data-ms-payment-label>月々の返済額</span>
        <span class="result-value" data-ms-monthly-payment>¥0</span>
      </div>
      <div class="result-item" data-ms-final-payment-item style="display:none">
        <span class="result-label">最終返済額</span>
        <span class="result-value" data-ms-final-payment>¥0</span>
      </div>
      <div class="result-item">
        <span class="result-label">総返済額</span>
        <span class="result-value total" data-ms-total-payment>¥0</span>
      </div>
      <div class="result-item">
        <span class="result-label">利息総額</span>
        <span class="result-value interest" data-ms-total-interest>¥0</span>
      </div>
    </div>

    <div class="chart-section">
      <canvas data-ms-canvas></canvas>
    </div>

    <div class="disclaimer-section">
      <p class="disclaimer-title">⚠️ 注意事項</p>
      <ul>
        <li>計算された数値は、あくまでもシミュレーションであり、実際の返済計画を保証するものではありません。</li>
        <li>本シミュレーションでは保証料、事務手数料、団体信用生命保険料等の諸費用は考慮していません。</li>
        <li>金利タイプ(固定/変動)による金利変動は考慮していません。</li>
      </ul>
      <p class="disclaimer-title">免責事項</p>
      <p class="disclaimer-text">本シミュレーションは住宅ローンの検討における参考情報提供のみを目的として作成されたもので、特定の金融機関の商品を推奨したり、個々の利用者の特定の資金計画を保証するものではありません。住宅ローンの借入判断は、ご自身の判断と責任でなされるようお願いします。万一、本シミュレーションに基づいて損害を被ったとしても、当方は一切その責任を負うものではありません。</p>
    </div>

    <div style="text-align:right;margin-top:30px;color:#999;font-size:12px">
      Powered by <a href="https://minna-calc.com/" target="_blank" rel="noopener" style="color:#4a90e2;text-decoration:none">みんなのシミュレーター</a>
    </div>
  </div>
</div>
<!-- MSIM:HTML-END -->

<!-- MSIM:JS-START -->
<script>
(()=>{
  "use strict";

  const CJ_URL = "https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js";
  let loadingCJ = false, loadedCJ = !!window.Chart;

  function ensureChartJs(cb) {
    if (loadedCJ) { cb(); return }
    if (!loadingCJ) {
      loadingCJ = true;
      const s = document.createElement("script");
      s.src = CJ_URL;
      s.defer = true;
      s.onload = () => { loadedCJ = true; cb && cb() };
      s.onerror = () => console.error("Chart.js load failed");
      document.head.appendChild(s);
    } else {
      const t = setInterval(() => {
        if (loadedCJ) { clearInterval(t); cb && cb() }
      }, 50);
    }
  }

  const fmt = new Intl.NumberFormat("ja-JP", {
    style: "currency",
    currency: "JPY",
    minimumFractionDigits: 0,
    maximumFractionDigits: 0
  });

  function calculateLoan(principal, annualRate, years, type, bonusRatio) {
    const monthlyRate = annualRate / 100 / 12;
    const months = years * 12;
    const regularPrincipal = principal * (1 - bonusRatio / 100);
    const bonusPrincipal = principal * (bonusRatio / 100);

    let monthlyPayment, finalPayment, totalInterest, schedule = [], paymentSchedule = [];

    if (type === 'equal-payment') {
      // 元利均等返済
      const regularMonthly = regularPrincipal * monthlyRate * Math.pow(1 + monthlyRate, months) / (Math.pow(1 + monthlyRate, months) - 1);
      const bonusMonthly = bonusPrincipal * monthlyRate * Math.pow(1 + monthlyRate, months) / (Math.pow(1 + monthlyRate, months) - 1);

      monthlyPayment = regularMonthly;
      finalPayment = regularMonthly;
      let balance = principal;
      totalInterest = 0;
      let yearlyInterest = 0, yearlyPrincipal = 0;

      for (let i = 1; i <= months; i++) {
        const interest = balance * monthlyRate;
        const principalPayment = regularMonthly - interest + (i % 6 === 0 ? bonusMonthly : 0);
        balance -= principalPayment;
        totalInterest += interest;
        yearlyInterest += interest;
        yearlyPrincipal += principalPayment;

        if (i % 12 === 0 || i === months) {
          schedule.push({
            year: Math.ceil(i / 12),
            balance: Math.max(0, balance)
          });
          paymentSchedule.push({
            year: Math.ceil(i / 12),
            payment: Math.round(regularMonthly * 12),
            principal: Math.round(yearlyPrincipal),
            interest: Math.round(yearlyInterest)
          });
          yearlyInterest = 0;
          yearlyPrincipal = 0;
        }
      }
    } else {
      // 元金均等返済
      const regularPrincipalPayment = regularPrincipal / months;
      const bonusPrincipalPayment = bonusPrincipal / months;

      monthlyPayment = regularPrincipalPayment + principal * monthlyRate;
      let balance = principal;
      totalInterest = 0;

      for (let i = 1; i <= months; i++) {
        const interest = balance * monthlyRate;
        const principalPayment = regularPrincipalPayment + (i % 6 === 0 ? bonusPrincipalPayment : 0);
        const payment = principalPayment + interest;
        balance -= principalPayment;
        totalInterest += interest;

        if (i % 12 === 0 || i === months) {
          schedule.push({
            year: Math.ceil(i / 12),
            balance: Math.max(0, balance)
          });
          paymentSchedule.push({
            year: Math.ceil(i / 12),
            payment: Math.round(payment),
            principal: Math.round(regularPrincipalPayment * 12),
            interest: Math.round(interest * 12)
          });
        }

        if (i === months) {
          finalPayment = payment;
        }
      }
    }

    return {
      monthlyPayment: Math.round(monthlyPayment),
      finalPayment: Math.round(finalPayment),
      totalPayment: Math.round(principal + totalInterest),
      totalInterest: Math.round(totalInterest),
      schedule: schedule,
      paymentSchedule: paymentSchedule
    };
  }

  function boot(root) {
    let chart = null;
    const q = s => root.querySelector(s);
    const els = {
      loanAmount: q("[data-ms-loan-amount]"),
      interestRate: q("[data-ms-interest-rate]"),
      loanPeriod: q("[data-ms-loan-period]"),
      repaymentType: q("[data-ms-repayment-type]"),
      bonusRatio: q("[data-ms-bonus-ratio]"),
      paymentLabel: q("[data-ms-payment-label]"),
      monthlyPayment: q("[data-ms-monthly-payment]"),
      finalPaymentItem: q("[data-ms-final-payment-item]"),
      finalPayment: q("[data-ms-final-payment]"),
      totalPayment: q("[data-ms-total-payment]"),
      totalInterest: q("[data-ms-total-interest]"),
      canvas: q("[data-ms-canvas]")
    };

    function drawBalanceChart(paymentSchedule) {
      if (!loadedCJ) {
        ensureChartJs(() => drawBalanceChart(paymentSchedule));
        return;
      }

      const labels = paymentSchedule.map(d => `${d.year}年目`);
      const principals = paymentSchedule.map(d => d.principal);
      const interests = paymentSchedule.map(d => d.interest);

      if (chart) chart.destroy();
      chart = new Chart(els.canvas, {
        type: "bar",
        data: {
          labels,
          datasets: [{
            label: "元金",
            data: principals,
            backgroundColor: "rgba(44,62,80,.8)",
            borderColor: "rgba(44,62,80,1)",
            borderWidth: 1
          }, {
            label: "利息",
            data: interests,
            backgroundColor: "rgba(155,194,66,.8)",
            borderColor: "rgba(155,194,66,1)",
            borderWidth: 1
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          interaction: {
            mode: 'index',
            intersect: false
          },
          plugins: {
            tooltip: {
              mode: 'index',
              intersect: false,
              callbacks: {
                label: t => `${t.dataset.label}: ${fmt.format(t.parsed.y)}`
              }
            }
          },
          scales: {
            x: { stacked: true },
            y: {
              stacked: true,
              beginAtZero: true,
              ticks: { callback: v => fmt.format(v) }
            }
          }
        }
      });
    }

    function drawPaymentChart(paymentSchedule) {
      if (!loadedCJ) {
        ensureChartJs(() => drawPaymentChart(paymentSchedule));
        return;
      }

      const labels = paymentSchedule.map(d => `${d.year}年目`);
      const principals = paymentSchedule.map(d => d.principal);
      const interests = paymentSchedule.map(d => d.interest);

      if (chart) chart.destroy();
      chart = new Chart(els.canvas, {
        type: "bar",
        data: {
          labels,
          datasets: [{
            label: "元金",
            data: principals,
            backgroundColor: "rgba(44,62,80,.8)",
            borderColor: "rgba(44,62,80,1)",
            borderWidth: 1
          }, {
            label: "利息",
            data: interests,
            backgroundColor: "rgba(155,194,66,.8)",
            borderColor: "rgba(155,194,66,1)",
            borderWidth: 1
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          interaction: {
            mode: 'index',
            intersect: false
          },
          plugins: {
            tooltip: {
              mode: 'index',
              intersect: false,
              callbacks: {
                label: t => `${t.dataset.label}: ${fmt.format(t.parsed.y)}`
              }
            }
          },
          scales: {
            x: { stacked: true },
            y: {
              stacked: true,
              beginAtZero: true,
              ticks: { callback: v => fmt.format(v) }
            }
          }
        }
      });
    }

    function update() {
      const amount = parseFloat(els.loanAmount.value) * 10000 || 0;
      const rate = parseFloat(els.interestRate.value) || 0;
      const years = parseInt(els.loanPeriod.value) || 0;
      const type = els.repaymentType.value;
      const bonus = parseFloat(els.bonusRatio.value) || 0;

      if (amount === 0 || rate === 0 || years === 0) {
        els.monthlyPayment.textContent = "¥0";
        els.totalPayment.textContent = "¥0";
        els.totalInterest.textContent = "¥0";
        els.finalPaymentItem.style.display = "none";
        return;
      }

      const result = calculateLoan(amount, rate, years, type, bonus);

      if (type === 'equal-principal') {
        els.paymentLabel.textContent = "初回返済額";
        els.finalPaymentItem.style.display = "flex";
        els.finalPayment.textContent = fmt.format(result.finalPayment);
      } else {
        els.paymentLabel.textContent = "月々の返済額";
        els.finalPaymentItem.style.display = "none";
      }

      if (type === 'equal-payment') {
        drawBalanceChart(result.paymentSchedule);
      } else {
        drawPaymentChart(result.paymentSchedule);
      }

      els.monthlyPayment.textContent = fmt.format(result.monthlyPayment);
      els.totalPayment.textContent = fmt.format(result.totalPayment);
      els.totalInterest.textContent = fmt.format(result.totalInterest);
    }

    els.loanAmount.addEventListener("input", update);
    els.interestRate.addEventListener("input", update);
    els.loanPeriod.addEventListener("change", update);
    els.repaymentType.addEventListener("change", update);
    els.bonusRatio.addEventListener("input", update);

    if ("IntersectionObserver" in window) {
      const io = new IntersectionObserver(es => {
        es.some(e => e.isIntersecting) && (ensureChartJs(() => {}), io.disconnect());
      });
      io.observe(els.canvas);
    }

    update();
  }

  window.addEventListener("DOMContentLoaded", () =>
    document.querySelectorAll('.housing-loan-simulator[data-tool="housing-loan"]').forEach(boot)
  );
})();
</script>
<!-- MSIM:JS-END -->

Chart.jsなし簡易版(軽量)

住宅ローンシミュレーター

返済計画の比較と総支払額のシミュレーション

月々の返済額 ¥0
総返済額 ¥0
利息総額 ¥0

⚠️ 注意事項

  • 計算された数値は、あくまでもシミュレーションであり、実際の返済計画を保証するものではありません。
  • 本シミュレーションでは保証料、事務手数料、団体信用生命保険料等の諸費用は考慮していません。
  • 金利タイプ(固定/変動)による金利変動は考慮していません。

免責事項

本シミュレーションは住宅ローンの検討における参考情報提供のみを目的として作成されたもので、特定の金融機関の商品を推奨したり、個々の利用者の特定の資金計画を保証するものではありません。住宅ローンの借入判断は、ご自身の判断と責任でなされるようお願いします。万一、本シミュレーションに基づいて損害を被ったとしても、当方は一切その責任を負うものではありません。

コピー用コード

<!--
================================================
WordPress カスタムHTMLブロック用コード
住宅ローンシミュレーター簡易版Chart.jsなし
================================================
機能元利均等/元金均等返済繰上返済シミュレーションボーナス返済対応
セキュリティ】✅ ブラウザ内完結通信ゼロ
利用規約無償無保証投資判断は自己責任
外部依存なし完全スタンドアロン
================================================
-->

<!-- MSIM:STYLE-START -->
<style>
.housing-loan-simulator * {margin:0; padding:0; box-sizing:border-box}
.housing-loan-simulator {font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; line-height:1.6; color:#333}
.housing-loan-simulator .container {max-width:1200px; margin:0 auto; background:#fff; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,.1); padding:30px}
.housing-loan-simulator h1 {font-size:28px; margin:0 0 10px; color:#1a1a1a; text-align:center}
.housing-loan-simulator .subtitle {font-size:14px; color:#666; text-align:center; margin:0 0 30px}
.housing-loan-simulator h2 {font-size:20px; margin:30px 0 20px; color:#1a1a1a}
.housing-loan-simulator h3 {font-size:16px; margin:20px 0 15px; color:#555}
.housing-loan-simulator .input-section {display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin:0 0 30px}
.housing-loan-simulator .input-group {display:flex; flex-direction:column}
.housing-loan-simulator .input-group label {font-size:14px; font-weight:600; margin:0 0 8px; color:#555}
.housing-loan-simulator .input-group input,
.housing-loan-simulator .input-group select {padding:12px; border:2px solid #e0e0e0; border-radius:8px; font-size:16px; transition:.3s; background:#fff}
.housing-loan-simulator .input-group input:focus,
.housing-loan-simulator .input-group select:focus {outline:0; border-color:#3498db; box-shadow:0 0 0 3px rgba(52,152,219,.1)}
.housing-loan-simulator .input-group input:hover,
.housing-loan-simulator .input-group select:hover {border-color:#b0b0b0}
.housing-loan-simulator .results-section {display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; margin:0 0 30px; padding:20px; background:#f8f9fa; border-radius:8px}
.housing-loan-simulator .result-item {display:flex; flex-direction:column; align-items:center; padding:15px; background:#fff; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.05)}
.housing-loan-simulator .result-label {font-size:13px; color:#777; margin:0 0 8px; font-weight:500}
.housing-loan-simulator .result-value {font-size:24px; font-weight:700; color:#3498db}
.housing-loan-simulator .result-value.interest {color:#e74c3c}
.housing-loan-simulator .result-value.total {color:#2ecc71}
.housing-loan-simulator .disclaimer-section {margin-top:30px; padding:20px; background:#fff3cd; border-left:4px solid #ffc107; border-radius:4px}
.housing-loan-simulator .disclaimer-section .disclaimer-title {font-size:13px; font-weight:600; color:#856404; margin:0 0 10px}
.housing-loan-simulator .disclaimer-section ul {margin:0 0 15px 20px}
.housing-loan-simulator .disclaimer-section li {font-size:12px; color:#856404; margin:0 0 6px; line-height:1.6}
.housing-loan-simulator .disclaimer-section .disclaimer-text {font-size:12px; color:#856404; line-height:1.6; margin:0}

@media (max-width:768px) {
  .housing-loan-simulator .container {padding:20px}
  .housing-loan-simulator h1 {font-size:24px}
  .housing-loan-simulator .input-section {grid-template-columns:1fr}
  .housing-loan-simulator .results-section {grid-template-columns:1fr}
}
</style>
<!-- MSIM:STYLE-END -->

<!-- MSIM:HTML-START -->
<div class="housing-loan-simulator" data-tool="housing-loan" data-version="1.0.0">
  <div class="container">
    <h1>住宅ローンシミュレーター</h1>
    <p class="subtitle">返済計画の比較と総支払額のシミュレーション</p>

    <div class="input-section">
      <div class="input-group">
        <label>借入金額(万円)</label>
        <input type="number" data-ms-loan-amount value="3000" min="100" max="100000" step="100">
      </div>
      <div class="input-group">
        <label>年利率(%)</label>
        <input type="number" data-ms-interest-rate value="1.5" min="0.1" max="10" step="0.1">
      </div>
      <div class="input-group">
        <label>返済期間(年)</label>
        <select data-ms-loan-period>
          <option value="10">10年</option>
          <option value="15">15年</option>
          <option value="20">20年</option>
          <option value="25">25年</option>
          <option value="30">30年</option>
          <option value="35" selected>35年</option>
        </select>
      </div>
      <div class="input-group">
        <label>返済方式</label>
        <select data-ms-repayment-type>
          <option value="equal-payment" selected>元利均等返済</option>
          <option value="equal-principal">元金均等返済</option>
        </select>
      </div>
      <div class="input-group">
        <label>ボーナス返済割合(%)</label>
        <input type="number" data-ms-bonus-ratio value="0" min="0" max="50" step="5">
      </div>
    </div>

    <div class="results-section">
      <div class="result-item">
        <span class="result-label" data-ms-payment-label>月々の返済額</span>
        <span class="result-value" data-ms-monthly-payment>¥0</span>
      </div>
      <div class="result-item" data-ms-final-payment-item style="display:none">
        <span class="result-label">最終返済額</span>
        <span class="result-value" data-ms-final-payment>¥0</span>
      </div>
      <div class="result-item">
        <span class="result-label">総返済額</span>
        <span class="result-value total" data-ms-total-payment>¥0</span>
      </div>
      <div class="result-item">
        <span class="result-label">利息総額</span>
        <span class="result-value interest" data-ms-total-interest>¥0</span>
      </div>
    </div>

    <div class="disclaimer-section">
      <p class="disclaimer-title">⚠️ 注意事項</p>
      <ul>
        <li>計算された数値は、あくまでもシミュレーションであり、実際の返済計画を保証するものではありません。</li>
        <li>本シミュレーションでは保証料、事務手数料、団体信用生命保険料等の諸費用は考慮していません。</li>
        <li>金利タイプ(固定/変動)による金利変動は考慮していません。</li>
      </ul>
      <p class="disclaimer-title">免責事項</p>
      <p class="disclaimer-text">本シミュレーションは住宅ローンの検討における参考情報提供のみを目的として作成されたもので、特定の金融機関の商品を推奨したり、個々の利用者の特定の資金計画を保証するものではありません。住宅ローンの借入判断は、ご自身の判断と責任でなされるようお願いします。万一、本シミュレーションに基づいて損害を被ったとしても、当方は一切その責任を負うものではありません。</p>
    </div>

    <div style="text-align:right;margin-top:30px;color:#999;font-size:12px">
      Powered by <a href="https://minna-calc.com/" target="_blank" rel="noopener" style="color:#4a90e2;text-decoration:none">みんなのシミュレーター</a>
    </div>
  </div>
</div>
<!-- MSIM:HTML-END -->

<!-- MSIM:JS-START -->
<script>
(()=>{
  "use strict";

  const fmt = new Intl.NumberFormat("ja-JP", {
    style: "currency",
    currency: "JPY",
    minimumFractionDigits: 0,
    maximumFractionDigits: 0
  });

  function calculateLoan(principal, rate, years, type, bonusRatio) {
    const monthlyRate = rate / 100 / 12;
    const months = years * 12;
    const regularPrincipal = principal * (1 - bonusRatio / 100);
    const bonusPrincipal = principal * (bonusRatio / 100);

    let monthlyPayment, totalInterest, finalPayment;

    if (type === "equal-payment") {
      const payment = regularPrincipal * monthlyRate * Math.pow(1 + monthlyRate, months) / (Math.pow(1 + monthlyRate, months) - 1);
      monthlyPayment = payment;
      finalPayment = payment;

      let balance = principal;
      totalInterest = 0;
      for (let i = 1; i <= months; i++) {
        const interest = balance * monthlyRate;
        const principalPayment = payment - interest + (i % 6 === 0 ? bonusPrincipal * monthlyRate * Math.pow(1 + monthlyRate, months) / (Math.pow(1 + monthlyRate, months) - 1) : 0);
        balance -= principalPayment;
        totalInterest += interest;
      }
    } else {
      const principalPayment = regularPrincipal / months;
      monthlyPayment = principalPayment + principal * monthlyRate;

      let balance = principal;
      totalInterest = 0;
      for (let i = 1; i <= months; i++) {
        const interest = balance * monthlyRate;
        const p = principalPayment + (i % 6 === 0 ? bonusPrincipal / months : 0);
        const payment = p + interest;
        balance -= p;
        totalInterest += interest;
        if (i === months) finalPayment = payment;
      }
    }

    return {
      monthlyPayment: Math.round(monthlyPayment),
      finalPayment: Math.round(finalPayment),
      totalPayment: Math.round(principal + totalInterest),
      totalInterest: Math.round(totalInterest)
    };
  }

  function boot(root) {
    const q = (sel) => root.querySelector(sel);
    const els = {
      loanAmount: q("[data-ms-loan-amount]"),
      interestRate: q("[data-ms-interest-rate]"),
      loanPeriod: q("[data-ms-loan-period]"),
      repaymentType: q("[data-ms-repayment-type]"),
      bonusRatio: q("[data-ms-bonus-ratio]"),
      paymentLabel: q("[data-ms-payment-label]"),
      monthlyPayment: q("[data-ms-monthly-payment]"),
      finalPaymentItem: q("[data-ms-final-payment-item]"),
      finalPayment: q("[data-ms-final-payment]"),
      totalPayment: q("[data-ms-total-payment]"),
      totalInterest: q("[data-ms-total-interest]")
    };

    function update() {
      const principal = parseFloat(els.loanAmount.value) * 10000 || 0;
      const rate = parseFloat(els.interestRate.value) || 0;
      const years = parseInt(els.loanPeriod.value) || 0;
      const type = els.repaymentType.value;
      const bonusRatio = parseFloat(els.bonusRatio.value) || 0;

      if (principal === 0 || rate === 0 || years === 0) {
        els.monthlyPayment.textContent = "\uffe50";
        els.totalPayment.textContent = "\uffe50";
        els.totalInterest.textContent = "\uffe50";
        els.finalPaymentItem.style.display = "none";
        return;
      }

      const result = calculateLoan(principal, rate, years, type, bonusRatio);

      if (type === "equal-principal") {
        els.paymentLabel.textContent = "\u521d\u56de\u8fd4\u6e08\u984d";
        els.finalPaymentItem.style.display = "flex";
        els.finalPayment.textContent = fmt.format(result.finalPayment);
      } else {
        els.paymentLabel.textContent = "\u6708\u3005\u306e\u8fd4\u6e08\u984d";
        els.finalPaymentItem.style.display = "none";
      }

      els.monthlyPayment.textContent = fmt.format(result.monthlyPayment);
      els.totalPayment.textContent = fmt.format(result.totalPayment);
      els.totalInterest.textContent = fmt.format(result.totalInterest);
    }

    els.loanAmount.addEventListener("input", update);
    els.interestRate.addEventListener("input", update);
    els.loanPeriod.addEventListener("change", update);
    els.repaymentType.addEventListener("change", update);
    els.bonusRatio.addEventListener("input", update);

    update();
  }

  window.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll('.housing-loan-simulator[data-tool="housing-loan"]').forEach(boot);
  });
})();
</script>
<!-- MSIM:JS-END -->

シミュレーターの基本機能

できること

元利均等返済と元金均等返済の2つの返済方式をシミュレーションします。月々の返済額、総返済額、利息総額を即座に計算します。

ボーナス返済割合を0〜50%の範囲で設定できます。グラフで返済状況を視覚化できます(Chart.js版のみ)。

計算方式

すべての計算がブラウザ内で完結します。サーバーとの通信はゼロです。

データベース接続やCookie使用もありません。入力した情報が外部に送信されることは一切ありません。

使い方

借入金額を入力

借入予定の住宅ローン金額を万円単位で入力します。100万円〜1億円の範囲で設定できます。

例えば3000万円の借入なら「3000」と入力してください。物件価格から頭金を差し引いた金額を入力するのが一般的です。

年利率を設定

金融機関から提示された年利率を入力します。0.1〜10%の範囲で0.1%刻みで設定できます。

参考値

ローンの種類金利目安(2025年1月時点)
変動金利0.3〜0.7%
10年固定1.0〜1.5%
全期間固定(フラット35)1.8〜2.0%

変動金利は低金利ですが将来上昇リスクがあります。固定金利は金利変動リスクを回避できます。

返済期間を選択

返済期間を10年、15年、20年、25年、30年、35年から選択します。返済期間が長いほど月々の返済額は少なくなります。

返済期間が短いほど総利息額は少なくなります。一般的には30〜35年で借りる人が多数です。

返済方式を選択

元利均等返済:毎月の返済額が一定です。返済計画が立てやすいのが特徴です。

総利息額は元金均等返済より多くなります。多くの人が選択する返済方式です。

元金均等返済:毎月返済する元金が一定です。返済額は最初が多く徐々に減少します。

総利息額は元利均等返済より少なくなります。初期の返済負担が大きいのが特徴です。

ボーナス返済割合を設定

借入金額のうちボーナス時に返済する割合を0〜50%で設定します。ボーナス返済を利用しない場合は0%と設定してください。

20%に設定すると年2回のボーナス月に通常返済に加えて返済します。ボーナスが減額された場合のリスクを考慮して設定することが重要です。

計算結果の見方

月々の返済額

毎月の通常返済額が表示されます。元利均等返済の場合はこの金額が毎月固定です。

元金均等返済の場合は初回返済額が表示されます。ボーナス返済を設定している場合は年2回これに加えてボーナス返済が発生します。

総返済額

借入期間全体で支払う金額の合計です。借入金額と利息の合計金額です。

この金額を借入金額で割ると返済倍率が計算できます。返済方式や金利の違いで大きく変わります。

利息総額

返済期間全体で支払う利息の合計です。計算式は「総返済額 – 借入金額」です。

元金均等返済の方が元利均等返済より利息総額は少なくなります。金利が高いほど、返済期間が長いほど利息総額は大きくなります。

グラフの見方(Chart.js版のみ)

積み上げ棒グラフで年ごとの返済状況が表示されます。青色部分は返済済みの元金です。

赤色部分はローン残高(残債)です。グラフにマウスを乗せると詳細な金額が表示されます。

シミュレーション例

例1:一般的な住宅ローン(元利均等返済・35年)

設定

  • 借入金額:3000万円
  • 年利率:1.5%
  • 返済期間:35年
  • 返済方式:元利均等返済
  • ボーナス返済:0%

結果

  • 月々の返済額:約91,855円
  • 総返済額:約38,579,000円
  • 利息総額:約8,579,000円

例2:元金均等返済の場合(同条件)

設定

  • 借入金額:3000万円
  • 年利率:1.5%
  • 返済期間:35年
  • 返済方式:元金均等返済
  • ボーナス返済:0%

結果

  • 月々の返済額:約108,929円(初回)
  • 総返済額:約37,896,875円
  • 利息総額:約7,896,875円

元金均等返済の方が約68万円利息を節約できます。初回の月々返済額は約17,000円高くなります。

例3:ボーナス返済併用の場合

設定

  • 借入金額:3000万円
  • 年利率:1.5%
  • 返済期間:35年
  • 返済方式:元利均等返済
  • ボーナス返済:20%

結果

  • 月々の返済額:約73,484円
  • 総返済額:約38,579,000円
  • 利息総額:約8,579,000円

月々の返済額は約18,000円減少します。ボーナス月は別途約18万円の返済が年2回発生します。

プライバシーとセキュリティ

ブラウザ内完結の設計

すべての計算がブラウザ内で完結します。サーバーとの通信はゼロです。

データベース接続なし、Cookie/LocalStorage不使用、個人情報の取得・送信なしです。入力した金額や設定内容が外部に送信されることは一切ありません。

Chart.js(グラフ描画ライブラリ)について

グラフ表示機能を提供するため、オープンソースライブラリ「Chart.js」を使用しています(Chart.js版のみ)。

提供元: jsDelivr CDN(コンテンツ配信ネットワーク)

用途: 計算結果のグラフ表示

送信される可能性のある情報:

  • IPアドレス
  • ブラウザの種類とバージョン
  • アクセス日時

これらの情報は、JavaScriptライブラリファイルを取得する際に、通常のWebサイト閲覧と同様に自動的に送信されるものです。

利用者が計算ツールに入力した数値(借入金額、金利、期間等)が外部に送信されることは一切ありません。すべての計算処理は利用者のブラウザ内で完結します。

Chart.jsライセンス: MIT License(オープンソース)

jsDelivrのプライバシーポリシー: https://www.jsdelivr.com/privacy-policy-jsdelivr-net

Chart.jsなし簡易版について: 外部ライブラリを一切使用したくない場合は、Chart.jsなし簡易版をご利用ください。こちらは完全にスタンドアロンで動作します。

注意事項

免責事項

計算結果は参考値であり、実際のローン条件を保証するものではありません。借入の判断は自己責任でお願いします。

実際の住宅ローンでは保証料、手数料、団信保険料などが別途発生します。住宅ローンを検討する際は、金融機関の公式情報を必ずご確認ください。

まとめ

住宅ローンシミュレーターは、月々の返済額と総支払額を簡単に試算できる無料ツールです。借入金額、金利、返済期間、返済方式を入力するだけで即座に計算できます。

元利均等返済と元金均等返済の比較も簡単にできます。プライバシー完全保護で安心してご利用いただけます。

住宅購入の計画を立てる際に、ぜひご活用ください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする


reCaptcha の認証期間が終了しました。ページを再読み込みしてください。

目次