こんにちは。
デザイナーのスタミです。

初めはSketchの導入を渋っていた弊社デザインチームですが、最近はSketchが無いと困るような場面も増えてきて、気づけばドップリ。もう手放せません。
１ヶ月くらい前だったか「もうすぐPhotoshopのファイルをSketchファイルに変換できる機能の提供を始めるサービスがあるらしい」という噂を聞きつけてメールアドレスを登録しておいたら、ベータ版リリースの連絡が来たので早速試してみることに。
もし使い物になったら今よりもっと便利です。

Avocode

https://avocode.com/

Avocode – PSD & Sketch designs to web, iOS and Android code

Share & inspect Photoshop and Sketch designs on Mac, Windows & Linux. Collaborate with your team, generate CSS, Swift & Android code, export specs and images.

「Avocode」は、本来PhotoshopやSketchで作られたデザインデータを解析して、フロントエンジニアが必要とする情報を表示したり簡単に画像のスライスができたりするツールを提供しているようですね。
そっちの方は有料ですが、かなり便利そうです…！

Avocodeを使ってスライスとコーディングの効率をグッとあげよう | 株式会社LIG

最近健康診断で初バリウムを体験してきました。意外と大丈夫だったのでもう怖くないですね。検査結果を除いては。こんにちは、先生です。さて、みなさんはAvocodeをご存知でしょうか。今日はスライスとコーディングの効率を上げてくれる、このAvocodeを紹介します。 Avocodeとは http://avocod

Photoshop→Sketchのファイル変換サービスを早速使ってみた

お目当てだったPhotoshopのファイルをSketchファイルに変換する機能は、Webサービスとして提供されています。

Webサイト上にPhotoshopのファイルをアップロードし、メールアドレスを入力して「CONVERT TO SKETCH」をクリック。

画面数も多いしそこまで軽くないデータですが、処理速度が割と速くてすぐに完了。

その後、入力しておいたメールアドレス宛にダウンロードURLが送られて来るので、そこからSketchファイルをダウンロードするという流れです。

驚愕の変換クオリティ

正直ナメていました。
変換すると言っても、レイアウト崩れや変換できない部分がほとんどで、あくまで「ゼロからSketchで再現するよりは楽」程度のクオリティであろうと。

しかし蓋を開けてみれば、なんということでしょう…！！！！

元となったPhotoshopのファイル（フリーのUI素材を使っています）

変換後のSketchファイル

パッと見の印象では「色が全然違うじゃねぇかよ…」と思うかもしれませんが、Photoshopで言うところの「レイヤースタイル」で当てている「グラデーションオーバーレイ」が再現出来ないだけで、それ以外のパスの部分や、何よりレイヤーがちゃんと生きたままなのが素晴らしい！！！
他にもほんの少しのレイアウト崩れなどはあるものの、基本的な部分はかなりしっかり再現されていました。
このクオリティであれば、10分かけて調整すればほとんどの人が完全に元の状態を再現できると思います。
ちなみにPhotoshopのレイヤースタイルで一部のオブジェクトに「ドロップシャドウ」「カラーオーバーレイ」をつけた状態で変換してみたら、そこは近しい状態で残ってくれていたのでその辺はパラメータのちょっとした調整だけで済みそうです。細かい部分が気にならない人なら放置するだろうなと思うレベルでした。
Illustratorからイラストのオブジェクトなんかをコピペで持って来たい時も、グラデーションが入っていると真っ黒になってしまうので、とにかくグラデーションには弱いということなんでしょうね。

総括

あまりに充分すぎるクオリティでした！
他社が担当していたデザインや開発を巻き取ってアップデートして行くぞなんていう案件の場合は、「元々のデザインデータはPhotoshopで支給されるけど、今後はSketchに切り替えたい」となることもあると思いますし、内製でも「今はPhotohop使ってるけど切り替えたい」「Sketchを使い慣れていないので移行が大変すぎる」という意見も多いと思います（何しろ弊社がそうでしたから…w）。
でも、今時デザインツールはAdobeをはじめ大手が作っているものが一番使いやすいという常識は無くなっていて、どんどん理にかなったツールに乗り換えたりもどったりする方が意外と楽になったりしますよ。
そもそも新しいツールは、大手が作って来た使いやすい部分はそのまま真似して作っていたりするのでそこまで難解じゃないですし、今回ご紹介した「Avocode」のようなサービスもしょっちゅう出て来たりするので、こまめにチェックして、これで行けそうだなと思ったらまずは試してみるのが良いと思います。
逆のSketch→Photoshopもあれば完璧ですが、一旦は「Avocode」があるだけでもPhotoshopとSketchの間で揺れ動いている会社的にはバッチリじゃないでしょうか。
これを機にSketchも検討してみてはどうでしょう。