はじめに

こんにちは。NewIT部の村田です。
ビジネスの現場では、複雑な情報や意思決定を「伝わる」形で共有することが求められます。本記事では、GitHub CopilotなどのAIアシスタントを活用し、PowerPointやExcelだけに頼らず、HTMLで図や表を“素早く”生成・活用するテクニックを解説します。

Copilotを使えば「こんな表を作りたい」「この構造を図で見せたい」と伝えるだけで、数秒～数十秒でHTMLコードが生成されます。これをブラウザで開いて画像化すれば、パワポやエクセル、Teams、メールなどあらゆる資料に即座に貼り付け可能です。

資料作成に悩む方や、より説得力のあるアウトプットを目指す方、AI時代の“時短”資料術を身につけたい方におすすめです。

Copilot×HTMLで図や表を作るメリット

• Copilotで“秒”で作図できる
  • 「進捗表を作りたい」「シンプルな組織図を作りたい」と指示するだけで、AIがHTML＋CSSコードを自動生成
  • 手作業で図形を並べるより圧倒的に速い
• PowerPointやExcelとの違い
  • コードで管理できるため、git管理が容易
  • Web資料やブログにもそのまま埋め込める
  • HTMLをブラウザで開いてスクリーンショットで画像化すれば、どんな資料にも貼り付け可能
• 再利用性・カスタマイズ性
  • デザインや構成を柔軟に変更可能
  • 指示プロンプトをテンプレートとしてチームで共有できる

Copilot×HTMLで図や表を作る際のポイント

• 目的・伝えたいことを明確にする
  • 「誰に」「何を」「どう伝えたいか」を最初に整理することで、AIが最適な図や表を生成しやすくなります。
• 構造・要素を言語化して指示する
  • 「3段階の進捗バー」「部門ごとに色分けした組織図」「Yes/No分岐のあるフローチャート」など、構造や要素を具体的に伝えると精度が上がります。
  • 具体的なイメージが無い場合は、どんな図が良いかな？とざっくり相談から始めることもできます。
• 現場の“あるある”や実務要件も盛り込む
  • 「分岐ラベルを矢印上に」「複数レーンの工程」「現場でよく使う色・表現」など、実務で必要な細部も指示すると普段使っている資料の品質に近づきます。
• 生成されたコードは必ずプレビュー・微調整
  • Copilotの出力は“たたき台”として活用し、実際にブラウザで表示してズレや見た目を確認し、修正の指摘や、必要に応じてCSSやSVGを自分で微調整しましょう。
• Copilotを育てる・指示の再利用を意識する
  • 最初のうちは多くの試行錯誤が必要ですが、徐々にCopilotに指示の出し方を学習させることで、少ない指示でより精度の高い図や表を生成できるようになります。
  • 修正が終わったら、Copilotに「次回も同じ品質の図を作れるようポイントを整理して」と指示すれば、再利用しやすい詳細な指示文を自動生成できます。

実践：HTMLで作る図表サンプル

以下は実際にGithubCopilotにHTML形式で書かせた図です。

• 進捗管理表

表形式で情報を集約できます。Copilotで調査・分析した結果をそのまま伝達可能な図に出力することができます。

• フローチャート

フローの整理ができます。プロジェクトの流れや既存の仕組みの共有が整理できるので、要件整理したヒアリング内容をcopilotで整理し、アウトプットをフロー図にすることができます。

• 組織図

体制の整理ができます。プロジェクトに関わる人の役割や体制を図として整理することができます。

まとめ

CopilotとHTMLを組み合わせることで、ビジネス資料の図や表を“圧倒的な速さ”で作成できます。テンプレート化や自動生成も可能なので、チーム全体の生産性向上にもつながります。

ぜひ皆さんも図や表の作成にCopilotを使って生産性を上げてください。
弊社にご興味いただけましたら、お気軽にお問合せいただけますと幸いです