<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="titleUnderlineSchool" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#79bb74"/>
      <stop offset="1" stop-color="#55aae2"/>
    </linearGradient>
    <linearGradient id="cardGradLeft" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#f4f9f3"/>
      <stop offset="1" stop-color="#e5f2e3"/>
    </linearGradient>
    <linearGradient id="cardGradRight" 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">習い事ポータルと自社ホームページ、それぞれの役割</text>
  <rect x="380" y="60" width="440" height="4" rx="2" fill="url(#titleUnderlineSchool)"/>

  <!-- 左カード: 習い事ポータル -->
  <rect x="70" y="100" width="480" height="500" rx="16" fill="url(#cardGradLeft)" 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">P</text>
  <text x="310" y="188" text-anchor="middle" font-size="19" font-weight="700" fill="#3f6b3c">習い事ポータルサイト</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="100" y="278" font-size="13.5" fill="#4a4a4a">・体験レッスンの空き状況を横断検索</text>
  <text x="100" y="300" font-size="13.5" fill="#4a4a4a">・口コミ・評価で信頼を補う</text>

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

  <text x="100" y="356" font-size="14.5" font-weight="700" fill="#3f6b3c">苦手なこと</text>
  <text x="100" y="382" font-size="13.5" fill="#4a4a4a">・掲載項目が定型フォーマット固定</text>
  <text x="100" y="404" font-size="13.5" fill="#4a4a4a">・講師の指導方針や教室の空気感は</text>
  <text x="118" y="424" font-size="13.5" fill="#4a4a4a">伝えきれない</text>
  <text x="100" y="450" font-size="13.5" fill="#4a4a4a">・料金プランや振替ルールなど</text>
  <text x="118" y="470" font-size="13.5" fill="#4a4a4a">詳細な条件は書ききれない</text>

  <rect x="100" y="500" width="420" height="70" rx="10" fill="#ffffff" stroke="#a8cca5" stroke-width="1"/>
  <text x="310" y="530" text-anchor="middle" font-size="13" font-weight="700" fill="#3f6b3c">向いている役割</text>
  <text x="310" y="552" text-anchor="middle" font-size="12.5" fill="#4a4a4a">「近所の教室をまず知ってもらう」入口</text>

  <!-- 右カード: 自社ホームページ -->
  <rect x="650" y="100" width="480" height="500" rx="16" fill="url(#cardGradRight)" 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="680" y="322" font-size="13.5" fill="#4a4a4a">・生徒の声を継続的に更新できる</text>

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

  <text x="680" y="378" font-size="14.5" font-weight="700" fill="#2f6a91">苦手なこと</text>
  <text x="680" y="404" font-size="13.5" fill="#4a4a4a">・単体では近隣教室との比較検討の</text>
  <text x="698" y="424" font-size="13.5" fill="#4a4a4a">場には出てきにくい</text>
  <text x="680" y="450" font-size="13.5" fill="#4a4a4a">・教室名を知ってもらった後で</text>
  <text x="698" y="470" font-size="13.5" fill="#4a4a4a">初めて検索される場合が多い</text>

  <rect x="680" y="500" width="420" height="70" rx="10" fill="#ffffff" stroke="#a8cfe8" stroke-width="1"/>
  <text x="890" y="530" text-anchor="middle" font-size="13" font-weight="700" fill="#2f6a91">向いている役割</text>
  <text x="890" y="552" text-anchor="middle" font-size="12.5" fill="#4a4a4a">「体験レッスンの申込」まで導く決め手</text>

  <!-- 中央の連携矢印 -->
  <path d="M 555 350 L 640 350" stroke="#8a8a8a" stroke-width="2.5" fill="none" marker-end="url(#arrowSchool)"/>
  <path d="M 640 380 L 555 380" stroke="#8a8a8a" stroke-width="2.5" fill="none" marker-end="url(#arrowSchool2)"/>
  <defs>
    <marker id="arrowSchool" 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="arrowSchool2" 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="610" text-anchor="middle" font-size="13" fill="#666666">両方を役割分担させ、ポータルからホームページへ橋渡しするのが基本形</text>
</svg>
