// Market v3（2026-10-31 本番） // ver2.1（Amazon 風・walnut + persimmon + cream）の骨格と配色はそのまま。 // 足したもの: ① ステップアップ帯（無料の XTP6 → 強化版 XTP3）② SNS 別の棚（全ツールを値札つきで並べる） // ③ スマホの下部固定バー ④ XTP6 の料金・上限を一次ソース（27_XTP6 src/server/plan/limits.ts）に合わせる // 架空のレビュー数・星・在庫・セール・カートは置かない。準備中は購入ボタンなし。 // サイト内のパスは B() を通す（モック時代は ../ を付けていた名残。本番は '' ）。 const BASE = ''; const B = (p) => BASE + p; const DOCS = 'https://xtools-docs-auth.web.app/'; const TOKUSHOHO = 'https://xtools-docs-auth.web.app/tokushoho.html'; const CONTACT = 'https://forms.gle/sDG46hdxTo9E4p4CA'; const NOTE = 'https://note.com/youpapalife'; const RAIJIN = 'https://raijin.youpapatools.com/'; const XTP6_URL = 'https://xtp6.youpapatools.com/?utm_source=market&utm_medium=hub'; const TTP2_DOCS = 'https://threadtoolspro2.vercel.app/docs'; const TTP2_BUY = 'https://page.theapps.jp/paid/join/H8hv3G40M25l77c8'; // 価格の一次情報: XTP3＝xtp3/index.html（¥9,800〜・フル ¥29,800）、XTP6＝27_XTP6 limits.ts（無料 1 垢・1 日 10 件／ベース 月¥3,000・年¥12,000・20 垢／プレミアム 100 垢）、 // XTP4＝xtp-compare、TTP2＝theapps、単機能ツール＝10/24 決定の ¥3,000 税込・買い切り（.docs/market-other-tools-lp-stripe.md） const PRODUCTS = [ // ── X の棚 ── { id: 'xtp6', shelf: 'x', sns: 'X', name: 'XToolsPro6 — スマホのブラウザで予約投稿・分析・AI 投稿案', short: 'XToolsPro6', env: 'Web（最初の X アカウント登録だけ PC）', bullets: ['予約投稿・オート投稿・伸びた投稿の分析・AI の投稿案', 'PC つけっぱなし不要。X の API 不要', 'ベースは X アカウント 20 個（プレミアム 100）'], kind: 'free', price: 0, priceNote: 'ベース 月¥3,000（年払いは月¥1,000）', free: '無料版: 1 アカウント・1 日 10 件', badges: ['まずはここから'], href: XTP6_URL, external: true, cta: '無料で始める', mobile: true, noPc: true, noApi: true, }, { id: 'xtp4', shelf: 'x', sns: 'X', name: 'XToolsPro4 — X 公式 API で動く、AI 下書き対応の Web アプリ', short: 'XToolsPro4', env: 'Web（スマホ可）', bullets: ['画像・動画つき予約投稿・コミュニティ投稿', '勝ちパターン分析と AI 下書き', 'X 公式 API（有料版は自分の API キー）'], kind: 'free', price: 0, priceNote: '有料は月¥1,000', free: '無料版: 1 日 1 件', badges: [], href: B('xtp4/'), cta: '製品ページを見る', mobile: true, noPc: true, }, { id: 'xtp3', shelf: 'x', sns: 'X', name: 'XToolsPro3 — X 運用の強化版・買い切り（Windows）', short: 'XToolsPro3', env: 'Windows PC（つけっぱなし）', bullets: ['複数アカウント・全基本機能が無制限', 'アカウント分析・シャドウバンチェック', 'AI 1,000pt＋お好きなアドオン 1 つつき'], kind: 'buy', price: 9800, priceNote: '月額なし。フルパック ¥29,800', free: '無料版あり（定期投稿・1 アカウント）', badges: ['強化版', 'ベストセラー'], href: B('xtp3/'), cta: '製品ページを見る', win: true, noApi: true, }, // ── Threads・Bluesky・Yay! の棚 ── { id: 'ttp2', shelf: 'text', sns: 'Threads', name: 'ThreadsToolsPro2 — Threads 公式 API で予約・定期・ランダム投稿', short: 'ThreadsToolsPro2', env: 'Web（24 時間稼働・PC 不要）', bullets: ['定期（キュー周回）・予約・ランダム投稿', '複数アカウント・アカウント単位のプロキシ', 'スプレッドシート・CSV の一括取込'], kind: 'monthly', price: 1000, priceNote: '月額（税込）', free: null, badges: [], href: TTP2_DOCS, external: true, cta: '使い方と登録を見る', secondary: { label: '購入登録へ進む', href: TTP2_BUY }, mobile: true, noPc: true, }, { id: 'bsky', shelf: 'text', sns: 'Bluesky', name: 'BskyToolsPro2 — Bluesky の予約・定期投稿（スプレッドシート）', short: 'BskyToolsPro2', env: 'Google スプレッドシート（PC 不要）', bullets: ['スプレッドシートに書くだけで予約・定期投稿', 'Google のサーバーで動くので PC は閉じて OK', '手順書（初期設定・機能別・Q&A）つき'], kind: 'buy', price: 3000, priceNote: '買い切り（税込）', free: null, badges: [], href: B('bluesky/'), cta: '製品ページを見る', noPc: true, }, { id: 'yay', shelf: 'text', sns: 'Yay!', name: 'YayToolsPro — Yay! のフォロー・リプライを時短（Chrome 拡張）', short: 'YayToolsPro', env: 'PC の Chrome（拡張機能）', bullets: ['気になるユーザーをまとめてフォロー', 'ユーザーのフォロワーをフォロー', 'リプライの時短（拡張 3 本セット）'], kind: 'buy', price: 3000, priceNote: '買い切り（税込）', free: null, badges: [], href: B('yay/'), cta: '製品ページを見る', }, // ── Facebook・Instagram の棚 ── { id: 'fb', shelf: 'meta', sns: 'Facebook', name: 'FacebookToolsPro — Facebook の交流づくりを時短（Windows）', short: 'FacebookToolsPro', env: 'Windows PC', bullets: ['投稿へのいいねを自動化して交流のきっかけに', '件数と間隔は自分で設定', '手順書 PDF・手順動画つき'], kind: 'buy', price: 3000, priceNote: '買い切り（税込）', free: null, badges: [], href: B('fb-like/'), cta: '製品ページを見る', win: true, }, { id: 'ig', shelf: 'meta', sns: 'Instagram', name: 'InstagramToolsPro — Instagram 運用ツール', short: 'InstagramToolsPro', env: '準備中', bullets: ['いまの Instagram の仕様に合わせて作り直しています', '公開したら X とメルマガでお知らせします'], comingSoon: true, badges: [], }, // ── ブログの棚 ── { id: 'ameblo', shelf: 'blog', sns: 'アメブロ', name: 'AmebloToolsPro — アメブロの読者さんとの交流を時短（Windows）', short: 'AmebloToolsPro', env: 'Windows PC（最初に Ameba へログイン）', bullets: ['キーワードで見つけた記事にいいね', '1 日の件数と間隔を設定（既定 1 日 300 件）', '端末 1 台で使うライセンス'], kind: 'buy', price: 3000, priceNote: '買い切り（税込）', free: null, badges: ['新登場'], href: B('ameblo-like/'), cta: '製品ページを見る', win: true, }, { id: 'note', shelf: 'blog', sns: 'note', name: 'noteToolsPro — note のスキ・交流を時短（Windows）', short: 'noteToolsPro', env: 'Windows PC', bullets: ['note の記事へのスキを自動化', '件数と間隔は自分で設定', '初期設定の手順書・Q&A つき'], kind: 'buy', price: 3000, priceNote: '買い切り（税込）', free: null, badges: [], href: B('note-bot/'), cta: '製品ページを見る', win: true, }, ]; const SHELVES = [ { id: 'x', title: 'X（旧 Twitter）の棚', pop: '無料の XTP6 で始めて、本格的に回すなら強化版の XTP3。公式 API 派は XTP4。', wide: true, compare: true }, { id: 'text', title: 'Threads・Bluesky・Yay! の棚', pop: 'Threads は公式 API の月額、Bluesky と Yay! は買い切り ¥3,000。', wide: true }, { id: 'meta', title: 'Facebook・Instagram の棚', pop: 'Facebook は買い切り ¥3,000。Instagram は準備中。' }, { id: 'blog', title: 'ブログの棚（アメブロ・note）', pop: 'どちらも買い切り ¥3,000。読者さんとの交流を時短。' }, ]; const ON_SALE = PRODUCTS.filter((p) => !p.comingSoon); const ext = (p) => (p.external ? { target: '_blank', rel: 'noopener' } : {}); // ─── Logo ───────────────────────────────────────────────────────────────── function Logo({ size = 22 }) { return ( ); } // ─── Top navigation ─────────────────────────────────────────────────────── function TopNav() { const [q, setQ] = React.useState(''); const onSearch = (e) => { e.preventDefault(); const s = q.trim().toLowerCase(); const hit = PRODUCTS.find((p) => (p.short + ' ' + p.sns + ' ' + p.name).toLowerCase().includes(s)); if (hit) { const el = document.getElementById('p-' + hit.id); if (el) { el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' }); el.classList.add('ring-2', 'ring-[#C2533C]'); setTimeout(() => el.classList.remove('ring-2', 'ring-[#C2533C]'), 1800); return; } } document.getElementById('products').scrollIntoView({ behavior: 'smooth' }); }; const sub = [ { l: 'X', href: '#shelf-x' }, { l: 'Threads・Bluesky・Yay!', href: '#shelf-text' }, { l: 'Facebook・Instagram', href: '#shelf-meta' }, { l: 'アメブロ・note', href: '#shelf-blog' }, { l: 'XTP3・4・6 比較表', href: B('xtp-compare/') }, { l: 'よくある質問', href: '#faq' }, ]; return (
Youパパツールマーケット SNS Tools · {ON_SALE.length} items
法人の方は
RAIJIN へ
setQ(e.target.value)} placeholder="ツール名・SNS で探す（例: XTP6・アメブロ）" className="flex-1 min-w-0 px-3 text-[14px] text-[#0F1111] focus:outline-none" />
購入後の
手順書
 お問い合わせ
すべてのツール {sub.map((s) => ( {s.l} ))} 開発者の note
); } // ─── Hero ──────────────────────────────────────────────────────────────── function HeroBanner() { return (
作った本人が販売・サポート

SNS運用を、仕組みに任せる。

X・Threads・Bluesky・Yay!・Facebook・アメブロ・note の運用ツール {ON_SALE.length} 種。

ツール一覧を見る
); } // ─── ① ステップアップ帯（無料の XTP6 → 強化版 XTP3） ───────────────────── function StepUp() { const check = (t) =>
  • ✓{t}
    • ; const Step = ({ no, label, img, name, price, points, btn, strong }) => (
    {strong && 強化版}
    {no}{label}
    {name}{price}
    {btn}
    ); return (

    X は、無料で試してから強化版へ

    XTP3・4・6 の比較表 ›
    無料で始める} />
    物足りなくなったら
    XToolsPro3 を見る} />

    XToolsPro3 は XTP6 ベース（月払い ¥3,000）の約 3 か月分で、ずっと使えます。Windows PC（つけっぱなし）が必要です。

    ); } // ─── ツール一覧（早見表） ───────────────────────────────────────────────── function ToolIndex() { const label = (p) => p.comingSoon ? '準備中' : p.kind === 'free' ? '無料〜' : p.kind === 'monthly' ? '月¥' + p.price.toLocaleString('ja-JP') : '¥' + p.price.toLocaleString('ja-JP') + (p.id === 'xtp3' ? '〜' : ''); const color = (p) => p.comingSoon ? 'text-gray-400' : p.kind === 'free' ? 'text-[#1B7670]' : 'text-[#0F1111]'; return (

    ツール一覧{ON_SALE.length} 種＋準備中 1

    押すと詳しい説明へ
    {/* スマホ＝アイコン＋名前＋価格の 2 列リスト、sm〜＝タイル（lg は 1 行 10 個） */}
    ); } // ─── ② 棚（カップ麺棚: SNS ごとに値札つきで並べる） ─────────────────────── function Thumb({ p, small }) { if (p.thumbFallback) { const f = p.thumbFallback; return (
    {f.letter}
    {!small &&
    {f.label}
    }
    ); } return ; } function PriceTag({ p }) { if (p.comingSoon) { return (
    COMING SOON
    準備中
    価格は公開時にお知らせします
    ); } const kindLabel = { free: '無料から', buy: '買い切り', monthly: '月額' }[p.kind]; const kindColor = { free: '#1B7670', buy: '#A8392A', monthly: '#2F6FD6' }[p.kind]; return (
    {kindLabel}
    {p.price === 0 ? ( ¥0〜 ) : ( ¥{p.price.toLocaleString('ja-JP')} {p.kind === 'monthly' && /月} {p.id === 'xtp3' && 〜} )}
    {p.priceNote}
    {p.free || ''}
    ); } function ShelfCard({ p }) { return (
    {p.badges.length > 0 && ( {p.badges.map((b, i) => {b})} )} {p.comingSoon && 準備中}     {/* 名前と使う場所は高さを固定 → 値札がどのカードでも同じ高さに来る */}
    {p.name}
    {p.sns} · {p.env}
    {p.comingSoon ? ( 近日公開 ) : ( {p.cta} )} {p.secondary && ( {p.secondary.label} )}
    ); } function Shelf({ shelf, items }) { const wide = shelf.wide; return (
    {/* 棚の札 */}

    {shelf.title}

    {items.filter((p) => !p.comingSoon).length} ツール

    {shelf.pop}

    {/* 棚板 */}
    {items.map((p) => (
    ))}
    ); } const FILTERS = { sns: ['X', 'Threads', 'Bluesky', 'Yay!', 'Facebook', 'アメブロ', 'note'].map((s) => ({ l: s, test: (p) => p.sns === s })), license: [ { l: '買い切り', test: (p) => p.kind === 'buy' }, { l: '無料版あり', test: (p) => !!p.free }, { l: '月額', test: (p) => p.kind === 'monthly' || p.kind === 'free' }, ], env: [ { l: 'スマホで使える', test: (p) => !!p.mobile }, { l: 'PC つけっぱなし不要', test: (p) => !!p.noPc }, { l: 'Windows PC で使う', test: (p) => !!p.win }, ], }; function ProductsSection({ active, toggle }) { const pass = (p) => active.length === 0 || (!p.comingSoon && active.every((f) => f.test(p))); const shown = PRODUCTS.filter((p) => !p.comingSoon && pass(p)).length; return (
    ホーム › SNS 運用ツールの棚
    SNS 運用ツール {shown} / {ON_SALE.length} 件（準備中 1） {active.length > 0 && }
    値札の色: 無料から・買い切り・月額
    {SHELVES.map((s) => { const items = PRODUCTS.filter((p) => p.shelf === s.id && pass(p)); return items.length ? : null; })}
    {shown === 0 && (
    この条件に合うツールはありません。
    )}
    ); } function FilterGroup({ title, items, active, toggle }) { return (

    {title}

    ); } // ─── Comparison table（XTP3・XTP4・XTP6） ───────────────────────────────── function ComparisonTable() { const cols = [ { id: 'xtp6', name: 'XToolsPro6', price: '無料〜', sub: 'ベース 月¥3,000（年払いは月¥1,000）', color: '#E8463A', tag: 'まず試す', href: XTP6_URL, external: true, cta: '無料で始める' }, { id: 'xtp3', name: 'XToolsPro3', price: '¥9,800〜', sub: '買い切り・月額なし', color: '#5A6578', tag: '強化版', recommended: true, href: B('xtp3/'), cta: '製品ページへ' }, { id: 'xtp4', name: 'XToolsPro4', price: '無料〜', sub: '有料 月¥1,000', color: '#2F6FD6', href: B('xtp4/'), cta: '製品ページへ' }, ]; const rows = [ ['PC つけっぱなし', ['不要', '必要', '不要']], ['X の API', ['不要', '不要', '必要（有料版は自分のキー）']], ['スマホで使える', ['○（最初の登録だけ PC）', '—', '○']], ['無料版', ['1 アカウント・1 日 10 件', '定期投稿のみ（1 アカウント）', '1 日 1 件']], ['アカウント数', ['20 まで（プレミアム 100）', '目安 100', '50 まで']], ['AI の投稿案', ['○', '1,000pt つき', '○']], ]; return (

    X の 3 ツールの違い

    スマホ向けの詳しい比較表 ›

    スマホで手軽に始めるなら XTP6、PC で本格的に・月額なしで回すなら XTP3、公式 API で動かしたいなら XTP4（2026 年 10 月時点）。

    {cols.map((c) => ( ))} {rows.map(([label, vals]) => ( {vals.map((v, i) => ( ))} ))} {cols.map((c) => ( ))}
    {c.name} {c.tag && {c.tag}}
    {c.price}
    {c.sub}
    {label} {v === '必要' ? 必要 : v === '—' ? — : v}
    {c.cta}
    ); } // ─── How it works ───────────────────────────────────────────────────────── function Steps() { const steps = [ { n: '01', title: '各ツールのページで購入・無料登録', body: '買い切り（XToolsPro3・各 ¥3,000 のツール）は Stripe 決済でカード・銀行振込に対応。XToolsPro6／XToolsPro4 は Google アカウントで無料登録。ThreadsToolsPro2 は購入登録のあとマニュアルへ。' }, { n: '02', title: '届いたメールの手順書を見ながら設定', body: '購入するとダウンロードと手順書の案内がメールで届きます。XToolsPro6 は最初の X アカウント登録だけ PC の Chrome が必要です。' }, { n: '03', title: '困ったらお問い合わせ', body: 'お問い合わせフォームから。開発者本人が返信します。' }, ]; return (

    購入してからの流れ

    {steps.map((s) => (
    {s.n}

    {s.title}

    {s.body}

    ))}
    ); } // ─── FAQ ────────────────────────────────────────────────────────────────── const FAQS = [ { q: '買い切りと月額、どちらを選べばいい？', a: 'X なら、まず無料の XToolsPro6 で試すのがおすすめです。アカウントや投稿を増やしたくなったら、PC をつけっぱなしにできる方は買い切りの XToolsPro3（¥9,800〜・月額なし）、スマホだけで続けたい方は XToolsPro6 のベース（月 ¥3,000・年払いは月 ¥1,000）。X 以外のツール（Bluesky・Yay!・Facebook・アメブロ・note）は各 ¥3,000 の買い切りです。' }, { q: 'XToolsPro6 から XToolsPro3 に乗り換えられる？', a: 'はい。XToolsPro6 は無料版のまま残せるので、XToolsPro3 を買ってからしばらく並べて使い、慣れたら移る形がおすすめです。投稿データの自動引き継ぎはないので、XToolsPro3 には投稿文を入れ直してください（一括で入れるならスプレッドシート取込のアドオンが便利です）。' }, { q: 'アカウント凍結のリスクは？', a: 'どのツールも、間隔や 1 日の件数を安全側の既定値にしていますが、凍結しないことは保証できません。ご自身の運用ルールの範囲で件数と頻度を決めてください。XToolsPro4 と ThreadsToolsPro2 は各 SNS の公式 API で動きます。' }, { q: 'スマホで使える？', a: 'XToolsPro6・XToolsPro4・ThreadsToolsPro2 はスマホのブラウザで使えます（XToolsPro6 は最初の X アカウント登録だけ PC の Chrome）。BskyToolsPro2 はスプレッドシートなのでスマホからも書けます。XToolsPro3・FacebookToolsPro・AmebloToolsPro・noteToolsPro は Windows PC、YayToolsPro は PC の Chrome で使います。' }, { q: '支払い方法は？', a: '買い切り（XToolsPro3・各 ¥3,000 のツール）は Stripe でクレジットカード・銀行振込などに対応しています。XToolsPro6／XToolsPro4 の有料版はアプリ内で登録します。ThreadsToolsPro2 は決済ページ（theapps）からの月額です。' }, { q: '困ったときの連絡先は？', a: 'お問い合わせフォームからご連絡ください。開発者本人が返信します。購入後のセットアップは手順書にまとめています。' }, ]; function FAQ() { const [openIdx, setOpenIdx] = React.useState(0); React.useEffect(() => { const pick = () => { const m = location.hash.match(/^#faq-(\d)$/); if (m) setOpenIdx(Number(m[1])); }; pick(); window.addEventListener('hashchange', pick); return () => window.removeEventListener('hashchange', pick); }, []); return (

    よくある質問

    ほかの質問はこちら ›

    {FAQS.length} 件

    {FAQS.map((item, i) => (
    {openIdx === i && (
    A:

    {item.a}

    )}
    ))}
    ); } // ─── Footer ─────────────────────────────────────────────────────────────── function Footer() { const cols = [ { title: 'X のツール', items: [ { l: 'XToolsPro6（無料〜）', href: XTP6_URL, ext: true }, { l: 'XToolsPro3（強化版・買い切り）', href: B('xtp3/') }, { l: 'XToolsPro4（公式 API）', href: B('xtp4/') }, { l: 'XTP3・4・6 比較表', href: B('xtp-compare/') }, ] }, { title: 'ほかの SNS', items: [ { l: 'ThreadsToolsPro2（Threads）', href: TTP2_DOCS, ext: true }, { l: 'BskyToolsPro2（Bluesky）', href: B('bluesky/') }, { l: 'YayToolsPro（Yay!）', href: B('yay/') }, { l: 'FacebookToolsPro', href: B('fb-like/') }, { l: 'AmebloToolsPro（アメブロ）', href: B('ameblo-like/') }, { l: 'noteToolsPro（note）', href: B('note-bot/') }, ] }, { title: '購入後', items: [ { l: '手順書サイト', href: DOCS, ext: true }, { l: 'お問い合わせフォーム', href: CONTACT, ext: true }, { l: 'よくある質問', href: '#faq' }, ] }, { title: '開発者・表記', items: [ { l: 'note（Youパパ）', href: NOTE, ext: true }, { l: 'X @Yu_PaPa_Life', href: 'https://x.com/Yu_PaPa_Life', ext: true }, { l: '法人の方（RAIJIN）', href: RAIJIN, ext: true }, { l: '特定商取引法に基づく表記', href: TOKUSHOHO, ext: true }, ] }, ]; return ( ); } // ─── App ────────────────────────────────────────────────────────────────── function App() { const [active, setActive] = React.useState([]); const toggle = (f) => setActive((a) => (f === null ? [] : a.includes(f) ? a.filter((x) => x !== f) : [...a, f])); return (
    ); } ReactDOM.createRoot(document.getElementById('root')).render(); /* Version History - ver3.0-mock2 (2026-10-31): 第 2 版。ゆうさん「情報量多い・最初にツールを並べる・XTP6→XTP3 は劣後」→ ヒーロー直下にツール一覧（10 マスの早見表）、4 枚タイル・棚のポップ・下部固定バー・浮きカードを削除、ヒーローを 1 文に、ステップアップ帯は棚の下で小さく、カードの箇条書きは 2 行・サムネは 4:3 - ver3.0-mock (2026-10-31): v3 のモック。ver2.1 の Amazon 風の骨格と配色はそのまま、①ステップアップ帯（無料の XTP6 → 強化版 XTP3）②SNS 別の棚（9 製品＋Instagram 準備中・値札の高さをそろえる・スマホは棚ごとに横スクロール）③スマホの下部固定バー ④XTP6 の料金・上限を 27_XTP6 limits.ts に合わせる（無料 1 垢・1 日 10 件／ベース 月¥3,000・年払い月¥1,000・20 垢／プレミアム 100）。FAQ に「XTP6 から XTP3 に乗り換えられる？」 - ver3.0 (2026-10-31): 本番化。mock-v3 を components-amazon.jsx に（BASE を '' に・モックの目印を削除・アメブロのサムネを thumbs/ameblo.webp に）。新ツール 5 つは各 LP（fb-like/ ameblo-like/ note-bot/ yay/ bluesky/）へ */