<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="titleUnderlineMethods" 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">ホームページの作り方 3つの選択肢</text>
  <rect x="480" y="62" width="240" height="4" rx="2" fill="url(#titleUnderlineMethods)"/>

  <!-- 3つのカード -->
  <rect x="60" y="95" width="340" height="330" rx="14" fill="#f4f9f3" stroke="#79bb74" stroke-width="2"/>
  <text x="230" y="130" text-anchor="middle" font-size="19" font-weight="700" fill="#3f6b3c">自分で作る</text>
  <text x="230" y="160" text-anchor="middle" font-size="14" fill="#4a4a4a">初期費用 0〜10万円</text>
  <text x="230" y="182" text-anchor="middle" font-size="14" fill="#4a4a4a">作業時間 20〜40時間</text>
  <rect x="85" y="200" width="290" height="1" fill="#c9ddc7"/>
  <text x="105" y="228" font-size="13" font-weight="700" fill="#3f6b3c">向いているケース</text>
  <text x="105" y="250" font-size="12.5" fill="#4a4a4a">・とにかく初期費用を抑えたい</text>
  <text x="105" y="270" font-size="12.5" fill="#4a4a4a">・完成までの期間に余裕がある</text>
  <text x="105" y="300" font-size="13" font-weight="700" fill="#a85a1e">限界</text>
  <text x="105" y="322" font-size="12.5" fill="#4a4a4a">・デザインの作り込みに限界</text>
  <text x="105" y="342" font-size="12.5" fill="#4a4a4a">・AIO対応に専門知識が必要</text>
  <text x="105" y="395" font-size="12.5" fill="#4a4a4a">時間はあるが予算は</text>
  <text x="105" y="413" font-size="12.5" fill="#4a4a4a">かけられない事業者向け</text>

  <rect x="430" y="95" width="340" height="330" rx="14" fill="#f2f8fc" stroke="#55aae2" stroke-width="2"/>
  <text x="600" y="130" text-anchor="middle" font-size="19" font-weight="700" fill="#2f6a91">制作会社に頼む</text>
  <text x="600" y="160" text-anchor="middle" font-size="14" fill="#4a4a4a">初期費用 30万〜150万円</text>
  <text x="600" y="182" text-anchor="middle" font-size="14" fill="#4a4a4a">月々の保守費が別途発生も</text>
  <rect x="455" y="200" width="290" height="1" fill="#bcdcea"/>
  <text x="475" y="228" font-size="13" font-weight="700" fill="#2f6a91">向いているケース</text>
  <text x="475" y="250" font-size="12.5" fill="#4a4a4a">・デザインに強いこだわりがある</text>
  <text x="475" y="270" font-size="12.5" fill="#4a4a4a">・サイト構成が複雑・独自機能が必要</text>
  <text x="475" y="300" font-size="13" font-weight="700" fill="#a85a1e">限界</text>
  <text x="475" y="322" font-size="12.5" fill="#4a4a4a">・更新のたびに数日〜数週間</text>
  <text x="475" y="342" font-size="12.5" fill="#4a4a4a">・追加費用が発生しやすい</text>
  <text x="475" y="395" font-size="12.5" fill="#4a4a4a">品質と時間を買えるが</text>
  <text x="475" y="413" font-size="12.5" fill="#4a4a4a">更新の柔軟性は下がる</text>

  <rect x="800" y="95" width="340" height="330" rx="14" fill="#fdf1e7" stroke="#e0894a" stroke-width="2"/>
  <text x="970" y="130" text-anchor="middle" font-size="19" font-weight="700" fill="#a85a1e">ホームページ作成SaaS</text>
  <text x="970" y="160" text-anchor="middle" font-size="14" fill="#4a4a4a">初期費用 ほぼ0円</text>
  <text x="970" y="182" text-anchor="middle" font-size="14" fill="#4a4a4a">月額数千円台〜（更新費込み）</text>
  <rect x="825" y="200" width="290" height="1" fill="#f0d5b8"/>
  <text x="845" y="228" font-size="13" font-weight="700" fill="#a85a1e">向いているケース</text>
  <text x="845" y="250" font-size="12.5" fill="#4a4a4a">・早く公開して費用の見通しも欲しい</text>
  <text x="845" y="270" font-size="12.5" fill="#4a4a4a">・自分たちでこまめに更新したい</text>
  <text x="845" y="300" font-size="13" font-weight="700" fill="#a85a1e">限界</text>
  <text x="845" y="322" font-size="12.5" fill="#4a4a4a">・テンプレート範囲内のデザイン</text>
  <text x="845" y="342" font-size="12.5" fill="#4a4a4a">・完全オリジナルには不向き</text>
  <text x="845" y="395" font-size="12.5" fill="#4a4a4a">自作の手軽さと外注の</text>
  <text x="845" y="413" font-size="12.5" fill="#4a4a4a">仕上がりの中間</text>

  <!-- 結論バー -->
  <rect x="60" y="450" width="1080" height="150" rx="14" fill="#2f6a91"/>
  <text x="600" y="485" text-anchor="middle" font-size="17" font-weight="700" fill="#ffffff">選び方は「予算」と「更新を誰がするか」で決まる</text>
  <text x="600" y="518" text-anchor="middle" font-size="13.5" fill="#e8f2fa">デザインへの強いこだわり・複雑な機能 → 制作会社</text>
  <text x="600" y="544" text-anchor="middle" font-size="13.5" fill="#e8f2fa">早く公開して自分たちで更新も続けたい → SaaS</text>
  <text x="600" y="570" text-anchor="middle" font-size="13.5" fill="#e8f2fa">費用をかけずまとまった時間を確保できる → 自作</text>
</svg>
