[&] Yahoo! x DeNA - masuda

Yahoo! x DeNA iOSエンジニア・UI/UXデザイナー
Sketch3を使った、デザインからプロトタイピング
DeNA 増田さん

Sketch3 を使って、コンテンツの魅力を最大限に。
2013年12月DeNA入社。以前はGoodPatch

Sketch3 はどんなツール？
iOS のアプリやWebサービスに特化したツール
使う理由は、コンテンツがより重要になってきているため。
考える時間が重要になってきている。
手作業は効率化して、時間をかけない。

デザイン全体を俯瞰して確認できる。
素材の書き出しが圧倒的に楽になります。
オブジェクト間の距離にもう困らない
共通のUIは使い回して、編集も一発
エンジニア・コーダさんにも嬉しい。パーツはもう作らなくてOK!

iOS, Android それぞれの解像度で書き出すことがあると思うのですが、
Retina と、Retina じゃいないもの、export ボタンを押すと、一回で書き出すことができます。
便利なのが、1種類でもすぐに欲しい時は、
画像を選んでそのままデスクトップの drop すると、画像ファイルが書き出されます。
xhdpi とか、同じように export で必要な画像サイズを一回で書き出すことができます。

オブジェクトの距離とサイズ、オブジェクトを選択すると、サイズや位置がっ表示され、
カーソルをかざしたところからの距離が一瞬でわかります。

最近でてきたプラグインで便利なのが、画面上にパディングとマージンを表示してくれるので、
エンジニアはすぐにコーディングできます。

（Sketch Measure というプラグインとのこと！）https://github.com/utom/sketch-measure

シンボル化なんですが、
タブバーなどは共通しているものが多いので、シンボル化します。
色を変えたいとなった時に、一回で全てのシンボル化したデザインに反映させることができます。

新しいテンプレートを開いた時に、iOSデザインを選択すると、
iPhone サイズのアートボードが一瞬で生成されるので、
そこから始めることができます。
2ページ目だと、よくある部品が用意されているので、
すぐにデザインを始めることができます。

エンジニアが実験したい時は、コンポーネントを持ってきて、
試作を効率化することができます。

iOSに特化したデザインツールで、ブラー効果のかかったものも
効率よくできます。
すべてがベクターベースなので、書き出しも綺麗です。

デザイナーにとって、設計という視点をもって作るのに非常に良いツールと言えます。
欲しいと思っていた機能がほとんど揃っているので、
楽しく効率よくデザインを進めることができます。

Framerjs などを作って、チームで共有して、ブラッシュアップの作業を
素早く進めることができます。

2週間試用できるので、是非使ってみてください！