<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="titleUnderlineAiEraShift" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#79bb74"/>
      <stop offset="1" stop-color="#55aae2"/>
    </linearGradient>
    <marker id="arrowHeadAiEraShift" markerWidth="9" markerHeight="9" refX="6" refY="4.5" orient="auto">
      <path d="M0,0 L9,4.5 L0,9 Z" fill="#a9a9a9"/>
    </marker>
  </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">検索の時代とAI時代の違い</text>
  <rect x="440" y="62" width="320" height="4" rx="2" fill="url(#titleUnderlineAiEraShift)"/>

  <!-- 上段: 検索の時代（緑・フロー） -->
  <text x="150" y="108" font-size="15" font-weight="700" fill="#3f6b3c">これまで：検索する時代</text>

  <rect x="90" y="120" width="200" height="80" rx="12" fill="#f4f9f3" stroke="#79bb74" stroke-width="2"/>
  <text x="190" y="152" text-anchor="middle" font-size="13" font-weight="700" fill="#3f6b3c">お客さま</text>
  <text x="190" y="174" text-anchor="middle" font-size="11.5" fill="#4a4a4a">検索窓に言葉を入力</text>

  <path d="M 295 160 L 350 160" stroke="#a9a9a9" stroke-width="2" fill="none" marker-end="url(#arrowHeadAiEraShift)"/>

  <rect x="360" y="120" width="200" height="80" rx="12" fill="#f4f9f3" stroke="#79bb74" stroke-width="2"/>
  <text x="460" y="152" text-anchor="middle" font-size="13" font-weight="700" fill="#3f6b3c">検索結果</text>
  <text x="460" y="174" text-anchor="middle" font-size="11.5" fill="#4a4a4a">リンクの一覧が並ぶ</text>

  <path d="M 565 160 L 620 160" stroke="#a9a9a9" stroke-width="2" fill="none" marker-end="url(#arrowHeadAiEraShift)"/>

  <rect x="630" y="120" width="200" height="80" rx="12" fill="#f4f9f3" stroke="#79bb74" stroke-width="2"/>
  <text x="730" y="152" text-anchor="middle" font-size="13" font-weight="700" fill="#3f6b3c">自分で開いて読む</text>
  <text x="730" y="174" text-anchor="middle" font-size="11.5" fill="#4a4a4a">複数ページを見比べる</text>

  <path d="M 835 160 L 890 160" stroke="#a9a9a9" stroke-width="2" fill="none" marker-end="url(#arrowHeadAiEraShift)"/>

  <rect x="900" y="120" width="210" height="80" rx="12" fill="#eafaf0" stroke="#79bb74" stroke-width="2"/>
  <text x="1005" y="152" text-anchor="middle" font-size="13" font-weight="700" fill="#3f6b3c">お店を選ぶ</text>
  <text x="1005" y="174" text-anchor="middle" font-size="11.5" fill="#4a4a4a">時間をかけて比較検討</text>

  <!-- 下段: AI時代（青・フロー） -->
  <text x="150" y="268" font-size="15" font-weight="700" fill="#2f6a91">これから：AIに聞く時代</text>

  <rect x="90" y="280" width="200" height="80" rx="12" fill="#f2f8fc" stroke="#55aae2" stroke-width="2"/>
  <text x="190" y="312" text-anchor="middle" font-size="13" font-weight="700" fill="#2f6a91">お客さま</text>
  <text x="190" y="334" text-anchor="middle" font-size="11.5" fill="#4a4a4a">AIに話しかけて聞く</text>

  <path d="M 295 320 L 350 320" stroke="#a9a9a9" stroke-width="2" fill="none" marker-end="url(#arrowHeadAiEraShift)"/>

  <rect x="360" y="280" width="200" height="80" rx="12" fill="#f2f8fc" stroke="#55aae2" stroke-width="2"/>
  <text x="460" y="305" text-anchor="middle" font-size="12.5" font-weight="700" fill="#2f6a91">AIが情報を</text>
  <text x="460" y="325" text-anchor="middle" font-size="12.5" font-weight="700" fill="#2f6a91">読み取る</text>
  <text x="460" y="347" text-anchor="middle" font-size="11" fill="#4a4a4a">公式サイト等の一次情報</text>

  <path d="M 565 320 L 620 320" stroke="#a9a9a9" stroke-width="2" fill="none" marker-end="url(#arrowHeadAiEraShift)"/>

  <rect x="630" y="280" width="200" height="80" rx="12" fill="#f2f8fc" stroke="#55aae2" stroke-width="2"/>
  <text x="730" y="312" text-anchor="middle" font-size="13" font-weight="700" fill="#2f6a91">答えを作って返す</text>
  <text x="730" y="334" text-anchor="middle" font-size="11.5" fill="#4a4a4a">開く前に答えが完結</text>

  <path d="M 835 320 L 890 320" stroke="#a9a9a9" stroke-width="2" fill="none" marker-end="url(#arrowHeadAiEraShift)"/>

  <rect x="900" y="280" width="210" height="80" rx="12" fill="#e5f1fb" stroke="#55aae2" stroke-width="2"/>
  <text x="1005" y="312" text-anchor="middle" font-size="13" font-weight="700" fill="#2f6a91">お店を選ぶ</text>
  <text x="1005" y="334" text-anchor="middle" font-size="11.5" fill="#4a4a4a">AIの回答をそのまま信頼</text>

  <!-- 中央の対比矢印 -->
  <path d="M 190 210 L 190 270" stroke="#a9a9a9" stroke-width="2" stroke-dasharray="4 4" fill="none"/>
  <text x="230" y="245" font-size="12" fill="#6b6b6b">変化</text>

  <!-- フッター -->
  <rect x="90" y="400" width="1020" height="230" rx="14" fill="#f5f5f3"/>
  <text x="600" y="440" text-anchor="middle" font-size="17" font-weight="700" fill="#2d2d2d">AIの答えの元になるのは、公式サイトの「一次情報」</text>
  <text x="600" y="470" text-anchor="middle" font-size="13.5" fill="#4a4a4a">口コミと公式サイトの記述が食い違えば、信頼されるのは公式サイトの側</text>
  <text x="600" y="495" text-anchor="middle" font-size="13.5" fill="#4a4a4a">公式サイトがなかったり情報が古いと、AIは不正確な情報源から回答を作ってしまう</text>

  <rect x="150" y="520" width="290" height="90" rx="12" fill="#ffffff" stroke="#79bb74" stroke-width="1.5"/>
  <text x="295" y="552" text-anchor="middle" font-size="13" font-weight="700" fill="#3f6b3c">正確な情報を文字で書く</text>
  <text x="295" y="576" text-anchor="middle" font-size="11.5" fill="#4a4a4a">営業時間・住所・料金を明記</text>
  <text x="295" y="596" text-anchor="middle" font-size="11.5" fill="#4a4a4a">画像だけにしない</text>

  <rect x="455" y="520" width="290" height="90" rx="12" fill="#ffffff" stroke="#55aae2" stroke-width="1.5"/>
  <text x="600" y="552" text-anchor="middle" font-size="13" font-weight="700" fill="#2f6a91">AIが読める構造を整える</text>
  <text x="600" y="576" text-anchor="middle" font-size="11.5" fill="#4a4a4a">構造化データ・llms.txt</text>
  <text x="600" y="596" text-anchor="middle" font-size="11.5" fill="#4a4a4a">機械向けの下ごしらえ</text>

  <rect x="760" y="520" width="290" height="90" rx="12" fill="#ffffff" stroke="#e0894a" stroke-width="1.5"/>
  <text x="905" y="552" text-anchor="middle" font-size="13" font-weight="700" fill="#a85a1e">従来のSEOの基本も活きる</text>
  <text x="905" y="576" text-anchor="middle" font-size="11.5" fill="#4a4a4a">AIも検索の登録状況を参照</text>
  <text x="905" y="596" text-anchor="middle" font-size="11.5" fill="#4a4a4a">検索に載ることが土台になる</text>
</svg>
