Image to Figma: あらゆる画像を編集可能な Figma レイヤーに変換する

チュートリアル2026-05-10

画像を Figma で編集したいとき、選択肢は3つあります。フラットな画像として貼って手でトレースする方法（遅い）、画像を参考に一から再作成する方法（さらに遅い）、そして AI で画像を編集可能な Figma レイヤーに変換する方法です。

このガイドは3つ目の方法についてです。Codia AI は、UIスクリーンショット、モバイル画面、ワイヤーフレーム、スケッチ、Webページ、イラスト、画面写真など、あらゆる画像を、実テキスト、実図形、実コンポーネント、そして適用できる箇所では Auto Layout を備えた構造化Figmaファイルに変換します。ほとんどのフルスクリーンは約10秒で処理できます。

Codia Screenshot to Figma を使うと、スクリーンショットや UI 画像を編集可能な Figma レイヤーに変換し、再設計、比較、引き継ぎに進めます。

"Image to Figma" とは何か

"Image to Figma" は、視覚入力を編集可能なFigmaデザインへAI変換する、より広いキーワード群です。対象は次のとおりです。

再構築のステップでは、Codia Screenshot to Figma で参照画像を編集可能なレイヤーに変換してからデザインを調整できます。

Screenshot to Figma - 最も一般的なケース（UIキャプチャ）
Mockup to Figma - PNG/JPG モックアップからの変換
Wireframe to Figma - 白黒ワイヤーフレーム画像
Sketch to Figma UI - 手描きUIスケッチの写真
Illustration to Figma - ブランドアートをレイヤー化されたファイルに変換
Screenshot to UI design - 同じ意図を別の言い回しで表したもの

これらはすべて同じ Codia AI の変換パイプラインを通ります。違いは、出力に何を期待するかだけです。

対応画像形式

Codia AI は、一般的な画像形式を受け付けます。

PNG（推奨）- 非可逆劣化がなく、エッジを鮮明に保つ
JPG / JPEG - きれいなキャプチャなら問題ありませんが、圧縮された JPG はアイコンや小さい文字のディテールが落ちます
WebP - 対応
GIF - 1フレームのみ変換（アニメーションGIFは最初のフレームを採用）
SVG - 対応。ただし、すでに SVG があるなら変換は不要かもしれません
PDF - 1ページ目を変換。複数ページなら PDF to Figma を参照してください

ベストプラクティスは、可能ならソースから新しく取得した PNG を使うことです。画面写真、再エンコードされた JPG、低解像度のサムネイルは、すべて出力品質を落とします。

変換の仕組み

内部では次の4段階で処理されます。

Vision analysis. Codia AI Vision が、画像内のテキストブロック、ボタン、カード、ナビゲーション、画像、アイコン、装飾要素を特定します。
OCR. テキストを位置情報、フォントサイズ、色情報付きで抽出します。
Layout reconstruction. フラットな画像を Figma のフレームツリーとして再構築し、間隔や整列パターンがきれいな箇所には Auto Layout を適用します。
Component recognition. 繰り返し要素（カード、リスト行、複数状態のボタン）をコンポーネント化候補として判定します。

結果は、フレームの中に埋め込まれたスクリーンショットではなく、実際に編集できる Figma ファイルです。

変換後に何が残るか

たいていきれい

テキスト内容とフォントサイズ - OCR で復元される
色の値 - ソースからサンプリングされる
レイアウト構造 - ボックス、行、グリッド、列
Auto Layout - カード、リスト、ナビゲーションなどの一般的なパターンに適用
画像領域 - image fill として抽出
シンプルなアイコン - 認識できたものはベクター化される
ボタン、入力欄、フォームフィールド - 形状とスタイルが素直ならコンポーネントとして認識される

要レビュー

フォント - 名前はベストエフォート。欠落フォントはフォールバックし、元の名前は保持される
複雑なアイコンとイラスト - ラスターのままになることがある。手動でベクター化するか Codia の vectorize オプションを使う
重なり要素 - 分離が最も難しい。切り抜いて再実行する必要がある
グラデーションと効果 - 単純なグラデーションは良好だが、多段や放射状の複雑なものは近似される

ステップごと

画像を選ぶ。 きれいな PNG キャプチャが最良です。
不要な領域を切り取る。 ブラウザクローム、ステータスバー、ウォーターマーク、その他入れたくない要素を削除します。
Codia AI にアップロード する（Webアプリまたは Figma プラグイン）。
変換を実行 する。きれいなフルスクリーンなら約10秒です。
Figma で開く。 各変換は構造化レイヤーを持つ Frame として着地します。
レビューして整理 する。テキスト、フォント、色、コンポーネント、Auto Layout を確認します。
繰り返し要素をコンポーネント化 して、継続的なデザイン作業で使える状態にします。

ソースタイプ別のユースケース

UI Screenshot

最も一般的なケースです。モバイル、ダッシュボード、ランディングページ、Eコマース向けの用途別ヒントは、専用の Screenshot to Figma guide を参照してください。

Wireframe Image

ワイヤーフレームは変換しやすいです。きれいな四角形、明確なラベル、最小限のスタイルなら、すぐにデザインシステムを当てられるFigmaファイルになります。

Hand Sketch (Photographed)

平らな場所で、均一な照明の下で撮影します。コンポーネントの矩形がはっきりしていて、手書きも読みやすいスケッチなら、白黒のきれいなFigmaフレームになります。芸術的な手描きイラストは相性が悪く、構造スケッチのほうが向いています。

Mobile App Mockup PNG

スクリーンショットと同じワークフローです。モックアップが1xなら、2x または 3x でアップロードすると、アイコン認識がきれいになります。

バナーや広告クリエイティブも編集可能な Figma フレームに変換できます。写真の重なりや装飾的なタイポグラフィは手作業の整理が必要なことがありますが、基本レイアウトとテキストの復元はうまくいきます。

Illustration / Brand Artwork

イラストでは、出力にラスター要素が多めに残ることを想定してください。編集可能なベクターが必要なら、Image to SVG のほうが適しています。

Image to Figma vs Screenshot to Figma vs 画面写真

3つの意図は近いですが、同じではありません。

Source	Tool	What to expect
Screenshot (PNG)	Codia AI	最も高い忠実度。新しいキャプチャ、鮮明なエッジ、OCR に最適。
Image (PNG/JPG/WebP)	Codia AI	同じパイプライン。品質は元画像の品質次第。
Photo of a screen (camera)	Codia AI	使えるが、反射、モアレ、傾きの分だけ追加の修正が必要。

可能なら、画面を撮影するよりスクリーンショットを使ってください。

変換後に確認すること

出力は完成したデザインシステムではなく、高品質な編集可能ドラフトとして扱ってください。次を確認します。

テキスト - 編集できるか。改行は正しいか。OCR が似た文字を取り違えていないか
フォント - 置換は自然か
色 - デザイントークンにマップされているか
アイコン - ベクター化されているか、差し替え可能か
コンポーネント - 繰り返し要素は Figma コンポーネントになっているか
Auto Layout - 正しく適用されているか。レスポンシブなコンテナに再構成されているか

API とバッチ処理

大量処理（カタログ移行、デザイン監査、自動取り込み）には Visual Struct API を使います。画像を受け取り、ツール側で Figma に変換したり、下流のデザインパイプラインに流せる構造化 JSON を返します。バッチエンドポイントは一度に最大1,000枚まで処理できます。

FAQ

"image to Figma" と "screenshot to Figma" の違いは何ですか？

多くの場合、同じ意味で使われます。image to Figma はより広く、どんな画像入力でも含みます。screenshot to Figma は UI 画面キャプチャを特に意味します。Codia はどちらも同じワークフローで扱います。

本当に変換後のテキストを編集できますか？

はい。OCR がテキストを抽出し、出力は他のテキストレイヤーと同じように編集できる実際の Figma テキストレイヤーになります。

画像に手書き文字がある場合はどうなりますか？

構造的な文脈にある印刷体の文字（ワイヤーフレームのラベル、注釈など）はたいてい OCR できます。筆記体は難しくなります。

画像の解像度が低い場合は？

アップロード前に 2x または 3x にアップスケールしてみてください。AI アップスケーリングツールは有効です。目的は、変換に必要なピクセル境界を明確にすることです。

イラストを編集可能なベクターに変換できますか？

UI 要素なら可能です。芸術的なイラストの場合は、Image to SVG のほうが適しています。

無料版はありますか？

はい。Codia の無料版は、たまに使う変換をカバーします。有料プランでは、ボリューム、バッチアクセス、チーム機能が追加されます。

Figma プラグインはありますか？

はい。Figma Community から Codia AI Design をインストールできます。