<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="titleUnderlineServerFlow" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#79bb74"/>
      <stop offset="1" stop-color="#55aae2"/>
    </linearGradient>
    <marker id="arrowHeadServerFlow" 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">ページが表示されるまでの3ステップ</text>
  <rect x="410" y="62" width="380" height="4" rx="2" fill="url(#titleUnderlineServerFlow)"/>

  <!-- スタート: お客さま -->
  <circle cx="150" cy="230" r="40" fill="#ffffff" stroke="#a9a9a9" stroke-width="2.5"/>
  <circle cx="150" cy="216" r="12" fill="none" stroke="#a9a9a9" stroke-width="2.5"/>
  <path d="M 126 250 A 24 24 0 0 1 174 250" fill="none" stroke="#a9a9a9" stroke-width="2.5"/>
  <text x="150" y="292" text-anchor="middle" font-size="14" font-weight="700" fill="#2d2d2d">お客さま</text>
  <text x="150" y="312" text-anchor="middle" font-size="12" fill="#4a4a4a">URLを開く</text>

  <path d="M 195 230 L 260 230" stroke="#a9a9a9" stroke-width="2" fill="none" marker-end="url(#arrowHeadServerFlow)"/>

  <!-- ステップ1: ブラウザ -->
  <rect x="270" y="150" width="210" height="160" rx="14" fill="#f4f9f3" stroke="#79bb74" stroke-width="2"/>
  <circle cx="315" cy="185" r="15" fill="#79bb74"/>
  <text x="315" y="190" text-anchor="middle" font-size="14" font-weight="700" fill="#ffffff">1</text>
  <text x="375" y="190" text-anchor="middle" font-size="15" font-weight="700" fill="#3f6b3c">ブラウザ</text>
  <text x="375" y="220" text-anchor="middle" font-size="12.5" fill="#4a4a4a">入力されたドメインの</text>
  <text x="375" y="240" text-anchor="middle" font-size="12.5" fill="#4a4a4a">サーバーがどこにあるか</text>
  <text x="375" y="260" text-anchor="middle" font-size="12.5" fill="#4a4a4a">を確認しにいく</text>
  <text x="375" y="288" text-anchor="middle" font-size="11.5" fill="#6b8f68">Safari / Chrome など</text>

  <path d="M 480 230 L 545 230" stroke="#a9a9a9" stroke-width="2" fill="none" marker-end="url(#arrowHeadServerFlow)"/>

  <!-- ステップ2: DNS -->
  <rect x="555" y="150" width="210" height="160" rx="14" fill="#f2f8fc" stroke="#55aae2" stroke-width="2"/>
  <circle cx="600" cy="185" r="15" fill="#55aae2"/>
  <text x="600" y="190" text-anchor="middle" font-size="14" font-weight="700" fill="#ffffff">2</text>
  <text x="660" y="190" text-anchor="middle" font-size="15" font-weight="700" fill="#2f6a91">DNS</text>
  <text x="660" y="220" text-anchor="middle" font-size="12.5" fill="#4a4a4a">ドメイン名を</text>
  <text x="660" y="240" text-anchor="middle" font-size="12.5" fill="#4a4a4a">サーバーの実際の場所</text>
  <text x="660" y="260" text-anchor="middle" font-size="12.5" fill="#4a4a4a">（IPアドレス）に変換</text>
  <text x="660" y="288" text-anchor="middle" font-size="11.5" fill="#4c7f9e">インターネットの住所録</text>

  <path d="M 765 230 L 830 230" stroke="#a9a9a9" stroke-width="2" fill="none" marker-end="url(#arrowHeadServerFlow)"/>

  <!-- ステップ3: サーバー -->
  <rect x="840" y="150" width="210" height="160" rx="14" fill="#fdf1e7" stroke="#e0894a" stroke-width="2"/>
  <circle cx="885" cy="185" r="15" fill="#e0894a"/>
  <text x="885" y="190" text-anchor="middle" font-size="14" font-weight="700" fill="#ffffff">3</text>
  <text x="945" y="190" text-anchor="middle" font-size="15" font-weight="700" fill="#a85a1e">サーバー</text>
  <text x="945" y="220" text-anchor="middle" font-size="12.5" fill="#4a4a4a">保管しているページの</text>
  <text x="945" y="240" text-anchor="middle" font-size="12.5" fill="#4a4a4a">データをブラウザへ</text>
  <text x="945" y="260" text-anchor="middle" font-size="12.5" fill="#4a4a4a">配達する</text>
  <text x="945" y="288" text-anchor="middle" font-size="11.5" fill="#b97b46">24時間稼働の配達センター</text>

  <!-- 表示される先 -->
  <path d="M 945 310 L 945 360" stroke="#a9a9a9" stroke-width="2" fill="none" marker-end="url(#arrowHeadServerFlow)"/>
  <rect x="770" y="368" width="350" height="70" rx="12" fill="#f5f5f3" stroke="#a9a9a9" stroke-width="1.5"/>
  <text x="945" y="398" text-anchor="middle" font-size="14.5" font-weight="700" fill="#2d2d2d">画面にページが表示される</text>
  <text x="945" y="420" text-anchor="middle" font-size="12.5" fill="#4a4a4a">体感では1秒足らずの出来事</text>

  <!-- フッター -->
  <rect x="90" y="480" width="1020" height="150" rx="14" fill="#f5f5f3"/>
  <text x="600" y="516" text-anchor="middle" font-size="16.5" font-weight="700" fill="#2d2d2d">この3ステップはURLを開くたびに毎回自動で行われている</text>
  <text x="600" y="546" text-anchor="middle" font-size="14" fill="#4a4a4a">サービス利用型のホームページなら、サーバーの用意・管理は運営側が担当</text>
  <text x="600" y="572" text-anchor="middle" font-size="14" fill="#4a4a4a">お店側はサーバーを意識せず、お客さまに伝えたい情報づくりに集中できる</text>
  <text x="600" y="600" text-anchor="middle" font-size="13" fill="#6b6b6b">仕組みを「知っておく」ことと「自分で管理する」ことは別</text>
</svg>
