図解の頼み方

アーサー・ディ・リトル・ジャパン株式会社様　GenAI活用スキル向上支援 第3回（2026年8月21日） S10「直す・仕上げる」で触れます。研修後も手元で引ける形にしてあります。

---

1. Mermaid とは

テキストで数行書くと、そのまま図になる記法です。Obsidian・GitHub・VS Code（拡張）がコードブロックを読んで図として描きます。図がテキストなので、差分が読めて、AIに書かせられて、あとから1行だけ直せます。

2. 使える図種

同じソースでも、表示する側が持っている Mermaid のバージョンより新しい図種は描けません。判定は単純で、導入バージョンが表示側のバージョン以下なら出ます。

図種の一覧です。「新」は2024年以降に追加されたものを指します。

最後の3つは Obsidian（11.13.0）では描けません。Radar と Treemap は VS Code 拡張（11.4.1）では描けません。当日の演習は Obsidian で確認するので、11.13.0 以下の図種を選んでください。

コンサルティングの資料で出番が多いのは Quadrant、Sankey、Treemap、Radar の4つです。Excel を経由せず、テキストのままバージョン管理できる図として使えます。

3. 実務で使う6つの型

3-1 業務フロー

こういう場面で使う。作業の順番と、途中の分岐を1枚で示すとき。提案書の現状整理や、引き継ぎ資料の冒頭に置きます。

AIへの頼み方。

この作業の流れを Mermaid の flowchart LR で書いてください。
ノードは8個まで。日本語のラベルは必ず二重引用符で囲んでください。
出力は mermaid コードブロックだけにしてください。

出てくるコード。

flowchart LR
    A["調査依頼を受ける"] --> B["論点を分解する"]
    B --> C["一次情報を集める"]
    C --> D{"裏が取れたか"}
    D -->|"取れた"| E["ドラフトを書く"]
    D -->|"取れない"| C
    E --> F["レビュー"]
    F --> G["提出"]

3-2 意思決定の分岐

こういう場面で使う。条件によって答えが変わるルールを、口頭説明なしで配れる形にするとき。AIに何を渡してよいかの判断も、この形にすると迷いません。

AIへの頼み方。

この判断ルールを Mermaid の flowchart TD で書いてください。
分岐は波括弧のひし形、結論は四角にしてください。
分岐の答えは「はい」「いいえ」ではなく、実際の条件の言葉にしてください。

出てくるコード。

flowchart TD
    A["渡したい資料がある"] --> B{"クライアント名が入っているか"}
    B -->|"入っている"| C["渡さない"]
    B -->|"入っていない"| D{"未公開の数値が入っているか"}
    D -->|"入っている"| E["数値をダミーに置き換える"]
    D -->|"入っていない"| F{"公開されている資料か"}
    F -->|"公開済み"| G["そのまま渡してよい"]
    F -->|"社内限り"| H["要約だけを自分で書いて渡す"]
    E --> G

3-3 体制図

こういう場面で使う。キックオフ資料で、誰が誰と話すのかを示すとき。subgraph でクライアント側と自チームを分けます。

AIへの頼み方。

プロジェクト体制を Mermaid の flowchart TD で書いてください。
クライアント側と自チームを subgraph で分けてください。
subgraph のIDは英字、表示名は角括弧の中に日本語で書いてください。
指揮系統は矢印、窓口の対応関係は矢印なしの線にしてください。

出てくるコード。

flowchart TD
    subgraph CL["クライアント側"]
        S1["事業部長"]
        S2["経営企画"]
        S3["現場担当"]
    end
    subgraph US["プロジェクトチーム"]
        P1["パートナー"]
        P2["マネージャー"]
        P3["コンサルタント"]
        P4["リサーチ担当"]
    end
    P1 --> P2
    P2 --> P3
    P2 --> P4
    S1 --- P1
    S2 --- P2
    S3 --- P3

3-4 案件のスケジュール

こういう場面で使う。提案書の工程表。Excel のガントチャートを作り直すより速く、日付をずらす修正も1行で済みます。

AIへの頼み方。

この工程を Mermaid の gantt で書いてください。
開始は2026年9月1日。section は「調査」「分析」「提案」の3つ。
先行タスクの終了に紐づけたいところは after を使ってください。
タスク名にコロンと読点を入れないでください。

出てくるコード。

gantt
    title 提案フェーズの工程
    dateFormat YYYY-MM-DD
    axisFormat %m/%d
    section 調査
    デスクリサーチ :a1, 2026-09-01, 7d
    有識者インタビュー :a2, after a1, 5d
    section 分析
    市場規模の推計 :a3, after a2, 5d
    競合ポジション整理 :a4, after a2, 7d
    section 提案
    ストーリー設計 :a5, after a4, 3d
    ドラフト作成 :a6, after a5, 4d
    最終レビュー :milestone, m1, after a6, 0d

3-5 2軸のポジショニング

こういう場面で使う。施策の優先順位づけ、競合マップ、投資判断。座標は0から1で指定します。

AIへの頼み方。

この4つの施策を Mermaid の quadrantChart で配置してください。
横軸は着手のしやすさ、縦軸は期待効果。
quadrantChart では日本語を引用符で囲まないでください。
座標は0から1の数値で、私が示した相対順を崩さないでください。

出てくるコード。

quadrantChart
    title 施策の優先順位
    x-axis 着手しにくい --> 着手しやすい
    y-axis 効果が小さい --> 効果が大きい
    quadrant-1 すぐ着手
    quadrant-2 計画して着手
    quadrant-3 見送り
    quadrant-4 手が空いたとき
    請求書の自動集計: [0.78, 0.82]
    会議メモの要約: [0.85, 0.45]
    需要予測の内製: [0.20, 0.88]
    社内FAQの整備: [0.60, 0.30]

象限の番号は右上が1、左上が2、左下が3、右下が4です。ここを取り違えるとラベルと中身がずれます。

3-6 システム構成

こういう場面で使う。作ったアプリの構成をクライアントに説明するとき。architecture-beta の標準アイコンは cloud / database / disk / internet / server の5つだけです。

AIへの頼み方。

この構成を Mermaid の architecture-beta で書いてください。
アイコンは標準の5種類だけを使ってください。
角括弧の中のラベルは英数字1語にしてください。日本語と空白は入れないでください。
矢印の向きは L R T B で指定してください。

出てくるコード。

architecture-beta
    group cf(cloud)[Cloudflare]
    service ui(server)[WebUI] in cf
    service api(server)[API] in cf
    service db(database)[DataStore] in cf
    service user(internet)[User]
    user:R --> L:ui
    ui:R --> L:api
    api:B --> T:db

ラベルに日本語を入れると崩れることがあるので、英数字で書いて、説明は図の外に文章で添えてください。日本語を図の中に入れたいときは 3-3 の flowchart と subgraph に切り替えます。

4. 崩れないための5つの約束

1. flowchart 系の日本語ラベルは二重引用符で囲む。囲まないと、括弧・コロン・読点が構文の記号として読まれてパースが止まります。
2. ノード数の上限を数字で指定する。上限を言わないとAIは20個でも描き、文字が重なって読めない図になります。
3. 色を指定しない。表示側のテーマ（ダークモードなど）で背景と同化して、文字が消えることがあります。
4. 図種を1つに固定し、それ以外は使わないと書く。「いい感じの図にして」と頼むと、AIは図種を勝手に変え、ラベルを長くし、括弧を入れて壊します。
5. 出力先とバージョンを伝える。Obsidian に貼るなら「Obsidian、Mermaid 11.13.0。11.14 以降の構文は使わない」と書きます。書かないと最新版の図種を出されて、表示が空欄になります。

quadrantChart と gantt は行の形で構文が決まっているので、引用符は要りません。囲むとかえって崩れます。約束1は flowchart 系だけに効くと覚えてください。

崩れたときは、エラーメッセージをそのまま貼って「この行だけ直してください。ほかは変えないでください」と頼みます。全体を再生成させると、直る代わりに別物が出てきます。

5. draw.io を使うとき

Mermaid で足りなくなる境目は3つです。位置を自分で決めたいとき、AWS や Kubernetes の正式アイコンが要るとき、配ったあとに先方が編集する前提のとき。この3つに当たったら draw.io に移ります。

AIに XML を書かせる手順です。draw.io が図の自動生成向けに公式ルールを出しているので、そのまま指示に書きます。

draw.io に読み込む XML を書いてください。次の4点を守ってください。
1. mxfile と diagram で包まず、素の mxGraphModel だけを出す
2. 圧縮した XML にしない
3. mxCell id="0" と mxCell id="1" parent="0" を必ず先頭に置く
4. XML コメントを入れない
図形は vertex="1"、線は edge="1"、id は一意にしてください。

読み込ませ方は、draw.io を開いて Extras > Edit Diagram に貼り付けるか、.drawio ファイルとして保存して開きます。素の mxGraphModel で出させておくと、開いたときに draw.io 側が自動で mxfile に包みます。圧縮を禁じるのは、圧縮すると人が読めず、直したい1行を探せなくなるからです。

名簿や一覧表から起こすときは CSV ルートが速いです。Arrange > Insert > Advanced > CSV に、# で始まる設定行と CSV 本体を貼ります。組織図なら公式サンプルの # connect: {"from": "manager", "to": "name", "invert": true, "label": "manages"} の1行で階層線が自動生成されます。AIには「この表を draw.io の CSV 書式に変換してください」と頼めば済みます。

Mermaid から持ち込む道も2026年7月3日に変わりました。Arrange > Insert > Mermaid で挿入すると、SVG画像ではなく draw.io ネイティブの図形グループとして描かれます。挿入後に色やラベルを手で直しても、Mermaid ソースを編集して再生成したときにその装飾が残ります。AIに骨格を出させて、人が体裁を整える流れがそのまま通ります。

6. Obsidian で図を出す

3系統あります。使い分けを間違えると、あとで直せない形で保存されます。

Mermaid はネイティブ対応です。コードブロックの言語に mermaid と書けばそのまま描画されます。ノードに class ノード名 internal-link; を足すと、図の中からノートへ飛べます。ただしグラフビューには出ません。厳密な構成図や、あとで差分を追いたい図はこれを使ってください。

Canvas はコア機能です。保存形式は JSON Canvas という公開仕様（2024年3月11日に Obsidian が策定）で、ノードは text / file / link / group の4種類、エッジは接続元・接続先・辺・矢印・ラベル・色を持ちます。テキストエディタで開ける JSON なので、AIに直接書かせられます。議論しながら箱を動かすラフスケッチはこちらです。

Excalidraw はプラグインで、最新は 2.26.2（2026年8月3日）です。手描き風の見た目になります。保存形式も JSON です。Excalidraw 本体には mermaid-to-excalidraw という公式の変換ライブラリがあるので、Mermaid で骨格を作ってから手描き風に流し込めます。

判断は2つで足ります。あとから差分を読みたいか、その場で手で動かしたいか。前者は Mermaid か draw.io、後者は Canvas か Excalidraw です。Canvas も Excalidraw もオープンな JSON なので、どちらを選んでもファイルが開けなくなることはありません。

ちなみに GitHub は Mermaid のほかに GeoJSON と TopoJSON の対話的な地図、ASCII 形式の STL による3Dモデルも表示します。拠点マップを README に置くくらいなら、画像を書き出さずに済みます。

---

画面の部品の呼び方

「あの、ぴょこっと出るやつ」でも、AIは何かを出します。ただし Modal になるか Popover になるか Toast になるかは毎回変わります。これらの名前は実装ライブラリに実在するコンポーネント名なので、名指しした瞬間に候補が1つに絞られます。日本語で3行説明するより、正しい名前を1語言うほうが速い。

名称の典拠は shadcn/ui のコンポーネント一覧（https://ui.shadcn.com/docs/components ）と Material Design 3 です。

---

対応表

---

指定しないとAIが勝手に決めてしまうもの

上の表で名前を言えば形は出ます。ただし次の5つは、名前を言っても中身が決まりません。黙っているとAIが勝手に決めますし、生成のたびに変わります。

ちなみに Toast と Snackbar は同じものの別名です。Google 系の資料では Snackbar、それ以外では Toast で通ります。どちらで頼んでも同じものが出るので、覚え直す必要はありません。

---

動きと見た目の指定

1. 動きは CSS の transition でほぼ足ります

状態が変わったときの動きは、CSS の transition で済みます。ボタンの色が変わる、パネルが開く、行が消える。この程度なら追加のライブラリは要りません。

動かしてよいのは transform と opacity の2つだけです。width や top を動かすと画面全体の再計算が走って、カクつきます。持続時間は150〜300ms、イージングは減速系（ease-out）。この範囲を外れると、速すぎて気づかないか、遅くて待たされます。

過度なアニメーションを避ける理由は、好みではありません。WCAG 2.3.3「Animation from Interactions」（レベルAAA）が、操作起因のモーションを無効化できることを求めています。前庭障害のある人には、視差スクロールや弾むボタンで吐き気や眩暈が出ます。AAA なので法的な最低線ではありませんが、官公庁・医療・教育の調達では実質的な要件になりつつあります。実装は @media (prefers-reduced-motion: reduce) で持続時間を 0.01ms にするのが定石です（W3C の Technique C39、https://www.w3.org/WAI/WCAG22/Techniques/css/C39.html ）。

線引きは「意味のある動きだけ残す」。要素がどこから来てどこへ行くかを示す遷移は残す。注意を引くためだけのループ、パララックス、スクロール連動の大きな動きは削る。

これを毎回口で言うのは無駄なので、DESIGN.md の Motion セクションに書いておきます。実際に書く行はこれだけです。

## Motion
- transition は transform と opacity のみ。width / height / top / left は動かさない
- 持続時間は 120ms（色や状態の変化）と 200ms（パネルの開閉）の2種類だけ
- イージングは ease-out に固定
- ループアニメーション、パララックス、スクロール連動の大きな動きは使わない
- @media (prefers-reduced-motion: reduce) のとき、全アニメーションを 0.01ms にする

この5行があると、以後の指示は「開閉にアニメーションを付けてください」の一言で済みます。

---

2. 2026年8月時点で使える3つの手段

View Transitions は Firefox 未対応の版でも、単に瞬間切り替えになるだけで壊れません。装飾として入れる分には出荷できます。

Motion は名前が変わっています。2025年半ばに Framer から独立して Motion に改名し、パッケージ名は framer-motion から motion、React の import は motion/react になりました（https://motion.dev/ ）。旧 framer-motion は動きますが開発は止まっています。「Framer Motion で」と頼むと古い import を書くことがあるので、motion/react と明示してください。

3つ目まで要る場面は多くありません。React を使っていて、複数の要素が連動する場合だけです。それ以外は1つ目で足ります。

---

3. 見た目の指定で効く語彙 10組

形容詞は通じません。数字と対象を書くと通ります。

最後の1組が一番よく使います。「ビジネスライクに」と何度も言い直すより、hex を2つ書くほうが1回で決まります。

---

4. AIが作ると全部同じ見た目になる問題

紫グラデが出る理由は美意識ではありません。統計です。

#6366F1（indigo-500）、#8B5CF6（violet-500）、#A855F7（purple-500）。背景は #FFFFFF と #F9FAFB、書体は Inter か Roboto。全部 Tailwind CSS の既定色と既定書体です。2019年以降の Web デザインの中央値がそのまま訓練データを飽和させました。言語モデルは中央値を返します。Developers Digest がおこなったティアダウンでは、Show HN のローンチの半分以上が同じデザイン指紋を共有していました。

もう1つの型が Cardocalypse です。何もかもカードで囲み、カードの中にカードを入れる。rounded-2xl shadow-lg p-6 という shadcn/ui の既定値が無編集で残っているのが目印です。

ここからが本題です。Anthropic 公式の frontend-design skill（https://claude.com/plugins/frontend-design 、インストール数100万規模）は「避けるべきAIの型」を3つ名指ししていますが、紫グラデはその中に入っていません。

1. 温かいクリーム地に、高コントラストのセリフ体とテラコッタのアクセント
2. ほぼ黒の背景に、アシッドグリーンかバーミリオン
3. ヘアライン罫、角丸ゼロ、高密度カラムのブロードシート（新聞）風

同スキルの言い方はこうです。「一部のブリーフでは正当だが、これらは選択ではなくデフォルトだ」。3つとも、紫グラデを避けようとした人たちがたどり着いた回避策です。それがもう次の中央値になりました。回避策が普及すれば、その回避策自体が中央値になる。この構造がある限り、逃げ切りはありません。

だから、避ける側ではなく決める側に回ります。やることは3つです。

書体を替える。1時間の作業で見た目のAIっぽさを最も大きく動かします。ここだけやって残り2つをやらない、でも効果は出ます。

パレットを命名する。4〜6色の hex に役割名を付け、Tailwind v4 の @theme に流し込みます。v4 では tailwind.config.js ではなく CSS に直接 --color-primary: oklch(0.65 0.24 260) と書くと bg-primary や text-primary が生えます。DESIGN.md に書いたトークンと @theme が一対一で写るので、指示書がそのまま実装になります。なお2026年8月時点で Tailwind v5 は存在しません。最新は v4.3 系です。

参照を与える。VoltAgent/awesome-design-md（https://github.com/VoltAgent/awesome-design-md ）に Apple、Stripe、Vercel、Linear、Figma など73ブランド分の DESIGN.md が揃っています（スター106.5k）。近いものを1本渡すと、出力の中央値が「汎用の中央値」から「そのブランドの中央値」へ移ります。

ちなみに DESIGN.md のテンプレートには標準セクションが9つあり、最後の Do-Not-Use Rules が一番効きます。premium や clean のような気分の言葉は、それを目に見える選択へ落とす補助ルールがない限り無意味だと明記されています。長く書きすぎるとエージェントが重要なルールを薄めるので、短さも要件です。

---

人に渡す形

作ったものが自分のPCの中だけで動いているうちは、誰の判断も変えません。渡した瞬間に価値が出ます。渡し方は4つあり、難易度は等しくありません。

渡し方の4択

上から下へ行くほど、コードを書く時間は変わらないのに、コード以外の作業が増えます。

まず Web アプリで作る

最初の1本は Web アプリにしてください。理由は3つあります。

配布。URLを送るだけで済みます。受け取る側にインストールも承認操作も要りません。アプリとして配る場合、後述の署名と公証が丸ごと乗ってきます。

更新。Web はリロードで全員が最新になります。デスクトップアプリは更新の仕組みを実装し、更新パッケージに署名し、その鍵を失くさない運用まで込みで面倒を見ることになります。鍵を失くすと、既に配ったアプリを更新する手段が消えます。

環境差異。Web はブラウザの差だけを見ればよい。デスクトップは OS のバージョン、権限、ウイルス対策ソフト、社内プロキシが加わります。手元で動いたものが相手先で動かない理由が、一気に増えます。

もう一点、撤退コストが安い。Tauri も Electron も中身は Web のフロントエンドなので、Web で作ったものを後から包み直せます。逆方向は成立しません。先に Web を作るのが常に有利です。

URLで配る

Cloudflare Workers に置くのが現在の最短です。Cloudflare 公式は新規プロジェクトに Workers を指定していて、Pages は廃止されていないものの新機能は Workers 側に付いています。

無料枠の実数（2026年8月時点）。リクエストは1日10万件、CPU 時間は1呼び出しあたり10ms、メモリ128MB、Worker サイズは gzip 後3MB、静的アセットは2万ファイルまで・1ファイル25MiB まで。

効いてくるのはここです。静的アセットへのリクエストは無料かつ無制限で、ストレージ料金もかかりません。課金対象は Worker スクリプトが起動した分だけです。画面だけの資料アプリなら、アクセスが跳ねても請求は動きません。

手順は当日デモで通しで見せます。手を動かす前に確認してほしいのは3点だけです。

1. 画面に出ている数字は、公開してよいものか
2. URL を知った人は誰でも見られる。認証を付けていないなら、それは公開である
3. 消したいときにどうやって消すか。公開する前に確認したか

3つめを飛ばす人が多い。消し方を知らないまま出したものは、後から必ず面倒になります。

exe / Mac アプリにする

Tauri と Electron のどちらを選ぶかは、性能ではなく構造で決まります。断言できる違いは1点、ブラウザエンジンを同梱するかどうかです。Electron は Chromium と Node.js をアプリごとに丸ごと同梱し、Tauri は同梱せず OS 側の WebView を借ります。Windows は WebView2、macOS は WKWebView を使います。

容量やメモリの数値は出回っていますが、公式ベンチマークが存在しないので判断材料にしないでください。構造から言えるのはトレードオフの向きだけです。Electron は全ユーザーが同じ Chromium を実行するので動作差異が原理的に出ません。Tauri は OS の WebView を借りる以上、OS ごとに挙動が割れます。軽さの代わりに、ブラウザ差のテストを買い戻すことになります。

もう一つ、クロスコンパイルができません。macOS アプリは Mac でしかビルドできず、Windows の exe は Windows でしか作れません。全 OS 分を配るなら、OS 別のビルド環境を並べる必要があります。

署名と公証

ここが本題です。Windows と macOS で難易度が非対称になっています。

Windows は未署名でも動きます。SmartScreen の警告を1回踏めば実行できます。Tauri 公式も「署名がないと警告が出る」とは書きますが、実行不能とは書いていません。

macOS は動きません。ブラウザ経由でダウンロードされた未署名の .app は「壊れているので開けません」と表示され、起動すらしません。しかも ad-hoc 署名（自己署名）で逃げても警告は消えず、ユーザーはプライバシーとセキュリティ設定での明示的な許可を求められます。ここは Tauri 公式が明記しています。自己署名は警告を消す手段ではありません。

正規に署名する道は、どちらの OS も組織の契約行為です。

macOS は Developer ID Application 証明書が要り、その前提として Apple Developer Program（年額 $99 USD）への加入が必要です。公証自体は xcrun notarytool submit --wait の1コマンドで終わります。詰まるのは契約の側です。

Windows で公的に信頼される証明書を取る条件は、2026年に悪化しました。CA/Browser Forum の Ballot CSC-31 により、コード署名証明書の最大有効期間が39か月から460日へ短縮され、2026年3月1日から適用されています（DigiCert は2026年2月24日から459日を上限に設定）。秘密鍵は FIPS 準拠の HSM またはハードウェアトークンでの保管が必須で、鍵をファイルで持つ運用はもう選べません。トークンの郵送を待つ時間が発生します。さらに OV 証明書で署名しても SmartScreen の警告は消えません。消したければ EV 証明書を取るか、実行実績を積んでレピュテーションが蓄積されるのを待つことになります。

安い代替として Azure Artifact Signing（月額 $9.99 から、ハードウェアトークン不要）がありますが、2026年4月の GA 時点で対象は米国・カナダ・EU・英国の法人に限られています。日本法人が今すぐ使えるかは確認が要ります。

まとめます。AI はビルドが通るところまで数分で連れて行きます。Apple Developer Program の契約、ハードウェアトークンの郵送、法人審査、SmartScreen の実行実績は1分も短縮されません。組織の契約行為と物理と時間だからです。コードは数分で書けますが、信頼の獲得は連れて行ってくれません。

PWA という選択肢

Web アプリのまま、アイコンからアプリのように起動できる形にする道もあります。

インストール可能にする条件は、manifest に name（または short_name）、192px と 512px を含む icons、start_url、display があること、そして HTTPS で配信されていること。Service Worker は推奨ですが、インストールの必須要件ではありません。

2026年時点の対応状況。デスクトップは Chrome / Edge / Opera がアドレスバーからインストールでき、Firefox は非対応です。macOS の Safari は Sonoma 以降、manifest がなくても「Dock に追加」でアプリ化できます。iOS は 16.4 以降、Safari 以外のブラウザからも共有メニュー経由でホーム画面に追加できます。ただし Safari は beforeinstallprompt を実装していないため、ワンタップのインストールバナーは原理的に出せません。iOS のインストールは全件が手動操作になります。プッシュ通知は、ホーム画面に追加された状態でのみ動きます。

署名も公証も要らない一方で、相手に手順を説明する必要は残ります。

社内に配るときの現実解

URL で配れるなら URL にする。認証が要るなら、アクセス制御を先に付けてから公開する。

どうしてもファイルで配るなら、単一 HTML にして「ダブルクリックでブラウザが開く」形にする。インストーラを作らずに済みます。

macOS で未署名の .app を数人に渡すだけなら、xattr -dr com.apple.quarantine /Applications/アプリ名.app を手順書に書く。ダウンロード時に付いた検疫属性を外すだけで、Gatekeeper も SIP も無効化しません。

ちなみに macOS の「このまま開く」ボタンは、アプリを開こうとしてから約1時間だけシステム設定に表示されます。手順書を書くときは「まずダブルクリックして怒られる」を最初の手順に入れてください。順序を逆にすると、ボタンが出ません。