[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","68969b795af88191ac725481fa9fbce8","versionInt","title","メイシン用｜アニメーションlp・読みやすいテンプレテンプレ","type","code/react","content","// メイシン用：アニメーションLPの“他人にも読める”テンプレ\n// ------------------------------------------------------------\n// 使い方（3ステップ）\n// ① CONFIGだけ書き換える（ブランド名・CTA・価格など）\n// ② assetsの画像URLを差し替え（未定なら後回しOK）\n// ③ セクションON/OFFや順番変更はの配列を並び替え\n// 読みやすさの仕掛け：\n// - CONFIG：文言/価格/色/リンクを1か所集約（ノー探索）\n// - tokens：デザイントークン化（色や半径、影を一括管理）\n// - variants：アニメーションのパターンはここだけ編集\n// - ：各セクションは“独立コンポーネント＋明確Props”\n// - //TODO：実装ポイントを明記（誰でも次アクションが分かる）\n// - JSDoc：意図をコメント化（Vibeを“仕様化”へ）\n// ------------------------------------------------------------\n\nimport React from \"react\";\nimport { motion } from \"framer-motion\";\nimport { ArrowRight, Check, Star, Sparkles, Shield, Zap, MousePointerClick } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from \"@/components/ui/accordion\";\n\n// ======================\n// 1) CONFIG（ここだけ書き換え）\n// ======================\nconst CONFIG = {\n brand: {\n name: \"MEISHIN LABS\",\n tagline: \"感情×戦略で“売れる”を最短化\",\n logoText: \"MEISHIN\",\n },\n theme: {\n // tokensに委譲してもOK。ここは運用者が即変更しやすい層。\n gradient: \"from-violet-500 via-fuchsia-500 to-pink-500\",\n accent: \"violet-600\",\n },\n cta: {\n primary: { label: \"無料デモを見る\", href: \"#signup\" },\n secondary: { label: \"資料ダウンロード\", href: \"#download\" },\n },\n product: {\n name: \"Loki Conversion LP\",\n oneLiner: \"読みやすさ設計×モーションでCVRを殴り上げるLPテンプレ\",\n bullets: [\n \"CONFIG集中管理：改修が一箇所で完結\",\n \"Framer Motion：視線誘導と鮮度維持\",\n \"shadcn/ui：生産性と統一感を担保\",\n \"アクセシビリティ準拠：セマンティクス設計\",\n ],\n },\n pricing: [\n {\n tier: \"Starter\",\n price: \"¥29,800\",\n period: \"/買い切り\",\n features: [\"LPテンプレ一式\", \"基本アニメーション\", \"メールサポート1ヶ月\"],\n cta: { label: \"はじめる\", href: \"#buy-starter\" },\n highlight: false,\n },\n {\n tier: \"Pro\",\n price: \"¥98,000\",\n period: \"/買い切り\",\n features: [\"A/Bテスト用バリエーション3種\", \"高度アニメーション\", \"優先サポート3ヶ月\"],\n cta: { label: \"これにする\", href: \"#buy-pro\" },\n highlight: true,\n },\n {\n tier: \"Enterprise\",\n price: \"要見積り\",\n period: \"\",\n features: [\"要件ヒアリング\", \"完全カスタム\", \"運用レクチャー\"],\n cta: { label: \"相談する\", href: \"#contact\" },\n highlight: false,\n },\n ],\n socialProof: {\n logos: [\n { name: \"Client A\", src: \"/placeholder.svg?height=40&width=120\" },\n { name: \"Client B\", src: \"/placeholder.svg?height=40&width=120\" },\n { name: \"Client C\", src: \"/placeholder.svg?height=40&width=120\" },\n ],\n quotes: [\n {\n name: \"某SaaS代表\",\n text: \"修正がCONFIGだけで済む。現場が回しやすいのは正義。\",\n },\n { name: \"D2C事業責任者\", text: \"視線の流れが気持ちいい。離脱率が落ちた。\" },\n ],\n },\n faqs: [\n { q: \"コーディング知識がなくても運用できますか？\", a: \"CONFIGを触ればOK。必要に応じてSection単位で編集。\" },\n { q: \"CMSと連携できますか？\", a: \"Next.jsやHeadless CMSと親和性高。API差し替えで対応可能。\" },\n { q: \"アニメが重くならない？\", a: \"モーションは軽量プリセット。初期表示に影響しない範囲で設計。\" },\n ],\n assets: {\n hero: {\n // TODO: 本番画像URLに差し替え\n image: \"/placeholder.svg?height=600&width=800\",\n alt: \"LPヒーロー画像\",\n },\n },\n};\n\n// ======================\n// 2) TOKENS（見た目の共通ルール）\n// ======================\nconst tokens = {\n radius: \"2xl\",\n shadow: \"shadow-[0_10px_30px_rgba(88,28,135,0.25)]\",\n container: \"max-w-6xl mx-auto px-4 md:px-6\",\n};\n\n// ======================\n// 3) ANIMATION VARIANTS（動きの型）\n// ======================\nconst variants = {\n fadeUp: {\n hidden: { opacity: 0, y: 24 },\n show: { opacity: 1, y: 0, transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] } },\n },\n scaleIn: {\n hidden: { opacity: 0, scale: 0.95 },\n show: { opacity: 1, scale: 1, transition: { duration: 0.5 } },\n },\n stagger: { hidden: {}, show: { transition: { staggerChildren: 0.08 } } },\n};\n\n// ======================\n// 4) 小物（共通パーツ）\n// ======================\nconst Pill = ({ children }) => (\n \n \n {children}\n \n);\n\nconst SectionHeader = ({ overline, title, subtitle }) => (\n

\n {overline && (\n

\n {overline}\n

\n )}\n

\n {title}\n

\n {subtitle &&

{subtitle}

}\n

\n);\n\n// ======================\n// 5) セクション群\n// ======================\nconst SectionHero = () => (\n

\n \n \n {CONFIG.brand.tagline}\n \n \n {CONFIG.product.oneLiner}\n \n \n \n \n \n \n {CONFIG.product.bullets.map((b, i) => (\n

\n {b}\n

\n ))}\n \n \n

\n);\n\nconst SectionLogos = () => (\n

\n {CONFIG.socialProof.logos.map((logo, i) => (\n

\n ))}\n

\n);\n\nconst SectionProblemSolution = () => (\n

\n \n

\n \n \n よくある失敗\n \n \n

・文言/色/価格がコードの各地に散在 → 小修正が地獄

・アニメがバラバラ → 体験のムラでCVR低下

・セマンティクス無視 → アクセシビリティ/SEOで損

\n \n \n \n \n このテンプレでの解法\n \n \n

・CONFIG集中管理：運用者が迷子にならない

・variantsに動きを集約：演出は共通パターンで再利用

・Sectionコンポーネント化：ON/OFFと順序入替が容易

\n \n \n

\n);\n\nconst SectionFeatures = () => (\n

\n \n

\n {[\n { icon: , title: \"CONFIG集中\", desc: \"ブランド文言・価格・色・CTAが一箇所。\" },\n { icon: , title: \"アニメ型化\", desc: \"variantsに集約。文脈統一で視線誘導。\" },\n { icon: , title: \"UI基盤\", desc: \"shadcn/uiで統一感と拡張性。\" },\n ].map((f, i) => (\n \n \n \n {f.icon} {f.title}\n \n \n

{f.desc}

\n \n \n \n ))}\n

\n);\n\nconst SectionSocialProof = () => (\n

\n \n

\n {CONFIG.socialProof.quotes.map((q, i) => (\n \n \n

“{q.text}”

— {q.name}

\n \n \n ))}\n

\n);\n\nconst SectionPricing = () => (\n

\n \n

\n {CONFIG.pricing.map((p, i) => (\n \n \n

\n {p.tier}\n {p.highlight && おすすめ}\n

\n \n \n

{p.price} {p.period}

\n \n \n \n ))}\n

\n);\n\nconst SectionFAQ = () => (\n

\n \n \n {CONFIG.faqs.map((f, i) => (\n \n {f.q}\n {f.a}\n \n ))}\n \n

\n);\n\nconst SectionCTA = () => (\n

\n \n

で、いつ仕掛ける？

迷う時間より、A/Bして学ぶ方が速い。まずはデモから。

\n \n \n

\n \n

\n);\n\n// ======================\n// 6) ルートコンポーネント\n// ======================\nexport default function AnimatedLP() {\n return (\n

\n {/* ヘッダー */}\n

\n \n {CONFIG.brand.logoText}\n

\n \n \n

\n\n {/* 本文 */}\n

\n \n \n \n \n \n \n \n \n

\n\n {/* フッター */}\n \n

\n );\n}\n\n// ======================\n// 7) TODO（導入チェックリスト）\n// ======================\n// □ shadcn/uiを導入（Button/Card/Badge/Accordionを使用）\n// □ Tailwindの設定確認（container幅など）\n// □ framer-motion導入\n// □ ロゴ/画像差し替え（CONFIG.assets）\n// □ 解析タグの設置（GTM/イベント計測：CTAクリック）\n// □ SEOメタ/OGP設定（別ファイルでもOK）\n// □ A/Bテスト用にCONFIGのバリエーション化\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","6961437969054240495","traceTime",1781364156738]