📚
好きなスライド画像をベースにPowerPointで自在に編集できるスライドをClaude3.7Sonnetで作る

2025/03/24に公開
SVG
 はじめにClaude 3.7 Sonnetは優れたデザインセンスを持ち、図解やスライドを簡単に生成できることから、最近注目を集めています。
以前から知られているスライド作成の流れとしては以下のような手順でした。
フォーマットのプロンプトでClaude 3.7 SonnetでスライドをSVG形式で作成

↓

SVG形式でClaudeからダウンロード

↓

PowerPoointにSVGを貼り付けて、「配置とサイズ」から高さと幅の100%にする

↓

図形に変換

https://note.com/note_maverick/n/nd07e0f245dae
しかし、この方法には問題点がありました。SVGを高さ・幅100%に調整して図形に変換すると、スライド枠からオブジェクトがはみ出すことが多く、その調整に手間がかかることが課題でした。
そこで、以下の2点を目的としてプロンプトの改良を試みました。
最初からPowerPointに貼り付けると倍率が100%になるように出力する
Claudeにスライド画像を渡して、スライド画像のレイアウトを参考にSVGを作成する
1についてはおおむね成功しました

2についてもシンプルな構造のスライドであれば約6~7割ほどの再現性を実現し、テンプレートとして活用できるかもしれないというレベルになりました。

 作成したスライド今回は「コンサル スライド」とインターネットで検索して見つけたスライド画像を使用して検証しました。

今回は検証のため、元スライドの文字起こしを利用しましたが、変換に使う文章（スライドにする文章）は自由に設定可能です。

下記に示すClaude3.7 Sonnetが作成したスライドは一切手直しは行っていないです。

この方法を活用することで、スライド作成の効率化と品質向上が期待できます。

 元となったスライド

引用：https://www.dodadsj.com/content/190411_accenture/

 Claude3.7 Sonnetが作成したスライド
主観ですが、8割くらいは再現できてそうです

 元となったスライド

引用：https://www.softbank.jp/biz/blog/business/articles/202011/sbw2020-government/

 Claude3.7 Sonnetが作成したスライド
主観ですが、こちらも8割くらいは再現できてそうです

 元となったスライド

引用：https://www.waseda.jp/inst/weekly/feature/2022/12/05/103707/

 Claude3.7 Sonnetが作成したスライド
少し複雑になってくると精度は落ちますが、7割くらいは再現できてそうです

 元となったスライド

引用：https://x.com/planetshining/status/1561297325024497664

 Claude3.7 Sonnetが作成したスライド
オブジェクトが多くなってくると精度は落ちますが、ギリギリ6割くらいは再現できてそうです

 元スライドと文章を変えた場合ClaudeにSVGに変換する文章は「コンサルタントの仕事について」とだけ伝えました

 元となったスライド

引用：https://japan.zdnet.com/article/35202317/

 Claude3.7 Sonnetが作成したスライド
元のスライドと文章や内容が違う場合も6割くらいは再現できているのではないでしょうか

 スライド作成手順Claudeにスライド画像とプロンプトを与え、SVGを作成するための必要項目を記入させる
Claudeが作ったSVG作成プロンプトに変換する文章をくっつけて、再度Claudeに渡す
出力されたSVGに対して、再度スライド画像とSVG修正用プロンプトを渡してスライドを再修正させる
3.の修正プロセスを何度か繰り返し、最終的なSVGをPowerPointに貼り付けて完成

 プロンプト作成手順1でスライドの画像と一緒に添付して渡すプロンプトです

以下に、プロンプトを記載しています。これは、SVGから自動でスライドを作成するプロンプトで
添付の図を参照して、以下のテンプレートプロンプトを埋めてください。
テンプレートプロンプトの必要項目を勝手に削除しないでください
以下のプロンプトでは、元のスライドを正確に表現出来ない場合は、レイアウト構造のテンプレートを適宜修正・追加してください
元のスライドを再現することを最優先にしてください。

＊プロンプト＊
以下の文章/記事を、超一流コンサルティングファームが作成したような、完璧な16:9プレゼンテーションスライドに変換してください。情報設計とビジュアルデザインの両面で最高水準を目指します。PowerPointでデフォルトで100%表示になるようにし、枠内に文字がしっかり収まるようにしてください。
基本設定
1. カラースキーム（色コード定義）
* プライマリー（主色）：[プライマリーカラーコード]（[プライマリーカラー説明]、バナー背景・見出し文字）
* セカンダリー（背景色）：[セカンダリーカラーコード]（[セカンダリーカラー説明]、全体背景）
* アクセント（薄背景または図形縁）：[アクセントカラーコード]（[アクセントカラー説明]）
* 文字色・重要度
   * 高（見出し・強調語）：[強調文字色コード]（太字＋強調色）
   * 中（本文）：[本文文字色コード]（[本文文字色説明]、標準ウェイト）
   * 低（コピーライト等）：[補足文字色コード]（[補足文字色説明]、標準〜細字）
1. タイポグラフィ（フォントと階層）
* フォントファミリー：[メインフォント], [代替フォント1], [代替フォント2], sans-serif
* 文字サイズと用途
   * 大見出し（タイトル）：[タイトルサイズ]、太字（Bold）、行間1.4
   * セクション見出し：[見出しサイズ]、太字、左寄せ、行間1.4
   * 本文テキスト：[本文サイズ]、標準（Regular）、行間1.6
   * 箇条書きテキスト：[箇条書きサイズ]、先頭に「・」、インデントあり（[インデント幅]）
   * フッター・補足：[フッターサイズ]、[フッター色説明]、行間1.4
1. レイアウト構造
* 全体構成：[レイアウト形式]（[分割比率説明]）
   * 左側：[左側幅]（[左側エリア説明]）
   * 右側：[右側幅]（[右側エリア説明]）

■ ボックスレイアウト（存在する場合）
* グリッド構造：
   * 大枠ボックス：各セクションに[大枠背景色]色の見出しボックスを配置
   * 内部ボックス：各大枠内に2×2または適切な数のグリッドで小ボックスを配置
   * 小ボックスのサイズ：幅[小ボックス幅]、高さ[小ボックス高さ]
   * 小ボックスの余白：水平[水平余白]px、垂直[垂直余白]px
   * 小ボックスのスタイル：背景色[小ボックス背景色]、枠線[枠線スタイル]、角丸[角丸サイズ]px
   * テキスト配置：中央揃え、複数行テキストの場合は適切な行間で配置

■ 左カラム（[左カラムの役割]）
* 各バナーの形状：
   * サイズ：幅[バナー幅]、高さ[バナー高さ]
   * 背景色：[バナー背景色]
   * 文字色：[バナー文字色]
   * フォントサイズ：[バナーフォントサイズ]
   * テキスト整列：[テキスト配置方法]
   * 矢印部分：[矢印形状の説明]
* バナー間の余白：[バナー間隔]

■ 右カラム（[右カラムの役割]）
* 構造：
   * 各バナーに対応する情報ブロック（セクション見出し＋本文）
   * 見出し：[情報見出しサイズ]・太字・[情報見出し色]、行頭に[見出しアイコン]
   * 本文：[情報本文サイズ]・[情報本文色]、行間[情報本文行間]、箇条書きあり（[情報本文インデント]）
* 情報ブロック間の余白：[情報ブロック間隔]

1. 階層構造とナビゲーション
* [ナビゲーション要素1]：[ナビゲーション説明1]
* [ナビゲーション要素2]：[ナビゲーション説明2]
* 階層：
   * レベル1 → [階層レベル1説明]
   * レベル2 → [階層レベル2説明]
   * レベル3 → [階層レベル3説明]

1. 余白・マージン・パディング
* 外周マージン：[外周マージン設定]
* バナーと情報ブロックの間：[要素間マージン]
* 見出しと本文間：[見出し本文間マージン]
* 行間：[行間範囲]（情報量に応じて）

1. アイコン・装飾
* [アイコン1]：[アイコン1使用場所]、色＝[アイコン1色]
* [アイコン2]：[アイコン2使用場所と説明]

■ SVGパラメータ
* viewBox="0 0 1280 720"
* width="1280" height="720"
* 左側列の開始X座標：[左列X座標]
* タイトルのY座標：[タイトルY座標]

■ バナーの詳細
* 最初のバナーY座標：[初期バナーY座標]
* バナー間の垂直距離：[バナー垂直間隔]（中心から中心）
* 接続線：[接続線色]、[接続線太さ]、[接続線スタイル]

■ 背景要素
* 各情報セクションの背景：幅[情報背景幅]、高さ[情報背景高さ]
* 背景の角丸：半径[背景角丸半径]（rx="[角丸X]" ry="[角丸Y]"）
* 背景の透明度：[背景透明度]（opacity="[透明度値]"）
* 情報ブロックとの余白：[情報背景余白]

■ SVGのPowerPoint互換性
* xmlns="http://www.w3.org/2000/svg" 名前空間を追加
* preserveAspectRatio="xMidYMid meet" を追加
* PowerPointの16:9スライドに合わせて viewBox="0 0 1280 720" を使用
* XMLの特殊文字は必ずエスケープすること：
  - & は &amp; と記述する
  - < は &lt; と記述する
  - > は &gt; と記述する
  - ' は &apos; と記述する
  - " は &quot; と記述する
* テキスト表示の注意点：
  - foreignObject要素は使用せず、通常のtext要素を使用する
  - 長文テキストは複数のtext要素に分割し、y座標をずらして表示する
  - 例: 
    <text x="60" y="270" font-family="..." font-size="16">1行目のテキスト</text>
    <text x="60" y="295" font-family="..." font-size="16">2行目のテキスト</text>
* ボックスレイアウトの実装時の注意点：
  - 大枠と内部ボックスの親子関係は視覚的な配置で表現し、実際のDOM階層では平坦に保つ
  - テキスト配置は中央揃えを基本とし、text-anchor="middle"属性を使用
  - 複数行テキストは個別のtext要素として実装し、y座標を適切にずらす
  - 例：
    <rect x="60" y="440" width="150" height="80" fill="#FFFFFF" stroke="#E6E6FA" stroke-width="2" />
    <text x="110" y="476" font-family="..." font-size="16" text-anchor="middle">1行目</text>
    <text x="110" y="500" font-family="..." font-size="16" text-anchor="middle">2行目</text>

■ レイアウト判断のポイント
* 箇条書きリスト形式の場合：通常の箇条書きテキストとして表示
* 「項目名: 内容」形式の場合：左右2カラムのテーブル形式として表示
* 複数の関連項目が並ぶ場合：ボックスレイアウトを検討（特に4〜6個程度の短い項目が並ぶ場合）
* カテゴリ分けされた項目リストの場合：大枠＋内部ボックスのグリッド構造を適用
* 視覚的に区別すべき独立項目の場合：各項目を個別のボックスとして表示

* 画像のようなレイアウトを検出した場合の実装例：
  - 大枠ボックス：紫色の見出しエリアを含むセクション全体のコンテナ
  - 内部ボックス：2×2グリッドで配置された白い箱（上段左右、下段左右）
  - コンテンツによって適切な配置を判断（例：項目が4つなら2×2、6つなら3×2など）
  - ボックス内のテキストは中央揃えが基本、複数行の場合は適切な行間で配置

総括（構造のポイント）
* [デザインポイント1]：[デザインポイント1説明]
* [デザインポイント2]：[デザインポイント2説明]
* [デザインポイント3]：[デザインポイント3説明]
* SVGコードで生成してください

変換する文章/記事
[文章をここにプロンプトとして入力する]
出力結果として、添付したスライドに対応したフォーマットが出来上がります

Claudeが作成したプロンプトをコピーボタンからコピーして、新規チャットを始めます。

新規チャット画面に先程コピーしたプロンプトをそのまま貼り付けます。

プロンプトの一番下の変換する文章のところに変換したい文章を入れてください

今回は、元スライドを別で文字起こししたものを入れました

出力結果が以下になります。

再現できてそうですが、さらに再現度を上げるために

修正用プロンプトを使用します

修正用プロンプトと、元スライドの画像を渡して修正を行います
もともとイメージしていたレイアウトは添付の画像です。添付画像のレイアウト形式を参照して、SVGを修正してください。 以下の点に注意してください： 
1. 最初のプロンプトで提供した文章や内容は必ず保持すること 
2. 添付の画像からはレイアウト構造のみを参照すること。 
3.添付画像の文字は一切読み取らないこと。 
4. もし添付画像のレイアウトに必要な要素が最初のプロンプトので提供した文章内容に明示されていない場合は、文章の内容を分析して、その内容に最も適した要素を自動的に生成・補完すること 
5. カテゴリ分類や見出しは、必ず最初のプロンプトで提供した文章内容に沿ったものにし、内容と無関係なカテゴリを追加しないこと 
6. 追加した要素は最初のプロンプトの文章の文脈や主題と一貫性があり、自然に統合されていること 
7. 添付画像から参照すべき要素： 
- カラム構成 
- 色の使い方（紫色のバナー、薄紫色の中分類など） 
- 全体的な配置と比率 
8. 添付画像から参照してはいけない要素： 
- カテゴリ名や分類名 - タイトルや見出し 
- 内容やテキスト 
総括： 添付画像はレイアウト構造のみを参考にして、内容は一切認識しないこと。元のカテゴリ分類や見出し、内容はすべて最初のプロンプトのものを維持してください
修正した結果がこれです

元画像



引用:https://monoist.itmedia.co.jp/mn/articles/2105/25/news050_2.html
1回の修正でだいたい6割くらい再現できたので、さらに修正は行いませんでしたが

修正プロンプトと画像を再度Claudeに投げれば再修正してくれます。
もちろん、ダウンロードしたSVGをPowerPointにそのまま挿入して

SVGを右クリック→「図形に変換」でPowerPoint上で編集可能になります。


 おわりにそれっぽいものは作れたんじゃないでしょうか

実際に使用される際は、プロンプトを少し微調整しながら使っていただければと思います

また、この一連の処理のフローは自動化出来るので、

変換したい文章とスライドテンプレートを選択またはスライドの画像を渡すと

自動でそれっぽいパワポが出来上がるシステムは作れそうですね
Discussion

ログインするとコメントできます