CV · 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}%

); })}

); } function SPPillars() { const pillars = [ { tag: "01 / AI", title: "AIチャットで全機能操作", desc: "「春キャンペーン作って、Metaに送って、結果を週次でSlackに」— 自然言語が業務UIになる。", logos: ["Claude", "ChatGPT", "MCP", "Slack"], mock: , }, { tag: "02 / Domain", title: "自社ドメイン運用", desc: "go.your-brand.co で短縮。CNAME 1行・SSL自動。Bitlyのブラックリスト被害から永久に独立。", logos: ["Shopify", "BASE", "WordPress"], mock: , }, { tag: "03 / Ads", title: "広告API自動連携", desc: "Meta CAPI / Google Enhanced CV / LINE Tag / TikTok / X — 5媒体に同時送信、CV回復率平均+38%。", logos: ["Meta", "Google", "LINE", "TikTok", "X"], mock: , }, ]; return (

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

{pillars.map((p, i) => (

{p.tag}

{p.title}

{p.desc}

{p.mock}

{/* brand chips */}

{p.logos.map((b) => { const ent = BRAND[b]; if (!ent) return null; const L = ent.L; return ( {b} ); })}

))}

); } // ── Developer (tabs + code, horizontal scroll) ───────── function SPDeveloper() { const [tab, setTab] = spsUS("api"); const codes = { api: { lang: "bash", body: `# 短縮URL + 全広告に自動接続 curl -X POST https://api.urlapi.me/v1/links \\ -H "Authorization: Bearer urlapi_sk_..." \\ -d '{ "url": "https://acme.co/sale", "domain": "go.acme.co", "slug": "spring", "track": ["meta","google","tiktok"] }' # → 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 c = urlapi({ key: process.env.URLAPI_KEY }); // CVを5プラットフォーム同時送信 await c.track("purchase", { value: 4980, currency: "JPY", items: [{ id: "sku_42" }], user: { email_hash: "..." }, });` }, }; const code = codes[tab]; return (

API・MCPファースト。
開発者が直接組み込める。} sub="管理画面はオプション。すべてAPIから呼べる。Claude / ChatGPT は MCP 1行で。" /> {/* tabs */}

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

{code.lang}

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


  );
}

// ── Features (accordion-style by category) ────────────
function SPFeatures() {
  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キー発行"] },
  ];
  const [open, setOpen] = spsUS(0);
  return (
    
      機能、全部入り。
1ヶ月で全リリース。}
      />
      
        {cats.map((c, i) => {
          const Ico = I[c.icon];
          const isOpen = open === i;
          return (
            
              
              {isOpen && (
                
                  {c.items.map((it) => {
                    const ent = BRAND[it];
                    const L = ent ? ent.L : null;
                    return (
                      
                        {L ?  : }
                        {it}
                      
                    );
                  })}
                
              )}
            
          );
        })}
      
    
  );
}

// ── Pricing (swipeable horizontal carousel) ───────────
function SPPricing() {
  const plans = [
    {
      name: "Free", price: "¥0", sub: "お試し",
      metrics: [["クリック","5万"],["events","—"],["独自ドメイン","—"],["AI","体験のみ"],["広告連携","—"],["アカウント","1"]],
      footer: "クレカ登録なし",
      items: ["共有ドメイン体験", "Dashboard 閲覧", "AI Console お試し"],
      primary: false,
    },
    {
      name: "Starter", price: "¥2,980", sub: "個人EC・小規模",
      metrics: [["クリック","150万"],["events","5万"],["独自ドメイン","1個"],["AI","30万 tok/月"],["MCP接続","読取1本"],["広告連携","—"]],
      footer: "年払い 20%OFF / 14日無料",
      items: ["独自ドメイン 1個", "events計測 5万/月", "AIコンソール 30万 tok/月", "メールサポート"],
      primary: false,
    },
    {
      name: "Pro", price: "¥9,800", sub: "中堅EC・D2C",
      metrics: [["クリック","500万"],["events","50万"],["独自ドメイン","3個"],["AI","100万 tok/月"],["MCP接続","書込 1/アカウント"],["広告連携","標準装備"]],
      footer: "年払い 20%OFF / 14日無料",
      items: ["AIコンソール 100万 tok/月", "MCP 書込 1/アカウント", "広告CAPI 標準", "CV計測 + A/Bテスト"],
      primary: true,
    },
    {
      name: "Business", price: "¥39,800", sub: "代理店・大手",
      metrics: [["クリック","2,000万"],["events","500万"],["独自ドメイン","無制限"],["AI","500万 tok/月"],["MCP接続","1/アカウント"],["広告連携","標準＋Webhook"]],
      footer: "年払い 20%OFF / 法人請求書対応",
      items: ["AIコンソール 500万 tok/月", "MCP アカウント数分", "8アカウント標準・99.9% SLA", "監査ログ + 専任オンボ"],
      primary: false,
    },
  ];

  const railRef = spsUR(null);
  const [idx, setIdx] = spsUS(2); // default to Pro
  const mountedRef = spsUR(false);
  const programmaticScrollRef = spsUR(false);

  // On first mount: scroll INSTANTLY to Pro (no animation, no observer race)
  spsUE(() => {
    const rail = railRef.current;
    if (!rail) return;
    const card = rail.children[2]; // Pro
    if (card) {
      programmaticScrollRef.current = true;
      rail.scrollLeft = card.offsetLeft - 18;
      // Reset flag after frame so observer ignores this scroll
      requestAnimationFrame(() => {
        requestAnimationFrame(() => { programmaticScrollRef.current = false; });
      });
    }
    mountedRef.current = true;
  }, []);

  // On subsequent idx changes (from dot clicks): smooth scroll
  spsUE(() => {
    if (!mountedRef.current) return;
    const rail = railRef.current;
    if (!rail) return;
    const card = rail.children[idx];
    if (card) {
      programmaticScrollRef.current = true;
      rail.scrollTo({ left: card.offsetLeft - 18, behavior: "smooth" });
      setTimeout(() => { programmaticScrollRef.current = false; }, 500);
    }
  }, [idx]);

  // observe scroll to update dot indicator (skip programmatic scrolls)
  spsUE(() => {
    const rail = railRef.current;
    if (!rail) return;
    const onScroll = () => {
      if (programmaticScrollRef.current) return;
      const cards = Array.from(rail.children);
      const center = rail.scrollLeft + rail.offsetWidth / 2;
      let best = 0, bestDist = Infinity;
      cards.forEach((c, i) => {
        const cardCenter = c.offsetLeft + c.offsetWidth / 2;
        const d = Math.abs(cardCenter - center);
        if (d < bestDist) { bestDist = d; best = i; }
      });
      setIdx(best);
    };
    rail.addEventListener("scroll", onScroll, { passive: true });
    return () => rail.removeEventListener("scroll", onScroll);
  }, []);

  return (
    
      
        成長フェーズに、
ぴったり合うプラン。}
          sub="月額固定 + CV従量のハイブリッド。Free〜Business 4プラン、加えて Enterprise (応相談)。"
        />
      

      {/* dot indicator + name */}
      
        {plans.map((p, i) => (
          

      {/* horizontal rail */}
      
        
        {plans.map((p, i) => (
          
            {p.primary && (
              POPULAR
            )}
            
              {p.name}
              {p.sub}
            
            
              {p.price} / 月
            
            
              {p.metrics.map(([k, v]) => (
                
                  {k}
                  {v}
                
              ))}
            
            
              {p.items.map((it) => (
                
                  
                  {it}
                
              ))}
            
            {p.footer}
            
          
        ))}
      

      {/* Enterprise tile */}
      
        
          
            Enterprise
            応相談
          
          
            ホワイトラベル・専属サポート・カスタムSLA・プライベートデプロイ。
          
          
        
      
    
  );
}

// ── FAQ ──────────────────────────────────────────────
function SPFAQ() {
  const [open, setOpen] = spsUS(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に「春キャンペーン作って」と言うだけで全部自動実行されます。" },
    { q: "解約したらドメインはどうなる?", a: "顧客のもの。CNAMEレコードを削除すれば切り離し完了。urlapi に何も残りません。" },
    { q: "Enterprise プランはどんな企業向け?", a: "ホワイトラベル・カスタムSLA・専属サポート・プライベートデプロイなどが必要な代理店や大手向け。応相談です。" },
  ];
  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}
            )}
          
        ))}
      
    
  );
}

// ── Final CTA + Footer ───────────────────────────────
function SPFinalCTA() {
  return (
    
      
      
        
          クリックを、
データ資産に変えるAI。
        
        
          クレカ登録なしで、いますぐ無料ではじめられます。
        
        
      
    
  );
}

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


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

window.SPProblem = SPProblem;
window.SPPillars = SPPillars;
window.SPDeveloper = SPDeveloper;
window.SPFeatures = SPFeatures;
window.SPPricing = SPPricing;
window.SPFAQ = SPFAQ;
window.SPFinalCTA = SPFinalCTA;
window.SPFooter = SPFooter;

{title}

{p.title}

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

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