デザインもテキストで。
Mermaid と Claude が生成する。

デザインを作る道具を変える。

これまで業務でデザインを作るには、PowerPoint、Visio、Figma、Sketch、Adobe XD、Canva、Photoshop ── 用途ごとに別の専用ツールが必要だった。学習コストが高く、ファイル形式が独自で、サブスクリプション料金もかかる。

時代が変わった。

デザインも、テキストから生成する。構造図は Mermaid。UI と画面は Claude デザイン。スライドも Markdown。すべての出力は、テキストかコードに源を持つ。書き換えが利き、バージョン管理ができ、AI が同僚として並走する。

デザインの種類と道具

業務で「デザイン」と呼ばれる作業を整理する。

すべてに共通するのは、最終的な PDF や PNG ではなく、その手前の「テキストとコード」を保存することだ。

構造図は Mermaid で

業務システム、組織、データの関係 ── これらの構造を伝える図は、すべて Mermaid で書ける。

graph TD
  A[ユーザー] --> B[Web サーバー]
  B --> C[(データベース)]
  B --> D[キャッシュ]
  C -.->|遅延| B

これだけで、4 つのノードと矢印の関係が表現できる。

PowerPoint で描いた図は、Word に貼り付けた瞬間に画像になり、構造を失う。動かせない。差分が見えない。Mermaid はテキストだ。Git の差分が出る、AI が読める、書き換えられる、10 年後も読める。

書ける図の種類:

• フローチャート(処理の流れ)
• シーケンス図(API・人間のやり取り)
• ER 図(データの関係)
• クラス図(オブジェクトの関係)
• ガントチャート(プロジェクト計画)
• 状態遷移図(画面・データの状態の変化)
• マインドマップ
• 構成図(システム配置)

GitHub、Notion、Zed など、ほとんどの場所が Mermaid をネイティブで レンダリングする。記号を覚える必要は無い。Claude に「この構造を Mermaid で書いて」と頼めば書いてくれる。読めればよい。

UI と画面は Claude デザインで

「画面の下書き」「UI モックアップ」── これまでは Figma や Sketch で作っていた。学習コストが高く、サブスクリプション必須で、デザイナーの作業領域に閉じていた。

Claude デザインで、これが変わった。

「ログインフォームを作って」と頼むと、HTML + CSS + (必要なら) JavaScript のコードが返る。ブラウザで開けば、その場で動く画面になる。「もっと洗練されたデザインで」「青基調で」「左寄せで」── 言葉で指示すれば、コードが書き換わる。

あなた: 在庫管理画面の UI を作って。商品リスト、検索ボックス、追加ボタン
Claude: (HTML+CSS が返る)
あなた: もっと余白を広く、カラムを 3 つに
Claude: (修正版が返る)

これは、Figma の代わりではない。Figma より早く、コードに直結しているので、そのまま開発に渡せる。第7章「Web を作る」の HTML+CSS+最小 JS スタックと完全に一致する。

業務でこんな使い方ができる:

• 顧客提案で「こんな画面イメージです」を即座に作って見せる
• 仕様書に画面モックアップを HTML として埋め込む(画像でなく動くもの)
• 開発前に複数のデザイン案を並べて比較する
• 完成したモックアップを開発の出発点として使う
• ステークホルダーへの説明で、リアルタイムに修正案を出す

専門デザイナーがいる場合は、Claude デザインで下書きを作って、デザイナーに渡す。「この方向で、もう少し洗練して」と頼める。デザイナーの時間が「ブランド統一」「印刷物精度」「写真選定」── 専門性が要る部分に集中する。

スライドも Markdown で

プレゼン資料も、Markdown で書く。

Marp や reveal.js というツールが、Markdown を HTML スライドに変換する。スライド 1 枚 = Markdown の --- 区切り。

# AI ネイティブな仕事の作法

AI 時代の自由人のための道具たち

---

## なぜ今か

AI で道具立ての時代が変わった

---

## 結論

1 人 + AI で、仕事ができる

これで 3 枚のスライドが PDF・HTML・PNG に変換できる。

PowerPoint との比較:

• PowerPoint: バイナリ形式、書式とコンテンツが混在、Git 差分が出ない、AI が読みにくい
• Markdown + Marp: テキスト、構造のみ、Git 差分あり、AI が読み書きできる

複雑なレイアウトが必要なスライドだけ、Claude デザインで HTML を書いてもらう。ベースは Markdown、装飾だけ Claude。

業務でのプレゼン作成が、劇的に速くなる:

• 30 分の話題を、Markdown 30 行で書く
• Marp が即座に PDF / HTML を出す
• 修正は Markdown を直すだけ
• 過去のスライドが検索可能(全部テキスト)
• 提案書とプレゼン資料の中身が、同じ Markdown から両方生成できる

AI で簡単になるもの ── 学習コストが高かった専門ツール

Mermaid・Claude デザイン・Marp は 日常のデザイン の話。ここから は、学習コストが高くて諦めていた専門ツール の話。AI が スクリプト・コード・ノード設定を書いてくれるおかげで、これらの道具 が事務職・個人事業主・現場担当者の 手元に降りてくる。

初心者の方へ ── ここから先(D3 / Blender / ComfyUI / CAD)は 「あとからこんなことも可能になる」という見通しです。最初は Mermaid と Claude デザインだけで十分。日常のデザインが手元に 降りてきてから、必要に応じてこの節に戻ってきてください。 「読める能力」さえあれば、いつでも入れる。

四つに共通するのは、全部がスクリプト/コード/JSON で動かせる こと。 AI がその「言語」を書ける。だから、GUI を覚える必要が無い。

D3.js ── インタラクティブなデータ可視化

D3.js は Web ブラウザで動く可視化ライブラリ。Excel のグラフでは 描けない カスタムなインタラクティブ可視化 ── 階層ツリー、 力学グラフ、地図ベース、独自レイアウト、ホバーで反応する図、 ズームできるタイムライン ── が作れる。新聞や調査報道のあの種の 凝った図は、たいてい D3。

学習コストは非常に高い。「データバインディング」「セレクション」 という独自の概念があり、独学だと数ヶ月かかる。

AI を介すと:

あなた:この JSON を D3 で、力学グラフ(force layout)として 描いて。ノードを色分け、ホバーで情報表示、ズーム可。

Claude:(D3 のコードが返る)

Web に貼れる JavaScript が返る。D3 の文法を覚える必要は無い。 報告書、Web 公開、ダッシュボード、調査資料 ── これまで「専門の ビジュアライザー」を呼んでいた領域が、自分の手元に降りる。

第1章で扱った matplotlib / Altair は日常の集計グラフ向け、 D3 は凝った独自可視化向け ── 用途で使い分ける。

Blender ── 3D モデリングとアニメーション

Blender は無料・オープンソースの 3D 制作スイート。3D モデル、 アニメーション、レンダリング、動画編集 ── ハリウッド級の機能だが、 メニューが膨大で、ショートカットを覚えるだけで数ヶ月。

実は Blender は Python(bpy)で全機能を呼び出せる。GUI を 触らなくても、Python スクリプトで 3D シーンが組める。

AI を介すと:

あなた:Blender の Python で、立方体の上に球体を載せた図形を作って。 光源は左上、カメラは正面少し下、PNG でレンダリング。

Claude:(bpy スクリプトが返る)

業務での用途:

• 製品プロモーション画像(プロトの仮想撮影)
• 建築・室内レイアウトの簡易ビジュアライズ
• 教育用アニメーション(機構の動作説明)
• マニュアル用の組み立て図・分解図
• 3D プリント前の最終確認レンダー

ComfyUI ── ノード式 AI 画像/動画生成

ComfyUI は、Stable Diffusion 等の生成 AI を ノードを繋ぐ形 で 扱うツール。プロンプトを書いて生成するだけでなく、複数モデルの 組み合わせ・条件付き生成・動画生成・キャラの一貫性維持 ── 高度な ワークフローを組める。

ノードを手で繋ぐと迷子になる。ワークフローは JSON ファイルで、 直接書くのは辛い。

AI を介すと:

あなた:商品写真を入力に、背景を白に置換、ロゴを右下に重ねる ComfyUI ワークフローを JSON で。

Claude:(ワークフロー JSON が返る)

業務での用途:

• 商品画像のバリエーション生成(EC・カタログ)
• ブログ・SNS の挿絵を量産
• プレゼン資料の図解イラスト
• 動画素材(マニュアル・説明動画)

これまで 広告代理店や制作会社 に外注していた画像作りが、 手元 で完結する。ComfyUI を Web に Web UI として公開すれば、 チームでも使える。

CAD ── 機械設計・3D プリント・建築模型

機械設計の世界は 専用 CAD ソフト(SolidWorks、Inventor 等)で 動いていて、学習コストもライセンス費も高い。

しかし、スクリプト/コードで CAD を書く 選択肢がある。AI が コードを書くので、CAD の操作を覚える必要が無い。

例:Build123d で、ねじ穴付きのブラケットを作る。

あなた:幅 50mm × 高さ 30mm × 厚さ 3mm のブラケット。 上端から 10mm の位置に直径 4mm の穴を 2 つ、左右対称に。 Build123d で書いて。

Claude:(Python コードが返る)

これを実行すると STL ファイルが出力される。そのまま 3D プリンタ に入れて部品が刷れる。

業務での用途:

• 試作品の 3D プリント設計
• 治具・取付具(ライン作業の小物)
• 機械部品(モーター取付ブラケット、センサ筐体)
• 建築模型・展示物
• 教育用教材

組み込み(第9章)と組み合わせると、ハードウェアを自分で設計 して、自分で 3D プリントして、自分で制御コードを書く ── これ までは大組織しかできなかった、ハードウェア製品の一人立ち上げが 現実的になる。

具体例:現場で何に使うか

抽象的な「専門ツールが手元に降りる」は、具体例で見ると分かりやすい。

事例 1:商品カタログのバリエーション(ComfyUI)

ある小売店主が、季節商品 100 種類の写真を撮った。背景が雑然と していて、Web カタログに使えない。

• 旧来:撮り直し、または写真スタジオ・編集会社に依頼。1 枚 500 円 ×100 = 5 万円、納品まで 1 週間
• AI ネイティブ:ComfyUI ワークフロー(Claude が JSON を書く)で、 100 枚を 白背景に置換、商品にロゴをオーバーレイ、所要時間 数十分、追加費用ゼロ

事例 2:工場のセンサ筐体(Build123d + 3D プリント)

中小製造業の現場担当者が、ライン上の温度センサを保護する筐体を 作りたい。

• 旧来:設計事務所に発注(15 万円、1 ヶ月)→ 試作 → 修正 → 発注…
• AI ネイティブ:現場担当者が Claude に「センサのサイズ、取り付け ねじ穴、ケーブル通し、放熱スリット」を伝える → Build123d の Python コードが返る → STL 出力 → 工場の 3D プリンタで その日に 試作

「壊れた」「合わない」が分かったら、寸法を変えて 30 分で次の試作。 現場の人が、現場で、設計サイクルを回す。これは第12章「縦割り からの自立」の具体形。

事例 3:プロモーション動画の素材(Blender)

地域の観光協会が、移住促進の説明動画を作る。

• 旧来:映像制作会社に発注(50〜200 万円、納品 2〜3 ヶ月)
• AI ネイティブ:地域の地図と建物配置を、Claude が bpy で 3D シーン化(住宅、田畑、駅、コミュニティセンター)、季節を変えた ライティング、ドローン視点のカメラパス、書き出した動画素材を 普通の動画編集で組み上げ。1 週間、追加費用は AI 利用料のみ

事例 4:取材記事のインタラクティブ図(D3)

地方紙の記者が、人口減少データを記事に組み込みたい。

• 旧来:データジャーナリスト(別の専門職、外部から雇う)に発注。 Web 制作会社に組み込み依頼
• AI ネイティブ:記者が SQLite に過去 20 年の人口データを取り込み、 Claude に「町別人口の force layout、年で色を変えて、ホバーで詳細 表示」を頼む → D3 のコードが返る、新聞社の Web に貼る。1 日

記者・観光協会職員・現場担当者・小売店主 ── これまで「専門の制作 会社に発注する側」だった人が、自分の手で作る側に回る。

共通する原理 ── AI が「学習コストの壁」を消す

D3、Blender、ComfyUI、CAD ── これらは「学習コストが高くて触れ なかった専門ツール」だった。共通する性質はひとつ ── 全部がスクリプト/コード/JSON で動かせる。

AI ネイティブな働き方は、この性質を最大限に使う。GUI を覚える のではなく、AI にコードを書かせて、結果を見て、調整する。これ までデザイナー・3D アーティスト・データビジュアライザー・機械設計 者しか触れなかった領域が、第1章「使う能力」だけを持つ人の手元 に降りてくる。

専門家になる必要はない。 「専門ツールを AI と一緒に扱える人」になればいい。 これは第12章「縦割りから個人の自立へ」の具体形そのものだ。

業務資料は構造を保ったまま組み立てる

提案書、報告書、仕様書、社内文書、プレスリリース ── すべて、Markdown が本体、図は Mermaid、装飾用の絵は Claude デザインで作る。

実際の組み立て方:

articles/proposal-2026/
  ├── ja.md              # 本文(Markdown)
  ├── architecture.mmd   # 構造図(Mermaid)
  ├── ui-mockup.html     # 画面例(Claude デザインの出力)
  └── cover.svg          # 表紙(SVG)

これを Python が PDF に組み立てる(pandoc や weasyprint が使える)。各構成要素は独立しており、それぞれ別の用途にも使える:

• 同じ Markdown から、社内 Wiki 用の HTML も生成できる
• 同じ構造図を、別の資料にも貼れる
• UI モックアップを、開発側にそのまま渡せる
• 同じ素材から、PDF、HTML、印刷用、AI への入力 ── 用途ごとに変換

「デザイン」と「中身」が分離されている。書き換えが地獄にならない。一箇所を直せば、すべての出力に反映される。これは第7章「Web を作る」で見た「中身は Markdown+Mermaid、外枠だけ HTML/CSS」の原則と完全に一致する。

デザイナーとの分業も変わる

Claude デザインで何でも作れる、というわけではない。本格的なブランディング、複雑な印刷物、写真撮影を含むビジュアル制作 ── これらは専門デザイナーの領域だ。

しかし、自分側で下書きまで作れることで、デザイナーとの分業が変わる。

これまで:

• 仕様を口頭・文書でデザイナーに伝える
• デザイナーが解釈してデザインを起こす
• 戻ってきたものが、想像と違う
• 何度も往復する

これから:

• Claude デザインで自分が画面下書きを 3 案作る
• デザイナーに渡す
• 「この方向で、もう少し洗練して」と頼む
• 1 回で意図が伝わる

デザイナーの専門性が、本当に専門性が要る部分に集中する。下書きの段階で時間を使わない。これは第6章で見た「業務システムの書き換えを下請けに出さない、現場 + Claude で完結する」と同じ流れだ。現場が下書きを作る、専門家は仕上げに集中する。

描く必要すらない

ここまでの話に共通するのは、人間が「描く」必要がほぼないということだ。

• Mermaid の記号を覚える必要は無い。Claude に「この構造を Mermaid で」と頼む
• CSS を覚える必要は無い。Claude に「こんな画面で」と頼む
• スライドのレイアウトを考える必要は無い。Claude に「この内容を Marp で 5 枚に」と頼む

人間がやるのは、意図を言葉にする、出てきたものを判断する、必要な修正を指示する。これだけだ。「描く」という作業は AI に渡る。「何を伝えたいか」を考える時間が増える。

デザインの記号や規則を覚えるのではなく、Claude に意図を伝える能力を持つ。これが新しいリテラシーだ。

10 年後も読める

20 年前の PowerPoint ファイルは、フォントが置換され、図形がずれ、開けないことがある。Adobe Illustrator の古い .ai 形式も、最新版で開けないことがある。Figma のデザインは、サービスが終われば消える。

Mermaid、Markdown、SVG、HTML+CSS ── これらはテキストだ。20 年前のファイルが、今のレンダラで問題なく動く。20 年後も同じだ。AI ならもっと簡単に読める。

デザインも、構造で持て。

書式は表示を飾る。構造は時間を超える。

実例: 数字で見る

PowerPoint で 30 ページのスライド作成: 文章とレイアウトが混在で 4 時間。同じ内容を Marp で書くと、Markdown 30 行、ビルド 1 秒、修正は Markdown を直すだけで合計 30 分。8 倍の差。

UI モックアップを Figma で作成: 月額 $15、図形操作で 1 時間、開発に渡す際は画像化する(動かない)。Claude デザインで「ログインフォームを作って」と頼む: HTML+CSS が即座に返り、ブラウザで動く、そのまま開発に渡せる。サブスク料金ゼロ。

Mermaid 図 1 枚の Git 差分: 1 行追加・1 行削除、レビュー 30 秒で済む。同じ変更を PowerPoint でやると、ファイル全体が "binary changed" としか見えない、レビュー不能。

20 年前の .ppt ファイル: フォント置換で図形がずれ、再現困難。同じ時代の Markdown / Mermaid ファイルは、今のレンダラで完全再現。

まとめ

デザインを作る道具を、テキスト中心に変える。

日常のデザイン:

• 構造図は Mermaid
• UI と画面は Claude デザイン(HTML+CSS が返る)
• スライドは Markdown + Marp / reveal.js
• 挿入図・配布物は Mermaid + Claude デザイン
• 業務資料は Markdown を本体、図と画面は別ファイル

AI で扱える専門領域:

• データ可視化(凝った独自図) → D3.js
• 3D モデリング・アニメーション → Blender (Python bpy)
• 生成 AI 画像・動画 → ComfyUI(JSON ワークフロー)
• 機械設計・3D プリント → CadQuery / Build123d / OpenSCAD / FreeCAD

Figma、Sketch、Adobe XD、PowerPoint、Visio、SolidWorks、Illustrator ── これらの専用ツールから離れる。代わりに、AI が書きやすいテキスト とコードで持つ。サブスク料金が消える、学習コストが下がる、書き換え が地獄でなくなる、AI が同僚として並走する。

共通する原理は一つ:GUI を覚えるのではなく、AI にコードを書かせて、 結果を見て、調整する。学習コストの壁が消える。これまで専門家しか 触れなかった領域が、第1章「使う能力」だけを持つ人の手元に降りてくる。

専門家は引き続き必要だ。だが、彼らの時間が「下書き」ではなく 「専門領域」に向くように、自分側でできることを Claude で拾う。

次の章では、データの持ち方の話に進む。Excel から JSON / YAML へ、更新があるデータは SQLite + Python、大量データは Parquet と DuckDB へ ── CSV は構造化が弱いので捨てる。

関連記事

• 第3章: 文書を書く ── Markdownという最小の選択
• 第5章: データを持つ ── JSONとYAMLで考える
• 第8章: Webを作る ── HTML+CSS+JavaScriptという原点回帰
• 序章: 事務処理はOffice、業務ソフトはJava/C#、しかしAIはPythonとテキスト

実例

再現可能なソース・コマンド・実測結果を、別ページにまとめてある。

• 実例 1 — Mermaid 5 種類を SVG / PNG に焼く
• 実例 2 — Markdown から Marp で 7 枚のスライド
• 実例 3 — 名刺を二経路で生成する