IconFlow
方法論 · 制作の進め方
プロンプトと画像だけではありません。製品ブリーフ、競い合うアイデア、1024 グリッド上の編集可能な 1 つの SVG、実際に見られるサイズでの正確なレンダリング、機械的チェック、デザイナーによる採点レビュー、承認を正確なソースに結び付ける receipt。各段階を平易に説明し、主張の横には実際の成果物を示します。
実際のパイプライン
各段階でファイルが残ります：ブリーフ、コンセプトのサムネイル、SVG、警告一覧、PNG、採点済み receipt、ビルド、ケース記録。段階をクリックすると仕組みを確認できます。
機械的な段階デザイン判断
ステージ 01 · ブリーフ
名詞だけのプロンプト（「チャットアイコンを作って」）では、装飾しか生まれません。IconFlow のブリーフは、製品を使う人が達成しようとしていることを記録します。
誰かが描き始める前に、プレイブックは 5 つを確認します：アイコンの用途（アプリ、favicon、トレイ）、本質を表す 1 語、ブランドカラー、個性の方向性、小さく表示される場所。ケースブックから得たルールは明快です：カテゴリ名詞ではなく、ユーザーの仕事を選ぶ。「案内する」「決める」「比べる」「探す」は、「ゲーム」「会議」「旅行」より良いマークにつながります。カテゴリ名詞には定番の落とし穴が潜むからです。
この仕組みで識別性とは具体性です。ケースブックで最も強いマークは、値札、カット宝石、折り畳んだ路線図、招き猫のような、具体的で自分たちのものにできる物体です。黒一色のシルエットにしても、カテゴリではなく物体を言い当てられます。グラデーションのタイルに頭文字だけを置く手法は、AI 製アイコンをそつなくも忘れやすくする最も一般的な原因として文書に挙げられています。
プライバシーに配慮が必要な製品では、ブリーフを中立的な仕事の動詞だけに絞ります。公開ケース記録には視覚的証拠を残し、カテゴリ名詞、リポジトリ名、ローカルパスは含めません。
ステージ 02 · 発散
これは AI 製アイコンの多くが省く段階です。だからどれも似て見えます。IconFlow では必須とし、不合格になり得るテストを設けています。
1 つのブリーフに対し、デザイナー（人またはエージェント）は異なる視点から最低 4 つのコンセプトをスケッチします — 具体的な物体、比喩、中心となる動詞、物体に融合した字形、抽象的なシステム、またはネガティブスペースによる二重の読み。シルエットが同じ 2 案は 1 案と数えます。
文書化した定番の落とし穴表では、製品カテゴリごとに使い古された記号と、代わりに進む方向を対応させています。ルールは単純です：コンセプトが「避ける」欄に当たるなら未完成です。共通リストではさらに、「AI」を脳、ロボット、きらめき、杖、ニューラルノード、既定の青から紫のグラデーションで表すことを認めません。
1 つのシグネチャー要素 — 二重の読み、固有にできる形状、融合した字形、意外なクロップ、固有の配色、または 1 つのアクセント。磨き込む前に 4 つの厳しいテストを行います：128px と 16px での 物の名前を言うテスト（合格は具体名詞）、色を外す シルエットテスト、マスカブルテスト（重要な細部が中央の半径 40% のセーフサークル内）、8 個の競合 favicon と並べる 列テスト。最終候補は iconflow compare で横並びに比較し、128px での色ではなく形で勝者を決めます。
ステージ 03 · SVG
正本は小さく編集可能な SVG です。読み取り、差分比較、ハッシュ化ができ、いつでもすべての対象へ再ビルドできます。
すべてのマスターは viewBox="0 0 1024 1024" で描きます。16 ピクセルでは 64 グリッド単位が出力約 1 ピクセルに相当するため、使える量は明確です：アイデアを担う各アクセントに約 2 ピクセル（≈128 単位）、必要な間隔に最低 1 ピクセルを割り当て、辺の約 2.3% より細い線は消える前提です。重要な内容は中央約 80% のセーフエリアに収め、アダプティブクロップ後も残すものは中央のセーフサークル内に置きます。16px のアイコンに入るアイデアは 1 つだけで、不透明な前景要素 2 つを交差させてはいけません。
iconflow new <preset>20 種類の構造的に異なる制作文法 — フラットジオメトリック、ラインマーク、デュオトーンカット、ピクセルグリッド、ステンドグラス、木版など — の 1 つから始めます。各文法には 16px で残るためのルールとモノクロのトレイ戦略があります。意図的に共通の基本形を使いますが、実際のアイコンでは製品固有の物体に置き換え、その後すべてのゲートを通します。
コレクションでも方法は変えず、反復可能な部分をスクリプト化します。20 点の Social Signals セットは、レンダリング前にカタログと照合するシード付き random.Random(seed).shuffle でスタイルを割り当て、各スタディのパス形状をビルドスクリプト内に保持します。400 セルの Emoji Matrix は scripts/build_emoji_matrix.py でビルドされ、各セルに check を再実行し、すべてのプルーフにフィンガープリントを付け、receipt、ダイジェスト、レビュー判定のどれか 1 つでも欠ければフェイルクローズします。規模がもたらすのは再現性と監査可能性であり、合格ではありません。
ステージ 04–05 · チェックとレンダリング
IconFlow はバージョンを固定した Playwright Chromium でレンダリングし、見えた結果に対して所定のチェックを実行します。
レンダラーは SVG を信頼できない入力として扱います。Chromium はネットワークと Service Worker を遮断し、ページの JavaScript を無効化し、能動・アニメーションコンテンツを削除または固定し、sRGB、ロケール、タイムゾーンを固定して実行します。入力上限は 4 MiB、50,000 要素、128 階層で、DTD またはエンティティ宣言は拒否します。このページの 16px と 128px の PNG はその正確なレンダリングであり、大きな画像の再サンプリングではありません。
check が実際に検査するものhref／src、CSS url() と @import。viewBox がない、または正方形でない。--tray-svg tray.svg、check、review を指定すると、参考用のトレイテンプレート監査も加わります。カラーマークの特徴を 1 つも残していない macOS テンプレートを報告します。これはマスターではなくリンクされたバリアントを監査するため、意図的に既定の check には含めず、ship のゲートにも決して使いません。
レビュー済みの各ケースには 128px の視覚シルエットも用意します。色を外して識別性を判定するためです。400 セルのマトリクスでは、類似度レポートに正確な PNG ハッシュと、64 ビットのアルファ差分ハッシュおよび輝度差分ハッシュを追加します。アルファと輝度を合算したハミング距離が 12 以内（同じ意味）または 6 以内（異なる意味）の組み合わせは高リスクとしてフラグを立て、完全な重複は統合を止めます。スクリプトではこの距離を「視覚検査のトリアージ信号であり、合格点ではない」と呼びます。
$ python -m iconflow check master.svg
OK — no automated warnings. Still do the visual review.警告は修正すべきソース内容であり、再有効化すべきレンダラー機能ではありません。ship は警告付きで記録された receipt を拒否します。
ステージ 06–09 · レビュー、receipt、リリース、学習
機械的チェックは機械的リスクを検出します。マークの良し悪しは実ピクセルを人が見て判断し、その結果をビルドで検証できる receipt に記録します。
レビュアーはコンタクトシートと Review Lab を開きます。行は白、暗色、中間グレー、列は実寸の 16px から 256px。さらにピクセル拡大帯、アルファ占有範囲、視覚シルエット、アダプティブクロップのプレビュー、選択した全対象の変換結果を確認します。6 評価軸を 1–5 で採点します：16px での可読性、識別性、バランスとグリッド、色とコントラスト、スケーラビリティ、仕上げ。どの軸も 4 未満ならリリースできません。識別性は明示的なゲートで、一般的なシルエットは色がどれほど良くても最高 3 です。
いずれかの軸が 4 未満なら、レビュアーは最も弱い軸を挙げ、効果が最大の変更を 1 つ加えて再レンダリングします。文書では 2、3 回の試行を想定しています。100 ケースのギャラリー版では 111 候補中 100 を採用し、弱い、読みにくい、または反復的な 11 方向案を明示的に却下しました。Keepsake Knot の receipt には、最初の案が電源記号に見えたため却下されたと記録されています。
エクスポートした receipt には、正確な SVG の source_sha256 と、プロジェクト、対象セット、色、Electron の半径、カラースキーム、トレイモード、トレイソースのハッシュを結び付ける contract_sha256 が含まれます。iconflow ship は両方を検証し、空の警告一覧、status: ready、6 つすべてが 4 以上のスコアを要求してから、ファイルを 1 つでも書く前に自動 QA を再実行します。SVG の内容を変更すると — ダイジェストが無視するのは改行形式だけです — receipt は失効します。
リリースされたすべてのアイコンは iconflow case new で終わります：初回と最終のスコア、避けた定番の落とし穴、シグネチャー要素、再利用できる教訓 1 つ。case stats は繰り返し最も弱い軸と共通の定番の落とし穴を明らかにし、教訓は docs/LEARNINGS.md の番号付きルール（執筆時点で 54）に抽出され、次のブリーフは最初にそれを読みます。記録されないアイコンから、システムは何も学べません。
"source_sha256": "f27c303a…0aaf305",
"contract_sha256": "14d5aeb4…261de76",
"user_job": "keep a small shared ritual
tangible over time",
"essence": "together",
"signature_device": "two unequal bands
share one offset opening",
"cliches": ["heart", "chat bubble",
"linked circles"],
"warnings": [],
"scores": {"legibility": 4,
"distinctiveness": 4, "balance": 4,
"color": 5, "scalability": 4, "craft": 4},
"notes": "Pass 1 rejected the power-sign
reading. …",
"status": "ready"ファイル全文を公開しています：keepsake-knot-review.json。そのハッシュは keepsake-knot.svg と一致し、サイトのテストがビルドごとに再検証します。
status: ready。重要な違い
どちらも AI を使い得ます。しかし、生成するもの、失敗の仕方、残す証拠が異なります。
| 質問 | プロンプトからラスター画像を生成 | IconFlow の AI 制作ベクターワークフロー |
|---|---|---|
| ソースは何ですか？ | モデルからサンプリングされたビットマップ。プロンプトはファイルではありません。 | 1024 グリッド上の編集可能な SVG。トレイ版で必要な箇所は意味ごとにグループ化されています。ファイルそのものがデザインです。 |
| 1 か所だけ変更できますか？ | 再生成して祈るだけ。小さな修正でも画像全体がずれます。 | ノードを動かし、間隔を広げ、帯の色を変え、全ターゲットを再ビルドします。 |
| 16px ではどう見えますか？ | 後から縮小するため、細部が潰れたりノイズになったりします。 | 縮小先から逆算して設計。ピクセル予算を優先し、承認前に正確な 16px レンダリングを確認します。 |
| 識別性はどこから生まれますか？ | モデルの事前知識。それがカテゴリー平均へ引き寄せます。 | 強制的な差別化ステップ、定番の落とし穴を除くフィルター、失敗判定のあるシルエットテスト。 |
| 証拠は何ですか？ | 画像、プロンプト、場合によってはシード。 | ブリーフ、最終候補、警告一覧、正確なレンダリング、ソースハッシュに紐づいた採点済み receipt、ケース記録。 |
| エンジンはモデルを呼び出しますか？ | 常に。それが製品です。 | いいえ。レンダラーとビルドはローカルの Python と Chromium で動きます。モデル使用量が発生するのは、使う場合の設計エージェントだけです。 |
境界
IconFlow のコレクションは、よく知られた役割や意味を独自の形状へ変換します。これは設計手法であり、出所を管理する規律ですが、法的保証ではありません。
IconFlow 独自のマークについて。 Petal Haypile（花びらの干し草）— 3 枚の花びらを持って干し草置き場へ戻る、耳の短いナキウサギ — は、恒久的なアイデンティティの決定を保留している間に選ばれた、現在の、意図的に差し替え可能な暫定製品マークです。コードは Apache-2.0 です。IconFlow の名称とマークには、プロジェクトの 商標ポリシーが適用されます。文書：SOCIAL_SIGNALS.md、EMOJI_MATRIX.md、GALLERY.md。
透明なコストモデル
ここに金額を載せないのは意図的です。正確な額は、エージェントが使うモデルや API、ホスティング先、その時点の専門サービス料金によって変わります。以下に示すのは、規模に応じて増えるものと、その理由です。
Python の依存関係と Playwright Chromium を一度ダウンロードすれば、compare、check、review、shipは手元のマシンで動作します。API キーも画像モデルの呼び出しも不要で、レンダリング中にネットワークも使いません。再ビルドにかかるのは、ローカル計算の数秒です。
AI エージェントがブリーフを書き、コンセプトを分岐させ、SVG を制作する場合、その対話には選択したクライアントとモデルに応じて課金されます。IconFlow 自体はモデルを呼び出しません。反復、比較検討、レビューシートの読み込みはトークンを増やします。曖昧なブリーフも同じです。
成果物のホスティングは通常、最小の費目です。すでに料金を払っているホスト上の静的サイトやアプリバンドルに置けます。商用マークの商標調査と法的レビューには、どのツールキットでも代替できない別途の専門家費用がかかります。
価格を決めるのはエンジン時間ではなくスコープです。メーターは 5 段階を比較する相対尺度であり、計算コストだけで完成したアイデンティティのコストを表すことはできません。
技法プリセットから始め、ハウスレールを 1 つの製品オブジェクトに差し替え、checkを実行します。ツールチェーンと最初のアイデアを実証します。
SVG 1 点、警告なしの一覧、ネイティブサイズの 16px／128px レンダリング。
コンタクトシートで自己チェック。receipt は書き出しません。
線幅下限とコントラストの警告。16px で成立しない名詞。
ローカル計算。エージェントが動かす場合も、モデル使用量はごくわずかです。
ブリーフ、4 つのコンセプト、比較検討、1 つのマスター SVG、check、採点済み review、receipt、ship、ケース記録 — 1 製品とその Web ターゲット。
iconflow.toml、最終候補と比較シート、master.svg、レビューシートと receipt、favicon／PWA セット、ケースブックの項目。
設計者が実寸とシルエットで 6 評価軸すべてを確認。通常は 2、3 回のパスです。
識別性が 4 未満、システムアイコンとの衝突、意図しない別の読み取り。
設計判断とレビュー時間が第一、エージェント使用量が第二。計算コストは無視できる程度です。
本番ループに加え、連携したマーク専用トレイソース、プラットフォーム別クロップ、デスクトップバンドル、すべてを結ぶ 1 つの契約ハッシュ。
master.svg と tray.svg、トレイテンプレート監査、ICO／ICNS／PNG ファミリー、マニフェスト断片、ターゲットセット全体の receipt 1 点。
各ターゲット変換を確認：アダプティブクロップ、デスクトップの角、明暗それぞれのバー上のメニューバーテンプレート。
カラーマークの特徴が何も残らないトレイテンプレート。マスカブルセーフサークル外にある細部。
計算量ではなく、レビューするサーフェスが増えます。ターゲットごとに人の確認が加わります。
製品調査、ステークホルダーとの複数のコンセプトラウンド、ブランドシステム文書、そして 1 つのマークを正式採用し、ソースに紐づいた 1 回のトランザクションでサイトとビルド全体へ反映します。
上記すべてに加え、ブランドシステム文書、パレットとクリアスペースの規則、策定経緯、商標レビューの結果。
複数のレビュアーとラウンド。以前のマークの明示的な却下。商業的な重みを持つマークには専門家による権利確認。
ポジショニングの変更、ステークホルダー間の不一致、権利確認での指摘、可逆性の要件。
専門家の時間と法務サービスが大半を占め、モデルと計算コストは付記程度です。
多数のソースをスクリプトとシードで生成。各セルは、フェイルクローズで統合する前に、check、レンダリング、シルエット、類似性の一次選別、視覚レビューを必ず通過します。
セルごとの SVG、レンダリング、シルエット、receipt。類似性レポート。セット単位のダイジェスト付きカタログ。合成した概要ポスター。
全セルのコンタクトシート、欠点を探す選定パス、弱いセルの差し替え、コレクション単位の意思決定ファイル 1 点。
知覚的な近似重複、構造の反復、スタイル文法のずれ、16px で弱いセル。
数百セル規模ではモデル使用量も目立ちますが、それでも選定にかかる時間の方が上回ります。
メーターは価格ではなく比率として見てください。モデル使用量、ホスティング、専門家費用は、それぞれ別の提供者が変動する料金で請求します。IconFlow 自体は料金を加算せず、エンジンはローカルで動きます。どの段階でも、完成したアイデンティティの主なコストは、人が判断とレビューに費やす時間です — これはまさに、この手法が省略しない部分です。
見てから、実行
受け入れ済みのケースを、それぞれのプルーフと receipt とともに見るか、自分のマシンで 5 分のエンジンプルーフを実行し、ピクセルを自分で確認してください。