AIネイティブな仕事の作法
第4章 · 実例 3
実例 3 · 第4章: デザインをする ── Mermaid と Claude デザインで作る

名刺を二経路で生成する

第 04 章「デザインをする」の主張 ── テキストと AI と最小限のスクリプトで 専門ツールに匹敵するものが作れる ── を、名刺 という小さな印刷物で実演する。

章のどの主張に対応するか

Word / Illustrator / 専用デザインソフトを開かなくても、テキスト形式の ソースから「印刷に出せる体裁」が作れる。AI と相談しながら作るので、 レイアウトの調整も自然言語で済む。

名刺は印刷物のなかで最も寸法が厳しい (91×55mm、フォント 9pt 前後)。 ここで成立すれば、チラシ・案内状・封筒の宛名印刷など、より大きな 印刷物はすべて同じ枠組みで作れる。

やること

1 つの card-data.json から、二つの経路で同じ名刺 PDF を生成する。

       card-data.json (氏名・肩書・連絡先)
              │
       ┌──────┴──────┐
       ▼             ▼
  business_card.py   business-card{.html,.css}
  (ReportLab)         (HTML + Print CSS)
       │                   │
       ▼                   ▼
  91×55mm 1枚 PDF      ブラウザで Ctrl+P → PDF
  A4 10枚タイル PDF    (or WeasyPrint で自動)
経路 出力
A. Python (ReportLab) out/business-card-python.pdf (1 枚) + out/business-card-sheet-python.pdf (A4 × 10 枚)
B. HTML + CSS out/business-card-html.pdf (1 枚) + out/business-card-sheet-html.pdf (A4 × 10 枚)

make all 一発で全 4 PDF が生成される。

なぜ二経路か

どちらも同じ寸法・同じデザインの PDF を出す ── これが「テキストから印刷物」の 方法論の核心 (本章「業務資料は構造を保ったまま組み立てる」節)。

構成

example-3/
├── README.md                     ── このファイル
├── card-data.json                ── 共有データ (氏名・肩書・連絡先)
├── business_card.py              ── 経路 A: ReportLab で PDF を組む
├── business-card.html            ── 経路 B: 1 枚カードの HTML
├── business-card.css             ──         同じ CSS (印刷用)
├── business-card-sheet.html      ──         A4 × 10 枚タイルの HTML
├── business-card-sheet.css       ──         同じ CSS (タイル用)
├── Makefile                      ── make all で両経路を実行
├── results.md                    ── 実測値
└── out/                          ── 生成された PDF
    ├── business-card-python.pdf
    ├── business-card-sheet-python.pdf
    ├── business-card-html.pdf
    └── business-card-sheet-html.pdf

必要なツール

pip install reportlab weasyprint
# 任意: Linux で日本語フォントを補強
sudo apt install fonts-noto-cjk

ReportLab は内蔵の CID フォント (HeiseiKakuGo-W5 / HeiseiMin-W3) を使うので、 外部フォントなしでも日本語が出る。HTML + CSS 側はシステムの「明朝」「ゴシック」を フォールバックで呼ぶ (Mac: ヒラギノ / Windows: 游 / Linux: Noto CJK)。

使い方

make all          # 4 つの PDF を一気に生成 + 計測
make python       # 経路 A だけ
make html         # 経路 B だけ
make clean        # out/ をクリア

デザインの中身

aiseed.dev の「AI 時代の自由人」「ビルダー」というキーワードを 肩書欄 に 収め、シリーズと整合的なミニマルなデザインにしてある。デザインを変えたい場合は business_card.py の色定数 / 配置値、または business-card.css の CSS 変数を 触れば良い。

応用

これらの拡張は、すべて 同じ枠組みのまま できる。商用名刺サービスや Illustrator を開く必要はない。

実測値

環境

生成物の寸法 (pypdf で検証)

ファイル ページ 寸法 (pt) 寸法 (mm)
out/business-card-python.pdf 1 258.0 × 155.9 91.0 × 55.0 (日本標準名刺)
out/business-card-html.pdf 1 258.0 × 155.9 91.0 × 55.0 (日本標準名刺)
out/business-card-sheet-python.pdf 1 595.3 × 841.9 210.0 × 297.0 (A4 横)
out/business-card-sheet-html.pdf 1 595.3 × 841.9 210.0 × 297.0 (A4 横)

両経路で寸法が完全一致 ── 同じ印刷物が、Python からも HTML からも出る。

ファイルサイズ

ファイル サイズ
out/business-card-python.pdf 4,077 bytes (4.0 KiB)
out/business-card-sheet-python.pdf 4,646 bytes (4.5 KiB)
out/business-card-html.pdf 9,476 bytes (9.3 KiB)
out/business-card-sheet-html.pdf 10,819 bytes (10.6 KiB)

ReportLab 版が約 2 倍軽い。これは ReportLab が CID フォントで日本語を扱い、 PDF 内部にグリフを埋め込まないため。WeasyPrint は (使用したグリフだけだが) フォントを PDF に埋め込むため少し重くなる。

入稿サービスに渡す場合は HTML 経路 (フォント埋め込み) の方が確実 (印刷側のフォント環境に依存しない)。社内で配るだけなら Python 経路 (軽い) で十分。

生成時間 (参考)

$ time make all

それぞれの所要時間は環境による (ホスト性能・初回フォントキャッシュ等) が、 両経路とも 1 秒未満〜数秒 で完了する。Illustrator を起動して 1 枚作る 時間 (数分) と比較するとほぼ瞬時。

デザインの精度確認

両 PDF を Acrobat / Preview / Evince で開いて目視確認:

WeasyPrint 版でシステムフォントが見つからない場合、フォールバックで DejaVu / Liberation 系になることがあるが、Noto CJK が入っている環境では 意図通りの明朝・ゴシックで描画される。

印刷との関係

ファイル一覧

out/

← 第4章「デザインをする ── Mermaid と Claude デザインで作る」に戻る