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

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

  <!-- タイトル -->
  <text x="600" y="46" text-anchor="middle" font-size="24" font-weight="700" fill="#2d2d2d">ポータルサイト・SNS・ホームページは「役割」が違う</text>
  <rect x="410" y="60" width="380" height="4" rx="2" fill="url(#titleUnderlineSalon)"/>

  <!-- 3カラム -->
  <!-- ポータルサイト -->
  <rect x="55" y="95" width="340" height="330" rx="14" fill="url(#cardGradPortal)" stroke="#55aae2" stroke-width="1.5"/>
  <text x="225" y="132" text-anchor="middle" font-size="17" font-weight="700" fill="#2f6a91">ポータルサイト</text>
  <text x="225" y="155" text-anchor="middle" font-size="12.5" fill="#4a4a4a">(ホットペッパー等)</text>

  <rect x="80" y="172" width="290" height="1" fill="#c9dde7"/>

  <text x="90" y="200" font-size="13" font-weight="700" fill="#2f6a91">◎ 新規集客の入口</text>
  <text x="90" y="222" font-size="12" fill="#4a4a4a">「探している」お客様に</text>
  <text x="90" y="240" font-size="12" fill="#4a4a4a">強く見つけてもらえる</text>

  <text x="90" y="270" font-size="13" font-weight="700" fill="#2f6a91">△ 掲載順位・デザイン</text>
  <text x="90" y="292" font-size="12" fill="#4a4a4a">運営会社の仕様に従う</text>
  <text x="90" y="310" font-size="12" fill="#4a4a4a">自分で調整できない</text>

  <text x="90" y="340" font-size="13" font-weight="700" fill="#2f6a91">△ 継続コスト</text>
  <text x="90" y="362" font-size="12" fill="#4a4a4a">掲載料＋予約手数料が</text>
  <text x="90" y="380" font-size="12" fill="#4a4a4a">発生し続ける</text>

  <!-- SNS -->
  <rect x="430" y="95" width="340" height="330" rx="14" fill="url(#cardGradSns)" stroke="#55aae2" stroke-width="1.5"/>
  <text x="600" y="132" text-anchor="middle" font-size="17" font-weight="700" fill="#2f6a91">SNS</text>
  <text x="600" y="155" text-anchor="middle" font-size="12.5" fill="#4a4a4a">(Instagram等)</text>

  <rect x="455" y="172" width="290" height="1" fill="#c9dde7"/>

  <text x="465" y="200" font-size="13" font-weight="700" fill="#2f6a91">◎ 日々の発信</text>
  <text x="465" y="222" font-size="12" fill="#4a4a4a">お店の「今」を</text>
  <text x="465" y="240" font-size="12" fill="#4a4a4a">気軽に伝えられる</text>

  <text x="465" y="270" font-size="13" font-weight="700" fill="#2f6a91">△ 情報の蓄積</text>
  <text x="465" y="292" font-size="12" fill="#4a4a4a">過去の投稿は</text>
  <text x="465" y="310" font-size="12" fill="#4a4a4a">流れて埋もれていく</text>

  <text x="465" y="340" font-size="13" font-weight="700" fill="#2f6a91">△ 運用リスク</text>
  <text x="465" y="362" font-size="12" fill="#4a4a4a">仕様変更・規約変更に</text>
  <text x="465" y="380" font-size="12" fill="#4a4a4a">運用が左右される</text>

  <!-- ホームページ -->
  <rect x="805" y="95" width="340" height="330" rx="14" fill="url(#cardGradHp)" stroke="#79bb74" stroke-width="2"/>
  <text x="975" y="132" text-anchor="middle" font-size="17" font-weight="700" fill="#3f6b3c">ホームページ</text>
  <text x="975" y="155" text-anchor="middle" font-size="12.5" fill="#4a4a4a">(自社サイト)</text>

  <rect x="830" y="172" width="290" height="1" fill="#c8ddc4"/>

  <text x="840" y="200" font-size="13" font-weight="700" fill="#3f6b3c">◎ 情報の蓄積・信頼</text>
  <text x="840" y="222" font-size="12" fill="#4a4a4a">料金・スタッフ・こだわりが</text>
  <text x="840" y="240" font-size="12" fill="#4a4a4a">いつでも同じ場所にある</text>

  <text x="840" y="270" font-size="13" font-weight="700" fill="#3f6b3c">◎ 自分でコントロール</text>
  <text x="840" y="292" font-size="12" fill="#4a4a4a">見せたい情報・順番を</text>
  <text x="840" y="310" font-size="12" fill="#4a4a4a">自分の意思で決められる</text>

  <text x="840" y="340" font-size="13" font-weight="700" fill="#3f6b3c">△ 単体での集客力</text>
  <text x="840" y="362" font-size="12" fill="#4a4a4a">ポータルサイトほどの</text>
  <text x="840" y="380" font-size="12" fill="#4a4a4a">新規発見力は最初は弱い</text>

  <!-- 結論バー -->
  <rect x="55" y="450" width="1090" height="175" rx="14" fill="#2f6a91"/>
  <text x="600" y="488" text-anchor="middle" font-size="18" font-weight="700" fill="#ffffff">結論：3つを組み合わせて役割分担する</text>
  <text x="600" y="522" text-anchor="middle" font-size="14.5" fill="#e8f2fa">ポータルサイト・SNSで見つけてもらい、ホームページで信頼してもらう</text>
  <text x="600" y="550" text-anchor="middle" font-size="13.5" fill="#e8f2fa">来店前の「本当に営業しているか」「料金は今も同じか」という不安を、</text>
  <text x="600" y="574" text-anchor="middle" font-size="13.5" fill="#e8f2fa">ホームページの最新情報が解消し、来店の最後の一押しになる</text>
  <text x="600" y="602" text-anchor="middle" font-size="12.5" fill="#cfe3f2">どれか一つに絞るのではなく、それぞれの強みを活かして併用するのが現実的</text>
</svg>
