みなさんデザインツール何を使っていますか?
photoshop、Illustrator、Adobe XD、fireworksなどのadobe cc系ソフトに、 新興勢力のSketch、Affinity Designer…。

弊社では昨今デザインする「コンテンツ」と「デバイス」が多様化し、 プロジェクト毎に関わるスタッフや案件の特性も異なる為。
どのデザインソフトで制作するのが最も効率的か、都度使い分け模索してきました。

その中で2017年末現在、弊社で使用頻度が急上昇しているデザインソフトがSketchです。
Sketchの魅力は何と言っても「圧倒的な動作の軽さ」です。

「軽さ」はそのまま「検証」と「手数」の多さに還元され、限られた時間の中でより精度の高いアウトプットを行う事が可能となります。
Photoshopや3DCGソフトで細かな処理を必要とする場合も、早いタイミングでアタリを付けられるのでとても重宝しています。

またSketchの「痒いところに手が届く豊富なプラグイン」と「UIデザインに最適化された先進機能」も弊社の業務効率化に一役かっています。

案件によってはワイヤーフレームなどの企画設計段階から、デザインのフィニッシュまでをすべてSketchで行うケースも増えてきました。

興味はあるけれど、まだ使った事がないという方は、是非一度使ってみることをお薦めします。
特にかつてfireworksを愛用していたデザイナーにとっては、操作感がどことなく近く魅力的に映るのではないでしょうか？

そんなとっても便利なSketchですが、以前は弊社も現場での導入に踏み切れない時期がありました。
その最大の要因が「データの受け渡し問題」です。

大きくは3つ。

【主な問題点】

• Sketchはmac版しかないためwindows使いのクリエイターにデータ引き継ぎが出来ない。
• まだ歴史の浅いソフトの為、使った事のないクリエイターが多く存在する。
• 標準のSVGやPDF、EPS書き出し形式ではテキストがアウトライン化されてしまい編集ができない。

といった問題です。

弊社では異分野のクリエイターが関わる事が多く、またクライアンの要望で編集可能なデザインデータを納品してほしいと要望頂くケースが少なくありません。
そのため編集可能なフルデータでPhotoshop等のメジャーアプリケーションに変換が出来ないと導入が苦しい部分がありました。

今回はそんな問題を解決する、 「sketchデータ(.sketch)をPhotoshopデータ(.psd)に簡単に変換する方法。」を紹介します。
どちらの方法もテキスト編集可能かつレイヤー構造も生きた状態で変換する事ができます。

sketchからPhotoshopに変換する方法

1. ブラウザからphotopea.comにアクセス。
2. 変換したいsketchデータをアップロード
3. 読み込みが終わったら、「Save as PSD」を選択してダウンロード。
4. ダウンロードしたファイルをPhotoshopで開き、日本語部分は文字化した状態なので一度選択して整形して完成です。

これで存分にsketch存分に制作のメインで使えますね。
それではまた！