「Sketch3を使った、デザインからプロトタイピング」（DeNA増田さん）
増田さんはベクタードローイングツール「Sketch3」の特徴について、デモを交えながら紹介しました。
Sketch3はBohemian Coding社が開発しているツールで、アプリやWebサービスなどのUIデザインに特化したものとなっています。Sketch3を使う理由として、増田さんは、「コンテンツがより重要になってきている」ということを挙げました。よりよいコンテンツを作るためには「考える時間」が重要であり、その時間を確保するためにはデザインをつくる「手作業」自体を効率化する必要があります。Sketch3には作業を効率化する機能が備わっており、デザインを作成する時間を短縮することができるそうです。
Sketch3の5つの特徴
増田さんは、Sketch3の5つの特徴を紹介しました。以下がその内容です。
1. 「デザイン全体を俯瞰して確認できる」
Sketch3のインターフェースは、左側にレイヤーリスト、右側にインスペクタ群、真ん中にキャンバスという構成になっており、作成中のデザイン全体を俯瞰しながら作業することができます。キャンバスには複数のアートボードを配置でき、複数デバイス向けのデザインを並べることもできます。
2. 「素材の書き出しが圧倒的に楽に」
等倍、半分、2倍といった異なるサイズの素材を一気に書き出せる機能がついており、例えば、iOSアプリのRetina／非Retina向けの素材を一発で作成できます。
3. 「オブジェクト間の距離にもう困らない」
選択中のオブジェクトの位置／サイズはインスペクタパネルに表示され、optionキーを押すと、マウスカーソルをかざしているオブジェクトからの距離を表示できます。
4. 「共通のUIは使まわして、編集も一発」
iOSのナビゲーションバーやタブバーなどの共通のUIコンポーネントは、シンボルとして登録することで使いまわすことができます。シンボルとして登録したオブジェクトの色や大きさなどを編集すると、同じシンボルから作成した他のすべてのオブジェクトにも反映されます。
5. 「エンジニア・コーダーさんにも嬉しい パーツはもう作らなくてOK!」
iOSの標準UIコンポーネントがテンプレートとして用意されているので、UIデザインをすぐに試すことができます。
楽しく効率的なSketch3
増田さんはまとめとして、「Sketch3は、デザイナーにとって、サービスやアプリを作る上で、設計という視点をもって作るのに非常に良いツールと言える。Webやアプリのデザイナーが欲しいと思っていた機能がほとんど揃っているので、とても楽しく効率よくデザインを進めることができる」と述べました。
おわりに
以上がDeNAのエンジニア／デザイナーによる発表の紹介でした。チームメンバーの連携を改善する方法やアプリの質を高めるための方法などについて、積極的に試行錯誤されている印象を受けました。
前編・後編の2回に分けて「iOSエンジニア・UI/UXデザイナー勉強会」の模様をレポートしました。興味深い内容が多く、「もっと聞きたい」と思えた勉強会でした。発表中で紹介された手法やツールが気になった方は、実際の開発に取り入れてみてはいかがでしょうか。
