こんにちは、LIFULLでシニアエンジニアをしている渡邉です。普段はLIFULL HOME'Sの流通領域のエンジニアチームにてマネジメントをしています。
みなさんは業務の中でスライドを作る場面ってどのくらいありますでしょうか？
私は管理職になってから業務上ビジョンシェアリングの機会や総会等での発表の機会が増えました。 それに伴い以前にも増して圧倒的にスライドを作成する作業の時間が増えました。
私の場合、話したいことは思い付くし、文章に起こすこともできるのですが、それをスライドにするのが手間がかかる上スライドを作るセンスにも自信がありません。 これが回り回ってかなりストレスになっていました。 そんな課題感から、この作業をどうにか簡略化できないかを検討し、弊社で主に使われているAmazon Q Developerを使ってスライド作成を自動化するしくみを検討しました。
結果として、従来数時間かかっていた作業が数分で完了するようになり、生産性が大幅に向上しました。
今回は、その具体的な手法と実装について詳しく紹介します。
背景：管理職のスライド作成問題
管理職になると、ビジョンシェアリング、プロジェクトキックオフ、経営陣向け戦略発表など、さまざまな場面でスライドを作成する機会が増えます。
しかし、以下のような課題がありました。
- 時間がかかりすぎる: 1つのスライドセットに数時間程度必要
- デザインセンスの不足: 見栄えの良いスライドが作れない
- 構成の悩み: 伝えたいことをどう整理すればよいかわからない
- 繰り返し作業: 似たような構成のスライドを何度も作成
これらの課題を解決するため、Amazon Q Developerを活用した自動化システムを構築することにしました。
解決アプローチ：LLMにHTMLを書かせる
今回採用したアプローチの核心は、LLMにパワポのスライドのように動作するHTMLを生成させることで、擬似的なスライドを作成することです。PowerPointやKeynoteではなく、HTMLベースのスライドにすることで以下のメリットがあります。
- 自由度の高いデザイン: CSSを使った柔軟なレイアウト
- 一瞬での生成: テンプレートに縛られない迅速な作成
- 簡単なデプロイ: 静的ファイルとして簡単にホスティング可能
- バージョン管理: Gitでの管理が容易
- HTML故の自由度: HTMLなのでスクローラブルなデザインにすることも可能
- テキストのコピーのしやすさ: コードブロックをスライドに落とし込んだ場合テキストのコピーが容易
- パワポライクな画面にも適用: 普段のスライドアプリケーションと同様にキーボードでスライドを捲るデザインにもできる
Amazon Q DeveloperはモデルとしてClaude Sonnet4を利用しているのでコードを作成することが得意です。 そのためスライドを作成するよりもスライドのように機能するHTMLを書かせる方がかなえたい要求を満たしやすいです。
実装手順
1. Amazon Q CLI プロファイルの作成
まず、スライド作成専用のプロファイルを作成します。
/profile create slide
2. コンテキストファイルの設定
.aws/amazonq/rules/slide/ ディレクトリを作成し、コンテキストを紐づけます。
/context add "~/.aws/amazonq/rules/slide/*.md"
3. ガイドラインファイルの作成
最も重要なのが GUIDELINE.md の作成です。このファイルにスライド作成のルールやデザイン指針を詳細に記載します。
この名前に特に縛りはありませんが、私の場合GUIDELINE.mdとしています。
GUIDELINE.mdの主要な内容
私が実際に作成したコンテキストは以下の内容で設定して使っています。
# スライド作成用のコンテキスト ## 目的 - このコンテキストは、ビジョンシェアリングや発表資料に適したスライドを作成するために必要な情報と手順を提供します。 ## 作業の進め方 1. ユーザーから与えられた文章やREADMEの内容やURLの内容を読み解いた上で、発表資料としてわかりやすくシンプルな形になるようにアウトラインを生成します。 2. アウトラインを生成する場合には必ず、"##アウトラインの作成手順"に沿ってOUTLINE.mdを作成してください。 3. OUTLINE.mdの作成とブラッシュアップが完了した後で、OUTLINE.mdの内容を元にパワーポイントのスライドのような挙動をするHTMLファイルでスライドを生成します。 ## デザイン - #ed6103のカラーをメインの色として、その色を利用する上で違和感のないよう作成をお願いします。 - 主張したい文字や情報については文字を大きくしたり色を変更したりなど見た目でわかりやすくしてください。 - 背景は可能な限り白にして欲しい - 全体の配置として余白はあまりないように作ってください。 - 一枚目のスライドのタイトルは大きい文字でわかりやすく作ってください。 ## スライドで注意するポイント - 1スライド1メッセージもしくはシンプルな見た目のデザイン - 一枚目にはタイトルと発表者指名を記載(渡邉陸斗) - 読み上げないで説明できる内容 - 視覚効果（アイコン、グラフ）を効果的に使用 - 数字でアピールできるものに関しては必ず取り入れる - 堅い文章になりすぎないようにしつつも社会人として問題のない内容で記載 - フォントはできるだけ画面共有しても見やすいように大きめに作成する24px以上 - 必ずキーボード操作もできるように作成して欲しい - スクローラブルなブロックがある場合にはスクロールできることも記載して欲しい - スクローラブルなブロックがコードブロックの場合にはコピーボタンを記載して欲しい。
実際の使用フロー
ステップ1: 伝えたいことを文章化
まず、README.mdやドキュメントに伝えたいメッセージや思い、数字を文章としてまとめます。たとえば、今回の記事の元となったREADME.mdは以下のような内容でした。
# 概要 AmazonQを使ってスライドを簡単に生成できるようにしたのでその方法の共有 ## 背景 管理職になって圧倒的にスライドを作成する時間が増えた。 話したいことは思いつくし、文章に起こせるけどそれをスライドにするのは時間がかかる。 あと絶望的にスライドを作るセンスがない。 そんな課題感からスライドの作成だけを楽にしたかった。 ## 成果 かなり雑に文章を書いてもちゃんとしたスライドに起こしてくれてビジョンシェアリング用の資料や発表用資料として生成してくれます。 普段なら4時間くらいかかっていた作業が数分で完了するので、生産性が上がっています。
ステップ2: アウトライン生成
Amazon Q Developerに文章を読み込ませ、スライドごとの構成要素をまとめたOUTLINE.mdを生成してもらいます。
この段階で、スライドの全体構成と各スライドで説明したいことを整理します。
修正が必要であれば手を加えて情報の過不足をチェックしてください。
ステップ3: HTML生成
OUTLINE.mdの内容に沿って、パワーポイントのようにキーボードで操作できるHTMLスライドを生成します。
生成されるHTMLには以下の特徴があります。
- レスポンシブデザイン: さまざまな画面サイズに対応
- キーボード操作: 矢印キーでスライド切り替え可能
- 統一されたデザイン: ブランドカラー（#ed6103）を使用
- 読みやすいフォント: 24px以上の大きなフォントサイズ
ステップ4: デプロイ
生成されたHTMLファイルをS3などの静的ホスティングサービスにアップロードします。 これによって周りの人にも資料を提供できます。
LIFULLではHTMLをホスティングするためのサービスを内製していますので、それを利用することで簡単にデプロイできます。
実際のプロンプト例
スライドを作成する場合に 実際に使用しているプロンプトの例を紹介します。
このREADME.mdの内容を元に、Amazon Q Developerを使ったスライド作成自動化について の発表用スライドを作成してください。 重要なポイント： - LLMにHTMLを書かせることで自由度の高いスライドが作れること - 4時間の作業が数分になったこと - 実際のプロンプトやコンテキストの内容も含めること まずはOUTLINE.mdを作成してください。
成果と効果
このしくみを導入した結果、以下の成果を得ることができました。
時間短縮効果
- 従来: 3~4時間程度
- 現在: 数分程度
- 短縮率: 約90%
品質向上
- 統一されたデザインテンプレート
- 読みやすいフォントサイズとレイアウト
- 一貫したブランディング
柔軟性の向上
- HTMLベースなので細かいカスタマイズが可能
- CSSで自由なデザイン調整
- JavaScriptでインタラクティブな要素も追加可能
まとめ
Amazon Q Developerを活用したスライド作成自動化により、数時間の作業を数分に短縮できました。
特に、LLMにHTMLを直接生成させるアプローチにより、従来のプレゼンテーションツールでは実現困難な自由度の高いスライドを短時間で作成できるようになりました。
このしくみの成功要因は以下の3点です。
- 詳細なコンテキスト設計: GUIDELINE.mdでの明確な指針
- 段階的な生成プロセス: アウトライン → HTML の2段階アプローチ
- HTMLベースの選択: 柔軟性とデプロイの簡単さ
管理職として、限られた時間の中で質の高いプレゼンテーション資料を作成する必要がある方には、ぜひこのアプローチを試していただきたいと思います。
他にも報告レポートやブログ執筆用のプロファイルを生成することで作業を効率化することも可能だと思います。
Amazon Q Developerの可能性を最大限に活用することで、創造的な業務により多くの時間を割くことができるようになるでしょう。
最後に、LIFULL ではともに成長していける仲間を募集しています。よろしければこちらのページもご覧ください。
