Design

kumakuma / 2019.3.26

4468

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を試してみてください!

同じテーマの記事

kumakuma / 2019.2.27

993

Sketch内の空のフォルダを一斉削除!「Cleanup Useless Groups」

kumakuma / 2019.6.17

935

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

kumakuma / 2019.11.11

934

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

kumakuma / 2019.10.21

931

ウォークスルーのUIデザインで工夫のある3つのアプリ

kumakuma / 2019.2.27

902

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

N's Creates について詳しく見る