<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="titleUnderlineAioLlmoVsSeo" 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">SEOとAIO・LLMOの関係</text>
  <rect x="470" y="62" width="260" height="4" rx="2" fill="url(#titleUnderlineAioLlmoVsSeo)"/>

  <!-- 左カラム: SEO（青） -->
  <rect x="90" y="100" width="480" height="330" rx="14" fill="#f2f8fc" stroke="#55aae2" stroke-width="2"/>
  <text x="330" y="140" text-anchor="middle" font-size="19" font-weight="700" fill="#2f6a91">SEO</text>
  <text x="330" y="165" text-anchor="middle" font-size="13.5" fill="#4a4a4a">検索エンジンへの最適化</text>

  <rect x="130" y="185" width="400" height="56" rx="10" fill="#ffffff" stroke="#55aae2" stroke-width="1.5"/>
  <text x="150" y="208" font-size="13" font-weight="700" fill="#2f6a91">対象：Google などの検索エンジン</text>
  <text x="150" y="228" font-size="12.5" fill="#4a4a4a">クローラーが順位付けのために読む</text>

  <rect x="130" y="251" width="400" height="56" rx="10" fill="#ffffff" stroke="#55aae2" stroke-width="1.5"/>
  <text x="150" y="274" font-size="13" font-weight="700" fill="#2f6a91">目的：検索結果で上位に表示される</text>
  <text x="150" y="294" font-size="12.5" fill="#4a4a4a">一覧の中から選んでクリックしてもらう</text>

  <rect x="130" y="317" width="400" height="93" rx="10" fill="#ffffff" stroke="#55aae2" stroke-width="1.5"/>
  <text x="150" y="341" font-size="13" font-weight="700" fill="#2f6a91">土台：正確な内容・信頼性・</text>
  <text x="150" y="360" font-size="13" font-weight="700" fill="#2f6a91">　　　機械がアクセスできること</text>
  <text x="150" y="385" font-size="12.5" fill="#4a4a4a">この土台はAIOと共通する</text>

  <!-- 右カラム: AIO・LLMO（緑） -->
  <rect x="630" y="100" width="480" height="330" 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">AIO・LLMO</text>
  <text x="870" y="165" text-anchor="middle" font-size="13.5" fill="#4a4a4a">AIへの最適化</text>

  <rect x="670" y="185" width="400" height="56" rx="10" fill="#ffffff" stroke="#79bb74" stroke-width="1.5"/>
  <text x="690" y="208" font-size="13" font-weight="700" fill="#3f6b3c">対象：ChatGPTなどの生成AI</text>
  <text x="690" y="228" font-size="12.5" fill="#4a4a4a">回答を作るために内容を読み取る</text>

  <rect x="670" y="251" width="400" height="56" rx="10" fill="#ffffff" stroke="#79bb74" stroke-width="1.5"/>
  <text x="690" y="274" font-size="13" font-weight="700" fill="#3f6b3c">目的：AIの回答の中で紹介・引用される</text>
  <text x="690" y="294" font-size="12.5" fill="#4a4a4a">一覧に並ばず、答えの一部として選ばれる</text>

  <rect x="670" y="317" width="400" height="93" rx="10" fill="#ffffff" stroke="#79bb74" stroke-width="1.5"/>
  <text x="690" y="341" font-size="13" font-weight="700" fill="#3f6b3c">追加の観点：結論を先に書く構成・</text>
  <text x="690" y="360" font-size="13" font-weight="700" fill="#3f6b3c">　　　　　　構造化データ・llms.txt</text>
  <text x="690" y="385" font-size="12.5" fill="#4a4a4a">SEOの土台の上に積み上げる工夫</text>

  <!-- 中央の関係性ラベル -->
  <circle cx="600" cy="265" r="34" fill="url(#titleUnderlineAioLlmoVsSeo)"/>
  <text x="600" y="260" text-anchor="middle" font-size="13" font-weight="700" fill="#ffffff">共通の</text>
  <text x="600" y="277" text-anchor="middle" font-size="13" font-weight="700" fill="#ffffff">土台</text>

  <!-- フッター -->
  <rect x="90" y="450" width="1020" height="160" rx="12" fill="#f5f5f3"/>
  <text x="600" y="484" text-anchor="middle" font-size="16.5" font-weight="700" fill="#2d2d2d">SEOとAIOは対立でなく「土台＋積み上げ」の関係</text>
  <text x="600" y="512" text-anchor="middle" font-size="14" fill="#4a4a4a">正確さ・信頼性・機械アクセス可能性という土台はどちらも同じ</text>
  <text x="600" y="536" text-anchor="middle" font-size="14" fill="#4a4a4a">その上にAIOでは「結論先出し」「構造化データ」「llms.txt」を積み上げる</text>
</svg>
