CV Distribution · Last 24h 1,437 total

{platforms.map((p, i) => { const ent = BRAND[p.n]; const L = ent ? ent.L : null; const c = ent ? ent.c : "#A88BFF"; return (

{L ? : } {p.n} {p.v} {p.pct}%

); })}

); }; // ─── Developer Section ────────────────────────────────────────── function Developer() { const [tab, setTab] = lpUS("api"); const codes = { api: { lang: "bash", body: `# 短縮URL作成 + 全広告プラットフォームに自動接続 curl -X POST https://api.urlapi.me/v1/links \\ -H "Authorization: Bearer urlapi_sk_live_..." \\ -d '{ "url": "https://acme.co/spring-sale", "domain": "go.acme.co", "slug": "spring", "campaign": "spring-2026", "track": ["meta", "google", "tiktok", "line"] }' # → https://go.acme.co/spring` }, mcp: { lang: "json", body: `// claude_desktop_config.json { "mcpServers": { "urlapi": { "command": "npx", "args": ["@urlapi/mcp"], "env": { "URLAPI_KEY": "urlapi_sk_live_..." } } } } // Claudeに「春キャンペーンを作って、結果週次で」と言うだけ` }, sdk: { lang: "ts", body: `import { urlapi } from "@urlapi/sdk"; const client = urlapi({ key: process.env.URLAPI_KEY }); // CVをトラッキング (5プラットフォーム同時送信) await client.track("purchase", { value: 4980, currency: "JPY", items: [{ id: "sku_42", name: "Spring Bundle" }], user: { email_hash: "..." }, });` }, }; const code = codes[tab]; return (

API・MCPファースト。
開発者が直接組み込める。} sub="管理画面はオプション。すべての機能はAPIから呼べる。Claude/ChatGPT統合はMCP1行で。" bg="var(--bg-1)" >

{[{ k: "api", l: "REST API" }, { k: "mcp", l: "MCP Server" }, { k: "sdk", l: "TypeScript SDK" }].map(t => ( ))}

{code.lang}

            /g, ">")
              .replace(/("[^"]*")/g, "$1")
              .replace(/(^|\n)([ \t]*)(#[^\n]*|\/\/[^\n]*)/g, "$1$2$3")
              .replace(/\b(curl|import|const|await|from|process)\b/g, "$1")
              .replace(/\b(POST|GET|Bearer)\b/g, "$1")
            }} />


  );
}

// ─── Features matrix (no heavy cards — icon + horizontal chips) ──
function Features() {
  const cats = [
    { title: "コア機能",   icon: "Link",    items: ["短縮URL作成", "独自ドメイン", "UTM管理", "キャンペーン", "ABテスト", "ブラックリスト管理"] },
    { title: "トラッキング", icon: "Chart",   items: ["クリック計測", "リファラー解析", "CV計測", "CV属性記録", "ユーザー識別", "EP計測"] },
    { title: "広告連携",   icon: "Bolt",    items: ["Meta CAPI", "Google ECV", "LINE Tag", "X CAPI", "TikTok Events", "オーディエンス自動生成"] },
    { title: "AI / MCP",   icon: "Sparkle", items: ["MCPサーバー", "AIチャットUI", "AI分析・要約", "改善提案", "AIキャンペーン作成", "API/MCPキー発行"] },
  ];
  return (
    機能、全部入り。
1ヶ月で全リリース。}>
      
        {cats.map((c, i) => {
          const Ico = I[c.icon];
          return (
            
              
                
                  
                
                {c.title}
              
              
                {c.items.map((it, j) => {
                  const ent = BRAND[it];
                  const L = ent ? ent.L : null;
                  return (
                    
                      {L ?  : } {it}
                    
                  );
                })}
              
            
          );
        })}
      
      
    
  );
}

// ─── Pricing ─────────────────────────────────────────────────────
function Pricing() {
  const plans = [
    {
      name: "Free", price: "¥0", sub: "お試し",
      metrics: [
        ["クリック", "5万"],
        ["events", "—"],
        ["独自ドメイン", "—"],
        ["AI", "—"],
        ["広告連携", "—"],
        ["アカウント", "1"],
        ["体験", "共有ドメイン"],
      ],
      footer: "クレカ登録なし",
      cta: "無料ではじめる", primary: false,
      items: ["共有ドメイン体験", "Dashboard 閲覧", "AI Console お試し"],
    },
    {
      name: "Starter", price: "¥2,980", sub: "個人EC・小規模",
      metrics: [
        ["クリック", "150万"],
        ["events", "5万"],
        ["独自ドメイン", "1個"],
        ["AI", "30万 tok/月"],
        ["MCP接続", "読取1本"],
        ["広告連携", "—"],
        ["アカウント", "1"],
        ["超過従量", "中"],
      ],
      footer: "年払い 20%OFF / 14日無料",
      cta: "無料ではじめる", primary: false,
      items: ["独自ドメイン 1個", "events計測 5万/月", "AIコンソール 30万 tok/月", "MCP 連携（読取）", "メールサポート"],
    },
    {
      name: "Pro", price: "¥9,800", sub: "中堅EC・D2C",
      metrics: [
        ["クリック", "500万"],
        ["events", "50万"],
        ["独自ドメイン", "3個"],
        ["AI", "100万 tok/月"],
        ["MCP接続", "書込 1/アカウント"],
        ["広告連携", "標準装備"],
        ["アカウント", "1 (+¥2,980)"],
        ["超過従量", "安"],
      ],
      footer: "年払い 20%OFF / 14日無料",
      cta: "無料ではじめる", primary: true,
      items: ["AIコンソール 100万 tok/月", "MCP 連携（書込 1/アカウント）", "広告CAPI 標準 (Meta/Google/LINE/TikTok)", "CV計測 + A/Bテスト", "Webhook はアドオン"],
    },
    {
      name: "Business", price: "¥39,800", sub: "代理店・大手",
      metrics: [
        ["クリック", "2,000万"],
        ["events", "500万"],
        ["独自ドメイン", "無制限"],
        ["AI", "500万 tok/月"],
        ["MCP接続", "1/アカウント"],
        ["広告連携", "標準＋Webhook"],
        ["アカウント", "8 (+¥2,980)"],
        ["超過従量", "安"],
      ],
      footer: "年払い 20%OFF / 法人請求書対応",
      cta: "無料ではじめる", primary: false,
      items: ["AIコンソール 500万 tok/月・チーム共有", "MCP アカウント数分接続", "Webhook 配信 + Connect / LTV 分析", "監査ログ + 専任オンボ + 99.9% SLA"],
    },
  ];
  return (
    成長フェーズに、
ぴったり合うプラン。}
      sub="月額固定 + CV従量のハイブリッド。Free から Business まで4プラン、加えて Enterprise (応相談)。いつでもアップグレード可能。">
      
        {plans.map((p, i) => (
          
            {p.primary && (
              POPULAR
            )}
            
              {p.name}
              {p.sub}
            
            
              {p.price} / 月
            
            
              {p.metrics.map(([k, v]) => (
                
                  {k}
                  {v}
                
              ))}
            
            
              {p.items.map((it, j) => (
                
                  
                  {it}
                
              ))}
            
            {p.footer}
            
          
        ))}
      
      

      {/* Full feature × plan comparison matrix (collapsed by default) */}
      
    
  );
}

// ─── Enterprise Strip ───────────────────────────────────────
function EnterpriseStrip() {
  const specs = [
    ["01", "SCALE",    "UNLIMITED",         "クリック / events / アカウント 上限なし"],
    ["02", "AI · MCP", "DEDICATED",         "専用トークン枠 · プライベート MCP"],
    ["03", "RELAY",    "ALL CHANNELS",      "Meta · Google · LINE · TikTok · X +"],
    ["04", "DEPLOY",   "DEDICATED INFRA",   "プライベートクラウド / オンプレ / VPC"],
    ["05", "SLA",      "99.99% CUSTOM",     "RPO/RTO 個別合意 · 24/7 監視"],
    ["06", "BRAND",    "WHITE-LABEL",       "完全 OEM · 独自ロゴ"],
  ];
  return (
    
      {/* grid backdrop */}
      

      {/* corner brackets */}
      {[
        { top: 10, left: 10, t: 1, l: 1 },
        { top: 10, right: 10, t: 1, r: 1 },
        { bottom: 10, left: 10, b: 1, l: 1 },
        { bottom: 10, right: 10, b: 1, r: 1 },
      ].map((c, i) => (
        
      ))}

      
        {/* LEFT: identity */}
        
          
            BESPOKE TIER
            
              05 / 05
            
          

          
            ∞
            Enterprise
          

          
            Custom-fit · Above the plans
          

          
            Business の上限を超え、要件が個別契約レベルに達した組織向け。規模・契約・運用を個別設計。
          

          
            
              セールスに相談 →
            
            contact@urlapi.me
          
        

        {/* RIGHT: spec sheet */}
        
          
            
              Specification sheet
            
            
              REV. 2026.07
            
          

          
            {specs.map(([n, k, v, d], i) => (
              
                {n}
                {k}
                
                  {v}
                  {d}
                
              
            ))}
          
        
      
      
    
  );
}

// ─── FAQ ────────────────────────────────────────────────────────
function FAQ() {
  const [open, setOpen] = lpUS(0);
  const qs = [
    { q: "自分のドメインを使うのに、既存サイトに影響はある?", a: "ありません。サブドメインを1つ追加するだけ。メール（MX）には一切触れません。link.example.co や go.example.co 等を新規追加する形です。" },
    { q: "iOS 14 / ATT でCV計測が落ちないの?", a: "urlapi はクリックを基点とした計測なので、ATTの影響を受けにくい設計。さらに Meta CAPI / Google Enhanced CV といったサーバーサイドAPIを通じて、Pixel/Tag単独より高い計測精度を実現します。" },
    { q: "Bitlyとの違いは?", a: "Bitlyは管理画面中心の汎用短縮URL。urlapi は API / MCP / AIチャットでの操作が前提で、広告API連携が標準装備。データの所有権は完全に顧客側にあります。" },
    { q: "MCPって何?", a: "Model Context Protocol。Claude や ChatGPT から外部ツールを呼び出すための標準プロトコル。urlapi MCP を入れると、AIに「春キャンペーン作って、Metaに送って」と言うだけで全部自動実行されます。" },
    { q: "解約したらドメインはどうなる?", a: "顧客のもの。CNAMEレコードを削除すれば切り離し完了。urlapi に何も残りません。「いつでも辞められる」前提の設計です。" },
    { q: "Enterprise プランはどんな企業向け?", a: "ホワイトラベル・カスタムSLA・専属サポート・プライベートデプロイなどが必要な代理店や大手向け。クリック数・events量・アカウント数・AI処理量を要件に合わせてカスタマイズします。応相談です。" },
  ];
  return (
    よくある質問。}>
      
        {qs.map((f, i) => (
           setOpen(open === i ? -1 : i)} style={{ background: "var(--bg-1)", border: "1px solid var(--border)", borderRadius: 10, cursor: "pointer", overflow: "hidden" }}>
            
              {f.q}
              
            
            {open === i && (
              {f.a}
            )}
          
        ))}
      
    
  );
}

// ─── CTA + Footer ───────────────────────────────────────────────
function FinalCTA() {
  return (
    
      
      
        
          クリックを、
データ資産に変えるAI。
        
        
          あなたの AI を urlapi に紹介するところから。
クレカ登録なし、いますぐ無料ではじめられます。
        
        
          
        
      
    
  );
}

function Footer() {
  return (
    
      
        
          
            
              
            
            urlapi.me
          
          
            AIで完結する、
トラッキング & データ分析プラットフォーム


            © 2026 株式会社9lick.me
          
        
        {[
          { t: "Product", l: [["機能", "#features"], ["API/MCP", "#developer"], ["料金", "#pricing"], ["TQO 白書", "/tqo"]] },
          { t: "Developers", l: [["Docs", "/docs/"], ["API Reference", "/docs/api/events"], ["MCP Server", "/docs/auth#mcp-key"], ["Status", "/status"]] },
          { t: "Company", l: [["About", "#"], ["Blog", "#"], ["Careers", "#"], ["Press", "#"]] },
          { t: "Legal", l: [["利用規約", "/terms"], ["プライバシー", "/privacy"], ["トラッキング", "/tracking"], ["サブプロセッサ", "/subprocessors"], ["特定商取引法", "/tokutei"], ["Status", "/status"]] },
        ].map((c, i) => (
          
            {c.t}
            
              {c.l.map(([label, href]) => {label})}
            
          
        ))}
      
    
  );
}

// ─── App ─────────────────────────────────────────────────────────
function VariantSwitch({ id, label, options, value, onChange }) {
  return (
    
      
        {label}
        
        {options.map(o => (
          
        ))}
      
    
  );
}

function App() {
  // SP-only redesign — switch trees below 768px
  const isMobile = (typeof window !== "undefined" && typeof window.useIsMobile === "function")
    ? window.useIsMobile(768)
    : false;
  if (isMobile && window.SPApp) {
    return ;
  }

  return (
    <>
      

      {/* 1. HERO (A · Cinematic) */}
      

      {/* 2. About — 3 panels (AI Console / Tracking Health / Capabilities) as tabs */}
      

      {/* 4. Pillars (visual story) */}
      

      {/* 6. Developer (priority) */}
      

      {/* 8. Pricing */}
      

      {/* 9. FAQ */}
      

      {/* 10. Final CTA */}
      

      
      
    
  );
}

ReactDOM.createRoot(document.getElementById("root")).render();

{title}

{it.title}

3つの武器で、
広告運用を取り戻す。

{p.title}

クリックを、
データ資産に変えるAI。

{title}

{it.title}

3つの武器で、広告運用を取り戻す。

{p.title}

クリックを、データ資産に変えるAI。

3つの武器で、
広告運用を取り戻す。

クリックを、
データ資産に変えるAI。