Micro-UI 矢量插画工具箱

ベクターイラストツールキット

ユーザーのアイデアと参照デザインを組み合わせ、明確化を段階的に進めてから、ここにある描画ツールで実現します。デフォルトでは以下の Micro-UI スタイル制約が適用されます。ユーザーが明示的に指定した方向性やプロジェクトの規約が優先されます。

Micro-UI デフォルトスタイルと構図

このルール群は、新しく描画する Micro-UI アートワークに適用される旧バージョンのスタイル境界を復元するものであり、一般的な SVG 技術の制限ではありません。

• 実在するコントロールのスライス： 主体は認識可能なツールまたはコントロール構造を持たなければなりません。繰り返しのグレーのバー、空白のカード、意味のないアイコンでインターフェースを埋め合わせるのではなく、参照からオブジェクトのアイデンティティ特性を抽出します。
• ゼロストロークの主体： 大きな形状は、純色の面、オーバーラップ、ソフトなドロップシャドウで境界を定義します。アイコンの必須ストローク、定規のガイド線、非常に淡い環境要素は線を使用できます。アイコンサイズとストロークは対象プロジェクトの規約に従います。
• デフォルトのレイヤー構図： 「ベースとなる下地基板 → ミドルグラウンドのコントロールスライス → フォアグラウンドの焦点」で空間を構成します。環境レイヤーはオプションです。用紙、ドキュメント、レポートは下地基板を使用できます。コントロール自体が完全なエンティティを構成する場合は、追加の下地基板を省略できます。各レイヤーはテーマに貢献する必要があり、レイヤー数を増やすために付属物を追加してはいけません。
• 単一レイヤーのアトムと再帰の禁止： 主体がすでに複数のサブモジュールで構成されている場合、サブモジュールは完全な純色のエンティティを維持し、3番目のレベルのマイクロコントロール、疑似チャート、または小さな記号をネストしてはいけません。構造階層は視覚機能によって計算され、SVG の <g> のネスト数によって計算されるわけではありません。
• 最小構成要素 16px： 対象の表示サイズにおいて、独立した色ブロックの幅と高さは少なくとも 16px でなければなりません。必須のアイコンストローク、定規のガイド線、状態を示す小さなドット（直径 3px 以下）は例外です。エクスポート解像度を上げてこのルールを回避してはいけません。小さなサイズに収まらない場合は、構成要素を減らすか、表現を簡略化する必要があります。
• 控えめなディテール： 1つのコンテナはデフォルトで主要構成要素を 3 つまでとします。密集した疑似テキストを描画したり、少量のコンテンツを入れるために空で背の高いコンテナを使用したりしてはいけません。テキストは、アイデンティティ、状態、または操作を表現する場合にのみ使用します。
• トークンカラーリング： ソースコードは集中定義されたカラーロールを参照し、それをプロジェクトトークンにマッピングします。16進数やその他のカラーリテラルを散在させてはいけません。スタンドアロン SVG はエクスポート時にロールを実際の色に解決し、マッピング元を保持することで、ホストから切り離された状態でも表示可能であることを保証します。

今回のオブジェクトに応じて、参照画像と分析記録 から関連素材を選択します。ライティングパラメータやコード例が必要な場合は、構築と完全な例 を参照してください。スタイルルールはデフォルトで適用されます。特別な例外が必要な場合、AI は参照と表示サイズに基づいて判断し、例外オブジェクト、理由、および視覚チェック結果を説明します。通常の描画選択のために毎回許可を求める必要はありません。

ユーザー参照を学習するプロセス

ユーザーが参照画像を提供し、その特徴を借用したい場合、以下の手順で分析および記録します：

1. 意図を受け取る： ユーザーが参照画像を送信し、借用したい特徴を説明します（例：「フォルダの開口部の厚み感を借りたい」「この青緑の配色の面積比率を借りたい」）。
2. 要点を分析する： AI が画像を確認し、5つの側面から分解します：
   • 形状： コントロールがどのようにスライスされているか、外形輪郭と角丸のサイズ。
   • 配色： 明るい下地基板、機能メインカラー、ハイライトフォーカスの面積比率。
   • 階層： 前後のオーバーラップ関係、段差、余白。
   • 構図： キャンバス上の主体の重心と視線の流れ。
   • ライティング： ソフトシャドウのオフセット、拡散サイズ、透明度。
3. 保存と記録：
   • 画像を assets/reference-images/ ディレクトリに保存します。
   • 分析結果を references/visual-reference-map.md に追記し、借用可能な点と、元画像の具体的なビジネスコンテンツ（そのままコピーしないもの）を明確に書き分けます。
4. スタイル変更と画像がない場合：
   • ユーザーが明示的にスタイル変更を要求した場合、新しい要件に従ってパラメータを調整し、新旧ルールの競合を避けます。
   • 参照画像がない場合、既存のルールと事例に従って描画し、ユーザーに画像の提供を求めません。
5. 概念の説明：
   • ここでの「学習」とは、参照画像を分析し、その要点を記録して描画時に参照することを意味します。モデルをトレーニングするわけではなく、モデルがそのスタイルを永久に学習したと主張するものでもありません。

明確化を通じて段階的に画面を絞り込む

新しい画面の方向性がまだ定まっていない場合、AI が積極的にユーザーをガイドし、段階的にアイデアを表現してもらいます。テーマキーワードを受け取っただけで直接描画を開始することはありません。最初に、ユーザーがすでに提供した用途、シナリオ、参照、好み、制約を整理し、現在のデザイン判断に影響を与えるギャップのみを明確化します。確認済みの情報は引き継ぎ、繰り返し質問しません。

まず少数の具体的なオプションを提示してユーザーが好みを表現しやすくし、ユーザーの選択と説明に応じて徐々に深掘りします。各ラウンドでは、1つの重要な決定に関して簡潔で具体的な質問をし、実際に違いのある少数の方向性を示し、それぞれがどのような画面になるかを説明し、推奨理由を示します。次のラウンドでは、ユーザーが確認した内容を引き継ぎ、まだ明確になっていないシナリオ、主体、構成にさらに焦点を当て、漠然としたオプションを繰り返しません。ユーザーがこれらの方向性を自由に説明、組み合わせ、否定することを許可し、ユーザーをオプションに制限しないでください。一度に全ニーズアンケートを提示したり、専門的な構図作業をユーザーに委ねたりしないでください。

不足している情報に応じて、以下の考え方で段階的に進めます。ユーザーがすでに明確にしている部分はスキップします：

1. 表現内容に焦点を当てる： 用途とテーマから、ユーザーが最も伝えたいことを引き出し、オブジェクト、アクション、状態、関係を明確にします。広範な機能用語を具体的なシナリオに変換し、明確な画面意図を一文で要約してユーザーに確認を求めます。
2. ビジュアルの方向性に焦点を当てる： 素材分析を組み合わせ、関連する参照を表示し、借用可能な形状、色彩、空間、質感を指摘し、ユーザーが気に入った部分と気に入らなかった部分を尋ねます。スタイルの根拠とシーン構成を区別し、特定の参照が気に入ったからといって、そのレイアウトをそのままコピーすることをデフォルトにしないでください。
3. 画面構成に焦点を当てる： 対話を通じて、ユーザーの主体、オブジェクト関係、焦点、全体的な感覚に関する考えを徐々に理解し、参照に基づいて具体的な提案を行い、ユーザーが取捨選択を明確にするのを支援します。

対話では、まだ明確になっていない内容についてのみ明確化を続け、機械的に質問リストを消化しません。アイデアが絞り込まれたら、簡潔なテキストで双方が確認した画面意図と主要構成を復唱し、ユーザーが明示的に「開始してよい」「動かしてよい」または同等の許可を示すのを待ってから描画を開始します。すでに開始許可があり方向性が明確な場合は直接実行し、確認を繰り返しません。その後の詳細はユーザーがコントロールし、ユーザーからの修正要求に従って調整を続けます。サンプル確認やフィードバックによる洗練フェーズは設定しません。部分的な修正では、曖昧なターゲットのみを明確化し、プロセス全体を再起動しません。

参照から形状と構図へ

まず、ユーザーの経験におけるオブジェクトの識別構造を見つけます。輪郭と部品だけでなく、重要な比率、配置順序、接続関係も含みます。テキストや一般的な角丸長方形はこれらの特徴を代用できません。用途に応じて、完全なオブジェクトまたは部分的なスライスを選択します。簡略化は主にフレーミングと省略によって行い、誇張する場合でもオブジェクトを信頼できるものにする構造関係を保持し、機能名をデフォルトでプロセスとして描画しないでください。

現在のオブジェクトと解決したい形状の問題に応じて関連する参照を選択し、実際に画像を開きます。実装を理解する必要がある場合、対応する SVG を読み込み、レンダリング結果を確認します。素材ライブラリをすべて参照する必要はありません。分析は「参照を成立させている具体的な関係は何か、そして今回それをどのように使用するか」に焦点を当てるべきであり、角丸やソフトシャドウなどのエフェクトを羅列するだけでは不十分です。スタイルの根拠はシーンレイアウトをそのままコピーすることと同義ではありません。画像にソースコードがない場合、実装方法は未検証の仮定に属します。

これに基づいて、何を保持し、何を削除し、どこを誇張するかを決定し、大きな形状で主体、補助物、余白を配置します。まずオブジェクトが信頼できるか、主従が成立しているかを判断し、その後で詳細とマテリアルを追加します。説明文やシャドウでしか補えない場合は、形状に戻ります。判断は AI が行い、ユーザー確認の関門を追加しません。具体的なエフェクトをパス、座標、フィルタに変換する方法については、参照を描画に変換する を参照してください。

バリエーションは、主体の関係、視点、または構成を変更する必要があります。線、テクスチャ、色のみを変更するのは同じ構図のマテリアルバリエーションであり、新しいシーンとは呼べません。現在のテーマのオブジェクトの組み合わせを、後続の作品の固定テンプレートとして書き留めないでください。

同じ空間内のオブジェクトは、投影、厚み、ライティング条件を共有します。平面内のアイコンとテキストは、まずローカル座標でレイアウトし、その後サーフェス全体にマッピングします。後方のエンティティから描画し、次に前方のエンティティを描画します。隣接する輪郭は明確に分離するか、明確にオーバーラップさせる必要があります。接線、狭い隙間、アイコンが半分だけ表示される状態を避けてください。統一幾何学は構築ツールが処理しますが、主体の妥当性は、参照分析と実際のサイズでのレンダリングによって判断されます。

照合チェックと部分的な修正

内部チェック手順：レンダリング → 実際の画像を確認 → 問題を特定 → 再チェック。 描画または修正が完了したら、scripts/render.mjs を使用して SVG または表示ページから 1×、3× の PNG を出力し、実際に2つの画像を開き、以下の「納品前のビジュアル検収」項目に照らして逐一チェックし、具体的な問題を記録します。1× では主体の識別、構図、比率、余白をチェックし、3× では角丸、オーバーラップ、継ぎ目、クリッピング、シャドウをチェックします。エクスポートピクセル倍率は対象表示サイズの代わりにはなりません。対象サイズが SVG の固有サイズと異なる場合は、--width、--height で指定します。

少なくとも1回の初期チェックと1回の修正後再チェックを実行します。初期チェックで問題が見つからなかった場合、2回目の独立した再チェックを実行し、意図的に修正する必要はありません。修正のたびに再レンダリングし、画像を開いて具体的な問題が解決されたことを確認します。解決できない問題が残っている場合や環境がレンダリングできない場合は、その旨を明確に述べ、ビジュアル検収を通過したと宣言してはいけません。このプロセスは AI 内部の品質チェックであり、ユーザーによるサンプル確認やフィードバックによる洗練フェーズを追加するものではありません。

CSS ロール変数が関係する場合、--vars でプロジェクトが生成した JSON マッピングを渡します。欠落しており有効なフォールバックがない変数は解決する必要があり、自分で色を補完してはいけません。プロジェクトマッピングとエクスポート画像はタスクディレクトリに保存され、プロジェクトのカラー値はスキルに書き込まれません。コマンド、依存関係、表示ページのスクリーンショット範囲については、レンダリングと表示 を参照してください。

完成した画像を選択した参照と並べて表示し、輪郭、比率、角丸、色面積、シャドウ、ディテール密度を比較し、ビジュアル言語が調和しているかどうかを判断します。

レンダリング後、具体的なビジュアル問題を指摘し、問題に応じて修正します。オブジェクトの識別、比率、オーバーラップ、配置、境界をチェックし、ファイルが有効であることやエクスポートが成功したことをもってビジュアル判断の代わりとしないでください。

修正前に、まずユーザーが指しているオブジェクトと範囲を特定し、既存のベクター構造を活用して局所的に調整します。修正後、修正前後の画像を比較し、承認された形状とレイアウトが保持されていることを確認します。

納品前のビジュアル検収

レンダリング後、以下の項目をチェックします。問題が見つかった場合は、まず修正してから納品します。ファイルが解析またはエクスポート可能であることは、ビジュアル検収とは見なされません。

• 重要な比率、配置、接続が、オブジェクトに関する実際の経験に一致している。省略または誇張後も、識別構造が保持されており、タイトルや数個の記号だけでテーマを推測させるようになっていない。
• デフォルトの下地基板、ミドルグラウンド、フォアグラウンドのサイズとオーバーラップに主従がある。下地基板を省略した場合、主体自体が完全な輪郭を持っている。
• コンテナの高さがコンテンツに見合っており、フォアグラウンドが過度な空白面積のために重心を奪っていない。
• 複合サブモジュールに再帰的なマイクロコントロールがない。対象表示サイズで独立した色ブロックが 16px を満たしており、必須の線とマイクロポイントの例外が区別されている。
• 隣接する形状が明確に分離またはオーバーラップしており、接線、狭い隙間、誤った挿入がない。テキストとアイコンが前景によって意図せず隠されていない。
• 投影は階層を区別しているが、汚れた黒ではなく、色面積は参照と調和している。すべての色はロール設定またはプロジェクトトークンに遡ることができる。
• 選択した参照と並べて表示し、借用した尺度、輪郭、空間、またはマテリアルの関係が完成図で成立しているかどうかをチェックし、同じタイプのエフェクトが使用されているかどうかだけをチェックしない。同時に元のサイズと実際の表示サイズを確認し、具体的な修正を説明し、架空のスコアやユーザーの承認をでっち上げない。

事例登録プロセス

完了してチェックが終わったら、一度だけ能動的に尋ねます。ユーザーが明確に同意した場合のみ登録します。

1. 質問ルール：
   • イラストが完成し内部チェックが完了した後、AI は一度だけ能動的に尋ねます：「このイラストに満足されていますか？今後の参考のために事例ライブラリに登録しますか？」
   • ユーザーがまだ修正要求を出している場合は、まず修正し、繰り返し尋ねません。
   • ユーザーが拒否した場合、返答がない場合、または「満足」と言っただけで明確に登録に同意しなかった場合は、登録を実行しません。
   • 毎回生成された結果を自動的に登録することはありません。
2. 登録の実行：
   • ファイルを確認します。編集可能な .svg ソースとレンダリングされた .png プレビュー画像の両方が必要です。名前の重複をチェックし、既存のファイルを上書きしません。
   • 登録スクリプトを実行します：scripts/collect-example.mjs；
   • references/example-guide.md を自動更新し、テーマ名、構造的特徴、適用シナリオを記録します。

組み合わせ可能なSVG描画

SVG構築ツール は、ローカルの scripts/build-kit.mjs の使用方法を説明しています：輪郭、統一カメラ、エンティティ押し出し、サーフェスマッピング、バウンディングボックス、カラーロールエクスポート。画面の必要に応じて選択し、すべての画像を立体化する必要はありません。

ツールインデックス

実現したい内容	ツールと例
直線輪郭、円弧、有機曲線	パスと曲線
結合、穴あけ、部分クリッピング、透明なトランジション	形状合成とマスク
移動、回転、スケーリング、シアー、平面投影	座標と変換
色面、グラデーション、シャドウ、繰り返しテクスチャ	塗りつぶしとマテリアル
テキスト幅、ラベルサイズ、ラインボックスと境界	テキストとレイアウトツール
ブラウザプレビュー、部分再レンダリング、画像比較	レンダリングと表示
事例の安全な登録とインデックス更新	事例登録の説明

編集可能な事例と素材

参照を観察する際は、実際に開いた画像と対応する SVG を組み合わせ、部分的なエフェクトを実装方法に対応付け、現在のテーマにどのように使用できるかを検討します。具体的な観察ポイントと例については、参照を描画に変換する を参照してください。

• 構築とコード例：オブジェクトスケール、ライティング、カラーロール、過去の事例の使用境界。
• テーマテンプレート：Typography 5枚の画像、および検索フィルター画面の SVG と PNG。
• オリジナル事例ライブラリ：ブックマーク、カレンダー、アップロード、モバイルコンテンツの SVG と PNG。
• スタイル素材：利用可能な外観参照。
• 参照画像と分析記録：ユーザー参照の分析と特徴インデックス。

事例内のパラメータは特定の作品の実装であり、変更可能です。何を描くか、どの技術を組み合わせるか、どのようにコミュニケーションを取り納品するかは、現在のタスクによって決定されます。