aiseed.dev›AI ネイティブなソフトウェア開発
2-13 / Series
2-13 № 13 · 2026

図も資料も、
テキストから作る。

図もスライドも 3D も、テキストとコードから出す

2026.09.21 🌐 EN

図も、スライドも、配布する資料も、テキストとコードから出す。

2-12: API を作る ── FastAPI で基幹のロジックを出すで、画面を見て名指しするための語彙(近接・整列・反復・対比)と、デザインのルールを 1 枚に固定するやり方を手に入れた。同じ手が、画面の外側にも効く。

この章では、章の構造図、提案のスライド、配布する資料 ── そして 3D と CAD まで、順に道具を見る。

用途ごとに、道具が決まっている

日常で作る図と資料は、三つに分かれる。

flowchart LR Intent["伝えたい意図
(言葉)"] Intent --> MM["構造図
Mermaid"] Intent --> UI["画面の下書き
AI に HTML で"] Intent --> MP["スライド
Markdown + Marp"] MM --> Out[("PDF / HTML / PNG")] UI --> Out MP --> Out classDef good fill:#e8f5e9,stroke:#7a9a6d,color:#3a4d34 classDef bad fill:#fef3e7,stroke:#c89559,color:#5a3f1a class MM,UI,MP good

共通するのは、最終的な PDF や PNG ではなく、その手前のテキストとコードを保存することだ。出力はいつでも作り直せる。

構造を伝える図は、Mermaid で書く

業務システムの構成、組織、データの関係 ── 構造を伝える図は、Mermaid で書ける。この連載に出てくる図も、すべて Mermaid である。

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

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

Mermaid はテキストである。図を 1 か所直した差分は、Git に 1 行追加・1 行削除として出て、一目でレビューできる。AI がそのまま読んで書き換えられる。先のレンダラでも、同じ図が出る。

書ける図の種類は広い。

書き方の要点は少ない。

GitHub、Forgejo(2-06)、Notion など、ほとんどの場所が Mermaid をそのまま描画する。記号は、覚えなくてよい。「この構造を Mermaid で書いて」と頼めば返ってくる。読めれば足りる。

画面の下書きは、AI に HTML で頼む

「画面の下書き」「UI モックアップ」は、Figma や Sketch の領域だった。学習に時間がかかり、利用には月額がかかる。

AI で、ここが変わる。「ログインフォームを作って」と頼むと、HTML + CSS
(必要なら)JavaScript が返る。ブラウザで開けば、その場で動く画面になる。「もっと余白を広く」「青基調で」「左寄せで」── 言葉で指示すれば、コードが書き換わる。画面専用の機能を持つ AI もあるが、普通の対話で足りる。

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

Figma より早く、出てくるものがコードなので、そのまま開発に渡せる。2-12 で作ったルールの 1 枚 (12 列グリッド、余白は 8 の倍数、色 3 つ、文字サイズの段階)を一緒に渡せば、どの画面にも同じルールが当たる。

業務では、こう使える。

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

スライドは Markdown で書き、Marp が組む

プレゼン資料も、Markdown で書く。Marp が、Markdown を HTML スライドや PDF に変換する。 Marp は単体のバイナリが配られているので、npm は要らない(2-10)。apt で済ませるなら、 pandoc(Debian 13 にある)が同じ Markdown から reveal.js のスライドと PDF を出す。スライド 1 枚が、--- で区切られた 1 区画になる。

# AI ネイティブなソフトウェア開発

自立編の道具立て

---

## なぜ今か

道具の前提が入れ替わった

---

## 結論

一人 + AI で、仕事が回る

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

差は、文章とレイアウトが混ざるかどうかで出る。PowerPoint では、一枚ごとに置き場所と文章を同時に決める。Markdown なら、書くのは文章だけで、置き場所はテンプレートが決める。直すのも Markdown を直すだけだ。

複雑なレイアウトが要るスライドだけ、AI に HTML を書かせる。*ベースは Markdown、装飾だけ AI*。

副産物も大きい。

学習コストが高かった道具も、コードから動かせる

Mermaid・AI の HTML・Marp は、日常のデザインの話だ。ここから先は、学習コストが高くて手を出さずにいた専門ツールの話になる。AI がスクリプト・コード・JSON を書くので、これらの道具が事務職・個人事業主・現場担当者の手元に降りてくる。

ここから先(D3 / Blender / ComfyUI / CAD)は、あとからこんなことも可能になる、という見通しである。最初は Mermaid と AI の HTML だけで足りる。日常の図と資料が手元に降りてから、必要に応じてこの節に戻ってくればよい。読める能力さえあれば、いつでも入れる。

flowchart LR Want["やりたいこと
(言葉で説明)"] Want --> D3["データ可視化
D3.js"] Want --> BL["3D・動画素材
Blender (bpy)"] Want --> CF["画像生成
ComfyUI (JSON)"] Want --> CAD["機械設計・3D プリント
CadQuery / Build123d
OpenSCAD / FreeCAD"] D3 --> Out2[("HTML / SVG / PNG
STL / 動画")] BL --> Out2 CF --> Out2 CAD --> Out2 classDef good fill:#e8f5e9,stroke:#7a9a6d,color:#3a4d34 classDef bad fill:#fef3e7,stroke:#c89559,color:#5a3f1a class D3,BL,CF,CAD good

四つに共通するのは、全部がスクリプト・コード・JSON で動かせることだ。AI がその言語を書ける。だから、GUI の操作を覚える道は通らなくてよい。

D3.js で、凝った可視化を作る

D3.js は、ブラウザで動く可視化ライブラリである。階層ツリー、力学グラフ(force layout)、地図ベースの図、ホバーで反応する図、ズームできるタイムライン ── 新聞や調査報道で見る凝った図は、たいてい D3 だ。

学習には時間がかかる。データバインディングとセレクションという独自の概念があり、独学では遠い。

AI を介すと、そこが縮む。「この JSON を D3 の force layout で描いて。ノードを色分け、ホバーで情報表示、ズーム可」と頼めば、Web に貼れる JavaScript が返る。文法は、覚えなくてよい。

日常の集計グラフは matplotlib や Altair で足りる。D3 は、凝った独自の可視化に向く。用途で分ける。

Blender は Python から動かす

Blender は、無料でオープンソースの 3D 制作スイートである。3D モデル、アニメーション、レンダリング、動画編集まで入っているが、メニューが膨大で、ショートカットを覚えるだけでも遠い。 Debian 13 の apt にある。

その Blender は、Python(bpy)から全機能を呼び出せる。GUI を触らなくても、スクリプトで 3D シーンが組める。「立方体の上に球体を載せて、光源は左上、カメラは正面少し下、PNG でレンダリング」と頼めば、bpy のスクリプトが返る。

業務での用途はこのあたりだ。

ComfyUI のワークフローは JSON で渡す

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

ノードを手で繋ぐと迷子になりやすい。ワークフローの実体は JSON ファイルなので、ここを AI に書かせる。「商品写真を入力に、背景を白に置換、ロゴを右下に重ねる ComfyUI ワークフローを JSON で」と頼めば、そのまま読み込める JSON が返る。

業務での用途はこのあたりだ。

これまで広告代理店や制作会社に外注していた画像作りが、手元で完結する。ComfyUI には GPU が要るので、立てる先は 2-02 の一台ではなく、2-16 の AI のサーバーだ。そこで Web UI として社内に公開すれば、チームでも使える。

CAD はコードで書ける

機械設計の世界は専用 CAD ソフト(SolidWorks、Inventor など)で動いていて、学習にもライセンスにも費用がかかる。その隣に、スクリプトやコードで CAD を書く道がある。AI がコードを書くので、 CAD の操作は覚えなくてよい。

ツール 言語 特徴
OpenSCAD 独自スクリプト言語 古参、シンプル、3D プリント界の標準の一つ
CadQuery Python Python で書ける、業界の寸法の概念に親和的
Build123d Python CadQuery 系統の後継、より自然な Python 表現
FreeCAD GUI + Python フル機能のパラメトリック CAD、Python で操作可。OpenSCAD とともに Debian 13 の apt にある

例として、ねじ穴付きのブラケットを頼む。「幅 50mm × 高さ 30mm × 厚さ 3mm のブラケット。上端から 10mm の位置に直径 4mm の穴を 2 つ、左右対称に。Build123d で書いて」── 返ってきた Python を実行すると STL ファイルが出る。そのまま 3D プリンタに入れれば、部品が刷れる。

業務での用途はこのあたりだ。

外注していた側が、作る側に回る

手元に降りる、という話は、具体例で見ると早い。

商品写真を、その日のうちに白背景にする

ある小売店主が、季節商品の写真を何十枚も撮った。背景が雑然としていて、Web カタログにはそのまま使えない。

工場のセンサ筐体を、現場でその日に試作する

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

合わなければ寸法を変えて、すぐ次の試作が出る。現場の人が、現場で、設計のサイクルを回す。

観光プロモの動画素材を、手元で作る

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

人口データの図を、記者が自分で記事に入れる

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

記者、観光協会の職員、現場担当者、小売店主 ── これまで制作会社に発注していた側の人が、自分の手で作る側に回る。

専門家になる必要はない。専門ツールを AI と一緒に扱える人になればよい。

業務資料は、中身とデザインを分けて持つ

提案書、報告書、仕様書、社内文書、プレスリリース ── 本体は原稿、図は Mermaid、画面は HTML、表紙は SVG で持つ。

proposal-2026/
  ├── ja.adoc            # 本文(原稿)
  ├── architecture.mmd   # 構造図(Mermaid)
  ├── ui-mockup.html     # 画面例(AI が書いた HTML)
  └── cover.svg          # 表紙(SVG)

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

デザインと中身が分かれている。一箇所を直せば、すべての出力に反映される。git に入れるのは原稿と図のテキストで、組み上がった PDF は成果物として別に置く ── 2-07: 文書を取り戻す ── 読む物は adoc、触る表は格子、刷る紙はテンプレートの「原稿は文字で持ち、git に入れるのは原稿だけにする」と、同じ考えである。

描くのは AI、判断するのは人

ここまでの道具に共通するのは、人が「描く」場面がほとんど無いことだ。

人がやるのは、意図を言葉にする、出てきたものを判断する、直す場所を名指しする ── この三つである。判断の語彙は 2-12 の四原則がそのまま使える。図なら、関係のある要素を近くに置く(近接)、矢印の向きを揃える(整列)、同じ役割のノードに同じ形を使う(反復)、幹の流れを太く見せる(対比)。スライドも同じだ。

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

テキストで持てば、先々も開ける

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

Mermaid、Markdown、SVG、HTML+CSS は、テキストである。記法が初版からほとんど変わっていない (2-10)ので、古いファイルが今のレンダラで出るし、この先も出る。AI が読むのも、テキストのほうが容易である。

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

確かめ方

この章は、次の五つができていれば済みだ。

  1. 章の構造図を Mermaid で書き、GitHub か Forgejo で開くと、図として描画される
  2. その図の 1 行を直した差分が、git で 1 行追加・1 行削除として見える
  3. AI に画面の下書きを頼み、返ってきた HTML をブラウザで開くと、その場で動く
  4. Markdown で書いたスライドを Marp に通すと、PDF が出て、区切りとページが一致している
  5. 業務資料が本文・図・画面の別ファイルに分かれていて、図を 1 か所直して組み直すと、PDF に反映される

人が持つ物

人が渡す値

AI が「やる前に言う」操作

確かめた版と日付

まとめ

図と資料を、テキストとコードから出す。

日常の道具:

AI を介して手元に降りる専門領域:

共通する原理は一つ。GUI を覚えるのではなく、AI にコードを書かせて、結果を見て、調整する。判断の語彙は 2-12 の四原則、原稿の置き場は 2-07 ── どちらもこの章にそのまま効く。

次章では、この章で図と筐体を描いた先 ── 電子工作から IoT まで、手で触れる物に降ろす。

関連記事