ブログ

SketchをUI構築案件で利用してみた

久々に管理画面の案件をがっつりやりたくなったので、週2常駐を再開しました。今回は作業時間の関係などでフロントエンド・コーディングは基本やらず、UIデザインだけの担当です。
いままでもちょこちょこ使っていたけど、今回の案件で、Sketchを本格的に使ってみたのでちょっと良かったところなどをレビューしてみます。

はじめに

基本的にWebサイトや管理画面を構築するときには「デザイニング・イン・ザ・ブラウザ」で作ります。そのほうが早いからです。

ただ、たまに例外も出てきます。分業体制で、デザイナーがインターフェース、プログラマーがコーディングもやる、という感じです。今回はUIデザインメインのお仕事です。もちろんUXも含めて提案もしますが。

Sketchとは

Sketchは一言でいうとAdobeのグラフィックソフトのいいところはそのままに、さらに使いやすくした取りをしたソフトです。FireworksやIllustratorを使っていた人には移行しても使いやすいと思います。

Sketchのいい部分

Adobe製品と比較するとパフォーマンスがいいと改めて思いました。
お財布の面でも、作業時間の面でも。

  • 動作が軽い。PhotoShopなどに比べると軽快に動作します
  • SVGが扱いやすいです
  • PhotoShopと比べてテキストの扱いが容易です
  • 画像の書き出しが簡単です
  • Mac OS Xのバージョン機能に対応しています
  • 9,800円の買い切りなので、毎月Adobeに5,000円払うようなことはありません
  • FireworksやIllustratorと違ってピクセルベースにしたときににじむ、などの問題はありません

Sketchのよくない部分

互換性の部分でまだまだかなという感じです。

  • EPSファイルの扱い(再現性)が微妙です。安全に使うにはSVGに変換しましょう
  • AI/PSDをファイルを開いて直接読み込んで編集できません。過去の資産が必要でない案件から使い出しましょう
  • ファイルは.sketch形式のため、Sketch AppがインストールされていないMacでは開けません
  • 対応デバイスがMacだけなので、Windowsの人とシェアできないです

フォントによってはティゼンダがおかしくなる

Sketchを使っている場合、ヒラギノ角ゴシックがメイリオよりディセンダが大きくなります。テキストの下方向が不自然な間隔で開きます。
さらに、游ゴシックを指定すると、ヒラギノ角ゴシックよりもテキストの下方向がもっと大きく下方向が不自然な間隔で開きます。

Sketch使うときはメイリオでデザインしたほうが安全ですね。

感想と課題

Sketchは強力なUI制作ツールです。Macベースでの制作環境では、アプリなどのデザインカンプが必要なケースでは、もうAdobe製品は主役ではありません。互換性の問題がなければ不要、といってもいいでしょう。

ただ、そのまま使うだけでは、コラボレーションという面では、昔のワークフローのままですし、いくつかツールを使って効率化する必要があります。
ちょっといくつかツールを使いワークフローを検証しているのでそのあたりは後日書こうと思います。

まとめ

そもそも、PhotoShopやIllustratorは、本来は写真加工やイラスト加工のためのアプリです。いままではツールがなかったため、UI設計のために使っていたのが実情です。

もう、Sketchを使い出すとPhotoShopやIllustratorなどのAdobe製品にお金を払うのがバカバカしくなります。また、これらの分野では、PixelmatorやAffinity Designerなど、ライバルも増えつつあるので、この分野の競争には注目しています。

写真加工のUI制作はSketch、写真加工はAffinity PhotoやPixelmatorというワークフローで問題がなくなれば、WebやアプリのUIの世界では、もうAdobe Creative Cloudの契約でお金を払う必要は無くなってしまうかと思います。

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。