Claudeで「仕事の仕組み」を動く図にする——黒字倒産のメカニズムとキャッシュ処理を動的Web図解で視覚化するプロンプト術

チーム内の意思決定や技術のオンボーディングにおいて、文字や静止画像だけではプロセス全体の時間的変化や相互関係を伝えにくい場面がよくあります。

例えば、「黒字なのに手元現金が減る理由（黒字倒産の発生メカニズム）」や「APIサーバーのキャッシュ制御（Cache-asideパターン）」といった動的な流れは、プロセスの順序やデータの変化を段階的に追うことで、より直感的に理解できるようになります。

AIアシスタントを活用して、こうした実務的なビジネスモデルやシステム構造を「ステップ操作できる動くWeb図解（HTML）」として生成させるアプローチが注目を集めています。

gabriel氏（@gabriel1）の投稿でも、Opus 5.5に対して「基礎から直感的・段階的な簡単なアニメーションで説明する図」を作成させるプロンプト手法が紹介され、反響を呼びました。

how is every school lesson not a opus 5.5 "bottoms up explainer video" i'd literally learn

i can literally learn anything in 20x faster by telling opus "explain this hyper intuitively bottoms up with the most simple step by step animations so i really understand concretely"
— gabriel (@gabriel1) October 17, 2026

本記事では、実務の現場でそのまま活用できる「仕事の仕組み」を可視化した2つの動的図解サンプルと、それを生成するための頼み方（プロンプト）のポイントを紹介します。

実例1：ビジネス構造の可視化「利益と手元現金のズレ（黒字倒産のメカニズム）」

企業間取引（BtoB）では、商品の販売から実際の代金入金までにタイムラグ（売掛金）が発生します。そのため、「損益計算書上は利益が出ているのに、手元の現金が底をつく」という現象が起こり得ます。

以下の図解では、「仕入・支払」「販売」「経費支払」「回収」のステップを進めながら、現金・在庫・売掛金・利益がどのように変動するかを順番に確認できます。「次へ」「戻る」ボタンを使って、各タイミングでの資産の移り変わりをご覧ください。

※本図解は仕組みの理解を目的とした架空の簡略化モデル（単位：万円）であり、特定の企業の実例や経営アドバイスではありません。税金・減価償却・借入等は省略しています。

図解を別画面で開く

動きで見るポイント

販売・引渡し時点（ステップ3）: 商品を納品して利益が確定しても、入金前なので手元現金は増えず「売掛金」となる点。
給与支払時点（ステップ4）: 帳簿上は50万円の利益があっても、手元現金は初期状態の200万円から50万円（150万円減）まで落ち込む点。
売掛金回収時点（ステップ5）: 代金が入金された際、現金が増加すると同時に売掛金が解消され、売上や利益が二重計上されない点。

実例2：システム構造の可視化「APIサーバーのCache-asideパターン」

WebシステムやWeb APIの設計において、データベース（DB）の負荷軽減と応答速度向上のために使われるのが「Cache-aside（Lazy caching）」と呼ばれるキャッシュパターンです（参考: AWS Caching Best Practices）。

以下の図解では、「最初のアクセス（Cache MISS）」「2回目のアクセス（Cache HIT）」「DB更新と古いキャッシュ」「キャッシュ無効化と再読み込み」の動きを模擬的にシミュレートしています。

※本図解はコンポーネント間の連携ロジックを説明するためのシミュレーションであり、実際の通信速度や処理倍率を測定したものではありません。

図解を別画面で開く

動きで見るポイント

初回リクエストとキャッシュ保存（ステップ2）: キャッシュにデータがないためDBへ読みに行き、取得結果をキャッシュに保存する流れ。
2回目リクエストとキャッシュヒット（ステップ3）: キャッシュから直接データを返却するため、DBへの読み取り回数（リクエストカウント）が増加しない点。
データ更新と無効化・再取得（ステップ4〜5）: DBの原本データが変わってもキャッシュには古いデータが残るため、キャッシュを削除（破棄）することで次のアクセス時に最新のDB値へ更新される仕組み。

業務の仕組みを「動く図」としてAIに頼む方法

上記のような動的Web図解は、Claude Codeなどの環境を用いて単一のHTML/JavaScript形式で出力させることで、ローカルブラウザ上ですぐに動作を確認・共有できます。

AIに指示を出す際は、単に「図を作って」と頼むのではなく、ステップごとの状態変化や前提数値を具体的に与えることが重要です。

プロンプト構成例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
以下の業務プロセスを、HTML/JSを用いた「ステップ操作可能なインタラクティブ図解」として作成してください。

【対象プロセス】
APIサーバーにおけるCache-asideパターンのデータフロー

【必要な機能】
- 「最初から」「戻る」「次へ」のナビゲーションボタンを実装する
- ステップごとに「クライアント」「キャッシュ」「DB」の状態を視覚的に表示する
- 各ステップで発生するデータの流れを色や矢印で区別する

【ステップ定義】
1. Cache MISS: キャッシュ未保持のためDBを検索し、値を返却しつつキャッシュへ保存
2. Cache HIT: キャッシュから即座に値を返却（DB参照なし）
3. キャッシュ不整合: DBの値のみ更新され、キャッシュが古い状態
4. キャッシュ破棄と再取得: キャッシュを無効化し、次のアクセスで最新のDB値を再取得

外部ライブラリを使わず、単一のHTMLファイルとして完結させてください。

期待通りの出力を得るためのポイント

ビジネスルールやパラメータを明記する 仕入額、売掛金のタイミング、キャッシュの保持ロジックなど、具体的な前提条件や数字をプロンプト内に指定することで、意図に沿った正しいモデルが生成されやすくなります。
出力を自動検証・修正させる 生成されたHTMLを実際にブラウザで動かし、動作に違和感がある場合は「ステップ3で売掛金が減っていない」「アニメーションの方向が逆」といった具体的フィードバックを与えて修正させます。
生成内容の確認を怠らない AIが生成したロジックや計算結果が自動的に正しいとは限りません。特に会計処理や複雑なアルゴリズムを扱う場合は、ドメインの専門知識に基づいた事実確認（ファクトチェック）を行ってください。

Claudeのビジュアル表示機能と利用条件について

Claudeで視覚的コンテンツや動的UIを扱う場合、利用環境によっていくつかの機能と仕様の違いが存在します。

Custom visuals（ベータ機能） 会話内でHTMLベースのチャートや対話的ビジュアルを直接表示する機能です。Webおよびデスクトップ版の全ユーザー向けに提供されていますが、モバイルアプリでは利用できません（参考: Anthropic Help - Custom visuals）。
Artifacts 会話の脇に独立したウィンドウでコードやドキュメントを保持・プレビューする機能です。Freeプランを含む全プランで利用可能ですが、コードを実行・プレビューするには「JavaScriptなどのコード実行・ファイル作成」の設定が必要です。なお、Artifacts機能が利用できることと、モデル（Opus等）の使用制限や割り当て枠は別であり、無料プランですべてのモデルが自由に使えるわけではありません（参考: Anthropic Help - Artifacts）。
Claude Motion（ベータ機能） テキストや図形をコードで動かし、プログラマブルにMP4動画等として出力する機能です。TeamおよびEnterpriseプラン向け（ベータ機能）として提供されており、Enterprise環境では管理者による機能の有効化が必要です。利用にあたっては通常のテキスト生成等と同じプランの使用量制限（クォータ）にカウントされますが、長尺や複雑な図解の生成は通常のメッセージよりも多く使用量を消費します（参考: Anthropic Help - Get started with Claude Motion）。

用途や利用可能なプランに応じて、適切な出力形式（単体HTML生成、Artifactsプレビュー、Motion等）を選択してください。

参考リンク

Anthropic Support: Custom visuals in Chat and Cowork
Anthropic Support: What are Artifacts and how do I use them?
Anthropic Support: Get started with Claude Motion
J-Net21（中小企業基盤整備機構）: 黒字倒産はなぜ起こるのか
AWS Architecture Center: Caching Best Practices (Lazy caching / Cache-Aside)

この記事は Gemini Web（モデル表示未確認）が執筆しました。図解は Claude Opus 5.5 が生成しました。