<svg viewBox="0 0 1200 675" xmlns="http://www.w3.org/2000/svg" font-family="'Hiragino Kaku Gothic ProN','Hiragino Sans','Noto Sans JP',sans-serif">
  <defs>
    <linearGradient id="titleUnderlineCost" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#79bb74"/>
      <stop offset="1" stop-color="#55aae2"/>
    </linearGradient>
  </defs>

  <rect x="0" y="0" width="1200" height="675" fill="#ffffff"/>

  <!-- タイトル -->
  <text x="600" y="46" text-anchor="middle" font-size="26" font-weight="700" fill="#2d2d2d">費用は「初期費用」と「月々の費用」の合計で比較する</text>
  <rect x="390" y="62" width="420" height="4" rx="2" fill="url(#titleUnderlineCost)"/>

  <!-- 4つの内訳 -->
  <text x="150" y="100" text-anchor="middle" font-size="14" font-weight="700" fill="#4a4a4a">費用の4つの内訳</text>
  <rect x="60" y="115" width="180" height="56" rx="10" fill="#f2f8fc" stroke="#55aae2" stroke-width="1.5"/>
  <text x="150" y="148" text-anchor="middle" font-size="13" font-weight="700" fill="#2f6a91">①ドメイン取得費</text>

  <rect x="250" y="115" width="180" height="56" rx="10" fill="#f4f9f3" stroke="#79bb74" stroke-width="1.5"/>
  <text x="340" y="148" text-anchor="middle" font-size="13" font-weight="700" fill="#3f6b3c">②サーバー契約費</text>

  <rect x="440" y="115" width="180" height="56" rx="10" fill="#f2f8fc" stroke="#55aae2" stroke-width="1.5"/>
  <text x="530" y="148" text-anchor="middle" font-size="13" font-weight="700" fill="#2f6a91">③制作費</text>

  <rect x="630" y="115" width="180" height="56" rx="10" fill="#f4f9f3" stroke="#79bb74" stroke-width="1.5"/>
  <text x="720" y="140" text-anchor="middle" font-size="13" font-weight="700" fill="#3f6b3c">④更新・保守費</text>
  <text x="720" y="158" text-anchor="middle" font-size="11.5" fill="#4a4a4a">(公開後に発生)</text>

  <!-- 3手段の内訳比較 (横棒風カード) -->
  <rect x="60" y="200" width="1080" height="140" rx="14" fill="#fafafa" stroke="#dddddd" stroke-width="1.5"/>
  <text x="90" y="230" font-size="15" font-weight="700" fill="#2d2d2d">制作会社</text>
  <rect x="200" y="212" width="560" height="26" rx="6" fill="#55aae2"/>
  <text x="480" y="230" text-anchor="middle" font-size="12.5" fill="#ffffff" font-weight="700">初期費用が重い（30万〜150万円）</text>
  <rect x="770" y="212" width="120" height="26" rx="6" fill="#c9dde7"/>
  <text x="830" y="230" text-anchor="middle" font-size="11.5" fill="#2f6a91" font-weight="700">月額は軽め</text>
  <text x="90" y="255" font-size="12.5" fill="#4a4a4a">更新のたびに追加費用が発生しやすい</text>

  <text x="90" y="285" font-size="15" font-weight="700" fill="#2d2d2d">自作</text>
  <rect x="200" y="267" width="90" height="26" rx="6" fill="#79bb74"/>
  <text x="245" y="285" text-anchor="middle" font-size="11.5" fill="#ffffff" font-weight="700">0〜10万円</text>
  <rect x="300" y="267" width="180" height="26" rx="6" fill="#e8ded0"/>
  <text x="390" y="285" text-anchor="middle" font-size="11.5" fill="#7a5c2e" font-weight="700">作業時間20〜40h</text>
  <text x="90" y="315" font-size="12.5" fill="#4a4a4a">初期費用は抑えられるが、自分の作業時間というコストがかかる</text>

  <!-- SaaS行 -->
  <rect x="60" y="360" width="1080" height="90" rx="14" fill="#f4f9f3" stroke="#79bb74" stroke-width="2"/>
  <text x="90" y="392" font-size="15" font-weight="700" fill="#2d2d2d">ホームページ作成SaaS</text>
  <rect x="260" y="374" width="140" height="26" rx="6" fill="#79bb74"/>
  <text x="330" y="392" text-anchor="middle" font-size="11.5" fill="#ffffff" font-weight="700">初期費用ほぼ0円</text>
  <rect x="410" y="374" width="220" height="26" rx="6" fill="#79bb74"/>
  <text x="520" y="392" text-anchor="middle" font-size="11.5" fill="#ffffff" font-weight="700">月額に更新費まで込み</text>
  <text x="90" y="428" font-size="12.5" fill="#3f6b3c" font-weight="700">ドメイン・サーバー・更新のしやすさが月額料金にまとめて含まれる</text>

  <!-- 3年間総額で比較する結論 -->
  <rect x="60" y="475" width="1080" height="150" rx="14" fill="#2f6a91"/>
  <text x="600" y="510" text-anchor="middle" font-size="17" font-weight="700" fill="#ffffff">結論：初期費用だけでなく「3年間の総額」で比較する</text>
  <text x="600" y="540" text-anchor="middle" font-size="14" fill="#e8f2fa">初期費用 ＋ 月額費用 × 36ヶ月 ＋ 更新1回あたりの費用 × 想定回数</text>
  <text x="600" y="570" text-anchor="middle" font-size="13.5" fill="#e8f2fa">初期費用が高く見えた選択肢の方が、3年間の総額では安いこともある</text>
  <text x="600" y="600" text-anchor="middle" font-size="13.5" fill="#e8f2fa">補助金は制度・年度で対象範囲が変わるため、必ず最新の公募要領を確認する</text>
</svg>
