はじめに
株式会社ネクストスケープ Chief Technology Office所属の小野塚です。
2026年4月17日にリリースされたClaude Design、こちらはAnthropicのR&Dチーム「Anthropic Labs」によって開発された機能で、その名の通りチャットで対話しながらデザインが行えるものになります。
ここ最近のようなちょっとした機能追加ではなく、（個人的な感覚ではありますが）比較的大きな機能になりまして、今回はこのClaude Designを使ってスライド作成（パワーポイント資料作成）を試してみたいと思います。
スライド作成準備
デザイン作業において「スライド作成」を行うことにちょっとだけ疑問に思う方もいらっしゃるかもしれませんが、AIツールでスライド・パワーポイント資料を作成するにあたってまずはHTMLで作成し、そこからパワーポイントに変換している人が社内にもいます。
他にも以下のClaude Code用のスライド作成用ツールキットもまずはHTMLでスライドを作成し、そこからパワーポイントやPDFに変換しています。
GitHub - nogataka/SlideKit · GitHub
確かにどこに文字を記述し、どこに図を配置するか、コンテンツそのものも当然重要なのですが、デザインもそれを見る人に正しく伝えるために非常に大事な要素です。
ということでスライド作成を試してみたく、まずは
にアクセスしてみてください。
そうすると以下のような画面が表示されます。
スライド作成にあたっては左側のウィンドウの上部タブのうち「Slide deck」を選択してください。
すると以下のような入力項目が表示されます。
各項目の説明は以下の通り。
・Project name ： プロジェクト名。今回は「AI最新動向紹介スライド」にします
・Design system：ブランドカラー、フォントを別途設定できます。とりあえずデフォルトのままでいきます
・Use speaker notes：ONにすると、スライド上のテキスト量が減り、代わりに発表者用ノート（各スライドの補足説明）が自動生成されます。プレゼンで実際に使う想定ならON、資料として配布する想定ならOFFが良いです。とりあえずこれもOFFのままにしてあとでONにして比較してみましょう
Project nameを入力するとCreateボタンが押せるようになりますので早速押してみます。
すると以下の画面に切り替わります。
こちらもまずは左側の各選択肢について見てみたいと思います。
拡大したのが以下画像です。
各ボタンの説明は以下になります。
Design System： 組織のデザインシステム（色、フォント、コンポーネント）を適用。すでに「Design System (design system)」がタグとして入力欄に付いているので、ネクストスケープのデフォルトデザインシステムが自動適用されています。
Add screenshot ： 参考にしたいUIやデザインのスクショを添付。「こんな雰囲気で」という指示に使います。
Attach codebase ： GitHubリポジトリ等を接続して、既存プロダクトのデザイントークンやコンポーネントを読み込ませる。
Drag in a Figma file ： Figmaファイルをドラッグ＆ドロップして、既存デザインを参照させる。
右側はキャンバスでデザインした内容がここに出力されます。
「Start with a sketch」ボタンがありますが、プロンプトの代わりに、手描きのラフスケッチからスタートする場合はここ。マウスやペンで大まかなレイアウトを描くと、Claudeがそれを解釈してデザインにしてくれます。ただ、今回はスライド作成なのでプロンプトで作業を進めます。
スライド作成実施
では、以下のプロンプトを投げてみます。
ーーー
2026年前半のAI最新動向を紹介するプレゼン資料を作ってください。
内容：
- AIコーディングエージェントの進化（Cursor、Claude Code、Kiro等）
- ハーネスエンジニアリングという新しい概念の登場
- AI × デザインツールの台頭（Claude Design、Figma AI等）
- Computer Use（AIがPCを直接操作する技術）
- エンジニア以外の職種へのAI活用の広がり
各スライドは簡潔に、ポイントを3つ程度に絞ってください。
全体で8〜10スライド程度。
日本語でお願いします。
ーーー
まずはAI側でデザインシステムを確認し、その後、HTMLでスライドが生成されます。
出力結果ですが、まずは以下がタイトル。
途中の内容は以下のような感じです。色味のせいもありますが、個人的には（いい意味で）あまりAIらしくない良い感じになっていると思います。
図、というよりは画像ですが、以下のようにハーネスエンジニアリングに関連して馬の画像を貼り付けてもらっています。
Editモードにすることで文字はもちろん、画面のデザインにおけるボタンやテキストのように各要素の位置や大きさ等を変更することが可能です。
以下が右側のウィンドウを拡大したものになります。
では、パワーポイントへ出力してみましょう。
画面右上の「Share」ボタンをクリックすると以下のようなメニューが出ます。
「Export as PPTX...」を選択すると更に以下のウィンドウが表示されます。
各項目の説明は以下の通り。
Editable · custom fonts ：デザインで使われているフォントをそのまま維持して出力。PCにそのフォントがインストールされている前提なので、自分のPC で編集する分にはデザインの再現度が一番高いです。ただし他の人に共有すると、その人のPCにフォントがなければ表示が崩れます。
Editable · universal fonts（Recommended）：デザインのフォントをArial等のどのPCにも入っているフォントに置き換えて出力します。見た目は少し変わりますが、誰に渡しても崩れない。社内共有が目的ならこれが安全です。
Editable · Google Slides fonts： Google Fontsに置き換えて出力。Google Slidesにアップロードして使う場合はこれが最も互換性が高いです。PowerPointで開く場合はuniversal fontsの方が良いです。
Screenshot-based PPTX ： 各スライドを画像としてPPTXに貼り付け。見た目はClaude Designの画面と完全に同じになりますが、テキストの編集ができません。
「universal fonts」で出力されたファイルを確認したところ、若干改行位置が変わっていたりしていまして、以下のように文字というか各要素が重なってしまっている箇所が見受けられました。
Use speaker notes、その他所管
あとは最初にOFFにした「Use speaker notes」を試してみます。
これをONにして再度出力してもらうとスライドを表示しているウィンドウの下の部分に以下のようにスピーカーノート、口頭での説明用のテキストが出力されます。
パワーポイントに変換した場合でもスピーカーノートもちゃんと出力してくれます。
今回試した内容ではオートシェイプへの変換、つまり簡単な四角や丸を使った図がオートシェイプとして出力されず、画像として出力されてしまったのですが、今までのClaude、もしくはClaude Codeを用いたスライド作成ではちゃんと使用できていたので、恐らくプロンプト等を工夫することでうまくいくのではと思います。
今回の場合ではプロンプトでそれなりに内容について指示をしたためか表示されませんでしたが、別途試した時には資料の内容について選択肢が表示され、どういったトーンでまとめるかといったやり取りがHTMLでの出力の前に行われ、一発でかなり想定に近い形の見た目になりました。
最後に
当社ネクストスケープはこのように生成AIをはじめとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。
（以下当社お問合せフォーム）
当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。
