Claude CodeとMarpでAIスライドのサイズ崩れを根本解決する方法

AIスライド作成でまず誰もが直面するサイズバラバラ問題

AIで資料を作るのが当たり前になってきた今、最初の「あるある」がある。スライドのサイズがページごとにバラバラになること。見た目が整っているように見えて、実は2枚目と4枚目でビミョーに縦横が変わってる、なんてことが普通に起きる。

高崎さんはLIVEの冒頭でこの問題を提起した。GensparkとClaudeは特にこの傾向が強いと言う。ただっちさんが愛用しているGammaは比較的サイズが揃っているとのことだが、それでも「完全に揃う」とは言い切れない部分もある。

高崎さん（01:41〜）

「スライドを作るときに、普通のスライドのこのサイズがあるじゃないですか。このサイズで統一されないんですよね。GensparkとClaudeは。そこ綺麗に出ますか、全部。」

この問いに対してただっちさんが「Gammaは必ず統一されてますね」と答えるシーンは、ツール選びの実感がそのまま出ていて、私もうなずきながら見ていました。

高崎さん（03:41〜）

「なのでGammaはそのあたりでもお手軽に作るっていうところで言うと、かなりやっぱりいいですね。ただなんかちょっと、スライドってAIが作った感をなるべく足したくないですか? で、なんかちょっと全部同じようなデザインになっていきやすいんですよね。」

「AIが作った感をなくしたい」という話は、ツールの優劣より人の感覚の問題だと感じました。

いやー、これ、めっちゃ分かるんですよ…。せっかくAIがサッと作ってくれても、「あ、これAIのやつだ」ってバレた瞬間、ちょっと冷めるでしょ。資料って中身だけじゃなくて、整ってるかどうかで信頼が変わる。だからこそ高崎さんは、このサイズのズレっていう地味〜な問題を、いちばん最初にドンと置いた。中身の前に、まず見た目の信頼。そこを外さないんですよね。

実際にLIVEの中でただっちさんが画面を共有してCanvaで作ったスライドを見せると、高崎さんがすぐに指摘した。「1枚目と4枚目でサイズ違いませんか?」。ただっちさんが確認すると「ちょっと違いますね、4枚目が大きくなってますね」。Canvaですらこれが起きる。どのツールも、情報量に応じてスライドのサイズが微妙にズレていく。これが「AIスライドのあるある」だと高崎さんは言う。

高崎さん（06:06〜）

「これが意外にAIスライドに多いですね。意外となんか僕はこのスライド違いが実際にウェブとかでセミナーとかをするときにめっちゃ気になるんですよね。」

セミナーで実際に使う立場からの感覚として、このコメントはリアルだと思います。スライドを画面共有した瞬間に、サイズのズレが視聴者にスッと伝わっちゃう。

でね。ここがこのLIVEの出発点なんです。サイズが揃わない——たったそれだけ。でも、それが気になって仕方ない人が、ちゃんとした解決策まで地続きで見せてくれる。この「あるある」を「まあいっか」で放置しないところに、私はぐっときました。地味な引っかかりを、ちゃんと最後まで潰しにいく。そういう人の話って、信頼できるんですよね。

▶ この話題を動画で見る（01:41〜）

Claude Codeとターミナルでマークダウンファイルを一元管理する

サイズバラバラ問題に対して高崎さんが出した答えが、Claude Code＋マークダウンファイル（.mdファイル）という組み合わせだった。「皆さんに嫌われる画面を開きました」と笑いながらターミナルを見せたシーンが印象的だった。

高崎さんが説明したのは、Claude Codeは本質的に「ターミナルで動くもの」だということ。難しいプログラミングとは関係なく、テキストを指示するだけでファイルを作ってくれる。今回のLIVEではビジネスプランコンテストの募集要項をコピーして、それをClaudeに「.mdファイルにまとめて保存して」と指示するだけで、マークダウンファイルが自動生成されていた。

高崎さん（07:38〜）

「Claude Codeはどうしてもこういうここのターミナルっていうので実行するやつになるので、このターミナルの機能が入っているコードエディターとかを使います。ただこれ今僕がやってんのは、プログラミングではないんですね。これはね実はこれ全部、ちょっとプレゼン大会があるビジネスプランコンテストとかってあるんでこれの資料を作ってます。」

プログラミングをしているように見えて、やっていることは「文章の整理」なんですよね。この感覚、大事だと思います。

なぜ.mdファイル（マークダウン）にするのかというと、AIが読みやすい形式だから。ただっちさんが「AIが分かりやすい形式」とまとめたのをきっかけに、高崎さんが詳しく解説した。

高崎さん（08:44〜）

「.MDファイルっていうのはマークダウンファイルっていうファイルにして、書き方は例えばタイトルだったらシャープ、今これビジネスプランコンテストの募集要項をそのまままとめたので、例えばシャープ募集要項、シャープシャープ募集条件みたいなので、どんどんタイトルとかをシャープで区切っていく書き方がマークダウン。なぜこれにするかっていうと、AIが好きな形式だから。」

シャープ記号でタイトルの階層を作る、というのはChatGPTの出力にも出てくる「あのちょんちょん」と同じだと高崎さんが説明した瞬間、ただっちさんも「なるほど、裏側ではね」と納得していた。この「裏側がマークダウンだった」という感覚、私も持ち直した気がしました。

高崎さん（09:44〜）

「結構、実はAIが作ったテキストデータはすべてMDファイルっていうのにまとめて、こういうのですね。シャープがついてタイトルが来てる。シャープシャープが来たら小タイトルが来る。シャープシャープシャープだとさらに下のタイトルが来る。段落で箇条書きみたいに書いていく書き方がマークダウン。結構いろんなパソコン上のテキストみたいなのも、文字で皆さんには見えてるけど、内側ではこのマークダウン式で書かれてたりとかもします。」

「見た目はきれいなんだけど、裏ではシャープとハイフンで書かれている」という話は、AIツールを使っている人には刺さる説明だと感じます。

▶ この話題を動画で見る（07:38〜）

自分の文体をMDファイルに読み込ませてスタイルを学習させる

Claude Codeのすごいところは、ファイルを読み込ませる機能だと高崎さんは言う。募集要項のMDファイルを作るだけでなく、過去のFacebook投稿や講座資料、ライティングルールまで、すべて.mdファイルにして同じフォルダーにぶちこんでおく。そうするとClaudeがその「口調・文体・スタイル」を読み取った上でコンテンツを作ってくれる。

高崎さんがおもしろいのは、「まずMDファイルを作って」って言いながら、実はもう作り終わってて「これです」ってサッと出してくるテンポ感なんですよね。9（Claude）に「まとめて保存して」って投げると、画面がガーって動いて、左側にMDファイルが追加されていく。それがその場で生まれていく様子を見せてくれる。LIVEらしいリズムがあって、見ていて気持ちいいんですよ。

高崎さんがフォルダー管理の話をしたとき、自分でも「あ、これ使えるな」と思ったのが「ライティングルール.md」の存在だった。FacebookやSNSの投稿、過去に作った講座資料などをClaudeに読ませて「この人の口調・文体・癖を説明してください」と言うと、Claudeがまとめてくれる。それをライティングルール.mdとして保存しておく。

高崎さん（11:05〜）

「この同じフォルダーの中にどんどんどんどんそうやって、例えばさっきのこのビジコンの募集要項であったりとか、あと僕が出す予定の事業計画みたいなのもブラって書いておいたりとか、あと僕が入れたのがこれライティングルール。これは僕がいろいろ投稿したFacebookであったりとか、今まで作った資料とかをいくつか読ませて、なんとなく僕の口調、文体、それらを説明させたやつ。役立ちそうな情報をとにかく全部MDファイルみたいにしてぶっこんどくんですよ。」

「ぶっこんどく」という言い方がいい。小難しいプロンプトエンジニアリングじゃなくて、ファイルを置くだけ。この発想の転換が気持ちいいんですよね。

さらにこの応用として高崎さんが話したのが、SNS投稿用・講座用・スライド用で「フォルダーを分ける」という戦略だった。Claudeはその中の全フォルダーを読んだ上で、「今日はSNS投稿モードで」「今日はスライドモードで」という切り替えができるようになる。しかも前回何を書いたか、と被らないようにもしてくれる。

高崎さん（14:07〜）

「スライドのスタイルはスライドのスタイルで自分のを学習させて、文章の書き方は文章の書き方とか、SNSの投稿はSNSの投稿とか、ちょっと全部分けて。あと講座もですね。全部それをスタイルで分けて、それで僕がやる情報発信っていうのを全部一つのフォルダーにしておいて、クロードコードではその情報発信というフォルダーを読み込ませるんですよ。その上で、じゃあ今日はSNSのことやろうとか講座のことやろうとかスライド作ろうとかってやるのを、各フォルダーをさらにその中で開いてやるっていうやる、たぶんクロードコードが全部の僕のSNSとか情報発信系のやつのいろんな癖とかを全部読み取った上で、一貫性を持って他のやつ、前にやったこととかとかぶんないようにして、毎回新しくゴリゴリ作るっていうのをやってくれるはず。」

「前にやったこととかぶんないようにして」という部分、これが実は一番難しかった課題なんですよね。AIに毎回同じような内容を出させてしまう問題。フォルダー管理で解決するというアプローチは面白いと感じます。

▶ この話題を動画で見る（10:22〜）

MarpでMDファイルをスライドに変換してサイズ問題を解決する

ここからが今回のLIVEの核心部分だった。Claude Codeで作ったMDファイルを、どうやってスライドに変換するか。高崎さんが使っていたのがMarp（マープ）というVSCodeの拡張機能だ。

Marpは難しいツールではない。VSCodeにインストールして、.mdファイルをMarp形式で開くだけで、スライドのプレビューが表示される。しかもMarpはすべてのスライドを同じサイズで出力してくれる。これが、CanvaやGenspark、Claudeの「サイズバラバラ問題」に対する高崎さんの答えだった。

高崎さん（09:50〜）

「そのMARPっていうのは何なのかっていうと、MDファイルをスライドに変換してくれるものなんですね。なので、この今作られた資料のMDファイルっていうのをMARPで開くと、画像とかも今入れてってるんで、こんな動画でいきますと。」

「MDファイルをスライドに変換する」というだけのシンプルな説明なのに、実演を見るとすごく整ったスライドが出てくる。この落差がLIVEならではの説得力だと感じます。

高崎さん（11:50〜）

「こちらのマープで出すと、そもそもスライドはこのサイズで全部出ます。揃ってると思います。文字量が多かったりするとちょっと切れたり、全然切れて下にダーって書いてあったりします。それでもサイズは揃うので。」

「サイズは揃う」という点だけ担保してくれればいい。文字が切れるのは自分で調整すればいい。そういう割り切りが現実的だと思います。

Marpのすごいところはもう一つある。MDファイルの中にCSSを書き込めることだ。スライドの見た目——フォントサイズ、画像の配置、色のテーマ——を全部CSSで指定しておくと、Marpがその通りに変換してくれる。これが「自分のスタイル」を反映したスライドを量産できる理由だ。「—（三重ハイフン）がスライドの区切り」という説明もシンプルで、LIVEを見ていた視聴者が「あ、それだけか」と安心できるような展開だった。

高崎さん（15:42〜）

「ビジュアルがしっかりコントロールできるのはマークダウンに画像やビジュアルを指定したCSSがしっかり含まれているということで良いですか? その通りです。さすが、質問もちょっと難しめでありがとうございます。マークダウンっていうんだけど、あ、そっかこれでもうマークっていうのの書き方の中でここのスタイルっていう項目があって、この中にも入れるべきCSSを全部入れてますね。それで全部こうやっていろんな画像とかの大きさとか文字とかの感じを全部調整したのをここで作ってて、その後で今度はHTMLで配置してもらう。」

CSSとHTMLという言葉が出てくるけど、「見た目を調整する設定ファイル」として理解すれば十分だと思います。

▶ この話題を動画で見る（09:50〜）

MarpでPDF出力してCanvaで仕上げ、画像生成AIで「AIっぽさ」を消す

Marpでスライドが完成したら、次はPDFでエクスポートする。MarpにはPDF出力機能が標準で付いている。エクスポートしたPDFをCanvaに読み込ませると、サイズが統一されたまま各スライドが編集可能な状態になる。これが高崎さんの最終工程だった。

高崎さん（12:05〜）

「マープのエクスポートスライド見たら普通にPDFで出せちゃうんですよ。で、上書きしたやつを今エクスポートして、それを今度はキャンバー。これエクスポートされましたね。ちなみにイフ塾ができるまでの漫画も作ってみました。だいたいいい感じに出てるんで、そしたら今度は、キャンバーに1個アップロード中ってなってるんで表示しまして、これを光ると。」

「結局Canvaで仕上げるんかい」というツッコミを高崎さん自身が言ったのが正直すぎて笑えました。でもそれが現実だと思います。

ただっち（12:20〜）

「キャンバーのいいとこがあるですよね。PDFも編集できる。」

CanvaはPDFを読み込んで直接編集できる。これはあまり知られていない機能だと思います。

高崎さん（12:24〜）

「キャンバーはもう全部、それでPDFを読み込むと編集ができるようになるんで、もうこの揃ったサイズで、あとはもうキャンバーで仕上げる。結局仕上げるんかいって思うんですけど、多分結局仕上げるんかい。意外とずっと続きます、」

最終仕上げはCanvaでいい。でもCanvaに入る前の段階でサイズが揃っているのが今回のポイント。Marp→PDF→Canvaという経路を通すことで、「AIが作ったのにサイズが揃っている」という状態が実現する。

ぶっちゃけね、この流れの何がいいって——「サイズを揃える工程」と「自分らしさを足す工程」が、ちゃんと分かれてることなんですよ。Marpで土台のサイズをガッと揃えて、Canvaで細かいとこを仕上げて、画像生成で「AIっぽさ」を消す。一個ずつ役割がハッキリしてる。だから途中でぐちゃっとならない。料理で言うと、下ごしらえと盛り付けをちゃんと分けてる感じ。慌てないんですよね。やることが順番に並んでるから、迷わない。

さらに高崎さんが提案したのが、画像生成AIとの組み合わせだった。Flux 1という画像生成モデルをGenspark内で使い、スタイルを統一した画像を量産してスライドに差し込む。Gensparkで元になる画像を作り、「Fluxコンテキスト」という機能で一貫性を保ったまま変化させていく方法だ。

高崎さん（13:40〜）

「画像生成もcoigure.nfaiの中にいろんなものを入れて、特に最近僕はFlux 1がおすすめですけど、なのでGensparkで元になる画像を作って、それをFluxのコンテキストっていうので、一貫性を持ったまま変化させてとかってやって、画像をどんどん量産し、スライドにはめていくっていうやると、え? AI? 手書き? どっち? みたいなやつが作れる。」

「AI? 手書き? どっち?」と思わせることができれば、AIっぽさの問題は解決したも同然ですよね。この表現が今回のLIVEで一番刺さりました。

▶ この話題を動画で見る（12:05〜）

Gemini CLIはClaude Codeの無料代替として今すぐ試す価値がある

今回のLIVEで高崎さんが最後に触れたのが、Gemini CLIという選択肢だった。Claude Codeは月100ドルかかる。「手が出しにくい人が多い」という正直な言葉の後に出てきたのが、最近リリースされたGemini CLIだ。

高崎さん（16:04〜）

「たぶんこの資料作成を生むんだったら、高度なプログラミングがそこまで必要になってこない作業なので、おそらく地味にCLIの無料枠でもいける。クロードコードは100ドルするんで、結構高いんで手出しにくいんですよ、いろんな人が。でも最近出たジェミニCLIも同じようにですね。」

「無料枠でもいける」という言葉は、試してみようかな、という気持ちにさせてくれます。

高崎さん（16:20〜）

「入れてなかった。すぐに入れられるので、それでやってみるのがいいかもしれない。なので本当はここでやるのはGemini CLIのほうが皆さんにおすすめです。まず無料から始められます。」

「本当はGemini CLIがおすすめです」という言葉を、Claude Codeの熱烈ファンである高崎さんが言うのが面白かった。Claude Codeを愛用しているからこそ、コストの壁を正直に言える。

いやー、これ、けっこう勇気いることだと思うんですよ。自分が大好きで毎日使ってるツールがあって、でも「月100ドルは正直キツいよね」って認めて、無料の選択肢をスッとすすめる。普通は自分の推しをゴリ押ししたくなるでしょ。でも高崎さんは「まず無料から始めてみて」って言う。…この正直さが、いちばん信頼できるなって思いました。誰かに何かをすすめるとき、いいことばっかり言わない人のほうが、結局あとで効いてくるんですよね。

今回のLIVEで高崎さんが示した全体フローをまとめると、Claude CodeまたはGemini CLIでテキストを.mdファイルに変換し、ライティングルールや事業情報も同じフォルダーに集めてAIに読み込ませ、CSSを含むMDファイルとしてスライドを構成し、MarpでPDF出力し、CanvaにアップロードしてPDFを編集する。という流れだ。この流れのどこにも「専門的なプログラミング」は出てこない。「ターミナルが苦手」という人でも、Gemini CLIなら無料枠で試せる。

ターミナルのあの黒い画面、最初はビビるよね。分かる。私も最初そうだった。でも、やってることは文章の整理だけ。タダで始められる。だったら——一回触ってみる価値、あるんじゃないかな。

ただっち（15:00〜）

「ありがとうございます。はいちょっと高度なね今日は資料作成の技術の披露をいただきましたけれども皆さんいかがだったでしょうか。はいでは高崎さんにご案内ありますか?」

LIVEを締めくくるただっちさんの言葉の通り、「高度な技術の披露」でありながら、実際にやることはテキストファイルの整理とツールのインストールだけ。この落差が今回のLIVEの魅力だと感じます。

▶ この話題を動画で見る（16:04〜）