生成AI使っていますか？ChatGPTにわからないことを聞いてみたら、それっぽいことを答えてくれるよね〜という人から、API連携して自家製のアプリに落とし込んでいる人まで様々な方がいると思います。

今回は、生成AIのなかでもClaude Opusという生成AIを使っておしゃれなプレゼンテーションを作ってみたのでご紹介します。

Claudeは、Anthropic社が開発した生成AIで、ChatGPTと同様に自然言語処理を得意としています。ただ、ChatGPTと比べると、より具体的でクリエイティブな回答をしてくれる印象があります。もちろん他の生成AIを使っても構いません。

今回は、そんなClaudeを使って、Reveal.jsというプレゼンテーションフレームワークでスライドを作ってみました。Reveal.jsは、HTMLとJavaScriptを使ってプレゼンテーションを作成するためのオープンソースのフレームワークです。アニメーションや遷移効果を自由に設定できるのが特徴で、見栄えのするプレゼンテーションを作ることができます。

プレゼンテーションの作り方

以下の2STEPでプレゼンテーションが作れます。

1. Claude Opus にプロンプトを入力

2. HTML Playgroundでプレビューする

Claude Opus にプロンプトを入力

Claudeに以下のようなプロンプトを与えました。

Reveal.jsを用いて以下のお題でプレゼン資料を作ってください。
javascriptの資産を使って、使えるものは何でも使ってとってもおしゃれなプレゼンテーションを作ってください。

お題 「なぜ靴下は片方だけ無くなるのか？」

・制約事項
ふざけた内容を、真面目に、徹底的に議論してください。
スライド枚数は10枚でお願いします。
コードは一切省略しないでください。
100万円で売れる価値の高いプレゼンテーションを作成してください
アニメーションなどを入れてリッチな見た目にしてください
assetはcdnから取得してください。
画像を使う場合はunsplashから使用してください。
色は白を基調としたカラフルな色使いでお願いします。
様々なレイアウトで作成し、アニメーションを利用してください。
おしゃれな日本語フォントでお願いします。

その結果、以下のようなプレゼンテーションが完成しました。

プロンプトを与えるだけでアニメーションのついたスライドが作れるのすごいですよね。

そしてこれのすごいのが、pptxgenjsというライブラリを利用することでMicrosoft Powerpointの形式である.pptxでエクスポートできます。なので、Webで共有するのもよし、メールでpptxで共有するのもよしです。

Claudeに全てお任せして、プレゼンテーションを一気に作成することができました。もちろん、最終的な判断は人間が行う必要がありますが、生成AIを活用することで、プレゼンテーション作成のハードルはぐっと下がるはずです。

さらにプロンプトを洗練させていくとどんどんクオリティが上がります。Xでは以下のような利用事例もありました。

プロンプトは以下の通りです。

# index.html
# - Declare the HTML5 document type
# - Specify the page language as Japanese
# - Include the header section with page metadata
#   - Set the character encoding to UTF-8
#   - Set the viewport for responsive design
#     - Device width-based display
#     - Initial scale of 1.0
#     - Disable user scaling
#   - Set the page title
# - Load the reveal.js reset CSS
# - Load the reveal.js core CSS
# - Load the reveal.js white theme CSS
# - Load the Noto Sans JP font from Google Fonts
# - Define custom styles
#   - Style for the reveal class
#     - Set the font to Noto Sans JP
#     - Set the font size to 42px
#     - Set the font weight to normal
#   - Style for h1 to h4 elements within the reveal class
#     - Disable text transformation
#   - Style for img elements within the reveal class section
#     - Disable image border
#     - Disable image box shadow
# - Start the page body section
#   - Create the root element for reveal.js
#   - Create the container element for slides
#   - Add a section (slide) with a background image
#     - Set the background image URL (random socks image from Unsplash)
#     - Set the background image opacity to 0.5
#     - Add the slide title
#   - Add a new section (slide)
#     - Add the slide subtitle
#     - Add a bulleted list with fragment-based list items
#   - Add a new section (slide)
#     - Set the slide transition effect to convex
#     - Add the slide subtitle
#     - Add a paragraph
#     - Add an image (random burglar image from Unsplash)
#   - Add a new section (slide)
#     - Set the slide transition effect to convex
#     - Add the slide subtitle
#     - Add a paragraph
#     - Add an image (random wormhole image from Unsplash)
#   - Add a new section (slide)
#     - Set the slide transition effect to zoom
#     - Add the slide subtitle
#     - Add a paragraph
#     - Add an image (random socks image from Unsplash)
#   - Add a new section (slide)
#     - Set the slide transition effect to zoom
#     - Add the slide subtitle
#     - Add a paragraph
#     - Add an image (random washing machine image from Unsplash)
#   - Add a new section (slide)
#     - Set the slide transition effect to fade
#     - Add the slide subtitle
#     - Add a paragraph
#     - Add an image (random quantum entanglement image from Unsplash)
#   - Add a new section (slide)
#     - Set the slide transition effect to fade
#     - Add the slide subtitle
#     - Add a paragraph
#     - Add an image (random divorce image from Unsplash)
#   - Add a new section (slide)
#     - Set the slide transition effect to slide
#     - Add the slide subtitle
#     - Add a paragraph
#     - Add a paragraph with a fragment
#   - Add a section (slide) with a background image
#     - Set the background image URL (random mystery image from Unsplash)
#     - Set the background image opacity to 0.8
#     - Add the slide title
#     - Add a paragraph
# - Load the reveal.js core script
# - Load the reveal.js zoom plugin
# - Define custom scripts
#   - Initialize reveal.js
#     - Enable controls (navigation)
#     - Enable progress bar
#     - Center the slides
#     - Enable URL hashing
#     - Specify the plugins to use (zoom plugin)
# - Set the total number of slides to 10
# 
# ## Non-Functional Requirements
# - Fetch assets from CDNs
# - Ensure high performance and fast operation
# - Apply responsive design for comfortable viewing on mobile devices
# 
# ## Constraints
# - Use Reveal.js
# - The content should be about explaining a new programming language, Niwatoko
# - Meet the specified requirements

このプロンプトでは、より技術的な指示を与えることでさらにクオリティを高めています。具体的には、CDNからのアセット取得、Opacityの指定、CSSファイルの指定、使用するHTML タグの指定などが挙げられます。このようにさらにプロンプトを洗練させるためには、プログラミングの基礎的知識が必要になることがわかります。したがって、ノンプログラマーでもキーワードや概念を抑えることがとても大事です。

生成AIは活用の仕方によって様々なことに使えます。ぜひ一緒に生成AIを使いこなして、業務を効率化していきましょう！

株式会社OmlucではWeb開発、生成AI活用事業をしております。 生成AIを利用したマーケ支援、業務効率化、製造業向けDX支援はぜひご相談ください。