WEBSITE · 49.4 KB
output/real-e2e-v2/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="優秀ディレクターが担う定型業務と判断基準を、御社専用のSKILLと専門エージェントへ移管。3か月の伴走で、案件進行と若手育成を支えるAIチームを現場に組み込みます。"><meta property="og:type" content="website"><meta property="og:title" content="制作会社専用 Claude導入・伴走支援"><meta property="og:description" content="優秀ディレクターが担う定型業務と判断基準を、御社専用のSKILLと専門エージェントへ移管。3か月の伴走で、案件進行と若手育成を支えるAIチームを現場に組み込みます。"><meta property="og:url" content=""><meta name="twitter:card" content="summary_large_image"><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":"優秀ディレクターが担う定型業務と判断基準を、御社専用のSKILLと専門エージェントへ移管。3か月の伴走で、案件進行と若手育成を支えるAIチームを現場に組み込みます。"}</script><style>:root{--ink:#13251f;--accent:#f0643a;--paper:#f4f1e8;--line:color-mix(in srgb,var(--ink) 18%,transparent);--heading-font:'Noto Sans JP',sans-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-documentary"><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">解決の仕組み</a><a href="#differentiation">PENGINの支援範囲</a><a href="#proof-operation">自社運用例</a><a href="#faq">よくある質問</a></nav><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><section id="hero" class="section type-hero variant-hero-product-stage" data-role="流入直後に、対象企業、提供価値、導入方法、次の行動を理解させる。" data-question="自社のような制作会社向けで、何をしてくれるサービスなのか。" data-layout="実在する業務画面を主役にし、抽象的なAI表現ではなく現場で何が動くかを最短で理解させるため、hero-product-stageを選定する。" data-implementation="ファーストビュー内に対象、3か月の支援内容、60分無料相談CTAを表示する。主要画面はPCでファーストビュー内、スマートフォンでは見出し直後に配置する。" data-asset="PENGINロゴ、権利確認済みの実際の制作画面、SKILL実行画面、業務フロー画面"><div class="inner"><div class="hero-visual-bg"><figure class="section-visual"><img src="images/hero.png" alt="中央に実際のClaude SKILL実行画面、周囲にFigmaのワイヤーフレーム、Notionの案件ページ、Driveの案件フォルダ、Chatworkの共有メッセージを配置する。人物を入れる場合は日本の小規模制作会社のディレクターと若手メンバーを各1名に限定する。" loading="eager" decoding="async"></figure></div><div class="hero-copy"><div class="section-heading"><small>01 / 制作会社専用 Claude導入・伴走支援</small><h1>制作会社の判断をClaudeへ</h1><p class="lead">優秀ディレクターが担う定型業務と判断基準を、御社専用のSKILLと専門エージェントへ移管。3か月の伴走で、案件進行と若手育成を支えるAIチームを現場に組み込みます。</p><p class="proof">株式会社PENGINの制作現場で運用する業態別SKILLをもとに、Figma・Notion・Drive・Chatworkを含む業務フローへ組み込みます。</p></div><a class="button" href="#contact">60分無料相談を予約する<span aria-hidden="true">→</span></a></div></div></section><section id="trust-context" class="section type-trust variant-trust-metric-band" data-role="即決型の読者へ、一般的なAI導入支援ではない理由を早期に示す。" data-question="制作業務を理解している相手に任せられるのか。" data-layout="抽象的な信頼表現ではなく、現場で動く仕組みを縦に積み上げて示すためreason-stackを選定する。" data-implementation="各項目に対応する実画面をサムネイルで添える。画面は拡大表示でき、機密情報をマスキングしたものを使用する。" data-asset="実際のSKILL一覧、案件初期化画面、議事録生成画面、ワイヤーフレーム作成画面"><div class="inner"><div class="section-heading"><small>02 / 制作会社の現場から設計</small><h2>机上ではなく、制作現場が起点</h2><p class="lead">PENGIN自身が使う案件初期化、アジェンダ、議事録、ワイヤーフレーム、コーディング着手、公開前チェックの仕組みを、御社の業務へ合わせて再設計します。</p><p class="proof">株式会社PENGINでは、制作案件に関わる複数のSKILLと専門エージェントを社内運用しています。</p></div><div class="cards trust-items"><article><small>ディレクション</small><h3>会議前後の流れをつなぐ</h3><p>アジェンダ作成から議事録、共有文面、案件情報への反映までを、一連の業務として設計します。</p><strong>PENGINではアジェンダ作成と議事録作成のSKILLを運用しています。</strong></article><article><small>設計</small><h3>ワイヤーフレーム作成を型にする</h3><p>業態判定、構成承認、ページ展開、確認項目の照合まで、担当者の頭の中にある進め方を手順化します。</p><strong>PENGINではワイヤーフレーム作成SKILLを運用しています。</strong></article><article><small>実装</small><h3>着手と公開前確認を標準化</h3><p>環境構築、実装規約、公開前チェックを業務フローへ組み込み、確認すべき観点を共有します。</p></article></div></div></section><section id="problem" class="section type-problem variant-pain-cards" data-role="表面的な忙しさを、優秀者の稼働と教育が競合する経営課題として言語化する。" data-question="なぜ受注できても、新規案件と若手育成を両立できないのか。" data-layout="複数の症状が同じ構造から生じていることを短時間で照合できるためpain-cardsを選定する。" data-implementation="カードを独立した症状として並べ、中央または末尾に「優秀者の稼働が共通の制約」という収束図を置く。" data-asset="優秀ディレクターへ業務が集中する関係図"><div class="inner"><div class="section-heading"><small>03 / 成長を止める構造</small><h2>売上も育成も、同じ人で詰まる</h2><p class="lead">優秀ディレクターが既存案件を支えながら、提案、レビュー、教育まで引き受ける。解決に必要な知見も本人の中にあるため、忙しいほど改善を始められません。</p></div><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>若手へ教えられる人と、既存案件を支える人が同じため、教育が後回しになります。</p></article><article><small>組織知</small><h3>案件の知見が散らばる</h3><p>判断の理由や手順が個人の記憶、チャット、案件フォルダに分散し、次の案件で再利用しにくくなります。</p></article></div></div></section><section id="risk" class="section type-risk variant-risk-timeline" data-role="問題を放置した場合に、案件、教育、組織へ影響が広がる順序を示す。" data-question="今の運用を続けると、何が起きるのか。" data-layout="単発の問題ではなく、時間とともに制約が強まる構造を示すためrisk-timelineを選定する。" data-implementation="時間軸に沿って4段階を表示し、各段階から優秀者へ確認が戻る循環線を加える。恐怖を煽る写真は使用しない。" data-asset="業務集中が循環するタイムライン図"><div class="inner"><div class="section-heading"><small>04 / 先送りの影響</small><h2>忙しさが、次の忙しさをつくる</h2><p class="lead">繁忙期を人の頑張りで越えるだけでは、判断基準が残りません。案件が増えるたびに確認が優秀者へ戻り、育成と改善の時間がさらに減っていきます。</p></div><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></section><section id="mechanism" class="section type-mechanism variant-before-after" data-role="AI導入ではなく、業務移管とチーム展開を順に進めるサービス構造を理解させる。" data-question="Claudeを入れるだけで、属人化はどう変わるのか。" data-layout="導入前後の業務経路の違いを視覚的に比較できるためbefore-afterを選定する。" data-implementation="BeforeとAfterを同じ業務例で対比する。AfterではAIが最終責任者ではなく、手順の実行と判断支援を担うことを明示する。" data-asset="個人依存からAI経由のチーム共有へ変わる業務フロー図"><div class="inner"><div class="section-heading"><small>05 / 解決の仕組み</small><h2>まず解放し、次に知見を広げる</h2><p class="lead">最初に優秀者が繰り返す定型業務を移管し、改善に使える時間をつくります。その後、判断基準と確認手順を共有SKILLへ組み込み、若手や中堅が参照できる状態へ広げます。</p><p class="proof">支援は、優秀者の定型業務移管と、判断基準のチーム展開という2段階で進めます。</p></div><div class="before-after"><article><small>BEFORE</small><h3>判断も作業も優秀者へ戻る</h3><p>担当者が変わるたびに説明とレビューが発生し、改善や教育の時間を確保できません。</p></article><article><small>AFTER</small><h3>AIが手順を実行し、人が判断する</h3><p>Claudeが定型フローと確認項目を扱い、担当者は例外対応や最終判断へ集中します。</p></article></div></div></section><section id="cta-diagnosis" class="section type-cta variant-sample-cta" data-role="課題を認識した読者へ、自社で移管できる業務を知る低ハードルな行動を提示する。" data-question="自社では、どの業務から始められるのか。" data-layout="相談で得られる整理結果を先に示し、資料請求より具体的な次の行動へつなぐためsample-ctaを選定する。" data-implementation="相談内容、所要時間、送信後の流れをCTA付近に表示する。ボタンはページ内フォームへ移動させる。" data-asset="60分相談で扱う3つの論点を示す簡潔な図"><div class="inner"><div class="sample-cta"><div class="section-heading"><small>06 / 無料相談</small><h2>移管候補を60分で整理</h2><p class="lead">現在の案件進行、定型業務、教育状況を伺い、Claudeへ移しやすい業務と、先に人が整えるべき業務を整理します。</p><p class="proof">送信後、1営業日以内に60分相談の日程をご連絡します。</p></div><p>60分相談で扱う3つの論点を示す簡潔な図</p><a class="button" href="#contact">60分無料相談を予約する<span aria-hidden="true">→</span></a></div></div></section><section id="differentiation" class="section type-differentiation variant-feature-zigzag" data-role="中間型の読者へ、研修やツール導入とは異なる具体的な支援内容を示す。" data-question="一般的なAI研修やツール設定と何が違うのか。" data-layout="特徴と対応する実画面を一対一で説明し、機能の羅列を避けるためfeature-zigzagを選定する。" data-implementation="各特徴を実画面と交互に配置する。機能名だけでなく、制作業務のどこで使うかを本文に表示する。" data-asset="SKILL定義、専門エージェント構成、ツール連携、導入工程の実画面"><div class="inner"><div class="section-heading"><small>07 / PENGINの支援範囲</small><h2>学ぶだけでなく、業務へ移す</h2><p class="lead">操作研修で終わらず、御社のフォルダ、制作物、判断基準、連絡経路まで扱います。現場で繰り返し使えるSKILLを実装し、メンバー教育と運用切替まで伴走します。</p><p class="proof">業務棚卸し、SKILL設計・実装、外部ツール連携、メンバー教育、運用調整を支援範囲に含みます。</p></div><div class="zigzag rich-zigzag"><article><span>01</span><div><small>業態別SKILL</small><h3>制作業務の手順からつくる</h3></div><div><p>案件初期化、アジェンダ、議事録、ワイヤーフレーム、実装着手、公開前確認など、制作会社で繰り返す単位で設計します。</p><strong>PENGIN社内で同種のSKILLを運用しています。</strong></div></article><article><span>02</span><div><small>専門エージェント</small><h3>部門ごとに役割を分ける</h3></div><div><p>ディレクション、コーディング、マーケティング、デザインなど、部門ごとの資料と確認観点に合わせて役割を設計します。</p></div></article><article><span>03</span><div><small>業務ツール連携</small><h3>既存の仕事の流れに組み込む</h3></div><div><p>Figma、Notion、Drive、Chatworkなど、案件で使用する場所を参照・更新する流れまで設計します。</p><strong>対応ツールは導入時の権限と接続可否に応じて決定します。</strong></div></article><article><span>04</span><div><small>3か月伴走</small><h3>実装後の定着まで進める</h3></div><div><p>業務棚卸しから代表業務の実装、部門展開、教育、運用切替までを段階的に進めます。</p><strong>導入支援期間は3か月です。</strong></div></article></div></div></section><section id="usecase-direction" class="section type-usecase variant-usecase-story" data-role="サービスを日々の会議と設計業務へ置き換えて想像させる。" data-question="ディレクターの具体的な仕事は、どう変わるのか。" data-layout="個別機能ではなく、案件の一日を通した利用像を伝えるためusecase-storyを選定する。" data-implementation="1案件の時系列として会議前、会議後、設計着手をつなげる。各場面に人が確認する箇所を明示する。" data-asset="アジェンダ、議事録、ワイヤーフレームの実際の出力画面"><div class="inner"><div class="section-heading"><small>08 / 適用例:ディレクション</small><h2>会議と設計の準備をつなぐ</h2><p class="lead">案件情報を探し直し、過去資料を読み、毎回ゼロから文書を整える流れを見直します。Claudeが必要資料を参照し、定めた手順で草案と確認項目を準備します。</p><p class="proof">PENGINではアジェンダ、議事録、ワイヤーフレーム作成のSKILLを運用しています。</p></div><div class="story-rail rich-story"><article><small>会議前</small><h3>案件資料から議題を組み立てる</h3><p>過去の議事録、進行状況、未決事項を参照し、会議の目的と確認事項を含むアジェンダ草案を準備します。</p></article><article><small>会議後</small><h3>決定事項を次の行動へつなぐ</h3><p>会議メモから議事録と共有文面を整え、担当者が内容を確認して関係者へ展開できる状態にします。</p></article><article><small>設計着手</small><h3>判断手順に沿って構成を進める</h3><p>業態、ページの役割、承認単位、確認項目を手順化し、ワイヤーフレーム作成を段階的に進めます。</p></article></div></div></section><section id="usecase-production" class="section type-usecase variant-usecase-grid" data-role="複数部門への展開可能性を、実務単位で示す。" data-question="ディレクション以外にも使えるのか。" data-layout="複数部門の適用範囲を同じ比較軸で確認できるためusecase-gridを選定する。" data-implementation="部門名、扱う資料、AIが準備するもの、人が判断するものを各カード内で区別する。" data-asset="部門別エージェントと各制作物の対応図"><div class="inner"><div class="section-heading"><small>09 / 適用例:制作・マーケ</small><h2>部門ごとの確認業務にも</h2><p class="lead">環境構築、公開前チェック、デザインレビュー、定例レポートなど、部門ごとに繰り返す作業と確認観点を専門エージェントへ持たせます。</p><p class="proof">PENGINの構想には、ディレクション、コーディング、マーケティング、デザインの部門別エージェントが含まれます。</p></div><div class="cards usecase-items"><article><small>コーディング</small><h3>着手条件と確認観点をそろえる</h3><p>環境構築、実装規約、テンプレート、公開前チェックを一連の手順として扱います。</p></article><article><small>マーケティング</small><h3>集計から報告草案までつなぐ</h3><p>利用中の分析データを定めた観点で整理し、レポートとクライアント向け要約の草案を準備します。</p></article><article><small>デザイン</small><h3>提案とレビューの観点を残す</h3><p>トーンの整理、Figma設計、レビュー時の確認項目を、担当者が参照できる形にします。</p></article><article><small>案件管理</small><h3>開始時と公開前の抜けを防ぐ</h3><p>案件フォルダの準備、必要資料、進行確認、公開前の確認事項を業務フローへ組み込みます。</p></article></div></div></section><section id="comparison" class="section type-comparison variant-comparison-table" data-role="代替手段を検討する読者へ、支援範囲の違いを同じ軸で提示する。" data-question="社内で生成AIを契約するだけでは足りないのか。" data-layout="代替手段との構造的な違いを同一軸で判断できるためcomparison-tableを選定する。" data-implementation="横スクロールに依存しないレスポンシブ表にする。スマートフォンでは比較軸ごとの縦型カードへ変換する。" data-asset="比較項目に対応する実画面または業務フロー"><div class="inner"><div class="section-heading"><small>10 / 汎用生成AIとの違い</small><h2>違いは、業務の中まで入ること</h2><p class="lead">汎用生成AIは個人の質問や草案作成に便利です。本支援では、案件資料の置き場所、部門別の手順、制作ツール、組織で共有する判断基準まで含めて設計します。</p><p class="proof">比較内容は、本支援の提供範囲と一般的な汎用生成AIの利用形態を対照したものです。</p></div><div class="table-wrap"><table><thead><tr><th>比較軸</th><th>制作会社専用 Claude導入・伴走支援</th><th>汎用生成AIの個人利用</th></tr></thead><tbody><tr><th>案件文脈</th><td>案件フォルダ、業務理解、過去記録を参照する流れを設計</td><td>必要な情報を利用者が都度入力</td></tr><tr><th>部門別の動作</th><td>部門ごとに手順と確認観点を定義</td><td>同じ対話画面を用途ごとに使い分け</td></tr><tr><th>制作ツール</th><td>Figma、Notion、Drive、Chatworkなどへの接続を業務単位で設計</td><td>生成結果を利用者が各ツールへ移す運用が中心</td></tr><tr><th>ナレッジ</th><td>SKILLと共有資料として組織で参照</td><td>個人のチャット履歴やプロンプトに蓄積</td></tr><tr><th>導入方法</th><td>業務棚卸し、実装、教育、運用切替まで伴走</td><td>契約後の用途設計と定着は社内で実施</td></tr></tbody></table></div></div></section><section id="proof-operation" class="section type-proof variant-case-study-featured" data-role="数値を使わず、PENGINが自社業務へ実装している事実を具体的に示す。" data-question="提案だけではなく、実際の制作現場で動いているのか。" data-layout="顧客事例の代わりに、支援元自身の実運用を深く見せるためcase-study-featuredを選定する。" data-implementation="事例の主役を実画面にし、課題、実装、運用結果を隣接表示する。効果数値は表示しない。" data-asset="権利確認済みのSKILL実行画面、実際の出力物、ツール間の処理フロー"><div class="inner"><div class="section-heading"><small>11 / 自社運用例</small><h2>PENGIN自身が、先に運用</h2><p class="lead">PENGINでは、案件初期化、会議準備、議事録、ワイヤーフレーム、実装着手、公開前チェックを個別のSKILLとして整備。案件資料と制作ツールを横断する定型フローとして使っています。</p><p class="proof">株式会社PENGINの社内制作業務で、複数の業務別SKILLが稼働しています。</p></div><article class="case-featured"><div><small>株式会社PENGINの制作業務</small><dl class="case-story"><div><dt>課題</dt><dd>案件資料と判断基準が業務ごとに分かれ、会議準備、記録、設計、実装確認を経験者が繰り返し担っていました。</dd></div><div><dt>実施</dt><dd>案件初期化、アジェンダ、議事録、ワイヤーフレーム、コーディング着手、公開前チェックを業務別SKILLとして整備し、制作ツールとつなぐフローを構築しました。</dd></div><div><dt>結果</dt><dd>各業務を、必要資料の参照、草案作成、人による確認まで含む定型フローとして社内運用しています。</dd></div></dl><cite>株式会社PENGINの社内運用</cite></div></article></div></section><section id="process" class="section type-process variant-process-timeline" data-role="心配性型の読者へ、いつ何を決め、何が残るのかを明示する。" data-question="導入期間中に、自社は何をする必要があるのか。" data-layout="期間と依存関係を明確にし、導入負荷を判断できるためprocess-timelineを選定する。" data-implementation="各フェーズに期間、実施内容、御社側の参加者、得られる成果物を表示する。スマートフォンでは縦型タイムラインにする。" data-asset="12週間の工程表、各フェーズの成果物サンプル"><div class="inner"><div class="section-heading"><small>12 / 3か月の導入工程</small><h2>12週間で、運用まで切り替える</h2><p class="lead">最初から全業務を置き換えません。優先部門と代表業務を決め、実際の案件で試しながら、部門展開、教育、運用切替へ進みます。</p><p class="proof">導入工程は、業務棚卸し、代表業務の実装、部門展開、運用切替の4段階です。</p></div><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>実案件で出力と確認方法を調整し、メンバー教育と共有SKILLへの展開を進めます。</p></div></li><li><time>STEP 4</time><div><small>Week 11〜12</small><h3>運用を切り替える</h3><p>利用責任、例外対応、効果の確認方法、改善方法を定め、日常業務へ移します。</p></div></li></ol></div></section><section id="cta-plan" class="section type-cta variant-cta-panel" data-role="仕組み、用途、比較、工程を理解した読者へ、具体的な検討開始を促す。" data-question="相談すると、契約前に何を判断できるのか。" data-layout="判断材料を十分に読んだ検討者へ、相談の成果と安心材料をひとまとまりで示すためcta-panelを選定する。" data-implementation="CTAの直前に相談内容、所要時間、送信後の流れを並べる。ページ内フォームへのアンカーリンクを設定する。" data-asset="相談後に整理される導入順のサンプル図"><div class="inner"><div class="section-heading"><small>13 / 導入相談</small><h2>自社向けの導入順をつくる</h2><p class="lead">現在の部門構成と業務の詰まりを伺い、最初に扱う業務、必要な連携、社内で置くべき運用責任者を整理します。相談時点で契約を決める必要はありません。</p><p class="proof">無料相談は60分です。受付後1営業日以内に日程をご連絡します。</p></div><div class="cta-panel"><a class="button" href="#contact">60分無料相談を予約する<span aria-hidden="true">→</span></a></div></div></section><section id="trust-security" class="section type-trust variant-trust-metric-band" data-role="機密情報、アクセス権、AIの誤りに対する不安へ答える。" data-question="クライアント情報を扱わせても大丈夫か。AIの出力を誰が確認するのか。" data-layout="異なる安全条件を同じ粒度で一覧できるためfeature-gridを選定する。" data-implementation="法的保証を連想させる盾アイコンだけに頼らず、誰が何へアクセスし、誰が確認するかを関係図で示す。" data-asset="権限設計図、承認フロー、情報区分のサンプル"><div class="inner"><div class="section-heading"><small>14 / 情報管理と責任分界</small><h2>権限と確認者まで設計する</h2><p class="lead">制作案件では、クライアント情報、未公開デザイン、契約資料を扱います。接続先とアクセス範囲を整理し、秘密保持、権限管理、人による最終確認を導入時の運用に組み込みます。</p><p class="proof">機密保持と技術的アクセス制御は、導入時に取り決める支援項目です。</p></div><div class="cards trust-items"><article><small>秘密保持</small><h3>取り扱う情報を先に定める</h3><p>案件情報やクライアント情報の範囲を整理し、必要な秘密保持条件を導入時に取り決めます。</p></article><article><small>アクセス制御</small><h3>必要な場所だけへ接続する</h3><p>ツールごとの権限と参照範囲を確認し、業務に必要な範囲で接続を設計します。</p></article><article><small>最終確認</small><h3>重要な判断は人が担う</h3><p>Claudeは定型処理と判断支援を担い、対外共有、公開、重要な意思決定は定めた担当者が確認します。</p></article><article><small>効果の扱い</small><h3>改善を測り、調整を続ける</h3><p>AI導入による工数削減や利益改善を保証せず、対象業務ごとに確認方法を決めて運用を調整します。</p></article></div></div></section><section id="fit" class="section type-fit variant-fit-split" data-role="適合条件と対象外条件を明示し、相談前の自己選別を助ける。" data-question="自社はこの支援に向いているのか。" data-layout="読者自身が短時間で条件を照合できるためpain-checklistを選定する。" data-implementation="向いている条件と対象外条件を視覚的に分ける。対象外を否定的に表現せず、導入前に必要な体制として説明する。" data-asset="適合条件を確認できるチェックリスト"><div class="inner"><div class="section-heading"><small>15 / 向いている会社・向かない会社</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>実案件で改善を続けられる</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" data-role="契約前に残る導入範囲、負担、ツール、品質、情報管理、支援後の疑問を解消する。" data-question="検討を進める前に、何を確認しておくべきか。" data-layout="質問数が多いため、テーマごとに縦に読み進められるreason-stackを選定する。" data-implementation="質問単位のアコーディオンとし、回答は初回の質問のみ開いた状態にする。キーボード操作と開閉状態の読み上げに対応する。" data-asset=""><div class="inner"><div class="section-heading"><small>16 / よくある質問</small><h2>導入前の疑問に答えます</h2><p class="lead">自社の業務へ適用できるか、既存ツールを変える必要があるか、AIの出力をどう扱うかなど、検討時に多い疑問をまとめました。</p></div><div class="faq"><details><summary><span>Q1</span>生成AIをほとんど使っていなくても導入できますか。</summary><p>導入できます。最初の業務棚卸しで利用状況を確認し、代表業務の実装とメンバー教育を段階的に進めます。</p></details><details><summary><span>Q2</span>現在使っている制作ツールを変更する必要がありますか。</summary><p>一律の変更は求めません。Figma、Notion、Drive、Chatworkなど現在の環境と接続可否を確認し、必要な範囲で業務フローを設計します。</p></details><details><summary><span>Q3</span>すべての業務をAIへ任せるのですか。</summary><p>いいえ。定型処理と判断支援をClaudeへ移し、例外対応、対外共有、公開、重要な判断は担当者が確認します。</p></details><details><summary><span>Q4</span>社内では誰が参加する必要がありますか。</summary><p>対象業務を理解する実務担当者と、権限管理や改善判断を担う運用責任者の参加が必要です。</p></details><details><summary><span>Q5</span>クライアント情報はどのように扱いますか。</summary><p>取り扱う情報、接続先、アクセス範囲を整理し、秘密保持と技術的アクセス制御を導入時に取り決めます。</p></details><details><summary><span>Q6</span>相談後はどうなりますか。</summary><p>受付後1営業日以内に60分相談の日程をご連絡します。相談では、移管候補、導入順、必要な社内体制を整理します。</p></details></div></div></section><section id="message" class="section type-message variant-expert-profile" data-role="機能比較を終えた読者へ、AIを導入する目的とPENGINの立場を伝える。" data-question="PENGINは、AIで制作会社をどう変えたいのか。" data-layout="最終判断前にサービスの思想を簡潔に残すためcta-bannerの構成を使い、ボタンを置かずメッセージへ集中させる。" data-implementation="文章を主役にし、背景画像は本文の可読性と内容理解を損なわない範囲で使用する。CTAは設置しない。" data-asset="優秀者と若手が同じ案件資料を見ながら検討する実写または実際の社内写真"><div class="inner"><div class="section-heading"><small>17 / PENGINの考え方</small><h2>優秀者を、判断へ戻す</h2><p class="lead">目指すのは、人を減らすことではありません。繰り返す準備と整理をClaudeへ移し、経験者が提案、顧客理解、例外判断、若手との対話に時間を使える制作体制をつくることです。</p></div><figure class="editorial-quote"><blockquote>繰り返す業務はAIへ。優秀者は、人にしかできない判断へ。</blockquote><figcaption>株式会社PENGIN</figcaption></figure></div></section><section id="contact" class="section type-form variant-form-split" data-role="相談内容、入力負荷、送信後、情報管理を示し、CVを完了させる。" data-question="何を入力し、送信後に何が起きるのか。" data-layout="相談で得られる内容と安心材料を左、5項目のフォームを右に置き、判断と入力を同一画面で完了できるためform-splitを選定する。" data-implementation="必須入力は5項目以内とする。会社名、お名前、メールアドレス、現在の課題、相談希望日時を設置し、送信前にプライバシーポリシーへの同意を取得する。送信完了時は完了画面を表示し、二重送信を防止する。" data-asset="PENGINロゴ、プライバシーポリシーへのリンク"><div class="inner"><div><div class="section-heading"><small>18 / 60分無料相談</small><h2>御社の移管候補を整理します</h2><p class="lead">現在の課題を簡単にお知らせください。制作会社の業務に詳しい担当者が、優秀者へ集中している仕事とClaudeへ移しやすい仕事を60分で整理します。</p><p class="proof">入力は5項目です。受付後1営業日以内に、60分相談の日程をご連絡します。</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>