LLM2.0：議事録情報を「使える資産」へ
LLM2.0では、議事録を組織の知識や意思決定を支える「使える資産」へと進化させます。そこで有効なのが、インフォグラフィックを用いた情報の可視化です。内容がより直感的に理解でき記憶に残りやすくなるほか、視覚的情報の特性を活かして多様なバックグラウンドを持つメンバー間での迅速な情報共有も促進します。
-
議事録の主要トピック・キーワードの視覚的表現
「ワードクラウド」で、会議で頻出したキーワードを視覚的に表示し、主要なテーマを一目で把握。また、「関連図（コンセプトマップ）」により、 議論されたトピック間の関連性を図で示し、議論の全体像や構造を理解しやすくします。 -
議論の構造や時系列変化の可視化
「タイムライン」で各議題や発言のタイミングを表示し、議論の流れを追体験可能に。「フローチャート」で、複雑な議論のプロセスや意思決定の過程を示し、論理的なつながりを明確にします。 -
決定事項と担当者の明確化
「責任分担表（RACIチャート風）」で、決定事項、担当者、役割をマトリクス形式で整理し、誰が何に責任を持つのかを明確化します。
現在、各種インフォグラフィックを自動生成するLLMツールの開発が進んでいます。今後は専門的なデザインスキルがなくても、わかりやすい資料を迅速に作成できるようになるでしょう。
LLM2.0の議事録の作り方
【準備するもの】
・会議の音声データ
・音声起こしツール：NotebookLM
・生成AI：Gemini
【手順】
・Step1：NotebookLMに音声データを読み込ませ、文字起こしする
・Step2：NotebookLMのチャット欄に、以下のプロンプトを入力する
指定した音声文字起こしファイルはOO社との会議の議事録です。概要とToDoリストに分けて議事録を作成してください。
・Step3：Geminiに、下記のインフォグラフィック用のプロンプトを入力。加えて、NotebookLMで出力した議事録のテキストを記載し、実行する。
・完成：プレビュー画面で、インフォグラフィックが表示される。
※プレビューが表示されない場合、HTMLコード全体をコピー、「メモ帳」もしくは「テキストエディット」を開き、貼り付けます。名前を付けて保存する際に、末尾に「 .html 」という拡張子を記載します。文字コード（エンコーディング）の選択肢があれば、「UTF-8」を選択。保存したHTMLファイルをダブルクリックすれば、自動的に起動しWebブラウザ上で表示されます
※カラーパレットなどを入力すると、コーポレートカラーの資料も作成可能</span></p>
<div class="columnSection small">
<pre class="src">
# ビジネス文書向けHTMLインフォグラフィック／資料作成プロンプト
## 目的
以下の内容を、ビジネス文書として適切で、情報がわかりやすく整理されたHTMLインフォグラフィック/資料に変換してください。情報の正確性、明瞭性、信頼性を最優先します。特にデータや複雑な箇所は、グラフやSVGなどを効果的に活用し、直感的な理解を促すようにしてください。洗練されたデザインで、プロフェッショナルな印象を与えることを目指します。
## 使用カラーパレット
### メインカラー
* メインブルー `#0066A4`: ブランドの基本色、タイトル・見出しに
* メインオレンジ `#F26522`: 強調テキスト、グラフ・チャートのアクセント
### ブルーバリエーション
* ディープブルー `#004F80`: 濃い青色、重要なデータの強調に
* メインブルー `#0066A4`: ブランドの基本色、主要コンテンツに
* クラシックブルー `#0074B5`: やや明るい青色、重要度次位のコンテンツに
* テクノブルー `#0084D1`: 明るい青色、サブデータや補足情報に
* スカイブルー `#4CA6E0`: 淡い青色、背景やセカンダリーコンテンツに
* ペールブルー `#B3D6EF`: 最も淡い青色、微細なデータや背景に
### オレンジバリエーション
* ディープオレンジ `#C14D14`: グラフ・チャートのアクセント（濃い）
* メインオレンジ `#F26522`: 強調テキスト、グラフ・チャートのアクセント
* ブライトオレンジ `#FF7E40`: グラフ・チャートのアクセント（明るい）
### ニュートラルカラー
* ダークチャコール `#212121`: 本文テキスト（メイン）
* ミディアムチャコール `#424242`: 本文テキスト（補足）
* スレートグレー `#707070`: セパレーター・境界線（強）
* ライトグレー `#EEEEEE`: 背景（セカンダリー）、セパレーター（弱）
* ホワイト `#FFFFFF`: 背景（メイン）
## デザイン仕様
### 1. カラースキーム (ビジネス向け)
上記のカラーパレットに基づき、落ち着きと信頼性を感じさせる配色を使用します。
* メインカラー (タイトルなど): `#0066A4` (メインブルー)
* 強調カラー (テキスト強調など): `#F26522` (メインオレンジ)
* アクセントカラー (サブタイトル、アイコンなど): `#0074B5` (クラシックブルー)
* サブカラー (罫線、区切り線など): `#707070` (スレートグレー) / `#EEEEEE` (ライトグレー)
* 背景色 (全体、カードのメイン): `#FFFFFF` (ホワイト)
* 背景色 (セカンダリ、カードのサブ): `#EEEEEE` (ライトグレー)
* テキストカラー (本文メイン): `#212121` (ダークチャコール)
* テキストカラー (見出し): `#0066A4` (メインブルー) / `#212121` (ダークチャコール)
* テキストカラー (補足、キャプション): `#424242` (ミディアムチャコール) / `#707070` (スレートグレー)
* 補足: グラフ、チャート、データ強調などには、ブルーバリエーションやオレンジバリエーションをパレットの定義に従って効果的に使用してください。
### 2. デザイン要素
* 情報の流れは、左上から右へ、上から下へと論理的に配置します。
* アイコンは、Font Awesome などの標準的でビジネスに適したアイコンセットを使用します。（例：🏢、📊、📈、👥、📄、💡、✅）アイコンの色はアクセントカラー (`#0074B5`) やテキストカラー (`#212121`, `#424242`) を基本とします。
* 図形（囲み線、矢印、区切り線など）は、シンプルで直線的なデザインを使用します。手書き風は避けます。色はサブカラー (`#707070`, `#EEEEEE`) を使用します。
* テキストと視覚要素（アイコン、図表、SVG、シンプルな図形）をバランス良く組み合わせ、情報を効果的に伝えます。
* キーワードの強調は、太字または強調カラー (`#F26522`) / メインカラー (`#0066A4`) で行います。過度な装飾は避けます。
* 関連する情報は、シンプルな直線や矢印（色はサブカラー `#707070` または `#EEEEEE`）で接続し、関係性を明確にします。
### 3. タイポグラフィ (ビジネス向けフォント)
* フォント: `font-family: 'Yu Gothic', 'Meiryo', sans-serif;` を基本とします。Webフォントを使用する場合は、ビジネス文書に適した明朝体やゴシック体を選択します。
* タイトル: 28px, メインカラー (`#0066A4`), 太字
* サブタイトル: 18px, アクセントカラー (`#0074B5`)
* セクション見出し: 20px, テキストカラー (見出し) (`#0066A4` または `#212121`), 太字, 必要であれば細い下線 (色はサブカラー `#707070` または `#EEEEEE`)
* 本文: 14px or 15px, テキストカラー (本文メイン) (`#212121`), 行間 1.6
* 注釈/キャプション: 12px, テキストカラー (補足/キャプション) (`#424242` または `#707070`)
(Webフォントを使用する場合の記述例)<style type="text/css">/* 必要に応じてビジネス向けのWebフォントを読み込む */
/* 例: @import url('...'); */
body {
font-family: 'Yu Gothic', 'Meiryo', sans-serif; /* フォールバック指定 */
}</style>
### 4. レイアウト
* ヘッダー: 左揃えで資料タイトル、右揃えで作成日、作成者、バージョン情報などを記載します。背景色はホワイト (`#FFFFFF`) またはライトグレー (`#EEEEEE`) を検討。
* コンテンツエリア: 内容に応じて1カラム、2カラム、または3カラム構成を柔軟に使い分けます。全体の背景はホワイト (`#FFFFFF`) を基本とします。
* 3カラムの場合の目安: 左側33%, 中央33%, 右側33% (内容により調整可)
* カード型コンポーネント: 情報を整理するために使用。
* 背景色: ホワイト (`#FFFFFF`) または ライトグレー (`#EEEEEE`)
* 角丸: 8px 程度
* 影: `box-shadow: 0 2px 4px rgba(0,0,0,0.1);` (控えめな影)
* 境界線: 必要に応じてサブカラー (`#EEEEEE` または `#707070`) で設定。
* セクション間の余白: 十分な余白を設け、情報の区切りと階層構造を明確にします。
* レスポンシブデザイン: 横幅100%を基本とし、異なる画面サイズでも適切に表示されるように考慮します。（メディアクエリの使用を示唆）
* グラスモーフィズムのような過度な視覚効果は避け、シンプルでクリーンなデザインを維持します。
## 情報表現の技法
* テキストと視覚要素のバランス: テキストは簡潔にまとめ、図やグラフ、SVGを効果的に用いて補完します。
* キーワード強調: 太字や色変更（強調カラー `#F26522` や メインカラー `#0066A4` を使用）で重要なポイントを明確に示します。
* 図形・アイコン・SVG活用:
* 基本的な概念にはシンプルな図形や標準的なアイコンを使用します。
* 複雑な概念、プロセスフロー、システム構成、関係性など、テキストだけでは理解しづらい箇所については、説明的なSVG（Scalable Vector Graphics）を積極的に活用し、静的なアイコンよりも詳細でわかりやすい視覚表現を目指してください。SVG内の色もカラーパレットに基づいて設定します。
* データ表現 (グラフ・表):
* 数値データは、データの内容と伝えたいメッセージに最も適したグラフ形式（棒、折れ線、円、散布図、積み上げグラフ、レーダーチャートなど）や表形式を選択し、正確かつわかりやすく視覚化してください。グラフの色には、ブルーバリエーション、オレンジバリエーション、ニュートラルカラーをパレットの定義に従って（例：重要なデータにディープブルー `#004F80`、アクセントにメインオレンジ `#F26522` など）効果的に割り当てます。
* 特に複雑な数値データ、時系列での変化、項目間の比較などは、グラフを用いることで直感的な理解を強力に促進してください。グラフの軸ラベル、凡例、単位なども明確に記述します。
* 関係性の明示: 接続線や矢印（色はサブカラー `#707070` または `#EEEEEE`）を用いて、情報間の論理的なつながりやフローを明確に示します。SVG内の要素間接続も同様です。
* 余白の活用: 要素間の余白を適切に設定し、視認性と可読性を高めます。
## 全体的な指針
* 可能な限りHTMLのコンテンツの分量は増やし、詳細な情報を提供してください。
* 読み手が情報を論理的に追えるように、コンテンツを構成・配置します。
* 情報の階層構造（タイトル > 見出し > 本文）を視覚的に明確にします。
* ビジネスシーンに適した、洗練され、信頼感のあるデザインを目指します。
* 正確性と明瞭性を最優先します。誤解を招く表現や曖昧なデザインは避けます。
* 複雑な情報やデータについては、テキストだけでなく、グラフやSVGによる視覚的な説明を積極的に取り入れ、理解を助けるように努めてください。
* フッター: 出典元、作成日、作成者（部署名/会社名）、連絡先、必要であれば機密情報に関する注意書きなどを明記します。背景色はホワイト (`#FFFFFF`) またはライトグレー (`#EEEEEE`)、文字色はミディアムチャコール (`#424242`) やスレートグレー (`#707070`) を検討。
## 変換する文章/記事
