🎯 HTMLスライドジェネレーター

このツールは、入力されたテキストやファイルに基づいて、クリーンでモダンな印象を持つスライドHTMLを自動生成するPower Apps キャンバスアプリです。

SlideExpress.mp4

スライドは 目的（objective） に沿って構成され、ストーリー性のあるスライドを作成することが可能です。

AI Builder にはプロンプト内に Tailwind CSS と カスタムCSS 、 カスタムプロンプト が含まれており、視認性とレイアウトに優れたスライドを構築します。

Note

カスタムCSSやカスタムプロンプトはアプリからユーザーにより変更することができます。設定情報はユーザーごとにDataverseに保存されます。

出力されるスライド (HTML) のイメージ

以下のようなスライドを作成することができます。

インストール

こちらからソリューションファイルを入手できます。

Power Apps ソリューションからインポートしてお使いください。

前提条件

以下のライセンスが必要です。

• Power Apps Premium ライセンス
• AI Builder 容量

---

📌 特徴

• ✅ Tailwind CSSとカスタムCSSによる美しいデザイン
• ✅ スライド構成は input を解析して自動生成
• ✅ コンテンツの左右分割レイアウト（container-left / container-right）
• ✅ 以下の要素を活用可能：
  • info-box: 強調表示
  • warning-box: 注意喚起
  • keyword: キーワード表示
• ✅ 重要ポイントはギャラリーカード形式で表示

---

応用シナリオ例

• 自律型エージェント の一つのアクションにして、ニュースを自動的にスライドにする
• Copilot Studio とのインタラクティブなチャットから、自動的にスライドにする。
• Power Apps からファイルをアップロードしてスライドにする
• Power Apps からURLを指定してスライドにする
• スケジュールフローからRSSを元にスライドにする
• Power Apps から仕様書を元にスライドにする

🧩 スライド構成

1. タイトルスライド

• container-left
  • title: スライドのタイトル
  • info-box: サマリ
  • warning-box: アクションアイテム
  • keyword-container, keyword: キーワード表示
• container-right
  • gallery-container, gallery-card: 目次（各ページへのリンク付き）

2. 重要ポイントスライド

• 共通要素（左右）
  • gallery-container, gallery-card: 重要なポイントをカード形式で表示

3. 引用・リンク集スライド

• container-left
  • gallery-card: 引用リンク集
• container-right
  • warning-box: 注意点
  • feature-list, feature-item, feature-dot: 補足情報

---

🎨 使用CSS

Tailwind CSSをCDNで読み込み、以下のカスタムCSSを使用しています。

🚀 利用方法

1. AI Builder にプロンプトを登録します。 {input} と {objective} の部分は、入力から作成してください。

2. AI Builder のインプットには以下を入力します。

• input にスライドの元となるテキストを入力します
• objective にスライドの目的を記述します

3. HTMLスライドが作成されます。

スライドHTMLが自動生成され、各ページが構成されます

🛠️ カスタマイズ

CSSは必要に応じて自由に調整可能です

スライド構成は input の内容に応じて柔軟にカスタマイズ可能です

📎 ライセンス

MIT License

👤 作者 Geek Fujiwara