こんにちは！ENECHANGE エクスペリエンス部の福田です。
まず簡単に、私たちエクスペリエンス部についてご紹介します。
エクスペリエンス部は、ただ美しいものを作ったり、データを管理するのではなく、常に「問い」を持ち、仮説をつくり、手を動かして試し、そしてユーザーとの対話の中で学びつづける組織です。
「社会に根ざした価値ある体験の実装」を目指して、ユーザー体験 × 事業戦略 × 社会実装 の接点をデザインすることにコミットしていきます。
AIを活用したプロトタイピング、データに基づいた価値の創出と向き合いながら、人間の喜びや楽しみ、安心といった「体験の質」を忘れません。
サービスの構想段階から運用改善フェーズに至るまで、多様な専門性を活かして優れた体験を構築していきます。
今回のリレーブログでは、私たちエクスペリエンス部が取り組んだ「SlackからGoogleサイト公開までの自動化ワークフロー構築プロジェクト」についてお話しします。
1. プロジェクトの背景と目的
課題：エクスペリエンス相談窓口での情報共有の効率化
私たちエクスペリエンス部は、社内のエクスペリエンス相談窓口での相談内容をもっと効果的に社内で共有したいという課題がありました。
困ったこと：AIをフル活用してたまった知見が、個人にとどまってしまっている
エクスペリエンス部では、AIエージェントを日常的に活用して相談対応を行っています。しかし、せっかく集めた知見が個人の手元にとどまったままで、チームや他部署に展開される機会があまりありませんでした。
なぜ困った？：チャットもスライドも"途中の思考"には向かない
原因は主に以下の2つです：
AIとのやりとりで得たリサーチ結果をチャットでリンク共有しても、すぐに流れてしまう
- 検索性を保つために整理して残すにしても、手間や管理コストがかかってしまう
スライドで整理しようとすると、アイデア段階のものにしては工数がかかりすぎる
- ビジュアルにまとめること自体が目的化してしまい、肝心の思考や検討に時間をかけられない
目標：美しいWebページとして自動生成・公開する仕組みの構築
そこで私たちは、『アイデアをインプット・リサーチ→インフォグラフィックス化→LP型プレゼン資料にして社内共有』までを一気通貫で行う仕組みの構築に挑戦しました。
この試みでは、デザインツールは一切使用していません。「知見をもっと見える形で広げたい」、「頭の中にあるアイデアをすぐ形にしたい」、そんな方にも参考になれば幸いです。
2. 開発されたワークフローの全体像
2.1 情報収集・整理フェーズ
Slack相談内容の蓄積
- #open_エクスペリエンス相談窓口での相談履歴をSlackワークフローで自動収集
- Notionのデータベースに自動でアップして管理
- 相談の種類、重要度、ステータスを体系的に整理
ステータス管理
- 完了案件のアウトプット状況を追跡・分類
- 優先度の高い案件を特定
2.2 AI要約・構造化フェーズ
要約生成～Notion AI活用～
- 相談内容を構造化してまとめ、レポート形式で整理
- SlackのURLを投げて、スレッドの直URLやチャンネルURLから要点を抽出
- 相談背景→検討内容→解決策→成果の流れで構造化
レポート形式化
- 技術的詳細の整理：実装内容、処理時間、課題と対応策を明確化
- 再現可能な形式での情報整理
2.3 HTML生成フェーズ（Cursor活用）
AIプロンプト設計
- 要約されたコンテンツをCursorに投入
- 具体的な指示例：「グラデーション背景、カード型レイアウト、アニメーション効果付きで作成して」
- デザイン要件の明確化：レスポンシブ対応、視覚的に魅力的なレイアウト
HTML自動生成
- 美しいレイアウトとデザインを持つWebページコードを生成
- レスポンシブ対応：モバイル・デスクトップ両対応のHTML出力
- 実際の成果：AIアンバサダー活動記録1.html（相談事例の可視化）
マークダウン変換
- Notion資料からはてなブログ形式への自動変換
- 処理時間：「30分くらいでできました」という高速開発を実現
2.4 公開・共有フェーズ（Googleサイト活用）
HTMLインポート
- 生成されたコードをGoogleサイトに埋め込み
- GeminiとCursorの連携：「リサーチ結果をインフォグラフィックで社内公開」
社内限定公開
- ENECHANGEドメインでの限定アクセス設定
- 継続的更新：新規相談案件の追加に対応した動的更新
3. AIエージェントを使ったインフォグラフィックス化の実践
テーマ設定：エクスペリエンス相談窓口の成果を可視化する
私がこの試みで実際にアウトプットしたのは「AIアンバサダーチーム活動レポート」というテーマです。
#open_エクスペリエンス相談窓口での相談履歴をもとに、課題構造と解決策を特定し、インフォグラフィックスに落とし込んで社内訴求用のLP型プレゼン資料を作成しました。
このテーマを選んだ理由：
- エクスペリエンス相談窓口の成果を、データ視点で読み解きたかった
- 「相談はあるけど、実際に何が解決されているのか？」という声をどの部署も抱えている実態が見えていた
- サービス改善や提案時に「エクスペリエンス部は本当に価値を提供している」と説明できる材料が欲しかった
ワークフローの実践例
このワークフローを実際に試してみたのが、エクスペリエンス相談窓口での相談内容の可視化です。
相談窓口でのやり取りをSlackワークフローで自動収集し、Notionのデータベースに蓄積。そのデータをNotion AIで構造化してまとめ、CursorでHTMLに変換してGoogleサイトで公開するという一連の流れを実践しました。
この構成に対し、Cursorには以下のような形でプロンプトを設計しました：
- 目的と想定読者（誰にどう伝えたいか？）
- 相談事例の構造化と可視化依頼（リサーチとインプット）
- 出したい構成や見せ方（アウトプット）
- 訴求力のある文構成と視覚的ストーリーラインの提案
そのうえで、複数の要素を段階的にブラッシュアップしていく形で対話を進めています。
Cursorでリサーチして驚いた3つのポイント
1. 網羅性の高さ
- 想定外の情報まで拾って整理・提案をしてくれました。
2. 構造化された出力
- そのまま使えるレベルの訴求ストーリーやグラフィックを出力してくれました。
3. 客観性ある分析
- バイアスが少なく、冷静にデータのみを見て整理をしてくれました。
4. インフォグラフィックスの設計と可視化
可視化のポイント
今回のインフォグラフィックスは、すべてCursorによって自動生成されたアウトプットをベースにしています。
リサーチ内容の要約だけでなく、Chart.jsを使ったグラフ構成やHTML構造、トーンや情報整理の方針まで、Cursorからの提案を受けて作成しました。
私がその出力に対して行ったのは、情報の粒度や強調、ストーリー構成やレイアウトの細部などの微調整のみです。
構造化されたデータをもとに、以下のような要素を指示しました：
- 比較チャート：相談事例ごとの解決策と成果の比較
- 時系列グラフ：相談件数の推移と傾向分析
- カテゴリ別分類：業務効率化、データ分析、システム連携などの分類
- 成功事例の可視化：具体的な成果と数値の明示
実際の成果物の特徴
1. 視覚的なストーリーテリング
- グラデーション背景による美しいデザイン
- カード型レイアウトによる情報の整理
- アニメーション効果による動的な表現
2. データドリブンな分析
- Chart.jsを活用したインタラクティブなグラフ
- 実際の相談データに基づく分析結果
- 定量的な成果の可視化
3. レスポンシブデザイン
- モバイル・デスクトップ両対応
- 様々なデバイスでの最適な表示
- アクセシビリティの向上
実際の成果物例
以下は、このワークフローで実際に作成された「今月の相談事例ピックアップ」のスクリーンショットです。IR資料の英訳自動化や委託業務の内製化など、具体的な相談事例が構造化されて可視化されています。
このように、Slackでの相談内容が、社内共有しやすい形で可視化されています。
5. 技術的実装の詳細
Cursorでの効率的ブログ生成
Cursorを活用することで、従来エンジニアに頼まないとできなかったLP作成がみんなできるようになりました。
プロンプト最適化のポイント
- デザイン要件の明確化：グラデーション背景、カード型レイアウト、アニメーション効果
- 構造化指示：相談背景→検討内容→解決策→成果の流れ
- 技術仕様の指定：レスポンシブ対応、Chart.js活用、モダンなCSS
- 実際の成果：3つのHTMLファイルを30分程度で生成
具体的な実装例
- グラデーション背景、カード型レイアウト
- データ可視化レポート（Chart.js活用）
- スライド形式、アニメーション効果
実際に生成されたHTMLコード例
以下は、Cursorで実際に生成されたHTMLコードのスクリーンショットです。記事で説明した「美しいグラデーション背景」や「カード型レイアウト」が、具体的にどのようなCSSコードで実装されているかが確認できます。
このように、Cursorは「グラデーション背景、カード型レイアウト、アニメーション効果付きで作成して」という指示に対して、プロフェッショナルな品質のHTMLとCSSコードを自動生成してくれます。
Googleサイトでの社内LP作成
GeminiとCursorの連携
- Geminiでリサーチ結果をインフォグラフィック形式で出力
- CursorでHTMLコードを生成
- Googleサイトで直接利用
従来との差別化
- 今までエンジニアに頼まないとできなかったLP作成がみんなできるようになった
- 非エンジニアでも高品質なWebページ作成が可能
実際の成果物
- 美しいグラデーション背景とカード型レイアウト
- レスポンシブデザインでモバイル・デスクトップ両対応
- Chart.jsを活用したデータ可視化
- スライド形式のプレゼンテーション資料
6. 実感した価値と今後の展望
実感した価値
AIが出してくれるアイデア構想の整理やリサーチ結果は、たたき台として十分使えるクオリティでした。
さらにエクスペリエンス部が、業務効率化視点での見せ方や伝えたいポイントを加えることで、短時間でより説得力のある資料が作れるようになりました。
特に、構想提案フェーズで1～2時間あれば、AI＋インフォグラフィックスによるLP型プレゼン資料をまとめきれるのは大きな変化でした。
今後の展望
1. 他部署への展開
- 営業部門の顧客情報整理
- 人事部門の社内制度説明ページ作成
- 経理部門のレポート自動生成
2. 機能拡張
- リアルタイム更新機能の実装
- 多言語対応
- より高度なデザインテンプレートの追加
3. 社外展開
- 同様の課題を持つ他社へのノウハウ共有
- オープンソース化の検討
7. ワークフローの実用性と拡張性
業務効率化の成果
手動作業削減
- 複雑な情報整理からWebページ公開までを大幅自動化
- 従来数時間かかっていた作業が30分程度に短縮
- 実際の成果：3つのHTMLファイルを1日で完成
品質向上
- AI活用により一定品質のアウトプットを安定供給
- 人的ミスの削減
- 実際の成果：プロフェッショナルなデザインのWebページを自動生成
アクセス向上
- 従来のSlack埋もれ情報が検索・参照しやすい形に
- 社内知識の蓄積と共有が促進
- 実際の成果：Experience idea Stockerでの社内共有実現
技術的学習効果
非エンジニアのHTML生成スキル
- 従来不可能だった技術的アウトプットが可能に
- AI協調作業の実践：Notion AI → Cursor → Googleサイトの連携パターン確立
継続的改善
- 「相談からのレポートブログ作成」という再現可能なプロセス構築
- 他部署でも応用可能なワークフロー提示
8. プロジェクトの意義と今後の展開
組織的インパクト
知識の民主化
- エンジニア依存だったWebページ作成の内製化
- 非エンジニアでも高品質なWebコンテンツ作成が可能
情報共有の質向上
- Slack情報の散逸防止と体系的な知識蓄積
- 検索・参照しやすい形での情報整理
AI活用のモデルケース
- 他部署でも応用可能なワークフロー提示
- 組織全体のAI活用促進
9. まとめ
今回のプロジェクトを通じて、AIエージェントを活用することで、従来エンジニアに依存していたWebページ作成作業を非エンジニアでも効率的に行えるようになりました。
特に重要なのは、単にAIツールを使うだけでなく、Notion AI → Cursor → Googleサイトという連携パターンを確立し、再現可能なワークフローを構築できたことです。
この経験は、組織全体のAI活用促進のモデルケースとなり、他部署でも応用可能な価値ある取り組みとなりました。
今後も、AIエージェントを活用した業務効率化の取り組みを継続し、組織全体の生産性向上に貢献していきたいと思います。
次回は同じチームの細木さんが書いてくださる予定です。お楽しみに！
