<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="titleUnderlineHvsSns" 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">SNSとホームページの役割の違い</text>
  <rect x="420" y="62" width="360" height="4" rx="2" fill="url(#titleUnderlineHvsSns)"/>

  <!-- 左カラム: SNS（オレンジ・フロー型） -->
  <rect x="90" y="100" width="480" height="400" rx="14" fill="#fdf1e7" stroke="#e0894a" stroke-width="2"/>
  <text x="330" y="140" text-anchor="middle" font-size="19" font-weight="700" fill="#a85a1e">SNS（フロー型）</text>
  <text x="330" y="165" text-anchor="middle" font-size="13.5" fill="#4a4a4a">投稿はタイムラインを流れていく</text>

  <!-- 流れていく投稿の帯 -->
  <rect x="130" y="185" width="400" height="34" rx="8" fill="#f7ddc4"/>
  <text x="150" y="207" font-size="13" fill="#a85a1e">投稿：本日のおすすめ</text>
  <rect x="130" y="227" width="400" height="34" rx="8" fill="#f9e6d2"/>
  <text x="150" y="249" font-size="13" fill="#b97b46">投稿：昨日の様子</text>
  <rect x="130" y="269" width="400" height="34" rx="8" fill="#fbefe0"/>
  <text x="150" y="291" font-size="13" fill="#c99566">投稿：3日前のお知らせ</text>
  <text x="330" y="325" text-anchor="middle" font-size="20" fill="#c99566">↓ 流れて見られなくなる</text>

  <rect x="130" y="345" width="400" height="70" rx="10" fill="#ffffff" stroke="#e0894a" stroke-width="1.5"/>
  <text x="330" y="370" text-anchor="middle" font-size="14" font-weight="700" fill="#a85a1e">得意なこと：知ってもらう</text>
  <text x="330" y="393" text-anchor="middle" font-size="12.5" fill="#4a4a4a">日々の発信で新規のお客さまと出会う</text>

  <rect x="130" y="425" width="400" height="60" rx="10" fill="#ffffff" stroke="#e0894a" stroke-width="1.5"/>
  <text x="330" y="450" text-anchor="middle" font-size="13.5" font-weight="700" fill="#a85a1e">管理の主体：運営会社</text>
  <text x="330" y="470" text-anchor="middle" font-size="12.5" fill="#4a4a4a">規約変更や凍結のリスクがある</text>

  <!-- 右カラム: ホームページ（緑・ストック型） -->
  <rect x="630" y="100" width="480" height="400" rx="14" fill="#f4f9f3" stroke="#79bb74" stroke-width="2"/>
  <text x="870" y="140" text-anchor="middle" font-size="19" font-weight="700" fill="#3f6b3c">ホームページ（ストック型）</text>
  <text x="870" y="165" text-anchor="middle" font-size="13.5" fill="#4a4a4a">情報がいつも同じ場所に蓄積される</text>

  <!-- 蓄積される情報カード -->
  <rect x="670" y="185" width="400" height="118" rx="10" fill="#ffffff" stroke="#79bb74" stroke-width="1.5"/>
  <text x="870" y="212" text-anchor="middle" font-size="14" font-weight="700" fill="#3f6b3c">営業時間・料金・アクセス</text>
  <text x="870" y="236" text-anchor="middle" font-size="12.5" fill="#4a4a4a">いつ訪れても同じ場所で</text>
  <text x="870" y="256" text-anchor="middle" font-size="12.5" fill="#4a4a4a">確認できる</text>
  <text x="870" y="288" text-anchor="middle" font-size="18" fill="#79bb74">↕ 積み上がって残る</text>

  <rect x="670" y="345" width="400" height="70" rx="10" fill="#ffffff" stroke="#79bb74" stroke-width="1.5"/>
  <text x="870" y="370" text-anchor="middle" font-size="14" font-weight="700" fill="#3f6b3c">得意なこと：確かめてもらう</text>
  <text x="870" y="393" text-anchor="middle" font-size="12.5" fill="#4a4a4a">検索やAIの回答の元情報にもなる</text>

  <rect x="670" y="425" width="400" height="60" rx="10" fill="#ffffff" stroke="#79bb74" stroke-width="1.5"/>
  <text x="870" y="450" text-anchor="middle" font-size="13.5" font-weight="700" fill="#3f6b3c">管理の主体：自分</text>
  <text x="870" y="470" text-anchor="middle" font-size="12.5" fill="#4a4a4a">内容も見た目も自分でコントロール</text>

  <!-- フッター -->
  <rect x="90" y="520" width="1020" height="90" rx="12" fill="#f5f5f3"/>
  <text x="600" y="553" text-anchor="middle" font-size="16.5" font-weight="700" fill="#2d2d2d">どちらが優れているかではなく、役割が違う「両輪」</text>
  <text x="600" y="582" text-anchor="middle" font-size="14" fill="#4a4a4a">SNSで知ってもらい、ホームページで確かめてもらう2段構えが取りこぼしを減らす</text>
</svg>
