<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="titleUnderlineUrlAnatomy" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#79bb74"/>
      <stop offset="1" stop-color="#55aae2"/>
    </linearGradient>
    <marker id="arrowHeadUrlAnatomy" 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">URLの構造とドメインの位置</text>
  <rect x="450" y="62" width="300" height="4" rx="2" fill="url(#titleUnderlineUrlAnatomy)"/>

  <!-- 実際のURL表示 -->
  <rect x="90" y="100" width="1020" height="70" rx="12" fill="#2d2d2d"/>
  <text x="150" y="118" font-size="12" fill="#9ca3af">https://omote-light.com/column</text>
  <text x="150" y="150" font-size="24" font-weight="700" fill="#ffffff"><tspan fill="#a9a9a9">https://</tspan><tspan fill="#79e08a">omote-light.com</tspan><tspan fill="#79c3f0">/column</tspan></text>

  <!-- 3つの分解カード -->
  <path d="M 245 170 L 245 220" stroke="#a9a9a9" stroke-width="2" fill="none" marker-end="url(#arrowHeadUrlAnatomy)"/>
  <path d="M 545 170 L 545 220" stroke="#a9a9a9" stroke-width="2" fill="none" marker-end="url(#arrowHeadUrlAnatomy)"/>
  <path d="M 890 170 L 890 220" stroke="#a9a9a9" stroke-width="2" fill="none" marker-end="url(#arrowHeadUrlAnatomy)"/>

  <!-- スキーム -->
  <rect x="90" y="228" width="310" height="150" rx="14" fill="#f5f5f3" stroke="#a9a9a9" stroke-width="2"/>
  <text x="245" y="260" text-anchor="middle" font-size="16" font-weight="700" fill="#2d2d2d">https://</text>
  <text x="245" y="283" text-anchor="middle" font-size="14" font-weight="700" fill="#4a4a4a">スキーム（通信方法）</text>
  <text x="245" y="308" text-anchor="middle" font-size="13" fill="#4a4a4a">sは暗号化されている印</text>
  <text x="245" y="330" text-anchor="middle" font-size="13" fill="#4a4a4a">建物にたとえると</text>
  <text x="245" y="352" text-anchor="middle" font-size="13" font-weight="700" fill="#4a4a4a">「訪問の仕方」</text>

  <!-- ドメイン（強調） -->
  <rect x="420" y="228" width="330" height="150" rx="14" fill="#f4f9f3" stroke="#79bb74" stroke-width="3"/>
  <text x="585" y="260" text-anchor="middle" font-size="16" font-weight="700" fill="#3f6b3c">omote-light.com</text>
  <text x="585" y="283" text-anchor="middle" font-size="14" font-weight="700" fill="#3f6b3c">ドメイン（住所）</text>
  <text x="585" y="308" text-anchor="middle" font-size="13" fill="#4a4a4a">インターネット上の住所</text>
  <text x="585" y="330" text-anchor="middle" font-size="13" fill="#4a4a4a">建物にたとえると</text>
  <text x="585" y="352" text-anchor="middle" font-size="13" font-weight="700" fill="#3f6b3c">「その住所そのもの」</text>

  <!-- パス -->
  <rect x="780" y="228" width="330" height="150" rx="14" fill="#f2f8fc" stroke="#55aae2" stroke-width="2"/>
  <text x="945" y="260" text-anchor="middle" font-size="16" font-weight="700" fill="#2f6a91">/column</text>
  <text x="945" y="283" text-anchor="middle" font-size="14" font-weight="700" fill="#2f6a91">パス（部屋）</text>
  <text x="945" y="308" text-anchor="middle" font-size="13" fill="#4a4a4a">どのページかを示す</text>
  <text x="945" y="330" text-anchor="middle" font-size="13" fill="#4a4a4a">建物にたとえると</text>
  <text x="945" y="352" text-anchor="middle" font-size="13" font-weight="700" fill="#2f6a91">「建物の中の部屋」</text>

  <!-- 独自 vs 共有ドメインの補足 -->
  <rect x="90" y="410" width="1020" height="130" rx="14" fill="#fdf1e7" stroke="#e0894a" stroke-width="2"/>
  <text x="600" y="440" text-anchor="middle" font-size="15.5" font-weight="700" fill="#a85a1e">ドメインは「住所が自分のものか、間借りか」で2種類ある</text>
  <text x="290" y="470" text-anchor="middle" font-size="13.5" fill="#4a4a4a">共有ドメイン：your-shop.omote-light.com</text>
  <text x="290" y="492" text-anchor="middle" font-size="12.5" fill="#4a4a4a">サービスの住所を間借りする（マンションの一室）</text>
  <text x="900" y="470" text-anchor="middle" font-size="13.5" fill="#4a4a4a">独自ドメイン：your-shop.com</text>
  <text x="900" y="492" text-anchor="middle" font-size="12.5" fill="#4a4a4a">自分だけの住所を持つ（一戸建てに表札）</text>
  <line x1="600" y1="455" x2="600" y2="520" stroke="#e6c3a3" stroke-width="1.5"/>
  <text x="600" y="520" text-anchor="middle" font-size="12" fill="#c99566">迷ったら「.com」がおすすめ</text>

  <!-- フッター -->
  <rect x="90" y="560" width="1020" height="60" rx="12" fill="#f5f5f3"/>
  <text x="600" y="596" text-anchor="middle" font-size="15.5" font-weight="700" fill="#2d2d2d">ドメインはURLの中心にある「インターネット上の住所」</text>
</svg>
