<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="titleUnderlineAiOverviewSerp" 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="490" y="62" width="220" height="4" rx="2" fill="url(#titleUnderlineAiOverviewSerp)"/>

  <!-- 左カラム: 従来の検索結果（オレンジ） -->
  <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">従来の検索結果</text>
  <text x="330" y="165" text-anchor="middle" font-size="13.5" fill="#4a4a4a">リンクの一覧から自分で選ぶ</text>

  <rect x="130" y="185" width="400" height="46" rx="8" fill="#ffffff" stroke="#e0894a" stroke-width="1.5"/>
  <text x="150" y="205" font-size="13" font-weight="700" fill="#a85a1e">1. 〇〇市 美容室 おすすめ</text>
  <text x="150" y="222" font-size="11.5" fill="#4a4a4a">example-salon.com</text>

  <rect x="130" y="239" width="400" height="46" rx="8" fill="#ffffff" stroke="#e0894a" stroke-width="1.5"/>
  <text x="150" y="259" font-size="13" font-weight="700" fill="#a85a1e">2. 〇〇美容室 公式サイト</text>
  <text x="150" y="276" font-size="11.5" fill="#4a4a4a">example-beauty.com</text>

  <rect x="130" y="293" width="400" height="46" rx="8" fill="#ffffff" stroke="#e0894a" stroke-width="1.5"/>
  <text x="150" y="313" font-size="13" font-weight="700" fill="#a85a1e">3. 口コミまとめサイト</text>
  <text x="150" y="330" font-size="11.5" fill="#4a4a4a">example-review.com</text>

  <text x="330" y="368" text-anchor="middle" font-size="15" fill="#a85a1e">↓ 気になるページを開く</text>

  <rect x="130" y="385" width="400" height="70" rx="10" fill="#ffffff" stroke="#e0894a" stroke-width="1.5"/>
  <text x="330" y="411" text-anchor="middle" font-size="14" font-weight="700" fill="#a85a1e">流れ：検索→一覧→開く→答えを探す</text>
  <text x="330" y="435" text-anchor="middle" font-size="12.5" fill="#4a4a4a">クリックしてページの中で確認する</text>

  <!-- 右カラム: AI Overviewの検索結果（緑） -->
  <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">AI Overview（AIによる概要）</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="118" rx="10" fill="#ffffff" stroke="#79bb74" stroke-width="2"/>
  <text x="690" y="208" font-size="13" font-weight="700" fill="#3f6b3c">AIによる概要</text>
  <text x="690" y="230" font-size="12.5" fill="#4a4a4a">〇〇市でおすすめの美容室は、</text>
  <text x="690" y="250" font-size="12.5" fill="#4a4a4a">駅前の落ち着いた雰囲気の店が</text>
  <text x="690" y="270" font-size="12.5" fill="#4a4a4a">人気です。引用元：3サイト</text>
  <text x="690" y="290" font-size="11" fill="#2f6a91">［引用元リンク：公式サイトなど］</text>

  <text x="870" y="330" text-anchor="middle" font-size="15" fill="#3f6b3c">↓ その場で答えを読む</text>

  <rect x="670" y="347" width="400" height="70" rx="10" fill="#ffffff" stroke="#79bb74" stroke-width="1.5"/>
  <text x="870" y="373" text-anchor="middle" font-size="14" font-weight="700" fill="#3f6b3c">流れ：検索→その場で回答→（必要なら引用元）</text>
  <text x="870" y="397" text-anchor="middle" font-size="12.5" fill="#4a4a4a">開かなくても答えが得られる＝ゼロクリック</text>

  <rect x="670" y="427" width="400" height="46" rx="10" fill="#f2f8fc" stroke="#55aae2" stroke-width="1.5"/>
  <text x="870" y="455" text-anchor="middle" font-size="13" font-weight="700" fill="#2f6a91">狙うのは「引用元」に選ばれること</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">単純な事実はクリックされにくくなる一方、引用元という新しい入り口が生まれた</text>
</svg>
