Chapter 08

デザイン・資料・LP制作の実装術

ミチガエルAI講座 実践テキスト

本章の事例は、いずれもコーチング現場で実際に起きたものですが、匿名化の都合で業種・数量の一部を軽く変えている箇所があります。エッセンスは実話です。

§この章の位置づけ

図: 制作の道具 — 目的別の使い分け
画像
gpt-image-2
Codex 経由でOAuth内無料、写真調も文字入りもここ
資料
HTML → PDF
パワポ卒業。テンプレを1つ持てば量産できる
UI / LP
Claude Design
V0 / Lovable を卒業していい
動画
HyperFrames / HeyGen / Seedance
用途別に3本立てで使い分け
1つのツールですべてを賄わない。目的で切り替える。

コーチングに来られる経営者の方に、最初の数回で必ずお話しすることがあります。「営業資料も、LPも、動画広告も、いままでの作り方はいったん全部忘れてください」。2026年8月時点でふり返ると、直近半年で資料とデザインの制作フローは別物になりました。パワポ・Figma・V0/Lovableをつなぎ、外注デザイナーに月何十万円払っていた仕組みが、AI一気通貫で数日・1人で回せます。

実際に手を動かしてもらうと、SNSマーケティング会社の社長は、社内で200本超溜めていたパワポ資料をHTMLベースの資料ジェネレーターに置き換える方向へ舵を切りました。広告運用事業の責任者は、あるBtoCクライアントの新規LP案件で、通常30万円・2週間の制作物を、Codexで5日で方向性OKまで持っていきました。人材紹介会社の経営者は、gpt-image-2の画像をYouTube台本・会社説明・M&A社内資料の3案件に同時投入して社内から高評価を得ています。

この章では、いま経営者が実際に使う「デザイン・資料・LP制作の新しい標準フロー」を4つの型に絞ってお伝えします。順番は現場で使う頻度順です。ご自身の会社の「デザイン外注費」「資料作成の残業」「LPの改修待ち」を思い浮かべながら読んでください。職種や案件の性質によりますが、多くの工程が内製に戻せます。


§8-1 画像生成は gpt-image-2 一択、しかも Codex 経由が正解

gpt-image-2 を使ってください。

§何を、なぜ、どう使うのか

まず画像生成です。「AI画像生成」と聞くと別系統の画像生成AIをいくつか思い浮かべる方が多いのですが(具体的な名前は章末の「ツールの現在地」にまとめました)、経営者の実務で使うなら結論は一つだけです。gpt-image-2 を使ってください。理由はシンプルで、文字が崩れないからです。

日本語も英語もロゴ風の文字組みも、他モデルが苦手な領域を gpt-image-2 だけは正確に描きます。営業資料の見出し、YouTubeサムネイル、会社説明のカバー、LPのヒーロー画像(ページ最上部のメインビジュアル)。実務で使う画像はほぼ「文字入り」なので、文字が崩れた瞬間に使い物にならなくなります。ここが決め手です。

運用ステップは三段階で覚えてください。①Claude Codeに手元のドキュメントを読ませ、画像生成プロンプトを作らせる。②生成する。③貼る。①が抜けている方が非常に多いです。プロンプトを自分で頭から書くと必ず薄くなります。「うちの会社案内の3ページ目に合う画像を、この文書を踏まえてプロンプト化して」とAIに丸投げしたほうが良いプロンプトが出ます。プロンプト設計はAIの得意分野です。人間がやる仕事ではありません。

推奨形は、Codex経由でClaude Codeから画像を呼び、そのままNotionまで書き込む一気通貫運用です。ここまで組めば、「資料作りたい」の一言で、文章もレイアウトも画像も揃った状態でNotionに落ちてきます。

LP制作なら、カンプ(デザインの完成イメージ見本)を全部 gpt-image-2 で起こし、Codex か Claude Code で HTML 化してページに当てはめるのが現時点(2026年8月時点)の最適解です。案件によっては、これまで外部デザイナーに依頼していた工程がほぼ丸ごと内製化できます。


§8-2 PPTX を卒業する。資料は HTML で作って PDF に落とす

PPTX で作るのはもうやめてください。

§何を、なぜ、どう使うのか

次は営業資料・提案資料の作り方です。結論を先に。PPTX で作るのはもうやめてください。AIが一番得意なのはコードだからです。パワポは人間のためのフォーマットで、AIから見ると触りづらく、修正指示を投げても細部がずれます。HTMLは AIが最も自然に読み書きできる形式です。営業資料は HTML で作り、渡すときに PDF に書き出す。この運用に切り替えると、修正の速度が段違いになります。

「見た目のズレが怖い」というご質問をよくいただきますが、CSS でスライドサイズを規定しておけばずれ問題はほぼ起きません。むしろパワポの方が、フォントが違うマシンで開いた瞬間に崩れます。HTMLの副次メリットも大きく、アニメーションを付けられる、商談後にURLで共有できる、共有先でコメントを書き込ませられる。パワポでは絶対にできない体験になります。

ツールは、候補を2つ持っておいて、同じ文章で同時依頼し、好きな方を使うのが早いです。片方に賭ける必要はありません。両方に投げて良かった方を採用する。資料特化サービスをわざわざ選ぶ必要もありません。Claude Code か Codex 経由で回せば、それより早く自由な仕上がりになります。

そしてもう一つ、資料や社内ドキュメントの品質を安定させたいなら、DESIGN.md をリポジトリ(=GitHub上のプロジェクト保管場所。詳しくは第9章)やプロジェクトフォルダに置くことを強く推奨します。Markdown(マークダウン=軽量な書式付きテキスト形式) で、ブランドカラー、フォント、余白、見出しの階層ルール、トンマナ(トーン&マナー=全体の雰囲気の指針)、禁止事項を明文化しておくと、Claude Code や Codex がその都度参照してくれます。

人間が毎回口頭で指示する必要が消え、担当者が変わってもデザインが揺れません。「デザインの一貫性はDESIGN.mdで担保する」。これがAI時代の内製ルールです。


§8-3 Claude Design を使う。V0 / Lovable は卒業していい

Claude Design は、この2つを構造的に解決します。

§何を、なぜ、どう使うのか

LP制作に話を移します。「AIでLP作るなら V0 か Lovable」が、2026年前半までの常識でした。ただ実案件で使い込むと、これらには実務上つらい欠点が2つあります。1つ目はCTAが目立たないこと。パッと見はきれいでも、コンバージョン設計で見るとボタンが埋もれ、CVR(コンバージョン率=成約や申込みに至る割合)が伸びません。2つ目はAIアニメーションを盛り込みすぎ、スマホで重くなること。BtoC案件だと致命的です。

Claude Design は、この2つを構造的に解決します。設計思想が違い、「見栄えのカッコよさ」より「実際に使うページとしての作り」を優先しています。

CTAはちゃんと目立ち、モーションは控えめで、スマホでも軽い。ここからは2026年8月時点の見立てですが、世界的に使われてきた V0 / Lovable のシェアを急速に奪いつつあり、Figma の株価にも影響が及びうると指摘する声も出てきています(市場の評価は動くので、判断のたびに最新状況を確認してください)。

ただし注意点もあります。Claude Design は、こちらが意図していない配置に飛ぶことがあります。細部のコントロールが効きにくい瞬間があるのです。そういう場面では、Codex に直接HTMLを生成させたほうが挙動が素直で速いことも多い。「Claude Design か Codex 直生成か」は宗教戦争にせず、案件ごと・セクションごとに使い分けてください。現時点でよく落ち着く組み合わせは、章末の「ツールの現在地」に挙げています。


§8-4 動画広告ツールを使い分ける(HyperFrames / HeyGen / Seedance)

用途別に、いま最強のツールを使い分けるのが正解です。

§何を、なぜ、どう使うのか

最後は動画広告です。ここは「1つのツールで全部やる」時代が終わっています。用途別に、いま最強のツールを使い分けるのが正解です。現場で推す組み合わせは、「テロップ・字幕入れ」「人・アバター動画」「テキストから動画を生成」の3用途に分かれます。どの用途にいまどのツールを当てるかは、章末の「ツールの現在地」にまとめました。ここで押さえてほしいのは、用途を先に決めてから道具を選ぶ順番のほうです。

忘れてはならないのが、動画の質を決めるのは結局「台本」だということ。ツールが進化しても台本が薄ければ結果は薄い。台本ライティングも AI で強化できます。動画分析用のMCP(AIと外部ツールをつなぐ規格。前章までで触れたAI連携の仕組みの一つ)を使えば、競合の伸びている動画をそのままAIに学習リファレンスとして食わせられます。台本の水準を一段上げてから生成ツールに渡してください。