// urlapi.me Landing Page — sections (split for size) const { useState: lpUseState, useEffect: lpUseEffect, useRef: lpUseRef } = React; function GlitchLogo() { return (
urlapi.me
urlapi.me
urlapi.me
); } // ─── NAV ──────────────────────────────────────────────────────── function Nav() { return ( ); } // ─── HERO ─────────────────────────────────────────────────────── function Hero() { return (
{/* Aurora background */}
{/* COMING pill */}
NOW LIVE · 無料で公開中
{/* GlitchLogo */} {/* Tagline */} {/* Signup CTA */}
無料ではじめる
あなたの AI を urlapi に紹介するところから。
クレカ登録なし、いますぐ無料ではじめられます。
{ e.preventDefault(); const email = e.target.elements['your-email'].value.trim(); if (!email) return; const btn = e.target.querySelector('button[type="submit"]'); const original = btn.innerHTML; btn.disabled = true; btn.style.opacity = 0.6; btn.innerHTML = '送信中...'; window.location.href = '/app/signup?email=' + encodeURIComponent(email); }} style={{ display: "flex", flexDirection: "column", gap: 10 }}>
{ e.target.style.borderColor = "var(--accent)"; e.target.style.boxShadow = "0 0 0 3px var(--accent-soft)"; }} onBlur={e => { e.target.style.borderColor = "var(--border-strong)"; e.target.style.boxShadow = "none"; }} />
※登録のみ、個人情報は厳重に管理します。
); } // ─── AI CONSOLE PREVIEW ───────────────────────────────────────── function AIConsoleSection() { const liveCV = "128,940"; return (
AI Console preview

自然言語で、
計測の全部を動かす。

ダッシュボードを開かずに、AI へ指示するだけで計測が動く。
CV 集計・媒体送信・ LTV 分析、ぜんぶ会話で完結。

● app.urlapi.me/dashboard
AI CONSOLE · sonnet-4.5
9
Instagram 経由の顧客の LTV、他チャネルと比べて高い?
{[ { tool: "query_clicks", arg: '{ source: "instagram" }' }, { tool: "join_orders", arg: '{ window: "180d" }' }, { tool: "compute_ltv", arg: '{ groupby: "source" }' }, ].map((t, i) => (
{t.tool} {t.arg}
))}
Instagram 経由は LTV ¥18,420で全体平均より +42%。
リピート率も +31% で群を抜いています。広告予算を +20% 振り替える提案を作りますか?
Ask anything… ⌘K
LIVE
TOTAL CLICKS · LAST 30D
{liveCV}
+24.6% vs prev 30d
{(() => { const pts = [50,52,48,58,62,55,70,68,72,80,78,82,75,88]; const max = Math.max(...pts), min = Math.min(...pts) - 5; const path = pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${(i / (pts.length-1)) * 280} ${90 - ((p - min) / (max - min)) * 80}`).join(" "); return ( <> ); })()}
CV送信状況
{[ { n: "Meta", v: "847" }, { n: "Google", v: "293" }, { n: "TikTok", v: "164" }, { n: "LINE", v: "65" }, ].map((p, i) => { const ent = BRAND[p.n]; const L = ent ? ent.L : null; return (
{L ? : null} {p.n} {p.v}
); })}
); } // ─── INLINE CTA STRIP ─────────────────────────────────────────── function InlineCTA({ headline = "いますぐ無料ではじめる。", sub = "あなたの AI を urlapi に紹介するところから。クレカ登録なし。" } = {}) { return (
{headline}
{sub}
無料ではじめる
); } // ─── SCROLL-TO-TOP FAB ───────────────────────────────────────── function ScrollToTop() { const [show, setShow] = lpUseState(false); lpUseEffect(() => { const onScroll = () => setShow(window.scrollY > 600); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return ( ); } // ─── CAPABILITIES (numbered editorial list, no cards) ──────── function Capabilities() { const items = [ { icon: "tag", title: "タグ管理を、AIに任せる", desc: "「GA4 設定して、Meta CAPI も繋げて」と指示するだけ。壊れにくいタグ環境を AI が構築し、自動診断・自動修復で維持します。", }, { icon: "url", title: "短縮URLを、指示するだけで生成", desc: "「春のセール用、Instagram で5本」と一言。UTM・CV計測・キャンペーン分類まで AI が一発でセットアップ。", }, { icon: "data", title: "データ管理も、AI が代行", desc: "バラバラの CV、欠損、媒体間乖離。AI が継続的に診断し、整えた信号を広告 AI と MCP エージェントへ折り返します。", }, { icon: "ltv", title: "LTV を、流入元から可視化", desc: "「Instagram DM 経由のお客さん、LTV 高い？」と聞くだけ。クリック起点で顧客の旅路を全部追えます。", }, { icon: "ads", title: "広告連携、標準装備", desc: "Meta CAPI / Google Enhanced CV / LINE / TikTok。コードを書かず、AI が認証・ハッシュ化・送信まで自動で。", }, { icon: "report", title: "レポートを、見ない時代へ", desc: "ダッシュボードを開くな。AI に聞け。「今週やばいやつあった？」── 判断に必要な答えが一瞬で返ります。", }, ]; return (
Capabilities

タグ管理から、データ管理まで。
すべて AI が支援。

指示するだけで、プロモーション URL が作れる。
パラメータを付ければ、顧客の LTV が流入元から見える。

{/* AI Hub visualization */} {/* 6 capability cards */}
{items.map((it, i) => (
{String(i + 1).padStart(2, "0")}

{it.title}

{it.desc}

))}
); } // ── Small icon set for capabilities ──────────────────── function CapIcon({ kind }) { const box = { width: 34, height: 34, borderRadius: 9, background: "var(--accent-soft)", border: "1px solid var(--accent-soft)", display: "grid", placeItems: "center", color: "var(--accent-2)", flexShrink: 0, }; const svgs = { tag: , url: , data: , ltv: , ads: , report: , }; return
{svgs[kind]}
; } // ── AI Hub — center orb with 6 capability nodes ─────── function CapabilityHub({ items }) { const nodes = [ { l: "タグ", a: -90, c: "#7C5CFF" }, { l: "短縮URL", a: -30, c: "#A88BFF" }, { l: "データ", a: 30, c: "#5CC8FF" }, { l: "LTV", a: 90, c: "#2EE6A8" }, { l: "広告", a: 150, c: "#FF9A3C" }, { l: "レポート", a: 210, c: "#FF5C7A" }, ]; const W = 720, H = 280; const cx = W / 2, cy = H / 2; const R = 110; return (
{/* outer glow */}
{/* Orbit rings */} {/* Connection lines + traveling dots */} {nodes.map((n, i) => { const rad = (n.a * Math.PI) / 180; const x = cx + Math.cos(rad) * R; const y = cy + Math.sin(rad) * R; return ( {/* traveling dot */} ); })} {/* Nodes */} {nodes.map((n, i) => { const rad = (n.a * Math.PI) / 180; const x = cx + Math.cos(rad) * R; const y = cy + Math.sin(rad) * R; return ( {n.l} {/* index pill */} {String(i + 1).padStart(2, "0")} ); })} {/* Center orb */} AI HUB {/* caption */}
1つのAIが、6つの領域を同時に動かす
); } window.Nav = Nav; window.Hero = Hero; window.AIConsoleSection = AIConsoleSection; window.Capabilities = Capabilities; window.InlineCTA = InlineCTA; window.ScrollToTop = ScrollToTop;