Design

kumakuma / 2019.3.26

4936

Sketch データから、Photoshop や XD に変換できる「Photopea」を試してみた

目次1 Sketch データから、Photoshop や XD に変換できる「Photopea」を試してみた1

Sketch データから、Photoshop や XD に変換できる「Photopea」を試してみた

こんにちは!デザイナーの熊野です。

弊社では業務の効率化のため、SketchをメインのUIデザインツールとして利用しています。
Sketchに移行してからの体感的な作業速度は1.5倍ほど上がったのですが、まだまだ納品はPSDで行う事が多いのが実情です。
そこで今回はPhotopeaというツールを使って効率化できないか検証してみました。

PSDでの納品が必要となるシーンとは?

SketchはMacのみに対応しているデザインツールでWindowsではAdobe製品を使うのが一般的です。
また、クライアント側ではPhotoshopでの編集を想定しているケースがあります。

なぜ、Sketchにこだわるのか

前提としてSketchはUIデザインに特化したツールであり、AtomicDesignの構造化的な思想を元に設計されています。AtomicDesignの思想は既に一般的にも知られていますが、こういった思想を概念として置きながらUIをデザインしていく事で制作効率もあがり、より頑丈なデザインデータの作成が可能となります。

Sketchの代表的な機能としては、下記のようなものがあります。
(こちらに関しては、また別の記事で詳しく書きたいと思います!)

実際にPhotopeaでSketchデータを書き出してみる

まずは Photopea にアクセス

まずPhotopeaにアクセスしましょう。

Sketch ファイルを選択する

左上の「File」→「Open」から対象のSketchデータを選択します。
「Ctrl」+「O」のショートカットキーで開く事もできます。

Photopea上でSketchデータが開いた!

この時点では文字化けしていますが、慌てず次のステップへ進みましょう。

Photoshop ファイル(PSD)で書き出す

右上の「File」→「Save as PSD」から保存します。

Photoshopで開いて修正する

変換完了!後はPhotoshopで開いて必要な修正を加えて完成です。

文字は修正しましょう

Photopeaにアップロードした時点でフォントが文字化けしています。
Photoshopで開いた時に適切なフォントに置き換えましょう。

日本語には対応している?

上部ツールの「More」→「Language」→「日本語」で日本語表示に変更できます。

他の方法

Sketch→XDからSVGに書き出してPSDで開く方法

SVGで書き出す事により、Photoshop上で編集できなくなってしまいました。

Sketch→AIにコピペ→.aiで保存後、Photoshopで開く

読み込みはされるものの、Ps上で直編集はできませんでした。

まとめ

いかがだったでしょうか?Sketchでデザインをして、PSDで納品できるなんて作業効率も上がるし理想的ですよね。
体感、軽微な修正はかかるものの、PSD納品を指定された場合、この方法が一番効率が良いのではないかと思います。(2019年3月現在)
XDのアップデートでSketchデータをそのまま読み込めるようになったものの、XDファイル→PSDへの変換はまだサポートされていないようなので、PSD納品形式の際はぜひPhotopeaを試してみてください!


Warning: Use of undefined constant sidebar_widget - assumed 'sidebar_widget' (this will throw an Error in a future version of PHP) in /home/users/2/nscreates/web/blog.nscreates.com/nsc/wp-content/themes/wp_NsCreateblog/sidebar.php on line 3

同じテーマの記事

kumakuma / 2019.6.17

996

WWDC2019で気になった点まとめてみました


Warning: count(): Parameter must be an array or an object that implements Countable in /home/users/2/nscreates/web/blog.nscreates.com/nsc/wp-content/themes/wp_NsCreateblog/single.php on line 152

kumakuma / 2019.2.27

983

Sketch Search Everywhereで簡単にレイヤーを探す


Warning: count(): Parameter must be an array or an object that implements Countable in /home/users/2/nscreates/web/blog.nscreates.com/nsc/wp-content/themes/wp_NsCreateblog/single.php on line 152

kumakuma / 2019.6.3

982

企業やサービスの継続的なイメージアップに。デザインシステムを取り入れたブランディング事例


Warning: count(): Parameter must be an array or an object that implements Countable in /home/users/2/nscreates/web/blog.nscreates.com/nsc/wp-content/themes/wp_NsCreateblog/single.php on line 152

kumakuma / 2019.11.4

963

業務でUIの参考にしたい3つのアプリ


Warning: count(): Parameter must be an array or an object that implements Countable in /home/users/2/nscreates/web/blog.nscreates.com/nsc/wp-content/themes/wp_NsCreateblog/single.php on line 152

kumakuma / 2019.6.10

961

「伝える」気持ちを大切に。ユニバーサルデザインとアクセシビリティについて考えてみました。


Warning: count(): Parameter must be an array or an object that implements Countable in /home/users/2/nscreates/web/blog.nscreates.com/nsc/wp-content/themes/wp_NsCreateblog/single.php on line 152
N's Creates について詳しく見る