AI 機能
画像 AI と diagram-to-code
構造生成以外にキャンバス画像へ AI、diagram-to-code も。下書きは速くなるが人のレビュー必須。
userGuide.chrome.goalLabel
選択画像を処理、または Frame 内図を検証可能なコード草案に。
userGuide.chrome.prerequisitesLabel
- ボード上の画像または選択可能な図
- 操作が AI クレジットを消費しうる認識
こんなときに使う
素材整理やワイヤーを実装スケッチに。新規業務図は AI 生成と編集 か AI ワークスペース。
画像 AI 機能
背景除去で人物・商品・アイコンをボードにきれいに配置。
補正は軽いボケ向け—欠損詳細は生成しない。
透かし系ツールは処理権のある素材のみ。
画像処理手順
- 1
画像を選択
画像要素をクリック—意図がなければ周囲 Frame や PDF ページではない。
- 2
画像 AI アクションを開く
フローティングツールバーまたはプロパティで背景除去/補正（表記は版により異なる）。
- 3
プレビューしてから適用
エッジと切り抜き確認。必要なら元画像を鮮明にしてやり直し。
- 4
レイアウトに合わせる
サイズ調整・整列・出典メモ。エクスポート前に透過再確認。
Diagram-to-code
- 1
図を整える
読みやすいラベル、閉じた構造、装飾控えめ。変換範囲を Frame。
- 2
選択して変換実行
diagram-to-code / コード生成の AI 入口を使い草案待ち。
- 3
エディターで検証
レイアウト・意味・アクセシビリティ・レスポンシブ確認。出力は草案扱い。
- 4
必要ならボードで反復
図を簡素化して再変換する方が悪コード修正より速いことが多い。
コンプライアンスとクレジット
使用権のある素材だけ処理。
これらは通常クレジット消費 — 料金と AI クレジット。
秘密や不要な個人データ入りスクショを上げない。
userGuide.chrome.expectedResultLabel
清掃済み画像および/またはコピー可能コード草案、残編集が明確。
よくある間違い
- 小さなスクショから魔法の詳細を期待。
- diagram-to-code 出力を未レビューで本番へ。
- モデルが解析できない巨大で乱れた範囲を選択。
よくある質問
背景除去がおかしい
低コントラスト・低解像度・誤選択が多い。被写体単一の鮮明画像を。
diagram-to-code のスタックは？
現行プロダクトの返却（多くは HTML/CSS 風草案）。React や DS は手で適応。
ラフスケッチは変換できる？
はい。ただし先に スケッチを整形 すると良い。
元画像は残る？
多くは新結果作成または元に戻し。処理前に重要な原本を複製。