Codia
Sketchアプリ用AIプラグイン

スクリーンショットをSketchへ:どんな画像も編集できるSketchレイヤーに

MacのデザインアプリSketchでスクリーンショットやPNG・JPGをアップロードすると、編集できるレイヤーになります。1枚のビットマップのままではなく、実際のテキスト、グループ化されたUI要素、個別の画像として再構成されます。

macOS版Sketch向け · 毎月5 AIクレジット無料 · クレジットカード不要

一般的なクリエイティブワークフロー向けに構築

変換できるもの

あらゆるUIを画像からSketchレイヤーへ

スクリーンショットを撮れるものなら、Sketchでレイヤーとして開けます。実際のプロダクトやモックアップのPNG・JPG・WebP画像に対応しています。

ランディングページのスクリーンショットを、編集可能なテキスト・画像・レイアウトレイヤーに変換した例
  • iOS・Androidのアプリ画面

    コンポーネントを一つずつ描き直さずにアプリ画面を再構築し、Sketchで仕上げられます。

  • Webサイト・ランディングページ

    キャプチャしたWebページを、スタイル変更や再利用ができる編集可能なアートボードにします。

  • ダッシュボード・管理画面

    テーブル、グラフ、サイドバー、フォームが編集可能なレイヤーとして戻り、そのままリデザインに使えます。

  • デザインの参考画像・インスピレーション

    参考画面を、分析して自分のデザインに応用できるレイヤーに変換します。

  • ソースファイルのない既存UI

    元のSketchファイルが見つからなくても、リリース済みプロダクトのスクリーンショットから編集可能なデータを復元できます。

  • PNG・JPG・WebP画像

    手早く撮ったスクリーンショットから書き出したモックアップまで、UI画像なら何でも使えます。高解像度ほど、テキストがきれいに変換されます。

使い方

スクリーンショットをSketchに変換する方法

MacのSketchアプリで3ステップ。

  1. 1

    無料プラグインをインストール

    プラグインをダウンロードして解凍し、.sketchpluginファイルをダブルクリックします。Sketchが自動でインストールします。

  2. 2

    スクリーンショットをアップロード

    PluginsメニューからCodia AI Designを開き、無料のCodiaアカウントでサインインして、PNG・JPG・WebP画像をアップロードします。

  3. 3

    生成されたレイヤーを編集

    Codiaがテキスト、UI要素、画像をSketchレイヤーとしてキャンバス上に再構築。他のデザインと同じように編集できます。

変換結果

1枚のビットマップではなく、編集できるSketchレイヤー

Sketchにドロップしたスクリーンショットは1枚の画像にすぎません。変換したスクリーンショットはデザインとして扱え、各パーツが個別のレイヤーになります。

実際のテキストレイヤー

見出し、ラベル、本文が編集可能なテキストになるので、打ち直さずに文言を変更できます。

グループ化されたUI構造

コンテナ、リスト、ボタン、カードがレイヤーツリーにグループ化され、移動・リサイズ・スタイル変更ができます。

画像は独立したレイヤーに

写真、イラスト、アイコンは背景に焼き込まれず、背景から分離されます。

フォントと多言語テキスト

フォント検出で元の見た目を保ちます。英語だけでなく、多くの言語のテキストを認識します。

標準のSketchレイヤー

結果は通常のSketchコンテンツなので、スタイル、書き出し、いつものワークフローがそのまま使えます。

Design to Codeにそのまま使える

構造化されたレイヤーツリーは、Codia Design to Codeや他のデザインからコードを生成するツールのきれいな出発点になります。

ドロップ・手作業トレース・変換:スクリーンショットをSketchに取り込む3つの方法

画像をドロップするのは一瞬ですが、残るのはビットマップです。手作業のトレースは編集できますが時間がかかります。変換なら両方を満たせます。

Codiaで変換画像をドロップ手作業でトレース
編集可能なテキスト可(実際のテキストレイヤー)不可(テキストはピクセル)可(手入力で打ち直し)
レイヤー構造グループ化・ネストされたレイヤービットマップ1枚のみ手作業で構築
フォントと色画像から検出見た目のみ目視で合わせる
1画面あたりの時間数分+仕上げ数秒数時間かかることも

スクリーンショットのSketch変換 料金プラン

毎月5 AIクレジットで無料から始められます。より大きなスクリーンショットや追加クレジットが必要ならアップグレードを。

スクリーンショットのSketch変換 よくある質問

スクリーンショットをSketchアプリの編集可能なレイヤーに変換する方法についてお答えします。

その他のご質問は、お気軽にお問い合わせください。

サポートに問い合わせ
次のスクリーンショットもすぐ変換できます

最初のスクリーンショットを 無料でSketchに変換

プラグインをダウンロードしてSketchにインストールし、画像をアップロード。すべてのアカウントに毎月無料のAIクレジットが付与されます。

クレジットカード不要 · ファイルは学習に使用されません · macOS版Sketch向け