なぜモバイルアプリのUIデザインにSketchが向いているのか・その2

Q: 長い間使ってきたPhotoshopやIllustratorをアプリのデザインでも使った方が早くないですか？ いろんなツールと連携できるとか、プラグインで自分仕様にカスタマイズとか、何を言っているのかよくわかりません。

A:
モバイルアプリのデザインって、各画面の見た目をデザインしたらあとはエンジニアさんはいよろしく！じゃないんです。

それぞれの工程や目的に応じて必要な機能やツールは変わります。
UIデザインの工程で必要な様々なツールはSketchと連携できるものがとても多い、
というところもSketchの大きな魅力です。

一部、Photoshopに対応しているツールもありますが、
Sketchほど豊かに連携できるツールが様々に揃っているわけではありません。
「今の所はまだ」と言いたいですが、これだけ豊富に様々なツールが揃うのは何年もかかるでしょうし、すでにSketchの周辺ツールがとても充実してきているので、他のデザインツールがこれを覆すのはなかなか難しいのではないかと感じます。

掘り下げるとキリがないので、基本的なものだけ紹介します。

ダミーのデータを入力する

• CRAFT　
  ※Style Guideの自動作成や、Webページのテキストを簡単に挿入するなど、Sketchを購入したら真っ先にインストールしたいプラグイン。
• Content Generator

Sketchで作業中のデザインをスマートフォンにリアルタイムプレビューする

• Sketch Mirror
• Crystal

プラグイン

• Sketch Palettes - 作成したカラーパレットを書き出したり、読み込んだりする。
• Symbol Organizer - 増えまくりぐちゃぐちゃになったSymbolをスッキリ整列。

※そのほかにもたくさん便利なプラグインがあるので、SketchAppSourcesのプラグインページでご自分に必要なものを探してみてください。

プラグインの管理はRunnerを使うと大変便利です。（できるのはプラグインの管理だけじゃないですけれど）

Pluginを使ってプロトタイピングツールに直接Syncできる

• Invision
• Prott
• Marvel
• Framer
• Flinto for Mac

エンジニアにSpec（レイアウトの実装に必要な情報）を共有する

• Zeplin - 初心者でも使いやすい。
• InVision - Inspect Mode(beta) でSpecを確認できる。
• Sympli - Sketchで作成したレイアウト情報をXcodeやAndroid Studioに渡せるらしいです。※私は使ったことありません。
• Sketchode - JIRAを使って共有できるらしいです。 ※一度だけ使ったことがありますが、JIRA経由じゃないとあんまり意味がない気がします。

いずれのツールも画像assetsのExportができるので、Sketchを持っていないエンジニアでも必要な画像を自分でExportすることができます。

ここまでにご紹介したプラグインやツールは、全部とても便利なのですが、

特にSpecの共有ツールはとても重要です。これがないと、手作業で実装に必要な情報の書き込みをしなくてはなりません。それには膨大な時間がかかるのでZeplinが登場した時は涙が出るほど感動しました。

きっと、この記事を今更書かなくても検索していただければ得られる情報ばかりですが、
結構頻繁に質問を受ける題材なので、書いてみました。

実はSketchをより使いやすくしてくれるツールやプラグインは、ここにひとまとめに掲載されています。
Sketchの使い方は、ここに全部まとまっています。
いずれもSketchのWebサイトです。ぜひ定期的にチェックする癖をつけてみてください。