エクサベース AIにはコードプレビュー機能が存在します。
コードプレビュー機能を用いて、スライド資料の一部を作成する方法をご紹介いたします。
本記事では、スライド資料の一部（画像等）をSVG形式で出力することで、パワーポイントに貼り付けて編集可能な図版を作成する方法をご紹介します。
コードプレビュー機能とは？
コードプレビュー機能とは、AIが生成したプログラミングコードなどをその場でビジュアライズすることができる機能です。
簡易なスライドの資料や画像などを作成し、エクサベース AI上で確認することができます。
画像：コードプレビュー機能の例
【参考記事】
・バイブコーディングについて
スライド資料作成までの手順
コードプレビュー機能を用いて、スライド資料の一部（画像等）をSVG形式で出力し、パワーポイントに貼り付けて編集可能な図版を作成する方法をご紹介します。
手順は大きくわけて2つです。
■手順1. エクサベース AIでスライド資料の一部（画像等）をSVG形式で出力する
1.1 エクサベース AIを開きます。
1.2 チャットパートナーでClaude Sonnet 4.5を選択します。
※本記事では説明の際にClaude Sonnet 4.5を用いていますが、他のチャットパートナー（Gemini 3 Proなど）でもコードプレビュー機能をご利用いただけます。
1.3 チャット入力欄に以下のプロンプトをコピーアンドペーストし、送信します。
今回は、例として下記のようなプロンプトの内容に入力します。
※図版の内容については、ご自身の業務に合わせて適宜内容を変更してお試しください
【プロンプト】
あなたはSVG作成のプロフェッショナルです。
IT企業が新卒向けに会社説明会を実施する際のスライド図版を、ブラウザですぐにプレビュー表示できるSVGコードで作成してください。
作成内容
・「選考プロセス」のプロセスチャートをスライド図版として作成します
・柔らかくなりすぎず、かためになりすぎないトーンでお願いします
・全体的なトーンは黄色でお願いします
・数字と画像の配置はバランスよくお願いします
選考プロセス
エントリー→WEBテスト→一次面接→二次面接→役員面接→内定
選考期間
約１〜2ヶ月
各ステップのポイント
• エントリー：マイページ登録、エントリーシート提出
• WEBテスト：言語・非言語・性格検査（自宅受検可）
• 面接：各回30〜45分程度、人事・現場社員・役員との対話
• 各選考結果は1週間以内にメールでお知らせします
手順1.3を実行すると、生成AIによる出力が開始されます。画面右側ではコードプレビュー機能により、生成された図版がリアルタイムで可視化されます。
■手順2. パワーポイントに貼り付け、編集可能な図版に変更
2.1. コードの内容をコピーする。
エクサベース AIでの生成結果の内、SVGコードの部分をコピーします。
コードして生成された部分は、ワンクリックでコピーすることが可能です。（下図赤枠のアイコン）
2.2. コピーした内容をSVGファイルとして保存
2.2.1 メモ帳をひらき、手順2.1でコピーした内容をメモ帳に貼り付けます。
Windowsの方はアプリ検索欄に「メモ帳」と入力し、メモ帳アプリを起動します。
※以下の手順工程はWindows版での参考画像となります。ご了承ください。
2.2.2 メモ帳に貼り付け後、左上の「ファイル」から「名前を付けて保存」を選択します。
2.2.3 メモ帳の「名前を付けて保存」を選択し、ファイル名を「〇〇〇.svg」として保存します。
2.3. svgファイルをパワーポイントへ読み込み
手順2.2で保存した.svgファイルをパワーポイントの資料画面にドラッグ&ドロップします。
ドラッグ&ドロップすることで、パワーポイントへ図版として貼り付けることが可能です。
※保存場所に関しては、手順2で指定したフォルダをご確認ください。
※サンプル画像が手順1と異なりますが、どうぞご了承ください。
2.4. パワーポイント上で編集可能な図版に変更
図版はグループ化された状態で読み込まれます。
そのため、図版上で右クリックし、グループ化を選択し、その後グループ解除を選択します。これでパワーポイント上で編集可能な図版の状態となります。こうすることで、手元で画像や文字の位置などを微調整することが可能です。
※サンプル画像が手順1と異なりますが、どうぞご了承ください。
以上、スライド資料のパーツをSVG形式で出力し、パワーポイント上で再編集可能な図版として活用する手法をご紹介しました。
生成AIが出力したデザインをベースにしつつ、要素の配置や細部を微調整したい際の場面などにぜひご活用ください。