Codexでスライドを作る方法|自社っぽいデザインを安定させる3要素

動画でも内容を確認したい方はこちら

AIでスライドが作れるようになって便利になった一方で、「自社っぽいスライドにしようとすると毎回細かく指示しなければいけない」「ロゴや素材を毎回用意するのが面倒」と感じていないでしょうか。
Codexでスライドを作る方法のポイントは、「コンテンツ」「アセット」「スタイル」の3つを先に用意しておくことです。これがあれば、毎回指示しなくても自社らしいスライドを安定して生成できます。
この記事では、デイトラのサービス紹介スライドを実際に作った例をもとに、フォルダの作り方からCodexでの実行方法、注意点までを解説します。
解説するのは、デイトラAI業務活用コースで講師を務める、デザイナーのKAWAIさんです。

本記事の内容

・AIスライドで「自社っぽさ」が安定しない理由と、Codexで作った完成例
・スライド生成に必要な3要素(コンテンツ・アセット・スタイル)とフォルダ構成
・Codexでの実行手順と、アセットとスタイルを確実に読ませる指示のコツ
・Claude Codeとの違いと、AIでスライドを作るときの注意点

AIでスライドを作るときの悩み:自社っぽいデザインが安定しない

最近は、AIでスライドが作れるようになってとても便利になりました。
ただ、自社っぽいスライドを出そうと思うと、いちいち指示しなければいけないことがあります。ロゴや素材も毎回用意しなければならず、面倒に感じる方も多いはずです。

加えて、AIには出力の揺れもあるので、思いどおりにコントロールするのが難しいという面もあります。

では、クオリティの高い「自社っぽい」スライドを安定して出す方法はないのでしょうか。
実は、あります。ここからは、その方法を具体的に見ていきます。

※AIの揺れ
同じ指示を出しても、生成AIの出力が毎回少しずつ変わることです。色・フォント・レイアウトがその都度変わってしまうと、会社として統一感のある資料になりません。本記事で紹介する方法は、この揺れを「決まったルールと素材を毎回読ませる」ことで抑える考え方です。
目次

Codexで作ったデイトラのサービス紹介スライド

今回は、デイトラのサービス紹介スライドを作りました。まずは、完成したものを見てください。
全部で6枚のスライドが生成されています。表紙に続いて、次のようなページが作成されています。

Codexアプリで生成したデイトラAI業務活用コースのスライド。左上にデイトラのロゴ、右下にキャラクターが配置されている
Codexで生成したデイトラのサービス紹介スライド
  • 左上にデイトラのロゴマークがちゃんと入っている
  • デイトラのキャラクター(デイトラちゃん)もいる
  • 色合いもデイトラのトンマナになっている

全体的にデイトラのイメージに合ったデザインを指定しているので、スライド全体がそのデザインで統一されているのが分かると思います。

ロゴやイラストを毎回指示したり、細かくプロンプトを書いたりすれば、こうしたスライドが作れるイメージは湧くかもしれません。
ですが理想は、「スライドを作って」と言うだけでこのスライドが作れる状態です。

これは、従来のChatGPTやClaudeといったチャットAIだと難しかったのですが、CodexやClaude CodeのようなAIエージェントを使えば可能になってきます。
実際に今回は、Codexにデイトラのサービスを紹介しているWebサイトのURLを渡しただけで、このデザインができてしまいました。

※AIエージェント
チャットで1問1答するだけでなく、フォルダ内のファイルを読む・画像を生成する・ファイルを書き出すといった作業を、自分で段取りしながら進めてくれるAIのことです。CodexやClaude Codeが代表例で、「このフォルダの素材とルールを読んでから作って」といった指示ができるのが、チャットAIとの大きな違いです。

Codexの設定方法:コンテンツ・アセット・スタイルの3要素

URLだけでスライドを作るために、Codexでどう設定すればいいのか。
ここで重要なポイントが3つあります。

Codexの設定のポイント。①コンテンツ:作りたいものの中身 ②アセット:その会社独自の素材 ③スタイル:その会社のデザインルール
Codexの設定のポイントは「コンテンツ・アセット・スタイル」の3つ
要素 中身 今回の例
①コンテンツ 作りたいものの中身 毎回の指示で入力する
②アセット その会社独自の素材 デイトラのロゴマーク・キャラクター
③スタイル その会社っぽいデザインルール デイトラのWebページから収集したデザインのテイスト

この3つが、スライド生成では大事な要素になります。
コンテンツ(作りたいものの中身)、アセット(その会社独自の素材)、スタイル(その会社っぽいデザインルール)。この3つがあれば、安定して作れるというわけです。

アセット:その会社独自の素材を用意する

2つ目のアセットには、今回、デイトラのロゴマークとデイトラのキャラクターを入れました。

もしキャラクターがない場合でも、次のような素材を入れておくと、パーツとして使うことができます。

  • 社員の写真
  • 掲載可能なお客様の写真
  • 自社で使っているアイコンやイラスト

そういう素材があるだけでも、AIでポン出ししたっぽくない、自社オリジナルなものに見えます。
全部をAIで作る必要はなく、自分で持っている品質の高い素材があればそれを使っていくのがいいと思います。

スタイル:Webページからデザインのテイストを収集する

3つ目がスタイルです。
先ほど読み込ませたデイトラのWebページからデザインのテイストを収集して、それをスタイルにしていくという順番でスタイルを作りました。

slideフォルダの中身:assetフォルダとstyleフォルダ

ここからは、実際にどこにどういうファイルやフォルダを作るのかを見ていきます。

slideフォルダの中にstyleフォルダとassetフォルダが入っている画面
「slide」フォルダの中に「asset」と「style」の2つのフォルダを作る

今回は「slide」というフォルダを作成し、その中に「asset」と「style」という2つのフォルダを入れています。

コンテンツのフォルダはどこに行ったのかというと、コンテンツは毎回違う内容を入れるので、フォルダには含めていません。コンテンツは毎回ご自身で入力する形がいいと考えています。

assetフォルダ:ロゴマークとキャラクター

assetフォルダに入れたデイトラのキャラクター画像(character_1.webp)をプレビューした画面
assetフォルダに入れたキャラクター画像(character_1.webp)

assetフォルダには、まずデイトラのロゴマーク(logo.svg)を入れています。
あとは、おなじみのキャラクター(デイトラちゃん)を2種類(character_1.webp / character_2.webp)入れています。

基本的にはロゴマークとキャラクターを入れていますが、ほかにも使う素材があれば、入れていただいて全然オッケーです。

たとえば、キャラクターのいろいろなパターンや、講師の写真などを入れておけば、いちいちチャット欄に添付しなくても、ここを読み取っていい感じに使ってくれるわけです。

styleフォルダ:daitra.mdにデザインルールを書く

3つ目のスタイルです。styleフォルダの中には「daitra.md」というファイルを入れていて、このファイルの中にスタイルを書いています。

daitra.mdのデザインスタイル。サイズ(16:9の横長プレゼンテーションスライド等)と配色の指定
daitra.mdの冒頭。サイズや配色などを細かく指定している

これがだいぶ長い指示書なのですが、たとえば次のような項目を書いています。

  • サイズ:スライドの大きさは基本的に16:9という横と縦の比率なので、そういった基本的なこと。画面上では「16:9の横長プレゼンテーションスライド」「上下左右に5〜7%程度の安全マージンを確保」「1スライド1メッセージを基本とする」などが書かれています
  • 配色:スライド全体の色合いをかなり細かく指定。グラデーションは何色を使うのかなども書いています。画面上では「ベース背景:白、またはごく淡いピンクパープル」「メインカラー:ディープパープル」「サブカラー:バイオレット、ピンク、ブルー」などが並んでいます
  • タイポグラフィ:文字のデザインのことです。デイトラのスライドはどういう文字のデザインにすべきかを書いています。具体的にはNoto Sans JPというフォントやInterといったフォントの指定もしています
  • レイアウト:スライドの中にどういった要素がどこに、どういった大きさで置かれるべきかを書いています
  • テンプレート:「こういう属性のページのときは、こういうレイアウトにしましょう」という参照用の項目です
  • そのほか、入れる写真のテイストや、装飾・グラフ・図の使い方なども指定しています
daitra.mdのタイポグラフィの指定。日本語見出しフォントにNoto Sans JP、英数字にInterなどを指定
タイポグラフィの項目ではNoto Sans JPやInterといったフォントを指定

テンプレートがあれば、毎回ゼロからAIに考えさせる必要がなくなります。「こういうときはこういうレイアウトがいいよね」というのがすでに中にあるので、それを書いておくわけです。

スタイルガイドは自分で書かずにAIに作らせた

かなり細かく書いていますが、このファイルは私が1文字も書いていません
デイトラのサービスサイトをAIに渡して、実際の具体的なデザインを抽象化したスタイルガイドをAIに作らせたというわけです。

いちいち全部を自分で作るのは大変です。
すでにWebサイトやスライドがある場合は、それをAIに渡して、そこからガイドラインを作ってもらうのもありです。

アセットの使い方はレイアウトのセクションで指定する

assetフォルダに入れたデータをどこで説明しているかというと、daitra.mdの「レイアウト」というセクションです。

daitra.mdのレイアウトセクション。全ページの左上にロゴ(asset/logo.svg)を配置する、キャラクター(asset/character_*.webp)をポイントで配置する等の指定
レイアウトのセクションでロゴとキャラクターの置き方を指定している

完成したスライドの全ページの左上にロゴがあったのは、ここで「全ページの左上にロゴ(asset/logo.svg)を配置する」と指定しているからです。

キャラクターも、assetの中のキャラクターを「asset/character_*.webp」という形で指定しています。
ここに入っているアスタリスク(*)の記号は「何の文字が来てもいいよ」という合図なので、character_1でもcharacter_2でも該当する、という意味になります。

たとえばキャラクターの画像が10個ある場合は、character_1〜character_10のようなネーミングにしておけば大丈夫です。
10個になろうが100個になろうが、アスタリスクであれば対応できるので、少し細かいテクニックですがおすすめです。

なお、キャラクターを全ページのどこに配置するかは、あえて決めていません。配置はAIが判断してくれます。

ここまで詳しく指定しておくと、何回生成しても品質がブレないデザインが作れます。

スタイルを作るプロンプトは公式LINEで配布中

このスタイルファイルは、私が何回か試行錯誤して作ったプロンプトで出来上がるものです。
このプロンプトをベースに、「今回のデザインはこのURLのサイトを参照して書いてください」「アレンジしてください」とお願いすると、即座にこのファイルと同じようなものができてしまいます

前提:先に公式LINEでプロンプトを受け取る
スタイルファイル(daitra.md)を作るためのプロンプトは長いため、動画ではデイトラ公式LINEでの配布としています。動画概要欄の公式LINEから、キーワード「20260825」を送ると、自動返信でプロンプトが届く仕組みです(動画公開時点の案内)。
自社のスライドで試す場合は、このプロンプトに参照したいWebサイトのURLを渡してスタイルファイルを作り、styleフォルダに入れてください。
※.mdファイル(Markdown)
見出しや箇条書きを「#」「-」などの記号で書くテキストファイルの形式です。AIが読み取りやすく、人が読んでも構造が分かりやすいため、CodexやClaude Codeに渡すルールや指示書によく使われます。今回のdaitra.mdも、サイズ・配色・レイアウトなどを見出しごとに箇条書きで整理しています。

Codexの実行方法:アセットとスタイルを読ませてスライドを生成する

アセットとスタイルが用意できました。ただし、今の状態は素材とデザインの指定が存在しているだけです。あとは、それを実行していく必要があります。

手順1:Codexで作業するフォルダを選ぶ

Codexの画面を開き、まずはCodexにどこで仕事をするのかを指定します。
ここで、先ほどの「slide」フォルダを選んで添付します。

手順2:コンテンツ(作りたいもの)を指示する

次に、作りたいものの中身を指示します。ここで入力する指示が「コンテンツ」にあたるものです。

今回は、デイトラAI業務活用コースの説明スライドを作ります。
画像の生成には、Codexに内蔵されている画像生成機能(imagegen)を使うので、それも指定します。画面上の指示は次のような内容です。

デイトラ AI業務活用コース(https://daily-trial.com/ai-business/)の説明スライドをimagegenを使って画像生成してください。

手順3:アセットとスタイルを読むように明記する

ここで忘れてはいけないのが、先ほど用意したアセットとスタイルを読んでくれ、という指示です。
上の指示だけだと、AI業務活用コースを分析してスライドを生成するという指示にはなっていますが、アセットとスタイルを読む指示が入っていません。

その指示がないと、アセットもスタイルも読まずにスライドを作ってしまう可能性があります。せっかく作ったのにもったいないので、確実に読んでもらうために、念のため次のように指定しておきましょう。

assetとstyleフォルダを読んだ後、生成してください。

これで、指示(=コンテンツ)・アセット・スタイルの3つがそろいました。ここで実行します。

手順4:実行して仕上がりを確認する

あとは待っていれば、アセットとスタイルを使ったスライドを作ってくれます。

Codexで生成されたAI業務活用コースの表紙スライド。左上にデイトラのロゴ、右側に人物写真が配置されている
生成されたスライドの表紙。指定どおり左上にロゴが入っている
Codexで生成された説明スライド。紫系の背景にツールを知ってるだけでは仕事の成果に繋がりませんというメッセージとキャラクター
中面のスライド。キャラクターも配置され、デイトラのトンマナで統一されている

指定どおり左上にロゴマークが入り、イラストも配置してくれています。
デイトラのサイトの色合いや雰囲気が踏襲されていて、このまま使えそうな仕上がりです。

今日お話ししたコンテンツ・アセット・スタイルの3種類があれば、こういうものができてしまうということです。

※imagegen(Codexの画像生成)
Codexに内蔵されている画像生成の機能です。動画ではCodexの中に「イメージ」と呼ばれる画像生成モデルが入っていると説明されており、スライドを画像として生成する工程までCodexの中で完結できます。

Claude Codeでもスライドは作れる?Codexをおすすめする理由

今回はCodexを使いましたが、普段はClaude Codeを使っているという方も多いと思います。
Claude Codeでも、スライド生成は実現可能です。スライドの構成や、先ほどのようなアセットを渡せば生成はできます。

ただし、必要なことがあります。Claude Code自体は画像生成ができないんですね。
そのため、画像生成の部分だけは外部サービスや、ChatGPTのAPIといったものを使う必要があります。ChatGPTのAPIを使うとなると、従量課金でかかってきます。

一方、Codexには内部に画像生成のモデル(イメージ)が入っているので、Codexを契約していれば画像生成まで一気通貫でできるという点でおすすめしています。

さらにCodexがおすすめな理由として、AIの中にある残りのエネルギー(使用量)の消費が緩やかな点も、個人的に気に入っているポイントです。
Claude Codeのほうが早く0%になってしまう印象がありますが、Codexはどれだけガンガン使っても、なかなか0%になりません。

実は撮影している今日も、朝に使用量のリセットが入りました。たとえば50%まで使ってしまったときでも、いきなり100%に戻ったりするんですね。
これは開発者・提供元であるOpenAIの考え次第なので期待しないほうがいいのですが、そういったラッキーなことも起きます。トークン消費という観点でもおすすめです。

まとめると、今回のように画像生成でスライドを作る場合は、Codexがおすすめです。

※従量課金(API)
使った量に応じて料金が発生する課金方式です。ChatGPTのAPIで画像を生成する場合、生成した枚数や処理量に応じて費用がかかります。Codexのように契約プランの範囲内で画像生成まで使える場合と比べて、コスト管理の考え方が変わる点に注意が必要です。

AIでスライドを生成するときの注意点:入力データは自社のものに限る

AIを使ったスライド生成で注意点を1つ挙げるとすると、入力データです。

今回のように、デイトラが自社のURLやデザイン、ロゴマーク、キャラクターを入れるのは全く問題ありません。
しかし、他人のデータを入れてしまうことは避けたほうがいいです。著作権の侵害にあたる可能性があり、文化庁もそういったルールを出しています。

そういったことに引っかかってしまうので、入力するものは自社のものに限ると覚えておいてください。
学習させること(読み込ませること)には少なからずリスクがあるので、権利関係には気をつけてください

デザイナーでない人ほど使ってみてほしい

デザイナーでないと、どこから手をつければいいのか分からない、センスが必要なのではないか、と思う方はかなり多いと思います。
ですが、今日お伝えしたノウハウとAIさえあれば、誰でも今日生成したようなスライドは作れます

一度諦めてしまった方や、デザインは自分には関係ないと思っている人ほど、ぜひ使ってみてほしいです。

※生成AIと著作権
一般的に、他者が権利を持つ画像・ロゴ・デザインをAIに読み込ませて似たものを作ると、著作権などの権利侵害にあたるおそれがあります。文化庁もAIと著作権に関する考え方を公表しています。業務で使う場合は、自社で権利を持つ素材や、利用が許可されている素材だけを入力するのが安全です。

Codexでのスライド作りに関するよくある質問

Q. Codexで自社っぽいスライドを作るには何を用意すればいいですか?

コンテンツ・アセット・スタイルの3つです。アセットにはロゴやキャラクターなど自社独自の素材を、スタイルには配色・フォント・レイアウトなどのデザインルールをまとめたファイルを入れ、コンテンツは毎回の指示で入力します。

Q. スタイルのファイルは自分で書かないといけませんか?

自分で書く必要はありません。動画のdaitra.mdも、デイトラのサービスサイトをAIに渡してスタイルガイドを作らせたもので、解説者は1文字も書いていないそうです。作成用のプロンプトは公式LINEで配布されています。

Q. キャラクターの画像がたくさんある場合はどうすればいいですか?

character_1、character_2のように連番のファイル名にし、スタイル側では「asset/character_*.webp」とアスタリスクで指定します。10個でも100個でも対応できます。

Q. Claude Codeでも同じようにスライドを作れますか?

作れます。ただしClaude Code自体は画像生成ができないため、画像生成の部分だけ外部サービスやChatGPTのAPI(従量課金)を使う必要があります。Codexは画像生成機能を内蔵しているため、画像でスライドを作るならCodexがおすすめとされています。

Q. 他社のWebサイトを参考にスタイルを作ってもいいですか?

避けたほうが安全です。他人のデータを入力すると著作権の侵害にあたるおそれがあるため、動画では入力するものは自社のものに限るよう注意を促しています。

Codexのスライド作りを実務で使いこなすならデイトラ「AI業務活用コース」

本記事で解説したCodexでのスライドの作り方は、3つの要素を押さえれば独学でも試すことができます。
ただ、「ChatGPTやClaudeは触っているけれど、そこまで自分の業務は変わっていない」という方は、プロから学んで手を動かしながらAIを使えるようになる環境があると近道です。

デイトラの「AI業務活用コース」は、講師が全員それぞれの業務のプロであることが特徴です。デザイン・マーケティング・バックオフィスと領域ごとに現場のプロ講師が担当しており、今回解説したKAWAIさんもその講師の1人です。

基礎的な講座から発展的な講座まで40以上の講座があり、一方的に学ぶだけでなく、一緒に手を動かすワークショップや、今回のようなスライド作成のワークショップ、みんなの悩みをその場で解決していくオフラインのAI作業会なども行っています。
動画公開時点では、コンテンツ見放題・イベント参加し放題で、買い切り13万7,500円と案内されています。

本格的にAIを業務に活かしたい方は、ぜひカリキュラムをチェックしてみてください。

▶︎デイトラAI業務活用コースの詳細を見てみる

「自分に合うか不安…」という方は公式LINEへ

「独学とスクール、どちらが自分に合っているか分からない」
「複数のコースのうち、どれを選ぶべきか相談したい」

そんな方は、デイトラ公式LINEに登録してみてください。
自分に合ったコースの診断や、無料の学習動画などの特典もプレゼント中です。

無理な勧誘は一切ありませんので、まずは情報収集として気軽に登録してみてくださいね。

▶︎デイトラ公式LINEで無料相談してみる

この記事を書いた人
KAWAI(@kawai_design
デザイナー歴14年のデザイナーです。SHIFT AIのAX戦略部でデザイン部門責任者 兼 コミュニケーションデザイン部部長を務め、ベイジのAIデザイン顧問も担当しています。AIとデザインを軸に発信・登壇・研修・教材開発を手がけており、デイトラAI業務活用コースでも講師を務めています。