<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="snsRolesTitleBar" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#79bb74"/>
      <stop offset="1" stop-color="#55aae2"/>
    </linearGradient>
    <linearGradient id="snsRolesCardA" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#79bb74"/>
      <stop offset="1" stop-color="#55aae2"/>
    </linearGradient>
    <linearGradient id="snsRolesCardB" 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="48" text-anchor="middle" font-size="26" font-weight="700" fill="#2d2d2d">SNSとホームページは「役割」が違う</text>
  <rect x="490" y="64" width="220" height="4" rx="2" fill="url(#snsRolesTitleBar)"/>

  <!-- 左カード: SNS -->
  <rect x="70" y="100" width="480" height="400" rx="16" fill="#f4f9f3" stroke="#79bb74" stroke-width="2"/>
  <rect x="70" y="100" width="480" height="52" rx="16" fill="url(#snsRolesCardA)"/>
  <rect x="70" y="136" width="480" height="16" fill="#f4f9f3"/>
  <text x="310" y="125.3" text-anchor="middle" font-size="21" font-weight="700" fill="#ffffff">SNS ＝ 流れる入口</text>

  <text x="105" y="196" font-size="15" font-weight="700" fill="#3f6b3c">情報の性質</text>
  <text x="105" y="222" font-size="14" fill="#4a4a4a">今日のおすすめ・新メニュー・日常の風景</text>
  <text x="105" y="244" font-size="14" fill="#4a4a4a">＝ 日付に紐づく「新しい話題」</text>

  <text x="105" y="288" font-size="15" font-weight="700" fill="#3f6b3c">情報の寿命</text>
  <text x="105" y="314" font-size="14" fill="#4a4a4a">タイムラインを流れて下に埋もれる</text>
  <text x="105" y="336" font-size="14" fill="#4a4a4a">過去投稿をさかのぼるのは大変</text>

  <text x="105" y="380" font-size="15" font-weight="700" fill="#3f6b3c">所有</text>
  <text x="105" y="406" font-size="14" fill="#4a4a4a">プラットフォームの規約に従って利用</text>

  <rect x="105" y="428" width="410" height="1" fill="#c9ddc7"/>
  <text x="105" y="458" font-size="14.5" font-weight="700" fill="#3f6b3c">得意なこと</text>
  <text x="105" y="482" font-size="14" fill="#4a4a4a">知らない人に見つけてもらう</text>

  <!-- 右カード: ホームページ -->
  <rect x="650" y="100" width="480" height="400" rx="16" fill="#f2f8fc" stroke="#55aae2" stroke-width="2"/>
  <rect x="650" y="100" width="480" height="52" rx="16" fill="url(#snsRolesCardB)"/>
  <rect x="650" y="136" width="480" height="16" fill="#f2f8fc"/>
  <text x="890" y="125.3" text-anchor="middle" font-size="21" font-weight="700" fill="#ffffff">ホームページ ＝ 留まる着地点</text>

  <text x="685" y="196" font-size="15" font-weight="700" fill="#2f6a91">情報の性質</text>
  <text x="685" y="222" font-size="14" fill="#4a4a4a">料金・アクセス・営業時間・よくある質問</text>
  <text x="685" y="244" font-size="14" fill="#4a4a4a">＝ いつ見ても同じであってほしい情報</text>

  <text x="685" y="288" font-size="15" font-weight="700" fill="#2f6a91">情報の寿命</text>
  <text x="685" y="314" font-size="14" fill="#4a4a4a">同じ場所に留まり、数秒で確認できる</text>
  <text x="685" y="336" font-size="14" fill="#4a4a4a">検索・生成AIからも参照されやすい</text>

  <text x="685" y="380" font-size="15" font-weight="700" fill="#2f6a91">所有</text>
  <text x="685" y="406" font-size="14" fill="#4a4a4a">独自ドメインなら自分の資産として残る</text>

  <rect x="685" y="428" width="410" height="1" fill="#bcdcea"/>
  <text x="685" y="458" font-size="14.5" font-weight="700" fill="#2f6a91">得意なこと</text>
  <text x="685" y="482" font-size="14" fill="#4a4a4a">気になった人に判断材料を渡す</text>

  <!-- 中央の矢印 -->
  <path d="M 560 300 L 636 300" stroke="#8ab8d8" stroke-width="4" fill="none"/>
  <path d="M 636 300 l -14 -9 l 0 18 z" fill="#8ab8d8"/>
  <text x="600" y="282" text-anchor="middle" font-size="13" fill="#4a4a4a">興味</text>
  <text x="600" y="330" text-anchor="middle" font-size="13" fill="#4a4a4a">確認</text>

  <!-- 結論バー -->
  <rect x="70" y="528" width="1060" height="112" rx="14" fill="#2f6a91"/>
  <text x="600" y="566" text-anchor="middle" font-size="18" font-weight="700" fill="#ffffff">置き換え合うものではなく、担当する仕事が違う</text>
  <text x="600" y="600" text-anchor="middle" font-size="14.5" fill="#e8f2fa">SNSで知ってもらい、ホームページで確かめてもらう</text>
  <text x="600" y="624" text-anchor="middle" font-size="14.5" fill="#e8f2fa">この流れが1本つながっているかが、結果の分かれ目になる</text>
</svg>
