【 Photopea 】　WEBサイトデザインはやっぱりXDを使いたい人の便利ツール　 FirE♯583

WEBデザインツールとして必須のPhotoshopですが、WEBサイトのデザインを作るにあたっては、AdobeXDの方が、遥かに効率的であると感じています。

問題は、Photoshopでのデザインカンプが必要にXDデータがPhotoshopデータにすんなりと変換できないことです。

これを解決する方法があったので紹介します。

うまくPSDデータに変換するのは一手間必要でした。

【 Photopea （フォトピー） 】

Photopea | Online Photo Editor

こちらのPhotopea のUIを見ていただければ分かる通り、
Photoshopを同じことができます。
XDファイルを、Photopeaにドラッグ&ドロップすると、このように変換されます。

ファイル　→　保存 その他　→　保存 PSD/PSB　でPSDデータと保存できます。

■ レイヤー保持 

このようにXDをPSDに変換し、Photoshopで開くと、しっかりとレイヤーのデータが残っています。

■ フォント変換

フォントはXDにあっても、Photoshopにないフォントの場合には、変換されます。

ここは制作前に考慮しておく必要があります。

■ 画像のエラー

XDでの配置と、PSDでの配置がズレることがあります。

ほぼ大丈夫ですが、この現象は起きるので、画像については、確認をし、再度Photoshopで貼り直しても良いでしょう。

【 注意点 】

うまくPSDデータに変換するために、必要なことがあります。

■ レイヤー数に注意

XDでサイト全体をデザインし、そのままPSDへ変換すると、レイヤーの情報が多すぎることから、エラーが出ます。

この場合は、レイヤーは保持されずに、一枚の画像としてPhotoshopで開かれるので、PC版と、SP版を分けてPSDに変換するなどすれば問題ありません。

■ アートボード全体のサイズに注意

例えば、20ページ分のサイトデザインを一度にPSDデータに変換すると、Photoshopで開いたときに、画像や文字の表示が荒くなります。

これは、100%のサイズが、20ページ分の横幅になるからと思われます。

一番良いのは、1ページ分づつPSD変換する方が良いと思われます。

しかし、これは手間なので、試したところ、横幅1500を5ページ分でも全く問題なく表示されました。

【 まとめ 】

Photopeaについて書きました。

Photoshopでサクサクと作業できてば使う必要ないモノですが、
XDでの効率を考えると、導入しても良いのではないかと思っています。