<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="titleUnderlinePet" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#79bb74"/>
      <stop offset="1" stop-color="#55aae2"/>
    </linearGradient>
    <linearGradient id="cardGradLeftPet" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#f4f9f3"/>
      <stop offset="1" stop-color="#e5f2e3"/>
    </linearGradient>
    <linearGradient id="cardGradRightPet" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#f2f8fc"/>
      <stop offset="1" stop-color="#e3f0f9"/>
    </linearGradient>
  </defs>

  <rect x="0" y="0" width="1200" height="675" fill="#ffffff"/>

  <!-- タイトル -->
  <text x="600" y="46" text-anchor="middle" font-size="23" font-weight="700" fill="#2d2d2d">Instagramと自社ホームページ、それぞれの役割</text>
  <rect x="360" y="60" width="480" height="4" rx="2" fill="url(#titleUnderlinePet)"/>

  <!-- 左カード: Instagram -->
  <rect x="70" y="100" width="480" height="500" rx="16" fill="url(#cardGradLeftPet)" stroke="#79bb74" stroke-width="1.5"/>
  <circle cx="310" cy="145" r="22" fill="#79bb74"/>
  <text x="310" y="152" text-anchor="middle" font-size="18" font-weight="700" fill="#ffffff">I</text>
  <text x="310" y="188" text-anchor="middle" font-size="19" font-weight="700" fill="#3f6b3c">Instagram</text>

  <text x="100" y="230" font-size="14.5" font-weight="700" fill="#3f6b3c">得意なこと</text>
  <text x="100" y="256" font-size="13.5" fill="#4a4a4a">・トリミング前後の写真や動画を</text>
  <text x="118" y="276" font-size="13.5" fill="#4a4a4a">日常的に届けられる</text>
  <text x="100" y="300" font-size="13.5" fill="#4a4a4a">・フォロワーとの距離が近く</text>
  <text x="118" y="320" font-size="13.5" fill="#4a4a4a">DMで気軽にやり取りできる</text>
  <text x="100" y="344" font-size="13.5" fill="#4a4a4a">・見た瞬間の興味づけに強い</text>

  <line x1="100" y1="370" x2="520" y2="370" stroke="#c8dfc6" stroke-width="1"/>

  <text x="100" y="400" font-size="14.5" font-weight="700" fill="#3f6b3c">苦手なこと</text>
  <text x="100" y="426" font-size="13.5" fill="#4a4a4a">・投稿は時系列で流れていく</text>
  <text x="100" y="448" font-size="13.5" fill="#4a4a4a">・料金や対応犬種の詳細までは</text>
  <text x="118" y="468" font-size="13.5" fill="#4a4a4a">まとめて確認できない</text>
  <text x="100" y="492" font-size="13.5" fill="#4a4a4a">・登録番号等を毎回書き込むのは</text>
  <text x="118" y="512" font-size="13.5" fill="#4a4a4a">現実的でない</text>

  <rect x="100" y="530" width="420" height="55" rx="10" fill="#ffffff" stroke="#a8cca5" stroke-width="1"/>
  <text x="310" y="554" text-anchor="middle" font-size="13" font-weight="700" fill="#3f6b3c">向いている役割</text>
  <text x="310" y="573" text-anchor="middle" font-size="12.5" fill="#4a4a4a">「日々の施術を見せて興味を引く」入口</text>

  <!-- 右カード: 自社ホームページ -->
  <rect x="650" y="100" width="480" height="500" rx="16" fill="url(#cardGradRightPet)" stroke="#55aae2" stroke-width="1.5"/>
  <circle cx="890" cy="145" r="22" fill="#55aae2"/>
  <text x="890" y="152" text-anchor="middle" font-size="18" font-weight="700" fill="#ffffff">H</text>
  <text x="890" y="188" text-anchor="middle" font-size="19" font-weight="700" fill="#2f6a91">自社ホームページ</text>

  <text x="680" y="230" font-size="14.5" font-weight="700" fill="#2f6a91">得意なこと</text>
  <text x="680" y="256" font-size="13.5" fill="#4a4a4a">・料金や対応犬種・サイズを</text>
  <text x="698" y="276" font-size="13.5" fill="#4a4a4a">一覧化して蓄積できる</text>
  <text x="680" y="300" font-size="13.5" fill="#4a4a4a">・動物取扱業の登録情報を</text>
  <text x="698" y="320" font-size="13.5" fill="#4a4a4a">常時掲載できる</text>
  <text x="680" y="344" font-size="13.5" fill="#4a4a4a">・独自ドメインなら自社の資産になる</text>

  <line x1="680" y1="370" x2="1100" y2="370" stroke="#a8cfe8" stroke-width="1"/>

  <text x="680" y="400" font-size="14.5" font-weight="700" fill="#2f6a91">苦手なこと</text>
  <text x="680" y="426" font-size="13.5" fill="#4a4a4a">・単体では新規の出会いを</text>
  <text x="698" y="446" font-size="13.5" fill="#4a4a4a">生み出す力が弱い</text>
  <text x="680" y="470" font-size="13.5" fill="#4a4a4a">・サロン名や地域名を知ってもらった</text>
  <text x="698" y="490" font-size="13.5" fill="#4a4a4a">後で初めて検索される場合が多い</text>

  <rect x="680" y="530" width="420" height="55" rx="10" fill="#ffffff" stroke="#a8cfe8" stroke-width="1"/>
  <text x="890" y="554" text-anchor="middle" font-size="13" font-weight="700" fill="#2f6a91">向いている役割</text>
  <text x="890" y="573" text-anchor="middle" font-size="12.5" fill="#4a4a4a">「登録情報・料金を確認する」場所</text>

  <!-- 中央の連携矢印 -->
  <path d="M 555 360 L 640 360" stroke="#8a8a8a" stroke-width="2.5" fill="none" marker-end="url(#arrowPet1)"/>
  <path d="M 640 390 L 555 390" stroke="#8a8a8a" stroke-width="2.5" fill="none" marker-end="url(#arrowPet2)"/>
  <defs>
    <marker id="arrowPet1" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L0,6 L9,3 z" fill="#8a8a8a"/>
    </marker>
    <marker id="arrowPet2" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L0,6 L9,3 z" fill="#8a8a8a"/>
    </marker>
  </defs>
  <text x="600" y="625" text-anchor="middle" font-size="13" fill="#666666">両方を役割分担させ、興味づけから登録情報・料金の確認へ橋渡しするのが基本形</text>
</svg>
