【ビジネス革命】Claude 3.7 Sonnetで発見した「伝わる」喜び—プロ級グラフィックレコーディングが1分で作れる爆速メソッド

「複雑な情報をわかりやすく伝えたい」「デザインスキルなしでプロ級の図解資料が欲しい」そんな声に応えるAIビジュアル化の救世主が登場。Claude 3.7 Sonnetなら、テキストを貼るだけで美しいグラフィックレコーディング風の図解が自動生成。論文、YouTube、ビジネス提案から会議議事録まで、情報伝達力を劇的に高められます

テツメモ｜tetumemo

2025/03/10

リンク

みなさん、こんにちは！テツメモです。

「長い資料を読む時間がない...」

「複雑な内容をシンプルに伝えたい...」

「会議の内容を視覚的に残したい...」

このような悩みを抱えているビジネスパーソンの方は多いのではないでしょうか？

今回は、これらの課題を一気に解決する驚異のAI活用法「Claude 3.7 Sonnetによるグラフィックレコーディング風ビジュアル化」をご紹介します。

この手法を開発されたのは、AIとプログラミングにの実験と検証を怒涛の勢いで発信しているエンジニアのMakiさんです。AIをトコトン楽しむならフォロー必須の方です♪

Mak

@hAru_mAki_ch

Claude 3.7 Sonnet ✖ グラフィックレコーディング風プロンプトで資料作成が結構良さそう！！
ーーー
Prompt：
# グラフィックレコーディング風インフォグラフィック変換プロンプト
## 目的… pic.twitter.com/8pUy3kg6nX
— Maki@Sunwood AI Labs. (@hAru_mAki_ch) March 3, 2025

2025年2月にリリースされたClaude 3.7 Sonnetの隠れた可能性を最大限に引き出すこの方法は、情報視覚化の常識を根本から覆す革新的な機能を備えています！

💡 この記事を読むことで得られる3つのメリット

テキストを自動で直感的なビジュアルに変換
- 複雑な情報を一目で理解できる図解に自動変換
- デザインスキル不要でプロ品質の視覚資料を作成
- 文字情報の伝達力を劇的に向上
ビジネスのあらゆるシーンで活用可能
- 会議議事録を魅力的なビジュアルノートに
- 長文レポートを見やすいダイジェストに
- 決算書や複雑な資料を直感的に理解できる形に
時間とコストの大幅削減
- 数分で自動生成される高品質ビジュアル
- デザイナーに依頼する時間とコストを節約
- 情報理解・意思決定の時間短縮に貢献

いつも通り気合が入りすぎて長文になってしまいますが、Claude 3.7 Sonnetの可能性を深掘りしまくっています。一度に読み切るのは大変だと思いますので、ブックマークしてぜひ最後までお楽しみください♪

🔗グラフィックレコーディング風インフォグラフィック変換プロンプト

🔗MysticLibrary v0.8.0 リリースノート　←Makiさんによって常に新しいグラレコのプロンプトが公開されています。💡

以下グラフィックレコーディングは長いので「グラレコ」と表現します。

🎙️ニュースレターの内容を音声でもキャッチアップ！

毎回数万文字の内容ですが、AI音声でもキャッチアップできるようになりました。

本記事の内容を、有料購読エリアの概要も含めて紹介しています。

ぜひこちらも一緒にフォローしていただき、”ながら聴き”も楽しんでみてください♪

📊 グラフィックレコーディング風ビジュアル化とは？

※SoftBankの決算書PDF43ページをグラレコ化

グラフィックレコーディング（Graphic Recording）という言葉を聞いたことはありますか？

会議やセミナーの内容をリアルタイムで視覚的に記録する手法で、専門のグラフィックレコーダーが文字・イラスト・図形などを組み合わせて、議論の内容や関係性を「見える化」します。

いわゆる「板書」の超進化版といえるでしょう。しかし、従来のグラフィックレコーディングには大きな課題がありました。

専門的なスキルが必要
高額な費用がかかる
リアルタイム性に限定される

そんな中、2025年2月にAnthropicから登場したClaude 3.7 Sonnetを使い、Makiさんが生み出したの「グラフィックレコーディング風ビジュアル化」が、この常識を覆す革命をもたらしています。

Claude 3.7 Sonnetとは？

Claude 3.7 Sonnetは、Anthropic社が開発した最新鋭の大規模言語モデル（LLM）です。従来モデルと比較して以下の革新的な能力を持っています：

驚異の文脈長 200,000トークン（約20万語）もの長文を一度に処理
強力な推論能力 複雑な指示や多段階の思考を正確に実行
高度な視覚化機能 HTML/CSS/SVGなどの生成能力
Extendedモード 複雑な処理に数分かける深い思考モード

特に注目すべきは「Artifacts機能」で、生成したHTML/CSSをブラウザ上で直接プレビューし、ダウンロードできる点です。

この機能と開発者Makiさん（@hAru_mAki_ch）の画期的なプロンプト設計により、グラフィックレコーディング風のインフォグラフィックが誰でも簡単に作れるようになりました。

Claude 3.7 Sonnetについて詳しくは前回の記事で徹底解説しています。

【思考するAIの威力】Claude 3.7 Sonnetで実現する高品質アウトプットと業務の革新

テツメモ｜tetumemo

2025-03-03

グラフィックレコーディング風ビジュアル化の威力

※プロンプトを切り替えるだけで内容は同じでStyleを自由自在に変換

このプロンプトを使うと、Claude 3.7 Sonnetが与えられたテキスト（論文、レポート、議事録など）を解析し、以下の要素を含む視覚的なHTMLインフォグラフィックに自動変換します：

手書き風の見出しとアイコン
色付きの囲み枠やマーカー強調
関連概念を結ぶ矢印や線
トピック間の関係性を示す視覚的レイアウト
重要ポイントを示す吹き出しやバナー

さらに、こうした視覚化がもたらすビジネス上のメリットは計り知れません：

1. 情報理解の迅速化・深化

人間の脳は視覚情報を文字情報の60,000倍の速さで処理すると言われています。複雑な資料も図解化することで、情報の全体像を素早く把握でき、理解も深まります。

2. 記憶定着率の向上

文字だけの情報は3日後に記憶の10%しか残らないのに対し、視覚情報を組み合わせると65%の記憶定着率があるという研究結果もあります。プレゼンや会議の内容を強く印象づけられます。

3. コミュニケーション効率の劇的向上

「百聞は一見にしかず」の通り、視覚化された情報は説明の手間を大幅に削減。部門間の認識齟齬も減少し、スムーズな意思決定が可能になります。

4. 専門知識の民主化

専門性の高い内容でも、図解化することで非専門家にも理解しやすくなります。組織全体の知識共有や学習効率が飛躍的に向上します。

5. 時間とコストの大幅削減

プロのグラフィックレコーダーに依頼すれば数万円〜数十万円かかる作業が、AIを使えば数分で完了。しかも24時間いつでも利用可能です。

従来のAI視覚化との決定的な違い

「AI×視覚化」と聞くと、MidjourneやDALL-Eなどの画像生成AIを思い浮かべるかもしれません。しかし、グラフィックレコーディング風ビジュアル化には決定的に異なる強みがあります：

	グラフィックレコーディング風	従来の画像生成AI
入力	長文テキスト(20万字以上可)、PDF、MDなども添付OK	標準的プロンプト(数千字程度)
出力	構造化されたHTML/CSS	単一～複数画像
編集性	後から修正・編集可能	生成後の編集が困難
表現	テキスト+視覚要素の組み合わせ	画像のみ
精度	テキスト内容を正確に反映	テーマの雰囲気を表現

このように、グラフィックレコーディング風ビジュアル化は「情報の正確な構造化と視覚化」に特化しており、ビジネスコミュニケーションに革命をもたらす可能性を秘めています。

ワンポイントTip：グラフィックレコーディング風ビジュアル化は「AIデザイナー」と「AI編集者」が同時に働くようなものです。AIが情報を整理・要約し、さらに視覚的に魅力的なレイアウトで表現してくれます。これまでデザインスキルがネックだった方も、この方法なら誰でもプロ級の視覚資料を作成できるのです！

🛠️ 導入と基本設定

※SoftBankの決算書PDF43ページをグラレコ化

さっそくClaude 3.7 Sonnetでグラフィックレコーディング風ビジュアル化を始めてみましょう！このセクションでは、初めての方でも迷わずに設定できるよう、ステップバイステップで解説します。

Claude 3.7 Sonnetへのアクセス方法

まず最初に、Claude 3.7 Sonnetにアクセスする必要があります。現在、以下の方法でアクセスできます：

Webインターフェース（claude.ai）：最も簡単な方法です。ブラウザからclaude.aiにアクセスし、アカウント登録後に利用できます。Artifactsプレビュー機能が使えるため、最もおすすめです。
Anthropic API：開発者向けに、APIを通じてClaude 3.7 Sonnetを利用することも可能です。この場合、モデル名「claude-3-7-sonnet-20250219」を指定します。
サードパーティツール：Poeなど一部のプラットフォームでもClaude 3.7 Sonnetが利用可能ですが、Artifacts機能が制限される場合があります。

今回は最も手軽な「1」のWebインターフェースを前提に説明していきます。

Projects機能の活用法

Claude 3.7 Sonnetの強力な機能の一つが「Projects」です。これは特定の目的に特化したプロンプト（指示）をテンプレート化し、繰り返し使える形にする機能です。

グラフィックレコーディング風ビジュアル化にはこのProjects機能が最適です。一度設定すれば、ファイルや調査したテキストを投げるだけで何度でも同じクオリティのビジュアル資料を生成できます。

AI革命の次なる一手！ClaudeのProjects機能で生産性が爆上がり

テツメモ｜tetumemo

2024-07-08

Projects機能の設定手順：

Claude.aiにログインし、左側のサイドバーから「Projects」をクリック
「Create Project」ボタンをクリック
プロジェクト名を入力（例：「グラフィックレコーディング変換」）
「Set project instructions」をクリック
下記の設定画面で、開発者Makiさん（@hAru_mAki_ch）の公式プロンプトを貼り付け
- プロンプトはGitHubからコピーできます
  ※最後の行に以下を追加しています
  ――――
  ## 変換する文章/記事
  ユーザーが入力（添付）
  ――――
「Save Instructions」をクリックして保存

これでプロジェクトの設定は完了です！今後はこのプロジェクトを選択するだけで、グラフィックレコーディング風に変換できます。

💡Projects機能を使わなくても、そのままプロンプトを入力して実行することも可能です。

Extendedモードの重要性

Claude 3.7 Sonnetには「Standard」と「Extended」の2つの思考モードがあります。グラフィックレコーディング風変換には、必ずExtendedモードを使用することをおすすめします。その理由は：

処理時間 Standardモードは即時回答（1秒未満）ですが、Extendedモードはより複雑な処理に時間（数分）をかけます
思考深度 Extendedモードでは、複数の思考ステップを踏み、より高品質な出力が可能です
複雑なHTML/CSS グラフィックレコーディング風のHTML生成には多くの要素を考慮する必要があり、Extendedモードが適しています

Extendedモードの設定方法：

チャット画面右上の「⚙️」アイコンをクリック
「Thinking」セクションで「Extended」を選択
「Save」をクリック

これで、より高度な思考処理が可能になりました。

実際の使用手順

今回はSoftBankの決算書PDFを投げるだけで、グラレコ風にまとめてくれる体験を一緒にしましょう。

チャット画面上部の「Select a project」をクリックし、先ほど作成した「グラフィックレコーディング変換」を選択
※Projectsを使わず直接プロンプト全文入力でもOKです
第3四半期決算短信（PDF形式：1.71MB／43ページ）からPDFをダウンロードして添付
送信（実行）ボタンをクリック
Claudeが処理を開始し、Extendedモードなら数分でHTMLインフォグラフィックを生成
生成されたHTMLは「Artifacts」として表示され、ブラウザ上でプレビュー可能

🔗ソフトバンク株式会社 2025年3月期第3四半期決算短信グラフィックレコーディング
コードのコピーや「Download」ボタンでHTMLファイルとしてダウンロード可能
「Publish」ボタンでURLをシェアすることも可能です。
出力結果を確認しながら「セグメント別売上高構成比をグラフ化して」「青を貴重としたデザインに変更して」など追加指示を反映してくれます。

実用的なヒント

文章量 数百文字の短いテキストから20万字を超える長文まで処理可能ですが、最適な量は5,000〜20,000字程度です
構造化 見出しや箇条書きなど、ある程度構造化されたテキストの方が良い結果が得られます

💡特にFeloのSearch AgentやDeep Researchなどの結果を投げるのが非常にオススメです
回答時間 Extendedモードでは処理に1〜5分程度かかりますが、待つ価値があります
結果の確認 生成されたHTMLは一度必ず確認し、必要に応じて修正や追加指示を出しましょう

10倍速の情報収集術：Perplexity Deep Researchが切り開く新時代

テツメモ｜tetumemo

2025-02-17

AI業務革命！FeloのSearch Agentで実現する10倍速の情報収集術

テツメモ｜tetumemo

2025-01-13

うまくいかない場合のトラブルシューティング

もし期待通りの結果が得られない場合は、以下を試してみてください：

Extendedモードになっていない 設定を確認し、必ずExtendedモードを使用する
プロンプトが正しくコピーされていない GitHubから最新のプロンプトを再度コピー
特定の形式が崩れる HTML生成後に手動で修正するか、形式についての追加指示を出す

ワンポイントTip：Projects機能は「特別な才能を持った専属アシスタント」のようなものです。グラフィックレコーディングの専門家をプロジェクトとして設定しておくことで、「この資料を図解して」とシンプルに頼むだけで高品質な結果が得られます。プロジェクトは複数作成できるので、用途別に少しずつ設定を変えた「AI図解チーム」を作るのもおすすめです！

📝 プロンプト設計と実装方法

グラフィックレコーディング風ビジュアル化の核心は、高度に洗練されたプロンプト（指示文）にあります。このセクションでは、そのプロンプトの設計思想と実装方法について詳しく解説します。

構造を理解することで、自分専用のカスタマイズもしやすくなります！

開発者Maki「@hAru_mAki_ch」さんの公式プロンプト

このプロンプトは、Makiさん（@hAru_mAki_ch）が公開している「グラフィックレコーディング風インフォグラフィック変換プロンプト」をベースにしています。

🔗グラフィックレコーディング風インフォグラフィック変換プロンプト

このプロンプトの特徴は、単なる指示ではなく、デザインシステム全体を網羅した総合的な設計書となっている点です。プロンプトの冒頭部分を見てみましょう：

以下の内容を日本語で、手書き風の図形やアイコンを用いたグラフィックレコーディング風のHTMLインフォグラフィックに変換してください。情報設計とビジュアルデザインの両面で最高水準を目指します。

この一文から始まり、それ以降に詳細なデザイン仕様が続きます。プロンプト全体は1,000行以上にも及ぶ大規模なものですが、これによりAIが高品質なビジュアル資料を生成できるのです。

プロンプトの仕組みと構成要素

このプロンプトが優れている理由を理解するため、その構成要素を見ていきましょう：

1. 目的とビジョンの明確化

プロンプトの冒頭で「何を作るのか」「どのような品質を目指すのか」を明確に伝えています。これにより、AIが全体像を把握した上で処理を始められます。

2. デザインガイドラインの詳細指定

以下のような具体的なデザイン要素が細かく指定されています：

カラースキーム

  <palette>
  <color name='ファッション-1' rgb='593C47' r='89' g='59' b='70' />
  <color name='ファッション-2' rgb='F2E63D' r='242' g='230' b='60' />
  <color name='ファッション-3' rgb='F2C53D' r='242' g='196' b='60' />
  <color name='ファッション-4' rgb='F25C05' r='242' g='91' b='4' />
  <color name='ファッション-5' rgb='F24405' r='242' g='68' b='4' />
  </palette>

タイポグラフィ

  - タイトル：32px、グラデーション効果、太字
  - サブタイトル：16px、#475569
  - セクション見出し：18px、#1e40af、アイコン付き
  - 本文：14px、#334155、行間1.4

レイアウト

  - ヘッダー：左揃えタイトル＋右揃え日付/出典
  - 3カラム構成：左側33%、中央33%、右側33%
  - カード型コンポーネント：白背景、角丸12px、微細シャドウ
  - セクション間の適切な余白と階層構造
  - 適切にグラスモーフィズムを活用
  - コンテンツの横幅は100%にして

このように、色・フォント・レイアウトなど、デザインの基本要素を網羅的に指定しています。

3. 視覚表現の具体的指示

グラフィックレコーディングらしさを出すための視覚表現についても詳細に指定されています：

- テキストと視覚要素のバランスを重視
- キーワードを囲み線や色で強調
- 簡易的なアイコンや図形で概念を視覚化
- 数値データは簡潔なグラフや図表で表現
- 接続線や矢印で情報間の関係性を明示
- 余白を効果的に活用して視認性を確保

4. HTMLとCSSの技術仕様

「グラフィックレコーディング (グラレコ) HTML 作成プロンプト V2」では生成されるHTMLとCSSについても、詳細な技術仕様が記載されています：

- 手書き風フォントを使用（Kaisei Decol, Yomogi, Zen Kurenaido）
- 絵の代わりに Font Awesome アイコンや絵文字を大きく使用（サイズは70px程度）
- カードは背景を透明にし、枠は使用せず、背景になじむようにする
- 手書き風の吹き出しを CSS で表現（背景は薄い透明度に）
- レスポンシブデザイン
- 5カラム構成（コンテナ幅は2000px）
- カード間の間隔を広くとる（40px程度）
- グリッドのギャップは30px

HTMLとCSSの役割と重要性

このプロンプトでは、単純な画像ではなく、HTMLとCSSを使ったインフォグラフィックを生成します。これには重要な意味があります：

HTMLの役割

構造化 情報を論理的に階層化し、見出しや段落などで整理
アクセシビリティ スクリーンリーダーなどの支援技術との互換性
インタラクティブ性 クリックやホバーなどのインタラクションが可能
編集容易性 後から内容の修正や追加が容易

CSSの役割

スタイリング 色、フォント、余白などの視覚的スタイルを制御
レイアウト 情報の配置や構成を制御（グリッド、フレックスボックスなど）
アニメーション ホバーエフェクトや軽微なアニメーションの実装
レスポンシブ性 画面サイズに応じたレイアウト調整

以下は、生成されるHTML/CSSの一部イメージです【抜粋】：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ソフトバンク株式会社 2025年3月期 第3四半期決算短信</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol&family=Yomogi&family=Zen+Kurenaido&display=swap');
    
    :root {
      --fashion-1: #593C47;
      --fashion-2: #F2E63D;
      --fashion-3: #F2C53D;
      --fashion-4: #F25C05;
      --fashion-5: #F24405;
      --text-main: #334155;
      --text-subtitle: #475569;
      --text-section: #1e40af;
      --shadow: rgba(0, 0, 0, 0.1);
    }
    
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: 'Zen Kurenaido', sans-serif;
      color: var(--text-main);
      line-height: 1.4;
      background-color: #f8f9fa;
      padding: 0;
      width: 100%;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      background-color: white;
      border-radius: 12px;
      box-shadow: 0 4px 6px var(--shadow);
    }

プロンプトのカスタマイズとアレンジ方法

公式プロンプトをベースに、自分のニーズに合わせてカスタマイズすることもできます。以下にいくつかのアレンジ方法を紹介します。

手動での変更もできますが、基本的にベースとなるMakiさんのグラフィックレコーディングプロンプトをAIに投げて「◯◯スタイルに変換して」とお願いするのが一番”楽”です。

ただし、どこがどのように変化したのかの理解がないと微調整ができませんので上記で紹介した”構造の理解”が重要になります。

1. カラーパレットの変更

企業のブランドカラーに合わせたい場合は、カラーパレットを書き換えます：

以下のブランドカラーパレットを使用してベーススタイルを変更してください：
- メインカラー: #0077B6（自社のブルー）
- アクセントカラー1: #FF7A00（自社のオレンジ）

2. スタイルテーマの指定

デフォルトではグラフィックレコーディング風ですが、他のスタイルに変更することも可能です：

以下のプロンプトを、「黒板風」スタイルで作成してください。黒背景に白やカラフルなチョーク風の文字と図形を使います。
出力結果はコードボックスでお願いします。

🔗参考）まぐまぐさんが作成した「黒板風」スタイル

※話題のAIエージェント「Manus」を図解

または：

以下のプロンプトを、「ホワイトボード風」スタイルで作成してください。白背景にカラフルなマーカー風の文字と図形を使います。
出力結果はコードボックスでお願いします。

🔗参考）まぐまぐさんが作成した「ホワイトボード風」スタイル

※話題のAIエージェント「Manus」を図解

3. レイアウト構造の変更

情報構造に合わせてレイアウトを調整することもできます：

レイアウトは以下の構造で作成してください：
- ヘッダー：タイトルと日付
- トップセクション：全体サマリー（1カラム横長）
- メインコンテンツ：各トピック（2カラム）
- フッター：結論と次のステップ

4. 強調表現の指定

特定の要素を強調したい場合は、具体的に指示を追加します：

以下の要素は特に強調してください：
- 数値データ（大きなフォントと色付き背景）
- プロジェクトの締め切り（赤い囲み線と警告アイコン）
- 成功事例（緑色の星アイコンを付ける）

5. 特定ドメイン向けのテンプレート

教育、営業、技術など特定分野向けにテンプレートをカスタマイズできます：

これは技術仕様書のビジュアル化です。以下の要素を含めてください：
- 仕様項目はコードブロック風の表現（等幅フォント＋灰色背景）
- 技術的な依存関係はフローチャートで表現
- ステータス（「完了」「進行中」「計画中」）を色分けして表示

実際の活用例：シンプルなカスタマイズ

以下は、基本プロンプトに追加するだけで変化を付けられる具体例です

一旦出力した結果の後に指示をしてもOKです。

以下の追加指示に従ってください：

1. 全体の雰囲気：
明るく、ビジネス向けの洗練されたデザインにしてください。

2. 特別な強調：
- 「成果」「結果」「メリット」などのキーワードは緑色の下線で強調
- 数値データは大きめのフォントで目立たせる
- 課題や問題点は赤い破線の囲みで表示

3. 構成：
- 最初に「エグゼクティブサマリー」セクションを配置
- 最後に「次のステップ」セクションを追加

ワンポイントTip：プロンプトは「デザイナーへの発注書」のようなものです。曖昧な指示より具体的な指示のほうが良い結果が得られます。カラーコードを具体的に指定したり、フォントサイズを明示したりするほど、イメージ通りの結果に近づきます。最初は公式プロンプトをそのまま使い、少しずつ自分流にカスタマイズしていくのがおすすめです！

💼 ビジネスシーンでの活用事例

さて、ここまでで「何ができるか」「どう設定するか」を見てきました。ここからは、実際のビジネスシーンでどのように活用できるのか、具体的な事例を紹介していきます。

グラフィックレコーディング風ビジュアル化の優れた点は、あらゆるテキスト情報を視覚的に魅力的な形に変換できること。複雑な情報をわかりやすく伝えたいビジネスシーンは無数にあります。

会議・イベント記録の視覚化

従来、会議やイベントの記録は長々とした議事録としてまとめられることがほとんどでした。しかし、そのような文字ベースの記録は、読み返す人にとって退屈で重要ポイントを見つけにくいという欠点があります。

活用例：経営会議の議事録ビジュアル化

ある架空企業の新商品戦略会議をグラフィックレコーディング風に変換してみましょう。

従来は会議後に送られるテキスト形式の議事録を、ほとんどの参加者が詳細まで読んでいない状況だと思いますが、グラフィックレコーディングで仕上げるだけでこれだけ見やすくなります。

🔗サウンドイノベーションズ新商品戦略会議

🔗ポスト：架空の会議内容

論文・報告書・リサーチ結果のサマリー作成

長大な論文や報告書・リサーチ結果を読み込むのは時間がかかり、忙しいビジネスパーソンにとって大きな負担です。グラフィックレコーディング風に要点を視覚化することで、内容の素早い把握が可能になります。

活用例：技術トレンドレポートの可視化

「スーパーインテリジェンス戦略：エキスパートバージョン」（英文2Pの14万文字）をClaudeに投げただけで、読みやすいグラレコ風にまとめてくれました。

※レスポンシブルデザインなのでスマホでも見やすい

🔗スーパーインテリジェンス戦略：エキスパートバージョン

🔗ポスト：32Pの14万文字ある英字論文をClaudeに投げただけで、読みやすいグラレコ風にまとめ

活用例：Deep Researchの数万文字結果を可視化

最近はOpenAIやGoogleははじめ、様々なAIベンダーがDeep Research系の機能を付けてきています。

ただ、その調査能力は凄いのですが、実際に数万文字のレポートをホイホイ出してきて、読む側の人間は非常に苦労します。

そんな時、まずは結果をグラレコ化してしまいましょう！要点が掴め、ハルシネーションの発見にも繋がりますよ。

こちらは、FeloのDeep Researchで出力した数万文字のレポートを、読みやすい日本語と素敵なレイアウト構成でグラレコ化

テツメモ｜AI図解×検証｜Newsletter

@tetumemo

📝Makiさんの『Claude 3.7 Sonnet ✖ グラフィックレコーディング風プロンプト』が有料級レベルで相当エグい…

FeloのDeep Researchで出力した数万文字のレポートを、読みやすい日本語と素敵なレイアウト構成で整えてくれる

これ、使わないと損レベルの感動的な仕上がり　👇️ https://t.co/wdustTeKpK pic.twitter.com/BG1BEJafWW
— テツメモ｜AI図解×検証｜Newsletter (@tetumemo) March 3, 2025

ちなみに、同じリサーチ内容をインフォグラフィック化することもできます

テツメモ｜AI図解×検証｜Newsletter

@tetumemo

📝FeloのDeepSearch3.0エグい…
OpenAIのDeep Researchに引けを取らないレベルで数万文字のレポートが出力できる

✅️使うコツ
- DeepSearch実行
- 結果をドキュメント化
- Claude 3.7 Sonnetでインフォグラフィック化

長くて読むのが苦痛な数万文字のレポートも視覚的にインプット可能

詳細　👇️ https://t.co/iQnuDLH7Fq pic.twitter.com/ydZ7djtvNU
— テツメモ｜AI図解×検証｜Newsletter (@tetumemo) March 1, 2025

インフォグラフィック化については前回の記事で紹介しています↓

【思考するAIの威力】Claude 3.7 Sonnetで実現する高品質アウトプットと業務の革新

テツメモ｜tetumemo

2025-03-03

ニュースレターやブログ記事の図解化

情報過多の時代、文字ばかりのコンテンツは読者の注目を集めにくくなっています。内容をグラフィックレコーディング風にビジュアル化することで、読者の理解度と満足度を高められます。

活用例：ニュースレターの視覚的ダイジェスト

私が発行しているニュースレターは数万文字の内容になることが多いです。その記事の内容をすべてコピーしてグラレコ風にまとめることも可能です。

テツメモ｜AI図解×検証｜Newsletter

@tetumemo

📝これは熱い！ついにChatGPT研究所さんも話題の国産AI「神威/KAMUI」の紹介記事を書いてくれてます！
開発者は元木さん（@kamui_qai）

私もニュースレターで紹介した記事をアニメーション×グラレコ風にまとめました♪

スレッドにまとめます↓ https://t.co/IKQRI9Kucz pic.twitter.com/3TiwLGMVN3
— テツメモ｜AI図解×検証｜Newsletter (@tetumemo) March 8, 2025

【驚愕】神威/KAMUIとは？AIの組織図が見えるクリエイティブ革命の全貌と、お得すぎる「神威」の魅力！

テツメモ｜tetumemo

2025-02-11

活用例：数万文字のブログの内容理解促進

note記事は魅力的なコンテンツが多いですが、文字数が膨大なコンテンツも多数あります。

そんな時は、まずは読む前にグラレコ風に変換してから読み進めると理解が促進されます。

🔗ポスト：「この記事を読めば、あなたの文章はもうAIに負けない」って紹介したくなるnote記事

決算書やIR資料の視覚的要約

こちらは序盤で紹介した決算資料をグラレコ化すると非常に見やすくなります。

とくにMakiさんのグラレコは進化していますので、新しいバージョンで可視化させるとグラフ化やアニメーションなど追加することもできます。

活用例：楽天の決算書PDF（34P）の要点整理

こちらはSoftBankのグラレコと比較すると随分とグラフィカルになったと思います。使用したプロンプトは「グラフィックレコーディング風インフォグラフィック変換プロンプト V2」です：

✅️プロンプト

――――
帝国データバンク風にまとめ、財務情報はPL,BS,CFの観点にフォーカスし、投資家向けに必要な代表的な数値をピックアップしながらまとめてください。数値要素は理解促進のためグラフや表なども順次活用してください。
――――

🔗ポスト：楽天の決算書PDF（34P）投げ決算ハイライト、グラグ化、セグメント別、財務三表でPL,BS,CS図解

その他の活用例

YouTubeの動画内容ビジュアル化

Claude MCPを使い、YouTubeのURLを投げただけで動画の内容を一発でグラフィックレコーディング風に図解することもできます。

Anthropic CPO：Mike Krieger氏のインタビュー動画を変換した例では動画の内容を引用しながら仕上がっています

要点がセクションごとまとまります：↓

この手法を使えば「1時間の動画内容を5分で把握」することが可能です。

業務革命！Windows環境で始めるClaude MCPガイド決定版

テツメモ｜tetumemo

2024-12-02

🔗AI時代における価値創造の展望

🔗ポスト：YouTubeのURLをClaudeに投げると、文字起こし→グラフィックレコード風のアウトプット

マーカー付きの資料を要点抽出してビジュアル化

マーカー引きまくった世界史の教科書投げるだけで、マーカーの単語まとめ、時系列、テスト前のチェックリスト、予想問題作成など全網羅されたグラレコができました。

また、NotionMCPを活用してマーカーの結果を元にクイズを作ることもできます：

テツメモ｜AI図解×検証｜Newsletter

@tetumemo

📝ヤバ...Claude 3.7 Sonneちゃんでもっとエグいのできた

マーカー引きまくった世界史の教科書投げてNotion連携するだけで、重点キーワードテストが一撃で完成

マーカーの単語ピックアップ→Notionですべてトグル付きに変換→開けばキーワードの解説出てくる

もう参考書や問題集を買うよりまずはAI https://t.co/tcJxrkQhOA pic.twitter.com/Ddcw6qLrrL
— テツメモ｜AI図解×検証｜Newsletter (@tetumemo) March 8, 2025

会議資料や研修資料など、会社で”紙”で配布された資料にマーカーを引く方もまだ多いと思います。そんな資料をスキャンしてグラレコ化すれば…

理解促進に繋がりますね！

驚異の生産性革命！Claude MCPとNotionで実現するビジネス効率化の新時代

テツメモ｜tetumemo

2024-12-09

ワンポイントTip：ビジネスでの活用では「読み手のニーズ」を常に意識することが重要です。意思決定者向けなら「結論から先に」「数字を強調」するよう、学習用途なら「構造化」「関連性の視覚化」を重視するよう、プロンプトに追加指示するとより効果的な資料になります。また、HTML形式で出力されるので、GoogleサイトやNotionに埋め込んで社内ナレッジベースとして活用するのもおすすめです！