Claude Design→Claude Codeで営業資料を作成した話
リサーチプレビュー段階のClaude Designで自社営業資料をスライド化しようとした実体験。8割はDesignで一気に組めるが、残り2割の仕上げはClaude Codeが正解だった。トークン消費・処理待ち・微修正コスト・バージョン管理の4制約と、ツール使い分けの判断軸を記録します。
こんにちは、HRdevの永井です。
突然ですが、自分はプレゼンテーション資料を作るのがとても苦手です。
デザインの経験があまりないことに加えて、やったらやったでレイアウトの細かなところまで気になってしまい、時間がものすごくかかってしまうからです。
今回、営業活動をより強化していこうという意思決定をした中で、営業資料をフルリニューアルしようと思い立ちました。これまではGoogle スライドなどで手作業で作っていたのですが、このタイミングで、リサーチプレビュー段階のClaude Designでやろうと考えて取り組んでみました。
今回はその時の流れや、苦労したところなどのお話をさせていただきたいと思っています。
何をやろうとしたか
このマークダウンファイルを起点に、Claude Designにそのまま投入してスライド化を完結できないか、というところでClaude Designの評判が観測範囲でとても良かったので試してみよう!というところからスタートしました。
営業資料のシナリオ自体は、Claude Codeと壁打ちをしながらマークダウンファイルで作成しました。資料の中身という観点については、今回のメインテーマから外れるため、ここでは割愛してお伝えできればと思います。
つまずいた4点
実際に使ってみると、想定していなかった挙動が連続しました。順に4点です。
1. トークン消費が想像の倍以上速い
mdをそのまま投げるだけで、初回の生成で結構なトークンを消費します。複数スライドの一括生成は時間もリソースも食う処理で、何度かトークン上限に当たって作業が止まります。途中で気づいたのは、Designはコンテンツ生成と同時にビジュアル設計も走らせているらしく、テキスト編集の感覚で軽く触ると一気に溶けていきました・・・。
2. 微修正で処理完了を待たないと編集が消える
スライドの一部を直そうと触ったタイミングで、まだバックグラウンドで前の処理が走っていると、こちらの編集が上書きされて消えます。
「処理完了を待つ」がUXとして要求されている。これに気づくまで数回、同じ修正を繰り返しました。
3. リサーチプレビュー由来のバグ
画面が描画されない、特定のスライドだけ崩れる、ステータスが固まる、といった挙動が散発的に出ます。
リサーチプレビュー段階なので承知の上ですが、本番作業の途中で出ると流れが途切れてしまいます。リロードしても復旧しないが、15分くらい置くと復活していることもあり、ここも流れが途切れ、ストレスを感じました。
4. 軽微な文言・デザイン修正にトークンを溶かす
一番キツかったのはここでした。「この見出しを1行短く」「このカラーをブランドブルーに」のようなコメントによる修正や、Editによる直接的な文言修正にも、Designは内部で全体を再評価する動きします。
しかも一発で意図通りに直らないだけでなく、画面ごとレイアウトが崩壊することが数回あり、トークン消化と共にモチベーションも溶けていきました。
8割でCodeに移管した
結局、スライドのパターンが8割固まった時点で、projectファイルをzipでダウンロードしてClaude Codeに投入することにしました。これはかなり効きました。
Code側に移してからは、軽微な文言修正もデザイン微調整もテキストベースで完結します。
gitでバージョン管理が効くので、変な修正をした時の戻しも安心。トークン消費も劇的に下がります(テキストの差分編集なので当然と言えば当然ではあります)。
工程 | 推奨ツール | 理由 |
|---|---|---|
大量スライドの初期生成 | Claude Design | パターン出しが速い、ビジュアルの質が高い |
構造の試行錯誤 | Claude Design | 全体俯瞰しながらレイアウトを動かせる |
文言の微修正 | Claude Code | トークン効率、git差分管理 |
デザインの最終調整 | Claude Code | テキスト直接編集、再現性 |
バージョン管理 | Claude Code | gitネイティブ |
「8割Designで作って、残り2割をCodeで仕上げる」が、いまの自分の運用解です。
カラーパレットだけ引き継いだ判断
もう一つ気づきがあります。最初は「コーポレートサイトのデザインシステムをそのままClaude Designに食わせて、サイトと営業資料のトーンを揃える」方向で試しました。結果、出力の質はそのデザインシステムに引っ張られるため、営業資料としては違和感が有る仕上がりとなりました。
サイトのデザインシステムは、Webページの導線・余白・タイポを前提に組まれており、A4スライドの情報密度に押し込むと窮屈になります。Claude Designからの提案も、システムに引きずられて選択肢が狭まる感触がありました。
しっくりこなかったので、カラーパレット(ブランドブルー、テキスト色、背景色)だけ引き継ぎ、それ以外は営業資料用のデザインをClaude Designに自由に組ませてみましたが、こちらの方が、資料としての最適化が明らかに進み、用途別に最適化する方が結果的に質が向上するな、と強く感じました。
設計と使い分け、に戻ってきた
AI領域の新しいツールを触るたびに、本質に立ち戻ることの重要さを痛感しますが、今回もそうなりました。
「テキスト設計」を最初に詰めることが本丸で、Claude Designは大枠のデザインとスライドパターン出し、Claude Codeは仕上げ、という用途が良さそうかな、と自分の中ではだいぶイメージが固まりました。
デザインシステムの流用も、思考停止して全部統一するのではなく、個別の用途最適を前提に、共通点を適切に引き継ぐ方が、用途への最適化が進むかなと感じます。
引き続き、ツールごとの得意領域を見極めながら進めます。同じ場面で詰まっている方の何かになれば幸いです。
もし資料の出来や内容が気になる、という方はぜひお気軽にお問い合わせ下さい!
なお、資料作成後にでてきたgpt-image-2のクオリティが非常に高く、再リニューアルもしくは図形部分はそちらで作る形でアップデートを考えています。その辺りも機会があれば共有させていただきます。
永井涼平
HRdev代表
レバレジーズ、クラウドワークス等を経て2021年にHRdev創業。18年以上エンジニア採用の最前線に立ち、ログラス・MFS・SALESCORE等の支援実績を持つ。
