Claude Code の /insights を、コピペ1枚で日本語スライドに自動変換する｜Anthropic 公式デザイン準拠・13 枚プレゼン生成プロンプト
目次
- 1 user@sinyblog:~/article ❯ 01_what-is-insights.mdそもそも /insights って何が出てくる？
- 2 user@sinyblog:~/article ❯ 02_problem.md英語の縦長レポートは、誰も読み返さない
- 3 user@sinyblog:~/article ❯ 03_solution.mdプロンプト 1 枚で、日本語スライドに変換する
- 4 user@sinyblog:~/article ❯ 04_demo.md実際に動くスライドサンプル（架空データ）
- 5 user@sinyblog:~/article ❯ 05_workflow.md使い方：3 ステップ
- 6 user@sinyblog:~/article ❯ 06_full-prompt.mdプロンプト全文（コピペ可）
- 7 user@sinyblog:~/article ❯ 99_summary.mdまとめ
本サイトは Google AdSense による広告が表示される場合があります。本記事の埋め込みスライドサンプルは、説明のために用意した架空データであり、特定の個人の利用実績ではありません。プロンプトは、運営者（現役 IT エンジニア）が Claude Code の標準機能である /insights 出力を題材に、自身で設計したものです。
Tech Notes · Claude Code · 2026.05
英語の縦長レポートを、誰も読み返さないまま放置していないだろうか。Claude Code には /insights という、ここ 1 ヶ月の自分の使い方を分析してくれる強力な隠しコマンドがある。問題は出力が 英語の長い HTML レポート で、自分でも読み返さないし、人にも見せにくいこと。本記事では プロンプト 1 枚をコピペするだけ で、/insights の結果を Anthropic 公式デザイン準拠の日本語スライド 13 枚に自動変換するテクニックを紹介する。読了 7 分。
user@sinyblog:~/article ❯ 01_what-is-insights.mdそもそも /insights って何が出てくる？
/insights は Claude Code の組み込みコマンドのひとつ。実行すると、過去の自分の利用ログを分析して 1 枚の HTML レポートにまとめてくれる[1]。出力先は ~/.claude/usage-data/report.html（Windows なら %USERPROFILE%\.claude\usage-data\report.html）。
レポートには、こんな項目が並ぶ。
- 効いていること／詰まっていること／次の一手の要約
- 手がけたプロジェクト領域とセッション数
- 使い方のパターン分析と、印象的なワークフロー
- 摩擦カテゴリと具体例
- CLAUDE.md への追加提案、使っていない機能の紹介
Claude Code は会話ログを ~/.claude/projects/ 配下に JSONL で保存している。/insights はこれを直近のセッション群に絞って読み込み、モデルに「あなたの利用パターンを分析して」と頼む形で動く。自分が触らせた範囲の自分のログがそのまま材料になる。
user@sinyblog:~/article ❯ 02_problem.md英語の縦長レポートは、誰も読み返さない
強力な機能なのだが、実際に開いてみると困る。
- 全文英語で、母語が日本語だと読み込みコストが高い
- 縦長 HTML でスクロール疲れする。「あとで読む」が起きやすい
- 人に共有しにくい。スクショ 1 枚で要点を伝えられない
- 結果、提案を読まずに使い方を変えないまま終わる
「来月こそ /insights 真面目に読もう」と思って結局開かない、あれが起きる。せっかく出てくる「CLAUDE.md にこの 3 行を足すといいよ」みたいな具体提案がもったいない。
user@sinyblog:~/article ❯ 03_solution.mdプロンプト 1 枚で、日本語スライドに変換する
解決はシンプル。「~/.claude/usage-data/report.html を読んで、Anthropic 公式デザイン準拠の日本語スライド 13 枚に変換しろ」というプロンプトを 1 枚用意して、Claude Code に貼り付ける。これだけ。
1 〜 2 分くらいで、矢印キーで遷移できるインタラクティブな HTML プレゼンファイルが ~/.claude/usage-data/presentation.html に生成される。ブラウザで開けば、そのままスライドショーとして動く。スクショ 1 枚で要点が伝わるし、リモートで人に画面共有しながら回しても見やすい。
次の章で、実際に生成されたスライド 13 枚を埋め込んでいる。先に動かしてみてほしい。
user@sinyblog:~/article ❯ 04_demo.md実際に動くスライドサンプル（架空データ）
下のフレームは、架空の Web エンジニア「A さん」の /insights 結果から生成した 13 枚の完全版スライド。フレーム内をクリックしてから、矢印キー（← →） で前後に遷移できる。タッチデバイスはスワイプ、F でフルスクリーン。
フレーム内をクリックしてから ← → キーで遷移／F でフルスクリーン／Home · End で先頭・末尾へ
スライドの内容（プロジェクト領域、摩擦カテゴリ、CLAUDE.md 追加提案など）は、実際の /insights 出力からも 同じデザインで自分自身のデータとして生成される。サンプルの数値・エピソードは公開用に完全にフィクション化したもの。
user@sinyblog:~/article ❯ 05_workflow.md使い方：3 ステップ
準備は何も要らない。Claude Code が動く環境さえあれば、以下の 3 ステップで完了する。
Step 1｜/insights を実行する
Claude Code のセッションで、スラッシュコマンドを叩くだけ。
/insights数分待つと、~/.claude/usage-data/report.html に英語のレポートが書き出される。これがインプット。
Step 2｜変換プロンプトを貼り付ける
続けて、本記事の ch06「プロンプト全文」 のコードをまるごとコピーして、同じ Claude Code セッションに貼り付ける。パスは固定なので、ユーザー名や OS によって書き換える必要はない（プロンプト側で ~ を OS 別に解釈する指示を入れてある）。
Claude Code が report.html を Read して、構造化 → 翻訳 → 再構成 → スライド生成、を 1 セッションで実行する。だいたい 60 〜 120 秒。
Step 3｜presentation.html をブラウザで開く
生成された ~/.claude/usage-data/presentation.html をエクスプローラやファイラからダブルクリックするか、ブラウザにドラッグ＆ドロップ。矢印キーで遷移、F でフルスクリーン、タッチデバイスならスワイプでも動く。
→SpacePageDown：次のスライド←PageUp：前のスライドHome/End：最初／最後へジャンプF：フルスクリーン切り替え- URL の
#slide=N：特定スライドへ直接リンク
user@sinyblog:~/article ❯ 06_full-prompt.mdプロンプト全文（コピペ可）
以下を Claude Code セッションにそのまま貼り付ければ動く。パスや個人情報は一切含まれていないので、何も書き換えなくてよい。一度試して気に入ったら ~/.claude/usage-data/presentation-prompt.md として保存しておくと、次回からは「上のファイルの指示でスライド化して」だけで済む。
`/insights` で生成された以下のレポートを元に、矢印キー（←→）でページを切り替えられる
インタラクティブHTMLプレゼンスライドを生成してください。
入力（正規パス・OS非依存）: ~/.claude/usage-data/report.html
出力（同ディレクトリに保存）: ~/.claude/usage-data/presentation.html
- `~` はホームディレクトリを指す慣例表記。Windows なら %USERPROFILE%\.claude\usage-data\、
macOS/Linux なら $HOME/.claude/usage-data/ に展開する
- パスは固定なので、ファイル検索から始めずに いきなり Read で開いてよい
- 入力ファイルが存在しない場合のみ、ユーザーに「/insights を先に実行してください」と
案内して停止する
- 単一HTMLファイルで完結（外部依存なし、CSS・JSすべてインライン。Google Fonts のみ許可）
### 0. 出力言語: 日本語（最重要・厳守）
入力 report.html は英語で書かれているが、出力 presentation.html のすべての可視テキストは
日本語にすること。これは翻訳タスクを兼ねる。
日本語化する対象:
- スライドのタイトル・セクション見出し（h1 h2 h3 すべて）
- 本文・説明文・キャプション・引用
- ラベル類（"By the numbers" → 「数字で見る」など）
- 数値の単位（"hrs" → 「時間」、"sessions" → 「セッション」など）
- メタ表示（"EDITION · 01" などの上部バッジ）
- フッターのキーボードヒント
固有名詞（Claude Code, WordPress, GitHub, MCP, CLAUDE.md, Bash, Python など）と、
短い英単語のテクニカルターム（API, SEO, UI, CSS, NG, CTA など）は例外として残してよい。
レポート原文のキーフレーズ（"ha?" など）も引用としてそのまま残す。
翻訳は直訳ではなく意訳。日本語のリズムに馴染ませる。本文は常体（だ・である調 / 体言止め）
を基本。数字は半角、日本語との間に半角スペース。
### 1. デザイン要件: Anthropic 公式デザインに準拠
カラーパレット（厳守）:
- 背景ベース: #F5F1E8（クリーム）
- アクセント1: #CC7C5E（テラコッタ）
- アクセント2: #D4A574（オーカー）
- 本文テキスト: #1F1F1F
- セカンダリテキスト: #5C5C5C
- 罫線: #E8E0D0
- カード背景: #FFFFFF or #FBF8F1
タイポグラフィ（日本語フォントを先頭に）:
- 見出し: 'Noto Serif JP', 'Tiempos Headline', 'Charter', 'Georgia', serif
- 本文: 'Noto Sans JP', 'Inter', system-ui, sans-serif
- 数字/コード: 'JetBrains Mono', 'SF Mono', Consolas, monospace
- 見出しは大胆に大きく（hero 64-88px、section 40-56px、本文 16-19px）
- 行間: 見出し 1.25-1.4、本文 1.7-1.85
レイアウト原則:
- 余白をたっぷり、グリッド 12 カラム、最大幅 1280px、左右パディング 80-120px
- 罫線は細く、影は使わない or 極めて控えめ
- 角丸は控えめ（4-8px）
- 見出しの font-size は vh 相対を主にする（clamp(40px, 4.4vh, 64px) 等）
### 1.5 レイアウト予算とオーバーフロー禁止規約
各スライドは 100vh ベース、overflow: hidden で固定。
ノート PC（720px ビューポート、content area ~460-490px）でも破綻しないこと。
標準解像度は 900px（content area ~640px）。
密度上限:
- h2 最大 2 行
- 説明文 最大 3 行
- ポイントリスト 最大 3 項目
- カードグリッド 最大 6 枚（3×2）
- バーリスト 1 パネル最大 6 本、合計 12 本超は禁止
実装の三原則:
1. flex 縦並びの中段は flex:1; min-height:0; overflow:hidden
2. すべての縦寸法を vh 相対にする（clamp(min, vh連動, max)）
3. ヘッダー/フッターはコンテンツに重ねない（フッター高さ + 24px の padding-bottom 確保）
提出前に、全スライド × 3 ビューポート（720 / 900 / 1080px）の収まり予測表を計算で示す。
720p で破綻するスライドが残るなら、必ず 2 枚に分割してから提出。
### 2. スライド構成（全 12-14 枚）
1. 表紙「Claude Code インサイト」 — レポート期間
2. 数字で見る今月 — 4 象限の数字パネル
3. 効いていること — 強み3点
4. 詰まっていること — 摩擦の主要因
5. 手がけた領域 — プロジェクト領域カード
6. 使い方の癖 — インタラクションスタイル
7. 光った仕事 — 印象的な仕事3点
8. すれ違いの正体 — 摩擦カテゴリと具体例
9-10. 打ち手の提案（CLAUDE.md / 機能 / 使い方）
11. これから見える地平 — 未来のワークフロー候補
12. 小さなオチ — Fun Ending を軽妙に
13. 次の一手 — クロージング
### 3. インタラクション仕様
- キーボード: → Space PageDown で次へ、← PageUp で前へ、Home で1枚目、End で最後、F でフルスクリーン
- スワイプ: タッチデバイスで左右スワイプ
- インジケータ: 画面下部にプログレスバー（テラコッタ色）
- 遷移: 180ms 程度の控えめなフェード
- URL: #slide=3 のようにハッシュでディープリンク可能に
- 1スライドあたり1画面に必ず収まる（overflow: hidden）
#### 3.1 フッター・ナビゲーション領域
画面下部に高さ 48-56px のフッターバーを1本だけ用意し、横並びに配置:
- 左: ページ番号（例 03 / 13）
- 中央: プログレスバー（flex:1 で間を埋める）
- 右: キーボードヒント（← → ページ送り、F 全画面）
ブランドラベルはフッターに出さない（各スライド上部の brand ヘッダーで既に表示）。
フッターは半透明背景 + backdrop-filter: blur(8px) でスライド本文と分離。
### 4. 実装の注意
- 単一HTMLファイルで完結（CSSは <style> 内、JSは <script> 内）
- <html lang="ja"> を指定
- 外部CDNフォントは Google Fonts のみ。日本語フォント必須（Noto Serif JP + Noto Sans JP）
- アクセシビリティ: コントラスト比 4.5:1 以上、prefers-reduced-motion 尊重
- 印刷時にも見られるように @media print で各スライドが1ページに収まるよう設定
- スライド番号と総数を右下に小さく表示（例: 03 / 13）
### 5. 完了後の確認
- 生成後、ブラウザで開く方法を案内（OSに依存しない言い方で）
- 矢印キーで全スライドが正しく遷移するかをチェックリストで報告
- 言語チェック: 全スライドに英語の文・フレーズが残っていないことを目視確認
- §1.5 のオーバーフロー予防セルフチェック（720/900/1080px の収まり予測表）を必ず実施し、
結果を報告する/insights 出力を題材に自身で設計したプロンプト仕様 / [2]大きく分けて 3 ブロック ── ①日本語化ルール（英語混在を防ぐ）／②色とフォント指定（毎回同じトーンで出る）／③レイアウト予算（ノート PC でも破綻しない）。この 3 つを抜くと品質が一気に落ちるので、いじるなら色だけにとどめるのが安全。
user@sinyblog:~/article ❯ 99_summary.mdまとめ
/insightsの結果は読み返してナンボ。英語の縦長 HTML のままだと改善提案を読まずに終わる。- 変換は「プロンプト 1 枚」で完結。ch06 のコードを丸ごとコピペすれば、Anthropic デザイン準拠の日本語スライド 13 枚が 90 秒で出てくる。
- レイアウト予算と日本語化ルールは絶対に削らない。色やフォントの微調整は安全だが、構造ルールを抜くと英語混在やレイアウト破綻が即座に再発する。
/insights の出力フォーマットを題材に、運営者（現役 IT エンジニア・15 年以上の業界経験）が独自に設計したスライド変換プロンプトを解説したものです。埋め込みサンプルは説明のために用意した架空のデータであり、特定の個人の利用実績ではありません。プロンプト本体と動作仕様は記事執筆時点（2026 年 5 月）のものです。最新情報は Claude Code 公式ドキュメント をご確認ください。
![[PowerApps]CDSのプライマリ名フィールドとキーについて](https://sinyblog.com/wp/wp-content/uploads/2020/06/employee-3005501_1920-300x300.jpg)
