concept-to-image

コンセプトから画像へ

HTML／CSS／SVG を調整可能な中間形式として使い、コンセプトから洗練されたビジュアルを作成して、PNG または SVG にエクスポートします。

参照ファイル

ファイル	用途
references/design-guide.md	デザインパターン、アンチパターン、カラーパレット、タイポグラフィの選択肢、レイアウト例
scripts/render_to_image.py	Playwright ベースのエクスポートスクリプト。HTML を入力し、PNG または SVG を出力します
assets/template.html	.canvas コンテナーと、あらかじめ設定された CSS カスタムプロパティを含む HTML テンプレート

中間形式に HTML を使う理由

HTML は、アイデアと画像の間にある調整可能なレイヤーです。キャンバスへ直接描画する方法とは異なり、ユーザーは HTML の成果物を確認して変更を依頼できます（「タイトルを大きくする」「色を入れ替える」「3 列目を追加する」など）。納得できた段階で初めてエクスポートできます。これにより、反復的で制御しやすいワークフローを実現できます。

ワークフロー

Concept → HTML artifact (view + refine) → PNG or SVG export

1. 解釈 — ユーザーのコンセプトを解釈し、最適なビジュアルの種類（図、インフォグラフィック、カード、グラフなど）を判断します。
2. デザイン — インライン CSS とインライン SVG を使い、自己完結型の HTML ファイルを作成します。外部依存関係は一切使用しません。
3. 提示 — ユーザーがプレビューして改善を依頼できるよう、HTML を成果物として提示します。
4. 反復 — ユーザーからのフィードバックに基づき、HTML を調整します（色、レイアウト、コンテンツ、サイズなど）。
5. エクスポート — ユーザーが納得したら、scripts/render_to_image.py を使って PNG および／または SVG にエクスポートします。

ステップ 1：コンセプトを解釈する

最適なビジュアル形式を判断します。

ユーザーの意図	ビジュアル形式	アプローチ
プロセスやフローを説明する	フローチャートまたはパイプライン図	SVG のパス＋ボックス
項目を比較する	横並びまたはマトリクス	CSS Grid
階層を示す	ツリー図または階層図	入れ子のコンテナー＋SVG コネクター
データを提示する	グラフまたはインフォグラフィック	SVG の図形＋データラベル
ソーシャル／マーケティング用のグラフィック	カードまたはポスター	タイポグラフィを重視した HTML／CSS
アイコン、ロゴ、バッジ	コンパクトなシンボル	純粋な SVG
教育的なコンセプト	注釈付きの図	SVG＋配置したラベル

ステップ 2：HTML をデザインする

詳細なデザインパターンとアンチパターンについては、references/design-guide.md を読んでください。

基本ルール：

• 単一ファイルで自己完結：すべての CSS を <style> 内に、すべてのグラフィックをインラインの <svg> として記述します。外部リソースは使用しません。
• ビューポートを固定：ルートコンテナーに、意図するエクスポートサイズと一致する明示的な width と height を設定します。Playwright はこの正確なサイズで要素をスクリーンショットするため、これは非常に重要です。
• AI らしい粗雑なデザインを避ける：すべてを中央揃えにしたレイアウト、紫のグラデーション、一律の角丸、Inter／システムフォントのデフォルト設定は避けます。代替案についてはデザインガイドを参照してください。
• 図形には SVG を優先：アイコン、コネクター、図形、およびきれいに拡大縮小すべき要素にはインライン SVG を使います。レイアウトとタイポグラフィには CSS を使います。
• 意図を持って配色する：色相はニュートラルカラーを除き、最大 3～4 色にします。CSS カスタムプロパティとして定義します。すべての色に意味を持たせます。
• テンプレートから始める：基本構造として assets/template.html を使います。

サイズの目安

用途	推奨サイズ
ソーシャルメディア用グラフィック	1200×630
インフォグラフィック（縦型）	800×1200
プレゼンテーションスライド	1920×1080
正方形の投稿	1080×1080
アイコン／バッジ	256×256 または 512×512
横長の図	1600×900

.canvas コンテナーを選択したサイズに設定します。エクスポートスクリプトはこの要素をキャプチャします。

ステップ 3：提示して反復する

HTML ファイルをユーザーに提示します。アーティファクトとしてレンダリングされた状態で表示されます。よくある修正リクエスト：

• 色やテーマの変更 → CSS カスタムプロパティを更新します
• レイアウトの調整 → grid/flexbox を変更します
• コンテンツの変更 → テキストや SVG 要素を編集します
• サイズの変更 → .canvas の寸法を更新します

各反復は HTML の簡単な編集で済み、全体を再レンダリングする必要はありません。これが、画像を直接生成する方法に対する主な利点です。

ステップ 4：画像にエクスポートする

ユーザーが満足したら、エクスポートスクリプトを実行します：

python3 scripts/render_to_image.py <input.html> <output.png|.svg> [--width 1200] [--height 630] [--scale 2] [--selector ".canvas"]

パラメーター

Param	Default	Description
input	(required)	HTML ファイルへのパス
output	(required)	出力先のパス。拡張子によって形式（.png または .svg）が決まります
--width	auto	ビューポートの幅（HTML で定義されたサイズを上書きします）
--height	auto	ビューポートの高さ（HTML で定義されたサイズを上書きします）
--scale	2	PNG のデバイススケールファクター（2 = Retina 品質）
--selector	.canvas	キャプチャする要素の CSS セレクター
--full-page	false	特定の要素ではなくページ全体をキャプチャします

PNG エクスポート

Playwright でヘッドレス Chromium を起動し、指定したスケールファクターで .canvas 要素のスクリーンショットを撮影します。スケール 2 では Retina 品質の出力になります（例：1200×630 CSS ピクセル → 2400×1260 PNG ≈ 3.02 MP）。

Opus 4.7 のフィードバックループ： Retina スケールのエクスポート（例：2400×1260）は Opus 4.7 の約 3.75 MP の視覚入力上限内に収まるため、ダウンサンプリングせずに、レンダリングされた PNG をモデルに入力して批評をもとに反復できます。Opus 4.6 では、これらの出力は入力時にダウンサンプリングされていました。

SVG エクスポート

2 つの方法を自動的に選択します：

1. SVG ネイティブコンテンツ：.canvas 要素にルート <svg> が 1 つだけ含まれている場合、それを直接抽出してクリーンな SVG ファイルとして出力します。これにより、真のベクター SVG が生成されます。
2. HTML ベースのコンテンツ：コンテンツが CSS/HTML 中心の場合、PNG エクスポートにフォールバックし、真の SVG には SVG ネイティブのデザインが必要であることを通知します。ベクター出力が必要な場合、スクリプトは警告を表示し、SVG 要素を使った再設計を提案します。

出力の提供

出力ファイルをユーザーに提示します。今後編集できるよう HTML と、最終出力となる画像の両方を必ず提供してください。

エラー処理

Error	Cause	Resolution
playwright not found	Playwright パッケージがインストールされていません	npx playwright install chromium または pip install playwright && playwright install chromium を実行します
Browser launch failure	ヘッドレス Chromium の起動に失敗しました	--headless モードがサポートされていることを確認し、利用可能なメモリを確認します（Chromium には約 200 MB が必要です）
.canvas selector not found	HTML に .canvas に一致する要素が含まれていません	assets/template.html がベースとして使用されたことを確認し、ルートコンテナーに class="canvas" があることを確認します
Render timeout	複雑な HTML のレンダリングに時間がかかり、スクリーンショットの撮影がタイムアウトしました	スクリプトの --timeout フラグでタイムアウトを延長するか、HTML を簡素化します（DOM の深さを減らし、インライン SVG を減らします）
SVG export falls back to PNG	.canvas 要素にルート SVG ではなく HTML/CSS コンテンツが含まれています	SVG エクスポートのセクションを参照してください。ベクター出力が必要な場合は、ルート <svg> が 1 つだけになるよう再設計します

制限事項

• Playwright + Chromium が必要です — 動作する Chromium のインストールがないと、エクスポートスクリプトは実行できません。
• ヘッドレスブラウザーでのエクスポートは macOS と Linux のみ 対応しています。Windows Subsystem for Linux は動作しますが、ネイティブの Windows Playwright では別途セットアップが必要な場合があります。
• SVG エクスポートはベストエフォートです — 複雑な HTML/CSS レイアウトは PNG にフォールバックします。真のベクター SVG を出力するには、.canvas の子要素として単一のルート <svg> が必要です。
• ビューポートの最大サイズは 4096×4096 です — Chromium はこれより大きいスクリーンショットを拒否します。この制限内で実効解像度を高めるには、--scale を使用してください。
• アニメーションには対応していません — エクスポートされる画像は静止したスナップショットです。CSS アニメーションと JavaScript によるトランジションは、初期状態で固定されます。

出力例

エクスポートが成功すると、スクリプトは出力先のパスとファイル統計を表示します。

Exported: concept-diagram.png
  Size:       2400 × 1260 px  (2× scale from 1200 × 630 canvas)
  File size:  ~180 KB
  Format:     PNG (RGBA)

ファイル名のパターンは、出力引数に渡された値に従います。一般的なファイルサイズは次のとおりです。

• シンプルな図（テキスト + 図形）：80–200 KB
• グラデーションを使った情報量の多いインフォグラフィック：300–600 KB
• 1920×1080、2×スケールの場合：500 KB–1.5 MB

避けるべきデザインのアンチパターン

次のようなデザインは、ありがちな「AI 生成」風の見た目になります。

• すべてを中央揃えにし、間隔を均等にする
• 紫や青のグラデーション背景
• すべての要素で角丸の半径を統一する
• 汎用的なアイコンライブラリを使う（カスタムのインライン SVG を使用してください）
• タイポグラフィの意図がないシステムフォントスタック
• すべての要素にドロップシャドウを付ける
• 情報密度が低い（余白が多すぎる）

フォントの扱い

この環境では利用できるフォントが限られているため、意図的なフォールバックを設定したウェブセーフなフォントスタックを使用してください。

• 技術的／等幅：'Courier New', 'Consolas', monospace
• すっきりしたサンセリフ：'Helvetica Neue', 'Arial', sans-serif
• エディトリアルなセリフ：'Georgia', 'Times New Roman', serif
• ディスプレイ：必要に応じて、ディスプレイタイポグラフィにはカスタムパスを使った SVG テキストを使用してください