WEBSITE · 87.4 KB
output/real-e2e/index.html
Workspace snapshot · 08/31 23:51
Preview
Source
<!doctype html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>制作会社専用 Claude導入・伴走支援</title><meta name="description" content="従業員5〜50名の制作会社に、優秀ディレクターの定型業務と判断基準をClaudeのSKILL・専門エージェントへ移管する3か月の導入伴走支援です。新規案件、既存案件、若手教育が同じ人に集中する状態から、組織で再現できる運用へ切り替えます。"><meta property="og:type" content="website"><meta property="og:title" content="制作会社専用 Claude導入・伴走支援"><meta property="og:description" content="従業員5〜50名の制作会社に、優秀ディレクターの定型業務と判断基準をClaudeのSKILL・専門エージェントへ移管する3か月の導入伴走支援です。新規案件、既存案件、若手教育が同じ人に集中する状態から、組織で再現できる運用へ切り替えます。"><meta property="og:url" content="https://pengi-n.co.jp/services/claude-production-company/"><meta property="og:image" content="https://pengi-n.co.jp/services/claude-production-company/images/hero.png"><meta name="twitter:image" content="https://pengi-n.co.jp/services/claude-production-company/images/hero.png"><meta name="twitter:card" content="summary_large_image"><link rel="canonical" href="https://pengi-n.co.jp/services/claude-production-company/"><link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%23111'/%3E%3Cpath d='M17 18h30v8H27v20H17z' fill='%23fff'/%3E%3C/svg%3E"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600;800&family=Noto+Serif+JP:wght@500;700&display=swap" rel="stylesheet"><script type="application/ld+json">{"@context":"https://schema.org","@type":"WebPage","name":"制作会社専用 Claude導入・伴走支援","description":"従業員5〜50名の制作会社に、優秀ディレクターの定型業務と判断基準をClaudeのSKILL・専門エージェントへ移管する3か月の導入伴走支援です。新規案件、既存案件、若手教育が同じ人に集中する状態から、組織で再現できる運用へ切り替えます。","url":"https://pengi-n.co.jp/services/claude-production-company/"}</script><style>:root{--ink:#1F1A17;--accent:#D94B2B;--paper:#F4F1EA;--line:color-mix(in srgb,var(--ink) 18%,transparent);--heading-font:'Noto Serif JP',serif;--body-font:'Noto Sans JP',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body-font);overflow-wrap:anywhere;word-break:normal;line-break:strict}.section-heading h1,.section-heading h2,.cards h3,blockquote{font-family:var(--heading-font)}body.tone-graphic .section-heading h1,body.tone-graphic .section-heading h2{font-weight:800;letter-spacing:-.03em}body.tone-graphic .type-problem{background:var(--accent)}body.tone-documentary .inner{padding-block:clamp(52px,6vw,84px)}body.tone-documentary .cards article{background:color-mix(in srgb,var(--paper) 94%,var(--ink));border-radius:14px}.skip{position:fixed;z-index:99;left:12px;top:12px;padding:12px 16px;background:var(--ink);color:var(--paper);transform:translateY(-160%)}.skip:focus{transform:none}:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.site-header{position:sticky;z-index:20;top:0;min-height:68px;padding:12px clamp(20px,5vw,72px);display:flex;align-items:center;gap:28px;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.brand{margin-right:auto;color:inherit;text-decoration:none;font-weight:800}.site-nav{display:flex;gap:18px}.site-nav a{color:inherit;text-decoration:none;font-size:.82rem}.button,.lead-form button{display:inline-flex;align-items:center;justify-content:center;gap:24px;margin-top:24px;padding:15px 20px;border:0;background:var(--accent);color:var(--ink);font:inherit;font-weight:800;text-decoration:none}.section{border-bottom:1px solid var(--line)}.inner{width:min(1160px,calc(100% - 40px));margin:auto;padding:clamp(64px,8vw,112px) 0}.type-hero .inner{min-height:min(760px,86vh);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(28px,6vw,80px)}.hero-copy .section-visual{margin-top:30px}.section-heading{max-width:760px}.section-heading small{font-size:.72rem;letter-spacing:.14em;font-weight:700}.section-heading h1{margin:.25em 0;font-size:clamp(2.6rem,6vw,6.3rem);line-height:1.15;letter-spacing:0}.section-heading h2,blockquote{margin:.3em 0;font-size:clamp(2rem,4.5vw,4.5rem);line-height:1.28;letter-spacing:.01em}.lead{font-size:clamp(1rem,1.4vw,1.25rem);line-height:1.9}.proof{display:inline-block;padding:8px 11px;border:1px solid var(--line);font-weight:700}.section-visual{margin:0}.section-visual img{display:block;width:100%;height:auto;max-height:680px;object-fit:cover}.cards,.evidence,.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px}.cards article,.evidence article,.plans article{padding:24px;border:1px solid var(--line)}.cards h3{font-size:1.25rem;line-height:1.5}.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:36px 0;padding:0;list-style:none}.steps li{padding:24px;border:1px solid var(--line)}.steps span{font-size:2rem;font-weight:800}.table-wrap{overflow:auto;margin-top:36px}table{width:100%;border-collapse:collapse}th,td{padding:18px;border:1px solid var(--line);text-align:left}.type-form .inner,.variant-hero-form .inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,6vw,72px)}.lead-form{display:grid;gap:14px;padding:clamp(20px,4vw,40px);background:color-mix(in srgb,var(--paper) 86%,var(--ink))}.lead-form label{display:grid;gap:6px}.lead-form input,.lead-form textarea{width:100%;padding:12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit}.lead-form .consent{grid-template-columns:auto 1fr;align-items:start}.lead-form .consent input{width:auto}.lead-form .consent a{color:inherit}.form-note,.form-status{margin:0;font-size:.78rem;line-height:1.6}.faq{margin-top:30px}.faq details{padding:20px 0;border-top:1px solid var(--line)}.faq summary{cursor:pointer;font-weight:700}.type-cta{text-align:center;background:var(--ink);color:var(--paper)}.type-message .inner{display:grid;grid-template-columns:1.2fr .8fr;gap:50px}.variant-feature-zigzag .cards{grid-template-columns:1fr}.variant-reason-stack .cards article:first-child{grid-row:span 2}.variant-lineup-catalog .cards{grid-template-columns:repeat(4,minmax(0,1fr))}.variant-review-cards .evidence article{min-height:220px}.variant-price-lineup .plans{grid-template-columns:repeat(2,minmax(0,1fr))}.site-footer{padding:28px clamp(20px,5vw,72px);display:flex;justify-content:space-between;gap:20px}.site-footer a{color:inherit}@media(max-width:760px){.site-header{align-items:flex-start}.site-nav{display:none}.type-hero .inner,.type-form .inner,.variant-hero-form .inner,.type-message .inner{grid-template-columns:1fr}.type-hero .inner{min-height:auto}.inner{width:min(100% - 32px,1160px);padding:56px 0}.section-heading h1{font-size:clamp(2.45rem,12vw,4rem)}.cards,.evidence,.plans,.steps,.variant-lineup-catalog .cards{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}</style></head><body class="tone-editorial"><a class="skip" href="#content">本文へ移動</a><header class="site-header"><a class="brand" href="#content">制作会社専用 Claude導入・伴走支援</a><nav class="site-nav" aria-label="メインナビゲーション"><a href="#mechanism-two-step">解決の仕組み</a><a href="#mechanism-before-after">業務変化</a><a href="#differentiation">PENGINの違い</a><a href="#proof-screens">画面で見る仕組み</a></nav><details class="mobile-nav"><summary aria-label="セクションメニューを開く">目次</summary><nav class="mobile-nav-panel" aria-label="モバイルセクションナビゲーション"><a href="#mechanism-two-step">解決の仕組み</a><a href="#mechanism-before-after">業務変化</a><a href="#differentiation">PENGINの違い</a><a href="#proof-screens">画面で見る仕組み</a></nav></details><a class="button" href="#contact">相談する</a></header><main id="content"><style>.proof-points,.feature-grid,.usecase-grid,.authority-points,.reviews,.price-lineup,.segments,.alternative-matrix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.proof-points article,.feature-grid article,.usecase-grid article,.authority-points article,.alternative-matrix article,.price-lineup article,.segments article{padding:24px;border:1px solid var(--line)}.metric-band,.cost-stack{display:grid;grid-template-columns:repeat(4,1fr);margin:36px 0}.metric-band div,.cost-stack div{padding:24px;border:1px solid var(--line)}.metric-band dt,.cost-stack dt{font-size:.72rem;letter-spacing:.12em}.metric-band dd,.cost-stack dd{margin:12px 0 0;font-size:1.2rem;font-weight:800}.logo-wall{display:flex;flex-wrap:wrap;gap:1px;margin:32px 0;background:var(--line)}.logo-wall span{flex:1 1 160px;padding:24px;background:var(--paper);text-align:center;font-weight:700}.checklist,.risk-list,.reason-stack{display:grid;gap:10px;padding:0;list-style:none;margin:32px 0}.checklist li,.risk-list li,.reason-stack li{display:flex;align-items:flex-start;gap:18px;padding:20px;border-bottom:1px solid var(--line)}.checklist li:before{content:'✓';flex:0 0 28px;display:grid;place-items:center;width:28px;height:28px;background:var(--accent);font-weight:800}.rich-stack h3,.rich-checklist h3,.rich-timeline h3{margin:.15em 0 .45em}.rich-stack p,.rich-checklist p,.rich-timeline p,.rich-zigzag p,.rich-story p{line-height:1.75}.rich-stack strong,.rich-checklist strong,.rich-timeline strong,.rich-zigzag strong,.rich-story strong{display:block;margin-top:12px;font-size:.78rem}.narrative,.editorial-message{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;margin-top:36px}.narrative blockquote,.editorial-message blockquote{margin:0}.timeline{position:relative;display:grid;gap:0;padding:0;list-style:none;margin:36px 0}.timeline li{display:grid;grid-template-columns:110px 1fr;gap:20px;padding:20px;border-top:1px solid var(--line)}.timeline time{font-size:.75rem;font-weight:800}.before-after,.compare-split,.fit-split{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:36px 0;background:var(--line)}.before-after article,.compare-split article,.fit-split article{padding:32px;background:var(--paper)}.solution-map{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:1px;margin:36px 0;background:var(--line)}.solution-map>*{padding:22px;background:var(--paper)}.process-circles{display:flex;justify-content:space-between;padding:0;list-style:none;margin:36px 0}.process-circles li{display:grid;place-items:center;width:180px;aspect-ratio:1;border:1px solid var(--line);border-radius:50%;text-align:center}.process-circles span{font-size:2rem;font-weight:800}.zigzag{display:grid;gap:20px;margin:36px 0}.zigzag article{display:grid;grid-template-columns:80px 1fr 1.2fr;align-items:start;gap:24px;padding:22px;border-top:1px solid var(--line)}.story-rail,.lineup{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,1fr);gap:16px;overflow:auto;margin:36px 0}.story-rail article,.lineup article{padding:24px;border:1px solid var(--line)}.catalog-thumb .section-visual{margin-bottom:18px}.case-featured,.expert-profile,.content-split,.metric-case{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:48px;margin-top:36px}.metric-case>dl{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}.metric-case>dl>div{padding:24px;background:var(--paper)}.reviews figure{margin:0;padding:24px;border:1px solid var(--line)}.reviews blockquote{font-size:1.2rem}.estimate{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:36px 0;padding:32px;border:1px solid var(--line)}.estimate b{font-size:2rem}.cta-banner,.sample-cta{width:min(1160px,calc(100% - 40px));margin:auto;padding:clamp(64px,8vw,112px) 0;text-align:center}.hero-copy-led{max-width:680px}.variant-hero-copy-led .section-heading h1{font-size:clamp(2.6rem,4vw,4.5rem)}.section-heading h1,.section-heading h2{text-wrap:balance;word-break:auto-phrase}.product-stage{padding:20px;border:1px solid var(--line)}.content-editorial{max-width:840px}.content-editorial>p{font-size:1.15rem;line-height:2}@media(max-width:760px){.proof-points,.feature-grid,.usecase-grid,.authority-points,.reviews,.price-lineup,.segments,.alternative-matrix,.metric-band,.cost-stack,.before-after,.compare-split,.fit-split,.solution-map,.narrative,.editorial-message,.case-featured,.expert-profile,.content-split,.metric-case,.estimate{grid-template-columns:1fr}.process-circles{display:grid;grid-template-columns:1fr 1fr;gap:12px}.process-circles li{width:100%}.zigzag article{grid-template-columns:52px 1fr}.zigzag article>:last-child{grid-column:2}.zigzag article .section-visual{grid-column:1/-1}.timeline li{grid-template-columns:74px 1fr}.story-rail{grid-auto-columns:minmax(82vw,1fr)}}</style><style>.hero-stage{display:grid;gap:16px;min-width:0}.hero-stage .section-visual{order:0}.hero-stage .lead-form{order:1}.cards article p{margin:14px 0 0;line-height:1.75}.cards article strong{display:block;margin-top:18px;font-size:.8rem}.trust-items article{border-top:4px solid var(--accent)}.fit-items article:last-child{opacity:.72}.plan-price{display:flex;align-items:baseline;gap:6px;font-size:clamp(1.8rem,3vw,3rem);font-weight:800}.plan-price small{font-size:.8rem}.plans ul{display:grid;gap:8px;padding-left:1.2em}.plan-note{font-size:.8rem}.case-story{display:grid;gap:0;margin:24px 0}.case-story div{display:grid;grid-template-columns:72px 1fr;gap:18px;padding:15px 0;border-top:1px solid var(--line)}.case-story dt{font-size:.75rem;font-weight:800}.case-story dd{margin:0;line-height:1.75}.faq summary{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:start}.faq summary span{color:var(--accent)}.variant-hero-product-stage .inner{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);overflow:hidden}.variant-hero-product-stage .hero-visual-bg{position:absolute;z-index:-1;inset:0}.variant-hero-product-stage .hero-visual-bg,.variant-hero-product-stage .section-visual,.variant-hero-product-stage img{width:100%;height:100%;margin:0}.variant-hero-product-stage img{max-height:none;object-fit:cover}.variant-hero-product-stage .hero-copy{grid-column:1;padding:clamp(28px,4vw,58px);background:linear-gradient(90deg,color-mix(in srgb,var(--paper) 96%,transparent) 0%,color-mix(in srgb,var(--paper) 88%,transparent) 74%,transparent 100%)}.variant-hero-product-stage .section-heading h1{max-width:8.5em;font-size:clamp(2.7rem,4vw,4.5rem);line-height:1.18}.process-circles li,.zigzag article>*{min-width:0}@media(max-width:760px){.variant-hero-product-stage .inner{display:flex;flex-direction:column}.variant-hero-product-stage .hero-visual-bg{position:relative;z-index:auto;order:2;aspect-ratio:4/3}.variant-hero-product-stage .hero-visual-bg img{object-position:72% center}.variant-hero-product-stage .hero-copy{order:1;padding:0;background:none}.variant-hero-product-stage .section-heading h1{font-size:clamp(2.45rem,12vw,4rem)}}@media(max-width:420px){.process-circles{grid-template-columns:1fr}.story-rail,.lineup{max-width:100%}}</style><style>.variant-hero-form .section-heading h1{font-size:clamp(2.8rem,4.3vw,4.8rem);line-height:1.17}.lead-form.compact{gap:10px;padding:24px}.lead-form.compact .form-note{max-width:38em}@media(max-width:760px){.site-header{align-items:center;gap:12px;min-height:64px;padding:10px 16px}.brand{max-width:62%;font-size:.76rem;line-height:1.35}.site-header>.button{flex:0 0 auto;margin-top:0;padding:11px 13px;font-size:.78rem}.section-heading h1,.variant-hero-form .section-heading h1{font-size:clamp(2.15rem,10vw,3rem);line-height:1.18}.lead-form.compact{padding:20px}}</style><style>.has-generated-visual{position:relative}.visual-pair{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,5vw,72px);align-items:stretch;margin-top:42px}.visual-pair>.section-visual{min-height:520px}.visual-pair>.section-visual img{height:100%;max-height:none}.visual-pair--process{grid-template-columns:minmax(0,1fr) minmax(340px,.72fr)}.visual-pair--process>.section-visual{order:2}.visual-cinema{margin-top:42px}.visual-cinema>.section-visual{overflow:hidden;aspect-ratio:16/7}.visual-cinema>.section-visual img{height:100%;max-height:none}.visual-cinema--cards>.cards{position:relative;z-index:2;width:min(94%,1040px);margin:-72px auto 0}.visual-cinema--cards>.cards article{background:color-mix(in srgb,var(--paper) 96%,transparent);backdrop-filter:blur(14px)}.visual-cinema--steps>.steps,.visual-cinema--transformation>.before-after{position:relative;z-index:2;width:min(92%,980px);margin:-64px auto 0}.visual-cinema--steps>.steps li,.visual-cinema--transformation>.before-after article{background:var(--paper)}.visual-story{display:grid;grid-template-columns:minmax(360px,.8fr) minmax(0,1.2fr);gap:0;margin-top:42px;background:var(--ink);color:var(--paper)}.visual-story>.section-visual img{height:100%;max-height:none}.visual-story .story-rail{grid-auto-flow:row;grid-auto-columns:auto;margin:0;padding:clamp(28px,5vw,64px);overflow:visible}.visual-story .story-rail article{border-color:color-mix(in srgb,var(--paper) 25%,transparent)}.visual-cta{position:relative;isolation:isolate;overflow:hidden;width:100%;max-width:none;padding:clamp(88px,12vw,168px) max(20px,calc((100vw - 1160px)/2));text-align:left}.visual-cta>.section-visual{position:absolute;z-index:-2;inset:0}.visual-cta>.section-visual:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 94%,transparent),color-mix(in srgb,var(--ink) 62%,transparent) 62%,transparent)}.visual-cta>.section-visual img{width:100%;height:100%;max-height:none}.visual-cta .cta-copy{max-width:760px;color:var(--paper)}.visual-cta .section-heading h2{font-size:clamp(2.5rem,6vw,6rem)}.variant-hero-form{overflow:hidden}.variant-hero-form .inner{position:relative;isolation:isolate;grid-template-columns:minmax(0,1fr) minmax(320px,.56fr);min-height:min(820px,90vh);padding-inline:clamp(24px,5vw,72px);width:min(1440px,100%)}.variant-hero-form .hero-art{position:absolute;z-index:-2;inset:0}.variant-hero-form .hero-art:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--paper) 98%,transparent) 0%,color-mix(in srgb,var(--paper) 84%,transparent) 43%,color-mix(in srgb,var(--paper) 28%,transparent) 72%,color-mix(in srgb,var(--ink) 18%,transparent))}.variant-hero-form .hero-art .section-visual,.variant-hero-form .hero-art img{width:100%;height:100%;max-height:none}.variant-hero-form .hero-copy{max-width:680px}.variant-hero-form .hero-form-wrap{align-self:end;margin-bottom:clamp(22px,5vw,72px);box-shadow:0 24px 80px color-mix(in srgb,var(--ink) 24%,transparent)}.variant-hero-form .lead-form{background:color-mix(in srgb,var(--paper) 96%,transparent);backdrop-filter:blur(18px)}@media(max-width:760px){.visual-pair,.visual-story{grid-template-columns:1fr}.visual-pair>.section-visual{min-height:auto;aspect-ratio:4/3}.visual-pair--process>.section-visual{order:0}.visual-cinema>.section-visual{aspect-ratio:4/3}.visual-cinema--cards>.cards,.visual-cinema--steps>.steps,.visual-cinema--transformation>.before-after{width:calc(100% - 24px);margin:-28px auto 0}.visual-story>.section-visual{aspect-ratio:4/3}.variant-hero-form .inner{display:flex;min-height:auto;padding:72px 20px 24px}.variant-hero-form .hero-art:after{background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 98%,transparent) 0%,color-mix(in srgb,var(--paper) 88%,transparent) 48%,color-mix(in srgb,var(--paper) 35%,transparent) 100%)}.variant-hero-form .hero-copy{min-height:58vh;display:grid;align-content:center}.variant-hero-form .hero-form-wrap{margin:0}.visual-cta{padding-inline:20px}}</style><style>
.integrated-copy-accessible{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.integrated-context{max-width:880px;margin:0 0 36px;font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.9}
.has-integrated-copy .section-visual img{object-fit:contain;max-height:none}
.variant-hero-form.has-integrated-copy .inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.34fr);width:100%;max-width:none;min-height:auto;padding:0;gap:0;background:#fff}
.variant-hero-form.has-integrated-copy .hero-poster{grid-area:1/1/2/-1;display:block;color:inherit}
.variant-hero-form.has-integrated-copy .hero-poster .section-visual,.variant-hero-form.has-integrated-copy .hero-poster img{display:block;width:100%;height:auto;margin:0}
.variant-hero-form.has-integrated-copy .hero-form-wrap{grid-area:1/2/2/3;z-index:2;align-self:end;width:calc(100% - 32px);margin:0 32px 32px 0;box-shadow:0 24px 80px color-mix(in srgb,var(--ink) 28%,transparent)}
.variant-hero-form .hero-art:after{
background:linear-gradient(90deg,color-mix(in srgb,var(--paper) 92%,transparent) 0%,color-mix(in srgb,var(--paper) 66%,transparent) 43%,color-mix(in srgb,var(--paper) 12%,transparent) 72%,color-mix(in srgb,var(--ink) 16%,transparent));
}
@media(max-width:760px){
.variant-hero-form.has-integrated-copy .inner{display:flex;flex-direction:column;padding:0}
.variant-hero-form.has-integrated-copy .hero-poster{width:100%}
.variant-hero-form.has-integrated-copy .hero-form-wrap{width:calc(100% - 32px);margin:-18px 16px 24px}
.variant-hero-form .inner{display:flex;flex-direction:column;min-height:auto;padding:64px 20px 24px}
.variant-hero-form .hero-copy{width:100%;min-height:64vh}
.variant-hero-form .hero-form-wrap{width:100%;align-self:stretch}
.variant-hero-form .hero-art:after{background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 88%,transparent) 0%,color-mix(in srgb,var(--paper) 62%,transparent) 58%,color-mix(in srgb,var(--paper) 28%,transparent) 100%)}
}
</style><style>
.mobile-nav{display:none;position:relative}
.mobile-nav summary{cursor:pointer;list-style:none}
.mobile-nav summary::-webkit-details-marker{display:none}
.type-hero .inner,.variant-hero-form .inner{align-items:start}
.variant-hero-form .hero-form-wrap{align-self:start;margin-bottom:0}
@media(max-width:760px){
.site-header{align-items:center;gap:10px}
.brand{max-width:46%;font-size:.72rem}
.mobile-nav{display:block}
.mobile-nav summary{display:grid;place-items:center;min-width:48px;min-height:44px;padding:8px;border:1px solid var(--line);font-size:.75rem;font-weight:800}
.mobile-nav-panel{position:absolute;top:calc(100% + 12px);right:0;display:grid;width:min(78vw,320px);padding:8px;background:var(--paper);border:1px solid var(--line);box-shadow:0 18px 48px color-mix(in srgb,var(--ink) 18%,transparent)}
.mobile-nav-panel a{padding:14px 12px;color:inherit;text-decoration:none;border-bottom:1px solid var(--line);font-size:.86rem}
.mobile-nav-panel a:last-child{border-bottom:0}
.variant-hero-form .hero-form-wrap{width:100%;margin-bottom:0}
.table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
.table-wrap table{width:max-content;min-width:720px}
.table-wrap th,.table-wrap td{min-width:132px}
}
</style><style>
:root{
--canvas:#f2efe8;
--surface:#fffdf8;
--ink-soft:color-mix(in srgb,var(--ink) 68%,transparent);
--blue:var(--accent);
--signal:color-mix(in srgb,var(--accent) 72%,var(--paper));
--display-font:'Noto Sans JP',sans-serif;
--page-gutter:clamp(20px,5vw,72px);
--section-space:clamp(88px,11vw,168px);
}
body{background:var(--canvas);font-feature-settings:'palt' 1,'kern' 1}
.site-header{min-height:76px;padding-inline:var(--page-gutter);background:color-mix(in srgb,var(--canvas) 88%,transparent);border-bottom:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.brand{max-width:25em;font-family:var(--display-font);font-size:.82rem;line-height:1.35;letter-spacing:.01em}
.site-nav a{position:relative;padding:10px 0;font-size:.76rem;font-weight:700}
.site-nav a:after{content:'';position:absolute;right:0;bottom:5px;left:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.site-nav a:hover:after{transform:scaleX(1)}
.site-header>.button{margin:0;padding:16px 22px;background:var(--ink);color:var(--paper)}
.section{position:relative;overflow:hidden;border:0}
.section:not(.type-hero):before{content:attr(data-section-index);position:absolute;top:28px;right:var(--page-gutter);font:800 clamp(2.8rem,6vw,7rem)/1 var(--display-font);letter-spacing:.12em;color:color-mix(in srgb,currentColor 7%,transparent);pointer-events:none}
.section>.inner{width:min(1240px,calc(100% - (var(--page-gutter) * 2)));padding-block:var(--section-space)}
.section-heading{max-width:900px}
.section-heading small,.integrated-intro>span{font:800 .7rem/1 var(--display-font);letter-spacing:.16em;text-transform:uppercase}
.section-heading h2{max-width:12em;margin:.28em 0 .42em;font-family:var(--display-font);font-size:clamp(2.8rem,6.6vw,7.2rem);font-weight:800;line-height:1.02;letter-spacing:0}
.section-heading .lead{max-width:48em;margin:0;font-size:clamp(1rem,1.25vw,1.18rem);line-height:1.9}
.integrated-intro{display:grid;grid-template-columns:minmax(120px,.28fr) minmax(0,1fr);align-items:start;gap:clamp(24px,5vw,80px);margin:0 0 clamp(36px,5vw,72px);padding-top:18px;border-top:2px solid currentColor}
.integrated-intro>span{padding-top:8px}
.integrated-context{max-width:36em;margin:0;font-size:clamp(1.15rem,1.7vw,1.65rem);font-weight:600;line-height:1.75;letter-spacing:0}
.section-visual{background:transparent}
.has-integrated-copy .section-visual img{display:block;width:100%;height:auto;background:transparent}
.button,.lead-form button{position:relative;min-height:52px;padding:15px 22px;border:1px solid currentColor;background:var(--ink);color:var(--paper);transition:transform .2s ease,box-shadow .2s ease}
.button:hover,.lead-form button:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--accent)}
.type-trust{background:var(--surface)}
.type-trust>.inner{padding-block:clamp(56px,6vw,88px)}
.type-trust .section-heading{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);gap:clamp(28px,6vw,88px);max-width:none}
.type-trust .section-heading h2{margin:0;font-size:clamp(2rem,4vw,4.5rem)}
.type-trust .section-heading .lead{align-self:end}
.type-trust .logo-metrics,.type-trust .metric-band{margin-top:56px}
.type-trust .logo-wall{background:transparent;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.type-trust .logo-wall span{background:transparent;text-align:left}
.type-problem{background:var(--canvas)!important;color:var(--ink)}
.type-problem .visual-cinema--cards{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(310px,.82fr);align-items:start;gap:0;margin-top:0}
.type-problem .visual-cinema--cards>.section-visual{position:sticky;top:96px;aspect-ratio:auto;overflow:visible}
.type-problem .visual-cinema--cards>.cards{display:grid;grid-template-columns:1fr;width:auto;margin:clamp(40px,5vw,72px) 0 0 -28px;gap:0}
.type-problem .cards article{min-height:180px;padding:clamp(28px,3vw,46px);background:var(--surface);border:1px solid var(--ink)}
.type-problem .cards article:nth-child(2){background:var(--ink);color:var(--paper)}
.type-problem .cards article:nth-child(3){background:var(--accent)}
.type-problem .cards h3{max-width:14em;margin:.45em 0 0;font-size:clamp(1.45rem,2vw,2.25rem);line-height:1.35;letter-spacing:0}
.type-risk{background:var(--blue);color:#fff}
.type-risk .integrated-intro{border-color:#fff}
.type-risk .visual-pair--risk{grid-template-columns:minmax(0,1.12fr) minmax(330px,.72fr);gap:clamp(24px,4vw,56px);margin-top:0}
.type-risk .section-visual{align-self:start;padding:clamp(10px,1.4vw,20px);background:var(--signal);transform:rotate(-1.2deg)}
.type-risk .timeline{margin:0;border-top:1px solid rgba(255,255,255,.55)}
.type-risk .timeline li{grid-template-columns:58px 1fr;gap:20px;padding:28px 0;border-top:0;border-bottom:1px solid rgba(255,255,255,.28)}
.type-risk .timeline time{font-size:1rem;color:var(--signal)}
.type-risk .timeline h3{font-size:clamp(1.25rem,2vw,2rem);line-height:1.35}
.type-risk .timeline p{color:rgba(255,255,255,.8)}
.type-mechanism{background:var(--surface)}
.type-mechanism:nth-of-type(even){background:var(--accent)}
.type-mechanism .visual-cinema{margin-top:0}
.type-mechanism .visual-cinema>.section-visual{aspect-ratio:auto;border:1px solid var(--ink)}
.type-mechanism .visual-cinema--steps>.steps{width:calc(100% - clamp(20px,5vw,80px));margin:clamp(-56px,-4vw,-32px) 0 0 auto;gap:0;box-shadow:-14px 14px 0 var(--ink)}
.type-mechanism .steps li{min-height:210px;padding:clamp(24px,3vw,42px);background:var(--surface);border-color:var(--ink)}
.type-mechanism .steps li:nth-child(even){background:var(--blue);color:#fff}
.type-mechanism .steps span{font-size:clamp(2rem,4vw,4.5rem);line-height:1;color:var(--accent)}
.type-mechanism .before-after{gap:0;background:var(--ink);border:1px solid var(--ink);box-shadow:12px 12px 0 var(--blue)}
.type-mechanism .before-after article{min-height:300px;padding:clamp(34px,5vw,70px);background:var(--surface)}
.type-mechanism .before-after article:last-child{background:var(--ink);color:var(--paper)}
.type-usecase{background:var(--canvas)}
.type-usecase .visual-story{grid-template-columns:minmax(360px,1.08fr) minmax(0,.92fr);margin-top:0;background:var(--ink)}
.type-usecase .visual-story>.section-visual{align-self:center;padding:clamp(16px,2.5vw,34px);background:var(--accent)}
.type-usecase .story-rail{gap:0!important;padding:0!important}
.type-usecase .story-rail article{min-height:200px;padding:clamp(28px,4vw,50px)!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.25)!important}
.type-usecase .story-rail article:nth-child(2){background:var(--blue)}
.type-usecase .story-rail h3{font-size:clamp(1.35rem,2vw,2.15rem);letter-spacing:0}
.type-usecase .usecase-items{grid-template-columns:repeat(12,1fr);gap:0;margin-top:48px;border:1px solid var(--ink)}
.type-usecase .usecase-items article{grid-column:span 4;min-height:250px;padding:clamp(24px,3vw,42px);border:0;border-right:1px solid var(--ink)}
.type-usecase .usecase-items article:nth-child(2){grid-column:span 5;background:var(--signal)}
.type-usecase .usecase-items article:nth-child(3){grid-column:span 3;background:var(--ink);color:var(--paper)}
.type-differentiation{background:var(--ink);color:var(--paper)}
.type-differentiation .visual-pair--reason{grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);gap:clamp(32px,6vw,88px);margin-top:0}
.type-differentiation .reason-stack{margin:0;border-top:1px solid rgba(255,255,255,.35)}
.type-differentiation .reason-stack li{display:grid;grid-template-columns:54px 1fr;gap:18px;padding:30px 0;border:0;border-bottom:1px solid rgba(255,255,255,.25)}
.type-differentiation .reason-stack b{font-size:1.5rem;color:var(--accent)}
.type-differentiation .reason-stack h3{font-size:clamp(1.3rem,2vw,2.1rem)}
.type-differentiation .section-visual{padding:14px;background:var(--blue);transform:rotate(1deg)}
.type-comparison{background:var(--surface)}
.type-comparison .table-wrap{margin-top:clamp(42px,6vw,82px);border-top:4px solid var(--ink)}
.type-comparison table{font-size:.94rem}
.type-comparison th,.type-comparison td{padding:24px;border:0;border-bottom:1px solid var(--ink)}
.type-comparison thead th{background:var(--ink);color:var(--paper)}
.type-comparison tbody td:first-of-type{background:color-mix(in srgb,var(--signal) 62%,var(--surface));font-weight:800}
.type-process{background:var(--blue);color:#fff}
.type-process .visual-pair--process{grid-template-columns:minmax(330px,.66fr) minmax(0,1.34fr);gap:clamp(30px,5vw,72px);margin-top:0}
.type-process .visual-pair--process>.section-visual{order:0;align-self:start;padding:12px;background:var(--signal)}
.type-process .timeline{margin:0;border-top:1px solid rgba(255,255,255,.55)}
.type-process .timeline li{grid-template-columns:120px 1fr;padding:34px 0;border-color:rgba(255,255,255,.28)}
.type-process .timeline time{color:var(--signal)}
.type-process .timeline h3{font-size:clamp(1.4rem,2.2vw,2.5rem)}
.type-proof{background:var(--surface)}
.type-proof .case-featured,.type-proof .metric-case{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:0;margin-top:64px;border:1px solid var(--ink)}
.type-proof .case-featured>.section-visual{height:100%}
.type-proof .case-featured>.section-visual img{height:100%;max-height:none;object-fit:cover}
.type-proof .case-featured>div{padding:clamp(32px,5vw,72px);background:var(--canvas)}
.type-proof .case-story div{grid-template-columns:80px 1fr;padding:22px 0}
.type-pricing{background:var(--accent)}
.type-pricing .estimate{margin-top:56px;padding:0;border:2px solid var(--ink);background:var(--surface);box-shadow:14px 14px 0 var(--blue)}
.type-pricing .estimate>div,.type-pricing .estimate>ol{margin:0;padding:clamp(30px,5vw,64px)}
.type-pricing .estimate>ol{background:var(--ink);color:var(--paper)}
.type-pricing .estimate b{font-size:clamp(2.4rem,5vw,6rem);line-height:1}
.type-pricing .plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:56px;border:2px solid var(--ink);box-shadow:14px 14px 0 var(--blue)}
.type-pricing .plans article{min-height:470px;padding:clamp(32px,5vw,64px);border:0;border-right:1px solid var(--ink);background:var(--surface)}
.type-pricing .plans article:last-child{border-right:0;background:var(--ink);color:var(--paper)}
.type-pricing .plans .button{margin-top:32px}
.type-fit{background:var(--canvas)}
.type-fit .checklist{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:56px;border:1px solid var(--ink)}
.type-fit .checklist li{min-height:180px;padding:32px;border:0;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.type-fit .checklist li:before{background:var(--blue);color:#fff}
.type-faq{background:var(--surface)}
.type-faq .faq{margin-top:56px;border-top:2px solid var(--ink)}
.type-faq .faq details{padding:28px 0;border-color:var(--ink)}
.type-faq .faq summary{grid-template-columns:72px 1fr;font-size:clamp(1.05rem,1.5vw,1.3rem)}
.type-faq .faq summary span{color:var(--blue)}
.type-faq .faq details p{max-width:50em;margin-left:72px;line-height:1.9}
.type-message{background:var(--ink);color:var(--paper)}
.type-message .visual-cta{display:grid;align-content:center;min-height:70vh;padding-block:clamp(96px,14vw,190px)}
.type-message .visual-cta:after{content:'→';position:absolute;right:var(--page-gutter);bottom:28px;font-size:clamp(4rem,12vw,12rem);line-height:1;color:var(--accent)}
.type-message .visual-cta .section-heading h2{max-width:10em;font-size:clamp(3.2rem,7.5vw,8rem);line-height:.98}
.type-form{background:var(--surface)}
.type-form>.inner{grid-template-columns:minmax(300px,.75fr) minmax(0,1.25fr);align-items:start}
.type-form .section-heading{position:sticky;top:120px}
.type-form .section-heading h2{font-size:clamp(2.8rem,5.5vw,6.2rem)}
.lead-form{gap:20px;padding:clamp(28px,5vw,64px);background:var(--canvas);border:1px solid var(--ink)}
.lead-form label>span{font-size:.78rem;font-weight:800}
.lead-form input,.lead-form textarea{min-height:54px;padding:14px 0;background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0}
.lead-form textarea{min-height:130px}
.lead-form button{background:var(--accent);color:var(--ink)}
.site-footer{background:var(--ink);color:var(--paper)}
@media(max-width:900px){
.type-problem .visual-cinema--cards,.type-risk .visual-pair--risk,.type-differentiation .visual-pair--reason,.type-process .visual-pair--process,.type-proof .case-featured,.type-proof .metric-case{grid-template-columns:1fr}
.type-problem .visual-cinema--cards>.section-visual{position:relative;top:auto}
.type-problem .visual-cinema--cards>.cards{margin:-24px 16px 0}
.type-usecase .visual-story{grid-template-columns:1fr}
.type-usecase .usecase-items article,.type-usecase .usecase-items article:nth-child(2),.type-usecase .usecase-items article:nth-child(3){grid-column:span 12}
.type-process .visual-pair--process>.section-visual{order:0}
}
@media(max-width:760px){
:root{--page-gutter:16px;--section-space:72px}
.site-header{min-height:68px}
.section:not(.type-hero):before{top:16px;right:16px;font-size:3.5rem}
.section>.inner{width:calc(100% - 32px)}
.integrated-intro{grid-template-columns:1fr;gap:14px;margin-bottom:30px}
.integrated-context{font-size:1.06rem;line-height:1.85}
.type-trust .section-heading{grid-template-columns:1fr}
.type-problem .visual-cinema--cards>.cards{width:calc(100% - 24px);margin:-18px auto 0}
.type-problem .cards article{min-height:auto}
.type-risk .section-visual,.type-differentiation .section-visual,.type-process .visual-pair--process>.section-visual{padding:7px;transform:none}
.type-mechanism .visual-cinema--steps>.steps{width:calc(100% - 20px);margin:-18px 0 0 auto;box-shadow:-8px 8px 0 var(--ink)}
.type-mechanism .steps li{min-height:auto}
.type-usecase .visual-story>.section-visual{aspect-ratio:auto}
.type-usecase .story-rail article{min-height:auto}
.type-pricing .estimate{grid-template-columns:1fr;box-shadow:8px 8px 0 var(--blue)}
.type-pricing .plans{grid-template-columns:1fr;box-shadow:8px 8px 0 var(--blue)}
.type-pricing .plans article{min-height:auto;border-right:0;border-bottom:1px solid var(--ink)}
.type-fit .checklist{grid-template-columns:1fr}
.type-faq .faq details p{margin-left:0}
.type-form>.inner{grid-template-columns:1fr}
.type-form .section-heading{position:relative;top:auto}
.type-message .visual-cta{min-height:58vh}
}
</style><style>
:root{
--grid-max:1200px;
--grid-gutter:clamp(20px,4vw,56px);
--space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--space-5:48px;--space-6:72px;--space-7:104px;--space-8:144px;
--canvas:color-mix(in srgb,var(--paper) 94%,var(--ink));
--surface:var(--paper);
--muted:color-mix(in srgb,var(--ink) 64%,var(--paper));
--soft:color-mix(in srgb,var(--paper) 90%,var(--ink));
--inverse:var(--ink);
--inverse-text:var(--paper);
--blue:var(--accent);
--signal:color-mix(in srgb,var(--accent) 72%,var(--paper));
--page-gutter:var(--grid-gutter);
--section-space:var(--space-7);
--display-font:var(--heading-font);
}
body{background:var(--canvas);font-feature-settings:'palt' 0,'kern' 1}
.section{background:var(--surface);color:var(--ink)}
.section>.inner,.cta-banner,.sample-cta{width:min(var(--grid-max),calc(100% - (var(--grid-gutter) * 2)));margin-inline:auto}
.section>.inner{padding-block:var(--space-7)}
.density-statement>.inner{padding-block:var(--space-8)}
.density-information>.inner{padding-block:var(--space-6)}
.density-evidence>.inner{padding-block:var(--space-7)}
.section:not(.type-hero):before{display:none}
.section-heading,.integrated-intro{width:100%;max-width:none}
.section-heading h1,.section-heading h2,.cards h3,.rich-stack h3,.rich-checklist h3,.rich-timeline h3,.rich-zigzag h3,.rich-story h3{letter-spacing:0;line-height:1.28}
.section h1,.section h2,.section h3,.section h4{letter-spacing:0!important}
.section-heading h1{max-width:12em;font-size:clamp(2.7rem,5.2vw,5.9rem)}
.section-heading h2{max-width:14em;margin:.28em 0 .45em;font-size:clamp(2.1rem,4.5vw,4.8rem)}
.section-heading small,.integrated-intro>span,.cards small,.timeline time{letter-spacing:.14em}
.section-heading .lead,.integrated-context,.cards p,.rich-stack p,.rich-checklist p,.rich-timeline p,.rich-zigzag p,.rich-story p,.faq p,.case-story dd{max-inline-size:40em;line-height:1.85;letter-spacing:0}
.integrated-intro{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-3);margin-bottom:var(--space-5);padding-top:var(--space-2);border-top:1px solid currentColor}
.integrated-intro>span{grid-column:1/4}
.integrated-intro>.integrated-context{grid-column:4/10;font-size:clamp(1rem,1.3vw,1.16rem);font-weight:500}
.button,.lead-form button{border:1px solid var(--ink);background:var(--accent);color:var(--ink);box-shadow:none}
.button:hover,.lead-form button:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--ink)}
/* 密度は役割で変える。画像とカードは偶然重ねず、同じ12カラムへ置く。 */
.visual-cinema,.visual-pair,.visual-story{margin-top:0}
.visual-cinema--cards{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-4);align-items:start}
.visual-cinema--cards>.section-visual{grid-column:1/8;position:relative;top:auto;aspect-ratio:4/3;overflow:hidden}
.visual-cinema--cards>.cards{grid-column:8/13;width:auto;margin:0;display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--ink)}
.visual-cinema--cards>.cards article{min-height:auto;padding:var(--space-4) 0;border:0;border-bottom:1px solid var(--ink);background:transparent;backdrop-filter:none}
.visual-pair{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-4)}
.visual-pair>.section-visual{grid-column:1/7;min-height:auto;aspect-ratio:4/3;overflow:hidden}
.visual-pair>.timeline,.visual-pair>.reason-stack{grid-column:7/13}
.visual-story{grid-template-columns:repeat(12,minmax(0,1fr));background:var(--inverse);color:var(--inverse-text)}
.visual-story>.section-visual{grid-column:1/8;min-height:520px}
.visual-story>.story-rail{grid-column:8/13}
.has-generated-visual .section-visual img{height:100%;object-fit:cover}
.type-problem .visual-cinema--cards{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-4);margin-top:0}
.type-problem .visual-cinema--cards>.section-visual{grid-column:1/8;position:relative;top:auto}
.type-problem .visual-cinema--cards>.cards{grid-column:8/13;width:auto;margin:0;gap:0}
/* 型の意味を、文字を読まなくても判別できる形にする。 */
.before-after,.compare-split,.fit-split{position:relative;display:grid;grid-template-columns:1fr 72px 1fr;gap:0;background:transparent;border:1px solid var(--ink)}
.before-after:before,.compare-split:before{content:'→';grid-column:2;grid-row:1;display:grid;place-items:center;background:var(--accent);color:var(--ink);font-size:2rem;font-weight:800}
.before-after article,.compare-split article,.fit-split article{padding:clamp(32px,4vw,56px);border:0}
.before-after article:first-child,.compare-split article:first-child{grid-column:1;grid-row:1;background:var(--soft);color:var(--muted)}
.before-after article:last-child,.compare-split article:last-child{grid-column:3;grid-row:1;background:var(--inverse);color:var(--inverse-text)}
.before-after article:last-child small,.compare-split article:last-child small{color:var(--accent)}
.timeline{border-left:2px solid var(--ink)}
.timeline li{position:relative;grid-template-columns:80px 1fr;padding:var(--space-4);border:0;border-bottom:1px solid var(--line)}
.timeline li:before{content:'';position:absolute;left:-7px;top:38px;width:12px;height:12px;border:2px solid var(--ink);border-radius:50%;background:var(--accent)}
.steps{position:relative;gap:0}
.steps:before{content:'';position:absolute;top:32px;right:8%;left:8%;height:2px;background:var(--ink)}
.steps li{position:relative;border:0;border-top:1px solid var(--ink);background:var(--surface)}
.steps span{position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;background:var(--accent);border:2px solid var(--ink);border-radius:50%}
.type-comparison .table-wrap{border-top:3px solid var(--ink)}
.type-comparison th,.type-comparison td{padding:var(--space-3);border:0;border-bottom:1px solid var(--line)}
.type-comparison thead th{background:var(--inverse);color:var(--inverse-text)}
.type-comparison tbody td:first-of-type{background:color-mix(in srgb,var(--accent) 24%,var(--paper));box-shadow:inset 3px 0 0 var(--accent);font-weight:800}
.type-fit .fit-split{grid-template-columns:1fr 1fr}
.type-fit .fit-split article:first-child{background:color-mix(in srgb,var(--accent) 24%,var(--paper));border-top:6px solid var(--accent)}
.type-fit .fit-split article:last-child{background:var(--soft);color:var(--muted);border-top:6px solid var(--muted)}
.type-fit .checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--ink)}
.type-fit .checklist li{min-height:auto;background:color-mix(in srgb,var(--accent) 15%,var(--paper))}
.type-fit .checklist li:nth-last-child(-n+2){background:var(--soft);color:var(--muted)}
.type-fit .checklist li:nth-last-child(-n+2):before{content:'—';background:var(--muted);color:var(--paper)}
.type-fit .fit-items{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--ink)}
.type-fit .fit-items article{min-height:210px;padding:var(--space-4);border:0;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);background:color-mix(in srgb,var(--accent) 18%,var(--paper))}
.type-fit .fit-items article:nth-child(-n+2){border-top:6px solid var(--accent)}
.type-fit .fit-items article:nth-last-child(-n+2){background:var(--soft);color:var(--muted);border-top:6px solid var(--muted)}
.type-fit .fit-items article:nth-last-child(-n+2) small:before{content:'NOT ';font-weight:800}
/* A: 写真と余白を中心にした編集紙面。 */
body.tone-editorial{--section-space:var(--space-7)}
body.tone-editorial .section-heading h1,body.tone-editorial .section-heading h2{font-family:'Noto Serif JP',serif;font-weight:600}
body.tone-editorial .type-trust,body.tone-editorial .type-proof,body.tone-editorial .type-faq{background:var(--paper)}
body.tone-editorial .type-risk,body.tone-editorial .type-differentiation,body.tone-editorial .type-message{background:var(--ink);color:var(--paper)}
body.tone-editorial .type-mechanism,body.tone-editorial .type-pricing{background:color-mix(in srgb,var(--accent) 14%,var(--paper))}
body.tone-editorial .type-usecase .visual-story{grid-template-columns:repeat(12,minmax(0,1fr))}
body.tone-editorial .type-usecase .visual-story>.section-visual{grid-column:1/9}
body.tone-editorial .type-usecase .story-rail{grid-column:9/13}
/* B: 日本語タイポと罫線が主役。余白だけで逃げず、情報密度を上げる。 */
body.tone-graphic{--section-space:var(--space-6);font-family:'Zen Kaku Gothic New','Noto Sans JP',sans-serif}
body.tone-graphic .section-heading h1,body.tone-graphic .section-heading h2{font-family:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;font-weight:900;line-height:1.12}
body.tone-graphic .section{border-bottom:1px solid var(--ink)}
body.tone-graphic .section:not(.type-hero):before{display:block;top:var(--space-3);right:var(--grid-gutter);font-size:1rem;letter-spacing:.12em;color:var(--ink)}
body.tone-graphic .type-problem,body.tone-graphic .type-comparison,body.tone-graphic .type-pricing{background:var(--accent);color:var(--ink)}
body.tone-graphic .type-risk,body.tone-graphic .type-differentiation,body.tone-graphic .type-message{background:var(--ink);color:var(--paper)}
body.tone-graphic .cards article,body.tone-graphic .plans article{border-color:var(--ink);border-radius:0}
body.tone-graphic .integrated-intro{border-top-width:3px}
/* C: 黒い検証台の上へ証拠・UI・工程を積む。 */
body.tone-documentary{--canvas:var(--ink);--surface:var(--paper);--section-space:var(--space-6);background:var(--ink)}
body.tone-documentary .section{background:var(--ink);color:var(--paper);border-bottom:1px solid color-mix(in srgb,var(--paper) 20%,transparent)}
body.tone-documentary .type-trust,body.tone-documentary .type-mechanism,body.tone-documentary .type-comparison,body.tone-documentary .type-proof,body.tone-documentary .type-faq,body.tone-documentary .type-form{background:var(--paper);color:var(--ink)}
body.tone-documentary .section-heading h1,body.tone-documentary .section-heading h2{font-family:'Noto Sans JP',sans-serif;font-weight:700}
body.tone-documentary .section-visual{padding:var(--space-2);background:color-mix(in srgb,var(--paper) 8%,transparent);border:1px solid color-mix(in srgb,var(--paper) 24%,transparent)}
body.tone-documentary .type-comparison .section-visual,body.tone-documentary .type-proof .section-visual,body.tone-documentary .type-form .section-visual{border-color:var(--line)}
body.tone-documentary .timeline{border-left-color:var(--accent)}
body.tone-documentary .timeline li:before{border-color:var(--accent)}
body.tone-documentary .type-pricing{background:var(--accent);color:var(--ink)}
@media(max-width:900px){
.visual-cinema--cards,.visual-pair,.visual-story{grid-template-columns:1fr}
.visual-cinema--cards>.section-visual,.visual-cinema--cards>.cards,.visual-pair>.section-visual,.visual-pair>.timeline,.visual-pair>.reason-stack,.visual-story>.section-visual,.visual-story>.story-rail,body.tone-editorial .type-usecase .visual-story>.section-visual,body.tone-editorial .type-usecase .story-rail{grid-column:1}
.type-problem .visual-cinema--cards>.section-visual,.type-problem .visual-cinema--cards>.cards{grid-column:1;width:auto;margin:0}
.visual-story>.section-visual{min-height:auto;aspect-ratio:4/3}
}
@media(max-width:760px){
:root{--grid-gutter:16px;--section-space:var(--space-6)}
.section>.inner{padding-block:var(--space-6)}
.density-statement>.inner{padding-block:var(--space-7)}
.integrated-intro{grid-template-columns:1fr;gap:var(--space-2)}
.integrated-intro>span,.integrated-intro>.integrated-context{grid-column:1}
.before-after,.compare-split{grid-template-columns:1fr}
.before-after:before,.compare-split:before{grid-column:1;grid-row:2;min-height:52px;transform:rotate(90deg)}
.before-after article:first-child,.compare-split article:first-child{grid-column:1;grid-row:1}
.before-after article:last-child,.compare-split article:last-child{grid-column:1;grid-row:3}
.steps{grid-template-columns:1fr}.steps:before{top:0;bottom:0;left:31px;width:2px;height:auto}
.type-fit .checklist{grid-template-columns:1fr}
.type-fit .fit-items{grid-template-columns:1fr}
}
</style><section id="hero" class="section type-hero variant-hero-form density-statement has-generated-visual has-integrated-copy" data-section-index="1" data-role="流入直後に、誰向けの何を提供するサービスかと、次の行動を即座に理解させる。" data-question="これは自社のような制作会社向けで、今の詰まりを解けるサービスなのか。" data-layout="hero-formを選定。検討者が営業紹介、パートナー紹介、検索のいずれから来ても、概要把握と相談予約を同時に完了できるため。" data-implementation="ファーストビュー内に5項目フォームを配置。フォーム項目は会社名、お名前、メールアドレス、現在の課題、相談希望日時。入力時間と送信後の流れ、プライバシーポリシーをフォーム直下に表示する。" data-asset="PENGINロゴ、実際のSKILL画面、WF生成画面、案件ダッシュボード画面"><div class="inner"><a class="hero-poster" href="#contact" aria-label="60分無料相談を予約する"><figure class="section-visual text-integrated"><img src="images/hero.png" alt="30代の制作会社経営者または事業責任者と、画面上に並ぶClaude SKILL風の業務カード。" loading="eager" decoding="async"></figure></a><div class="integrated-copy-accessible"><div class="section-heading"><small>従業員5〜50名の制作会社へ</small><h1>制作会社の売上天井を見直す</h1><p class="lead">従業員5〜50名の制作会社に、優秀ディレクターの定型業務と判断基準をClaudeのSKILL・専門エージェントへ移管する3か月の導入伴走支援です。新規案件、既存案件、若手教育が同じ人に集中する状態から、組織で再現できる運用へ切り替えます。</p></div></div><div class="hero-form-wrap"><form id="hero-contact" class="lead-form compact" action="" method="post" data-success="受付後1営業日以内に、制作会社のAI化可能性を整理する60分相談の日程をご連絡します。"><label><span>会社名</span><input name="field-1" type="text" required></label><label><span>メールアドレス</span><input name="field-2" type="email" required></label><label class="consent"><input type="checkbox" required><span><a href="https://pengi-n.co.jp/privacy-policy/" target="_blank" rel="noopener">個人情報の取り扱い</a>に同意する</span></label><button type="submit">送信する</button><p class="form-note">入力時間 約2分 / 送信後に受付完了を表示します</p><p class="form-status" role="status" aria-live="polite"></p></form></div></div></section><section id="trust-first" class="section type-trust variant-trust-metric-band density-evidence" data-section-index="2" data-role="初見の不信を下げ、制作会社が提供する制作会社向け支援であることを示す。" data-question="AIツールの販売ではなく、制作現場を分かっている会社なのか。" data-layout="logo-metricsを選定。初期信頼のための会社情報と連携領域を短く視認させる構成に合うため。" data-implementation="ロゴと短い事実のみを掲載し、実績数値はこの段階では出さない。" data-asset="PENGINロゴ、コーポレートカラー、連携ツールを示す画面素材"><div class="inner"><div class="section-heading"><small>02 / 運営会社</small><h2>制作現場で使う前提の支援</h2><p class="lead">PENGINはWeb制作、マーケ支援、コンテンツ制作の現場を持つ会社です。本支援では、AIの使い方だけを教えるのではなく、案件進行、制作レビュー、ナレッジ管理まで含めて運用へ落とし込みます。</p><p class="proof">株式会社PENGINが提供する制作会社専用 Claude導入・伴走支援です。</p></div><div class="cards trust-items"><article><small>運営</small><h3>株式会社PENGIN</h3><p>制作会社の現場知見をもとに、Claude導入と業務移管を支援します。</p></article><article><small>領域</small><h3>Web制作・マーケ・コンテンツ制作</h3><p>ディレクション、コーディング、マーケ、デザインの業務に合わせて設計します。</p></article><article><small>連携</small><h3>Figma・Notion・Drive・Chatwork連携</h3><p>日常業務で使うツールと接続し、個人利用で終わらない運用を作ります。</p></article></div></div></section><section id="problem-bottleneck" class="section type-problem variant-pain-cards density-narrative has-generated-visual has-integrated-copy" data-section-index="3" data-role="読者が感じている詰まりを、単なる忙しさではなく成長上限の問題として言語化する。" data-question="今の忙しさは一時的なものか、構造的な問題なのか。" data-layout="pain-cardsを選定。複数の痛みを並列で示し、自社該当性を判断しやすいため。" data-implementation="3カード構成。カードごとに売上、教育、再現性の論点を分け、本文の分解カードにしない。" data-asset="制作会社の業務負荷を示す簡潔な図解"><div class="inner"><div class="integrated-copy-accessible"><div class="section-heading"><small>03 / 経営課題</small><h2>成長を止める優秀者依存</h2><p class="lead">制作会社の詰まりは、案件数ではなく優秀ディレクターの稼働時間で決まることがあります。受注はできるのに新規案件を回せない。育成したいのに教えられる人が案件で埋まっている。この状態では、売上拡大と教育の両方が同じ場所で止まります。</p></div></div><div class="integrated-intro"><span>03 / 経営課題</span><p class="integrated-context">制作会社の詰まりは、案件数ではなく優秀ディレクターの稼働時間で決まることがあります。受注はできるのに新規案件を回せない。育成したいのに教えられる人が案件で埋まっている。この状態では、売上拡大と教育の両方が同じ場所で止まります。</p></div><div class="visual-cinema visual-cinema--cards"><figure class="section-visual text-integrated"><img src="images/problem-bottleneck.png" alt="制作会社の業務負荷を示す簡潔な図解" loading="lazy" decoding="async"></figure><div class="cards problem-items"><article><small>売上</small><h3>新規案件を受けきれない</h3><p>受注機会があっても、優秀ディレクターが既存案件で埋まり、次の案件を安心して任せられない状態です。</p></article><article><small>教育</small><h3>教える人の時間がない</h3><p>若手を育てれば解決すると分かっていても、教える役割も優秀者に集中し、教育が後回しになります。</p></article><article><small>再現性</small><h3>判断基準が頭の中に残る</h3><p>見積もり、WF、レビュー、顧客対応の判断が言語化されず、案件ごとに属人化が続きます。</p></article></div></div></div></section><section id="risk-loop" class="section type-risk variant-risk-timeline density-narrative has-generated-visual has-integrated-copy" data-section-index="4" data-role="今すぐ検討する理由を作る。属人化を放置した場合の悪循環を時間順に示す。" data-question="AI導入は急がなくても、採用や教育で解決できるのではないか。" data-layout="risk-timelineを選定。放置時の問題が順番に悪化するため、時系列表現が適している。" data-implementation="縦型タイムラインで、スマホでは1列、PCでは左に流れ、右に短い補足を置く。" data-asset="悪循環タイムライン図"><div class="inner"><div class="integrated-copy-accessible"><div class="section-heading"><small>04 / 放置リスク</small><h2>放置すると教育も止まる</h2><p class="lead">属人化は、忙しい時期だけの問題ではありません。優秀者に案件が集まり、教育が遅れ、任せられる人が増えず、さらに優秀者へ案件が戻る。採用しても判断基準が移らなければ、同じ負荷が繰り返されます。</p></div></div><div class="integrated-intro"><span>04 / 放置リスク</span><p class="integrated-context">属人化は、忙しい時期だけの問題ではありません。優秀者に案件が集まり、教育が遅れ、任せられる人が増えず、さらに優秀者へ案件が戻る。採用しても判断基準が移らなければ、同じ負荷が繰り返されます。</p></div><div class="visual-pair visual-pair--risk"><figure class="section-visual text-integrated"><img src="images/risk-loop.png" alt="悪循環タイムライン図" loading="lazy" decoding="async"></figure><ol class="timeline rich-timeline"><li><time>01</time><div><h3>案件が優秀者へ集まる</h3><p>品質を守るために、重要案件ほど経験者が抱える状態になります。</p></div></li><li><time>02</time><div><h3>教育が後回しになる</h3><p>育成の必要性は高まっても、教える時間を確保できません。</p></div></li><li><time>03</time><div><h3>任せられる人が増えない</h3><p>手順と判断基準が移らないため、若手や中堅の立ち上がりが遅れます。</p></div></li><li><time>04</time><div><h3>成長の上限が固定される</h3><p>売上の天井が、優秀者の稼働時間に近づいていきます。</p></div></li></ol></div></div></section><section id="mechanism-two-step" class="section type-mechanism variant-step-flow density-narrative has-generated-visual has-integrated-copy" data-section-index="5" data-role="AI導入の抽象論ではなく、なぜ優秀者解放とチーム展開の順番で進めるのかを理解させる。" data-question="具体的に何をAIへ任せ、どうやってチームに広げるのか。" data-layout="step-flowを選定。導入順序そのものが価値のため、ステップ型が最も理解しやすい。" data-implementation="各ステップを横並びにし、STEP 1からSTEP 2へ進む理由を矢印で示す。" data-asset="2段階導入フロー図"><div class="inner"><div class="integrated-copy-accessible"><div class="section-heading"><small>05 / 解決の仕組み</small><h2>先に時間を作り、次に広げる</h2><p class="lead">PENGINの導入は、まず優秀ディレクターの定型業務をClaudeへ移管し、教育や改善に使える時間を作ります。そのうえで、判断基準と手順をSKILL化し、若手や中堅が参照できる形でチームへ展開します。</p></div></div><div class="integrated-intro"><span>05 / 解決の仕組み</span><p class="integrated-context">PENGINの導入は、まず優秀ディレクターの定型業務をClaudeへ移管し、教育や改善に使える時間を作ります。そのうえで、判断基準と手順をSKILL化し、若手や中堅が参照できる形でチームへ展開します。</p></div><div class="visual-cinema visual-cinema--steps"><figure class="section-visual text-integrated"><img src="images/mechanism-two-step.png" alt="2段階導入フロー図" loading="lazy" decoding="async"></figure><ol class="steps"><li><span>1</span><h3>優秀者の定型業務を移管</h3><p>アジェンダ、議事録、WF、案件管理など、優秀者が日常的に処理している反復業務をClaudeのSKILLへ移します。</p></li><li><span>2</span><h3>判断基準をチームに展開</h3><p>レビュー観点、進行判断、制作ルール、顧客対応の考え方を専門エージェント化し、組織で使える状態にします。</p></li><li><span>3</span><h3>運用の中で改善する</h3><p>月次伴走で利用状況と成果を見ながら、SKILLの追加、修正、教育を続けます。</p></li></ol></div><a class="button" href="#contact">自社の移管候補を相談する<span aria-hidden="true">→</span></a></div></section><section id="mechanism-before-after" class="section type-mechanism variant-before-after density-narrative" data-section-index="6" data-role="導入後の状態を抽象論ではなく、日常業務の変化として想像させる。" data-question="導入すると、現場の一日はどう変わるのか。" data-layout="before-afterを選定。導入前後の業務配分の変化を直感的に示すため。" data-implementation="左右比較。Beforeは人に集中する線、AfterはSKILLと人に役割が分かれる線で表現する。" data-asset="Before/After業務分担図"><div class="inner"><div class="section-heading"><small>06 / 業務変化</small><h2>個人の頑張りを型に変える</h2><p class="lead">導入前は、できる人が都度判断し、都度作業し、都度教える状態です。導入後は、案件文脈、過去資料、判断基準を参照するSKILLが草案を作り、人は確認、意思決定、顧客対応に集中します。</p></div><div class="before-after"><article><small>BEFORE</small><h3>優秀者が都度処理する</h3><p>議事録、WF、案件管理、レビュー観点、若手への説明が優秀ディレクターに集中します。</p></article><article><small>AFTER</small><h3>SKILLが下準備を担う</h3><p>案件情報と手順に沿って草案やチェック観点を作り、人は確認と判断に時間を使えます。</p></article></div></div></section><section id="usecase-direction" class="section type-usecase variant-usecase-story density-evidence has-generated-visual has-integrated-copy" data-section-index="7" data-role="最も刺さりやすいディレクション業務で、相談前の利用イメージを具体化する。" data-question="自社のディレクション業務では何に使えるのか。" data-layout="usecase-storyを選定。単機能の羅列ではなく、会議業務の連続した変化を伝えるため。" data-implementation="ストーリー形式で会議前、会議後、進行管理の流れを見せる。" data-asset="議事録SKILL、Chatwork共有文、案件管理画面"><div class="inner"><div class="integrated-copy-accessible"><div class="section-heading"><small>07 / 用途:ディレクション</small><h2>会議後の作業をまとめて前へ</h2><p class="lead">アジェンダ作成、議事録、共有文面、案件管理への反映まで、会議まわりの作業を一連の流れとして設計します。会議のたびに発生する細かな作業を減らし、ディレクターが次の判断へ移れる状態を作ります。</p></div></div><div class="integrated-intro"><span>07 / 用途:ディレクション</span><p class="integrated-context">アジェンダ作成、議事録、共有文面、案件管理への反映まで、会議まわりの作業を一連の流れとして設計します。会議のたびに発生する細かな作業を減らし、ディレクターが次の判断へ移れる状態を作ります。</p></div><div class="visual-story"><figure class="section-visual text-integrated"><img src="images/usecase-direction.png" alt="議事録SKILL、Chatwork共有文、案件管理画面" loading="lazy" decoding="async"></figure><div class="story-rail rich-story"><article><small>会議前</small><h3>アジェンダ草案</h3><p>案件状況や前回メモを参照し、確認事項と決定事項を整理したアジェンダを作ります。</p></article><article><small>会議後</small><h3>議事録と共有文面</h3><p>録音やメモをもとに、決定事項、宿題、Chatwork共有文面を整えます。</p></article><article><small>進行管理</small><h3>案件管理への反映</h3><p>決定事項やタスクをNotionなどの管理画面へ反映し、次回確認しやすい状態にします。</p></article></div></div></div></section><section id="usecase-production" class="section type-usecase variant-usecase-grid density-evidence" data-section-index="8" data-role="ディレクション以外の部門展開可能性を示し、複数部門の検討者にも該当性を持たせる。" data-question="ディレクター以外のチームにも使えるのか。" data-layout="usecase-gridを選定。複数部門の用途を同じ粒度で比較できるため。" data-implementation="4カード。部門名と代表業務を固定し、カードの高さを揃える。" data-asset="部門別SKILL一覧、Figma、Notion、Drive、Chatwork連携画面"><div class="inner"><div class="section-heading"><small>08 / 用途:制作・マーケ</small><h2>制作とマーケにも展開できる</h2><p class="lead">ClaudeのSKILLは、ディレクションだけでなく、コーディング、マーケ、デザインの業務にも合わせて設計できます。部門ごとに違う判断基準や成果物を、専門エージェントとして分けて扱います。</p></div><div class="cards usecase-items"><article><small>コーディング</small><h3>着手と公開前チェックの標準化</h3><p>環境構築、コーディング規約、テンプレート、公開前確認を部門の手順として整えます。</p></article><article><small>マーケ</small><h3>分析とレポート作成の下準備</h3><p>GA4、Search Console、Ahrefsなどの情報を集計し、Notionレポートや顧客向け要約につなげます。</p></article><article><small>デザイン</small><h3>トンマナとレビュー観点の整理</h3><p>Figma設計やレビュー時の観点をSKILL化し、指摘のばらつきを減らします。</p></article><article><small>案件管理</small><h3>案件初期化と進捗整理</h3><p>案件開始時のフォルダ、テンプレート、確認項目、進捗情報を共通の型で扱います。</p></article></div><a class="button" href="#contact">部門別の使い方を相談する<span aria-hidden="true">→</span></a></div></section><section id="differentiation" class="section type-differentiation variant-reason-stack density-narrative has-generated-visual has-integrated-copy" data-section-index="9" data-role="汎用AI活用や研修との違いを説明する前に、本サービス固有の強みを定義する。" data-question="PENGINに頼む理由は何か。" data-layout="reason-stackを選定。差別化要素が3つあり、順に納得を積み上げる構成に合うため。" data-implementation="縦積みの理由3点。各項目に見出し、説明、対応画面を添える。" data-asset="業態別SKILLの画面、連携ツール図"><div class="inner"><div class="integrated-copy-accessible"><div class="section-heading"><small>09 / PENGINの違い</small><h2>制作会社の業務に移植する</h2><p class="lead">本支援の中心は、ツールの説明ではありません。制作会社の実務に合わせて、部門別のSKILL、連携ツール、運用ルール、教育の進め方まで設計します。個人のAI活用を、会社の業務基盤へ変えることを目的にしています。</p></div></div><div class="integrated-intro"><span>09 / PENGINの違い</span><p class="integrated-context">本支援の中心は、ツールの説明ではありません。制作会社の実務に合わせて、部門別のSKILL、連携ツール、運用ルール、教育の進め方まで設計します。個人のAI活用を、会社の業務基盤へ変えることを目的にしています。</p></div><div class="visual-pair visual-pair--reason"><ol class="reason-stack rich-stack"><li><b>1</b><div><small>業態別</small><h3>制作会社向けのSKILL設計</h3><p>ディレクション、コーディング、マーケ、デザインの実務に合わせて、部門別の専門エージェントを設計します。</p></div></li><li><b>2</b><div><small>連携</small><h3>日常ツールとつなぐ</h3><p>Figma、Notion、Drive、Chatworkなど、制作会社の現場で使うツールと接続して運用します。</p></div></li><li><b>3</b><div><small>定着</small><h3>3か月で業務移植まで伴走</h3><p>初期設定だけで終わらせず、棚卸し、実装、教育、運用切替まで進めます。</p></div></li></ol><figure class="section-visual text-integrated"><img src="images/differentiation.png" alt="業態別SKILLの画面、連携ツール図" loading="lazy" decoding="async"></figure></div></div></section><section id="comparison-alternatives" class="section type-comparison variant-comparison-table density-information" data-section-index="10" data-role="既存のAI利用、研修、コンサル、RPAと比較し、検討軸を整理する。" data-question="ChatGPTやAI研修、業務コンサルではだめなのか。" data-layout="comparison-tableを選定。複数の代替手段を同じ軸で判断させる必要があるため。" data-implementation="スマホでは比較軸ごとにアコーディオン化。競合を否定せず、用途の違いとして見せる。" data-asset="比較表"><div class="inner"><div class="section-heading"><small>10 / 代替比較</small><h2>個人利用で終わらせない</h2><p class="lead">汎用AIや研修は、個人の使い方を増やすには有効です。一方で、制作会社の案件文脈、部門別の判断基準、FigmaやNotionへの反映、継続改善まで含めるには、業務に組み込む設計が必要です。</p></div><div class="table-wrap"><table><thead><tr><th>比較軸</th><th>本サービス</th><th>汎用ChatGPT/Gemini</th><th>AI研修会社</th><th>業務コンサル・RPA</th></tr></thead><tbody><tr><th>案件文脈</th><td>案件フォルダ、過去資料、業務手順を前提に設計</td><td>毎回入力する内容に依存</td><td>研修後の個人運用に依存</td><td>業務整理はできるがAI実装は別途になりやすい</td></tr><tr><th>部門別運用</th><td>ディレクション、コーディング、マーケ、デザイン別に設計</td><td>基本は同じ画面を個人が使う</td><td>使い方の習得が中心</td><td>対象業務ごとに個別設計</td></tr><tr><th>制作物との連動</th><td>Figma、Notion、Drive、Chatworkとの連携を前提にする</td><td>コピーと貼り付けが中心</td><td>連携設計までは含まれにくい</td><td>RPA範囲外の判断業務は残りやすい</td></tr><tr><th>定着支援</th><td>3か月の導入と月次伴走で改善する</td><td>社内任せになりやすい</td><td>研修後の運用が課題になりやすい</td><td>設計後の現場定着が別課題になりやすい</td></tr></tbody></table></div><a class="button" href="#contact">自社に合う導入方法を聞く<span aria-hidden="true">→</span></a></div></section><section id="process" class="section type-process variant-process-timeline density-narrative has-generated-visual has-integrated-copy" data-section-index="11" data-role="導入の大変さへの不安を下げ、3か月で何が起きるかを見通せるようにする。" data-question="忙しい現場でも、どの順番で導入できるのか。" data-layout="process-timelineを選定。期間が明確で、導入順序を時系列で見せる必要があるため。" data-implementation="横長タイムライン。各フェーズの週数と成果物を明記する。" data-asset="12週間ロードマップ図"><div class="inner"><div class="integrated-copy-accessible"><div class="section-heading"><small>11 / 導入プロセス</small><h2>3か月で運用へ切り替える</h2><p class="lead">最初に業務を棚卸しし、優先部門を決めます。次に代表ユースケースを実装し、部門展開とメンバー教育を進め、最後に運用切替と効果測定の流れを作ります。導入後も月次伴走で改善を続けます。</p><p class="proof">オンボーディング期間は3か月。以降は月次2回の伴走MTGとSlackまたはChatworkでのサポートを想定しています。</p></div></div><div class="integrated-intro"><span>11 / 導入プロセス</span><p class="integrated-context">最初に業務を棚卸しし、優先部門を決めます。次に代表ユースケースを実装し、部門展開とメンバー教育を進め、最後に運用切替と効果測定の流れを作ります。導入後も月次伴走で改善を続けます。</p></div><div class="visual-pair visual-pair--process"><ol class="timeline process rich-timeline"><li><time>STEP 1</time><div><small>Week 1〜2</small><h3>業務棚卸しと優先部門の決定</h3><p>現場業務を整理し、最初に移管すべき部門と業務を決めます。</p></div></li><li><time>STEP 2</time><div><small>Week 3〜6</small><h3>代表ユースケースの実装</h3><p>優秀者の負担を下げるため、代表的な業務をSKILLとして実装します。</p></div></li><li><time>STEP 3</time><div><small>Week 7〜10</small><h3>部門展開とメンバー教育</h3><p>判断基準と手順をチームで使えるように整え、利用者への教育を行います。</p></div></li><li><time>STEP 4</time><div><small>Week 11〜12</small><h3>運用切替と改善ループ設計</h3><p>実運用へ移し、効果測定と継続改善の進め方を決めます。</p></div></li><li><time>STEP 5</time><div><small>Month 4〜</small><h3>月次伴走</h3><p>部門追加、SKILL追加、メンバー教育、効果測定を継続します。</p></div></li></ol><figure class="section-visual text-integrated"><img src="images/process.png" alt="12週間ロードマップ図" loading="lazy" decoding="async"></figure></div></div></section><section id="proof-screens" class="section type-proof variant-case-study-featured density-evidence" data-section-index="12" data-role="数値に頼らず、実際に何が動くのかを画面素材で証明する。" data-question="本当に現場で使える形になるのか、画面で見られるのか。" data-layout="case-study-featuredを選定。数値実績の公開確認が残るため、公開可能な画面と運用例を中心に信頼を作る。" data-implementation="大きな1画面と補助キャプチャ3点。機密情報は伏せ、画面の役割が分かる注釈だけを付ける。" data-asset="権利確認済みの実画面キャプチャ"><div class="inner"><div class="section-heading"><small>12 / 画面で見る仕組み</small><h2>画面で運用を確認できる</h2><p class="lead">相談時には、SKILL、WF、議事録、ダッシュボードなどの実画面をもとに、どの業務をどこまで移管できるかを確認できます。制作物や案件情報を扱うため、掲載素材は権利確認済みのものだけを使用します。</p><p class="proof">使用素材はPENGINロゴ、コーポレートカラー、実際のSKILL画面、WF、議事録、ダッシュボード画面を想定しています。</p></div><article class="case-featured"><div><small>PENGINの制作現場で利用する業務画面</small><dl class="case-story"><div><dt>課題</dt><dd>案件情報、会議記録、WF、進捗情報が部門ごとに散らばりやすい。</dd></div><div><dt>実施</dt><dd>ClaudeのSKILLとFigma、Notion、Drive、Chatworkを連携し、業務ごとの出力と共有の流れを整える。</dd></div><div><dt>結果</dt><dd>相談時に、SKILL、WF、議事録、ダッシュボードの画面を見ながら導入イメージを確認できる。</dd></div></dl><cite>株式会社PENGINのサービス資料</cite></div></article><a class="button" href="#contact">画面を見ながら相談する<span aria-hidden="true">→</span></a></div></section><section id="pricing-nextstep" class="section type-pricing variant-estimate-explainer density-information" data-section-index="13" data-role="料金未確定でも、無料相談後の判断ステップを示し、CV後の不安を下げる。" data-question="フォーム送信後、いきなり契約を迫られないか。" data-layout="estimate-explainerを選定。本契約料金の公開確定情報ではなく、相談後の進め方を説明するため。" data-implementation="価格表ではなく見積もり前の検討フローとして表示。本契約の金額は表示しない。" data-asset="相談から契約までのステップ図"><div class="inner"><div class="section-heading"><small>13 / 相談からの進め方</small><h2>まずは60分で可能性を整理</h2><p class="lead">最初の行動は、無料の60分相談です。現状をヒアリングし、AI化できる業務、優先順位、導入時の論点を整理します。その後、必要に応じて業務棚卸しワークショップや本契約へ進みます。</p><p class="proof">無料の60分相談、業務棚卸しワークショップ、本契約の順で検討できます。</p></div><div class="plans"><article><h3>60分無料相談</h3><p class="plan-price">無料<small>60分</small></p><p>現状ヒアリングを行い、AI化可能性と優先順位を整理します。</p><ul><li>現状課題のヒアリング</li><li>AI化候補の整理</li><li>導入論点の確認</li></ul><p class="plan-note">受付後1営業日以内に日程をご連絡します。</p><a class="button" href="#contact">無料相談を予約する</a></article><article><h3>業務棚卸しワークショップ</h3><p class="plan-price">15万円<small>実施内容に応じて調整</small></p><p>部門別にAI化候補を整理し、導入前の叩き台を作ります。</p><ul><li>AI化候補業務の整理</li><li>部門別の優先順位づけ</li><li>ROI試算の叩き台作成</li></ul><p class="plan-note">無料相談後、必要に応じて案内します。</p><a class="button" href="#contact">相談で詳しく聞く</a></article></div></div></section><section id="fit" class="section type-fit variant-segment-selector density-narrative" data-section-index="14" data-role="不適合な期待を防ぎ、導入後のミスマッチを減らす。" data-question="自社はこの支援に向いているのか。" data-layout="pain-checklistを選定。検討者が自社適合を短時間で判断できるため。" data-implementation="向いている条件と向いていない条件を左右で分ける。否定的に見せず、期待値調整として掲載する。" data-asset="チェックリストUI"><div class="inner"><div class="section-heading"><small>14 / 向いている会社</small><h2>運用責任者がいる会社向け</h2><p class="lead">AI導入だけで組織課題が自動的に解決するわけではありません。現場の業務を一緒に棚卸しし、使い方を定着させる責任者を置ける会社ほど、本支援を活かしやすくなります。</p></div><div class="cards fit-items"><article><small>向いている</small><h3>優秀者依存を減らしたい会社</h3><p>新規案件と若手教育が同じ人に集中している会社に適しています。</p></article><article><small>向いている</small><h3>業務の型化に取り組める会社</h3><p>現場の手順や判断基準を言語化し、チームで使う意思がある会社に適しています。</p></article><article><small>向いていない</small><h3>AIだけで自動解決すると考える会社</h3><p>業務設計、教育、運用改善に取り組まない場合、導入効果は限定的です。</p></article><article><small>向いていない</small><h3>運用責任者を置けない会社</h3><p>日々の利用促進や改善判断を担う人がいない場合、定着が難しくなります。</p></article></div></div></section><section id="faq" class="section type-faq variant-faq-list density-information" data-section-index="15" data-role="フォーム前に残りやすい不安を解消する。" data-question="導入前に確認しておきたい点は何か。" data-layout="sample-ctaを選定。FAQ後に相談行動へ自然につなげるため。" data-implementation="アコーディオン形式。各回答は1画面内で読み切れる長さにし、最後にCTAへ接続する。" data-asset="FAQアコーディオン"><div class="inner"><div class="section-heading"><small>15 / FAQ</small><h2>よくある不安に答えます</h2><p class="lead">導入範囲、既存ツール、機密情報、送信後の流れについて、無料相談前によくある質問をまとめました。</p></div><div class="faq"><details><summary><span>Q1</span>既存のFigmaやNotionを使えますか。</summary><p>Figma、Notion、Drive、Chatworkなど、制作会社の現場で使うツールとの連携を前提に設計します。</p></details><details><summary><span>Q2</span>Claudeを使ったことがないメンバーでも参加できますか。</summary><p>3か月の導入期間内で、部門展開とメンバー教育を行います。</p></details><details><summary><span>Q3</span>機密情報の扱いはどうなりますか。</summary><p>案件情報やクライアント情報を扱うため、機密保持と技術的なアクセス制御を導入時に取り決めます。</p></details><details><summary><span>Q4</span>フォーム送信後はどうなりますか。</summary><p>受付後1営業日以内に、制作会社のAI化可能性を整理する60分相談の日程をご連絡します。</p></details></div></div></section><section id="message" class="section type-message variant-editorial-message density-statement" data-section-index="16" data-role="最後のフォーム前に、AI導入の目的を利益だけでなく組織づくりとして再定義する。" data-question="この会社はツール導入だけを売っているのか。" data-layout="cta-bannerを選定。最終CTA直前に行動理由を再提示するため。" data-implementation="短いメッセージとCTAの前振りとして配置。感情訴求に寄せすぎず、経営判断の文脈に保つ。" data-asset="制作現場とナレッジ化を示す写真または画面"><div class="inner"><article class="editorial-message"><blockquote>人を置き換えず、知見を残す</blockquote><div><p>PENGINが支援するのは、制作会社の人をAIに置き換えることではありません。優秀者の頭の中にある手順と判断基準を残し、チームが使える形へ変えることです。人が担うべき顧客理解、意思決定、品質判断に時間を戻します。</p><cite></cite></div></article></div></section><section id="contact" class="section type-form variant-form-split density-information" data-section-index="17" data-role="即決型、中間型、心配性型の全員が、十分な情報を得た後にCVできる場所を用意する。" data-question="何を入力すればよく、送信後に何が起きるのか。" data-layout="form-splitを選定。左に相談で分かること、右にフォームを置き、入力前の不安を同時に解消できるため。" data-implementation="フォーム項目は5つ以内。必須項目を明示し、送信ボタン直下に送信後の流れとプライバシーポリシーリンクを置く。" data-asset="フォームUI"><div class="inner"><div><div class="section-heading"><small>17 / 無料相談フォーム</small><h2>60分無料相談を予約する</h2><p class="lead">会社名、お名前、メールアドレス、現在の課題、相談希望日時を入力してください。受付後1営業日以内に、制作会社のAI化可能性を整理する60分相談の日程をご連絡します。</p><p class="proof">プライバシーポリシー: https://pengi-n.co.jp/privacy-policy/</p></div><p>5項目フォームと送信後の流れを明記する。</p></div><form class="lead-form" action="" method="post" data-success="受付後1営業日以内に、制作会社のAI化可能性を整理する60分相談の日程をご連絡します。"><label><span>会社名</span><input name="field-1" type="text" required></label><label><span>お名前</span><input name="field-2" type="text" required></label><label><span>メールアドレス</span><input name="field-3" type="email" required></label><label><span>現在の課題</span><input name="field-4" type="text" ></label><label><span>相談希望日時</span><textarea name="field-5" rows="4" required></textarea></label><label class="consent"><input type="checkbox" required><span><a href="https://pengi-n.co.jp/privacy-policy/" target="_blank" rel="noopener">個人情報の取り扱い</a>に同意する</span></label><button type="submit">送信する</button><p class="form-note">入力時間 約2分 / 送信後に受付完了を表示します</p><p class="form-status" role="status" aria-live="polite"></p></form></div></section></main><footer class="site-footer"><span>© 2026 株式会社PENGIN</span><a id="privacy" href="https://pengi-n.co.jp/privacy-policy/">個人情報の取り扱い</a></footer><script>document.querySelectorAll('.lead-form').forEach(function(form){form.addEventListener('submit',function(event){if(!form.getAttribute('action')){event.preventDefault();form.querySelector('.form-status').textContent='送信先が未設定です。管理者へお問い合わせください。';return}form.querySelector('.form-status').textContent='送信しています…'})});</script></body></html>