Sketchで変わるワークフロー

Sketchで変わる

スマートフォンアプリの

デザインワークフロー
山本麻美

山本麻美
フリーランスのUIデザイナー
商業高校や専門学校の講師
←ここのメンバーでもあります。

デザインツール比較
ベクトルイラストレーションを作成するために開発
されている
フォトレタッチのために開発されている
Webデザインのために開発されている
アイコンを描くときは最強。激しく使ってる
たまーにしか使わない。

※CC2015の”デザインスペース”は今後の進化が

若干気になる。exportはSketchにかなわないのでは？
Sketchが出る前はこれを使ってた
Adobe、

開発終了

宣言

Sketchの登場
スマートフォンアプリの

UIデザインのために
開発されている！

これはすごい！！
よし！

Sketch3のすごいところ
Style 
塗り色、枠線色やフォント情報を登録して使いまわせる

Symbol 
Styleを含めたUI要素をパーツごとにひとつの塊とし
て登録して使いまわせる

Sketch Mirror 
PCでの作業をリアルタイムでiPhoneの画面に 
同期できる

Export 
iOSアプリ用の画像パーツ書き出しが神

Plugins 
様々なプラグインをインストールして自分仕様の
Sketchを作れる 
Androidアプリ用画像パーツ切り出しのプラグイン
がすごい
Versionsに対応してるとか、値段が安いとかetc.

style
ひとつの図形やテキストの、塗り色、枠線、文字サイズを

登録して使いまわせるよ！

symbol
複数の要素の、色、サイズ、などのかたまりを

登録して使いまわせるよ！

Sketch Mirror
PCで作成中の画面をリアルタイムで

iPhoneの画面に表示できる！

Export
iOSアプリ用画像パーツの書き出しが超カンタン

（Adobe製品の比じゃ無いよ）

Plugin

export-assets-master
発狂しそうなAndroidアプリ用の画像パーツ書き出しが

一瞬で終わるよ！（涙が出たよ！）
※MDPIのサイズでデザインを作成しておけば、おk

Plugin

contents-generator
ダミーの写真やテキストを生成してくれるよ！

人名、長文テキスト、電話番号、住所もあるよ！

英語のと日本語のがあるよ！

UIデザインに特化している
iPhone画面にリアルタイムで同期できる 
アプリは完成したらスマートフォンで見る使うわけなので、 
デザインの確認もスマートフォンの画面で！

共通のUI要素を使いまわせる修正が簡単 
変更が一発で全画面に反映されるので、作業に時間をとられず、 
UI設計に集中できる。

画像パーツの書き出しが神すぎる 
ExportがそもそもiOSアプリの画像パーツを切り出すことを前提に 
開発されている。Adobe製品は昔からスライスツールが使いにくい。
ツールの優劣の話じゃなくて、そもそも目的が違うという話です。

アプリ「BizReach」に見る

企画からデザインまでのワークフロー実例
ここでちょっと、

株式会社ビズリーチ

マーケティング部

本間裕二さんに聞いてみる！

Copyright © BizReach, Inc. All Right Reserved. ‹#›
アプリをゼロからつくるとき、
SketchとProttがいかに便便利利かの話
~∼アプリ「BizReach」に⾒見見る
企画からデザインまでのワークフロー実例例~∼

本間　裕⼆二
2013年年にビズリーチに参画
営業経験後
・マーケティング部
・BtoBマーケティング部
・サービス企画部を兼務し、
2014年年11⽉月〜～現在まで
アプリのプロデューサー

転職潜在層をターゲットにしたキャリア形成アプリ
ハイクラス⼈人材のキャリア形成アプリ -‐‑‒ BizReach（ビズリーチ）

企画ワイヤーデザイン開発改善活動

企画の⾻骨⼦子を考える。ホワイトボードで。

「UX」のラフver.
を考える
まだ、
ホワイトボード

議論論議論論議論論議論論
↓
「UX」や導線を
Excelで作成
議論論：ホワイトボード
清書：Excel

現状の企画内容をメンバーに共有・・・
みなさん、アプリの⽬目的
とUX、あとコンテンツなど
こんな感じっす！どやっ
はい∼ん？
なんだよこれ、
ぜんぜん
伝わらねぇよ！
開発メンバー

イメージを伝え、
Sketchでワイヤーを作成
Prottに落落とし込むの術
オネシャス！
OK！さくさくっ！

Prottをメンバーに配布
⼿手元で
体験できる！
え！ひぃっ！はっ！
触ると言われるより
めちゃわかる！！！
開発メンバー

ワイヤーレベルで
作成したPrott画像数
300〜～400枚！
Sketchだから
描けたんだと思う

余談： ✓ Style
✓ Symbol
✓ Export
３つを理理解しておくと、
Sketchファイルの修正や
簡単なワイヤーの作成が
サクサクできやす！
ワイヤーレベルまではいける！

デザインをSketchで作成し、
ワイヤー版Prottを差し替えまくる

Prottをメンバーに配布
⼿手元で
体験できる！
おお！ワイヤー
レベルの体験が、
デザインでもっと
わかりくなってる！
開発メンバー

＋
レイアウト指⽰示書
導線はProttで。細かいレイアウトは指⽰示書を作成

企画ワイヤーデザイン開発改善活動
?

ProttとSketch
俺らも使った
方が効率的だぜ
エンジニアがSketchを使えることで、
画像の書き出しやレイアウト作成までが圧倒的に短縮
開発メンバー

体験の共有
圧倒的スピード
まとめ
初⼼心者であっても、企画→実装のブレがなく
早くアプリを作成でき、学習により改善が⾼高速化。
＋　メンバーの満⾜足度度も⾼高まる
＋

モジュール化

しよう!
はい！
iOSエンジニアの

関根元和さん（@cheebow）と

取り組んだ考え方や

役割分担方法をご紹介。
UIのモジュール化と役割分担

（コンポーネント化）

カードごとで

作った場合は…
やっぱ、ユーザアイコンは

四角形にしてー！
1枚 2枚 3枚
あ、カードのパターン、

5つ抜けてたわ！

モジュール化しておくと…
はい、次！
1回の修正ですべてに反映される

Xcodeでスライスの設定して

Githubでpush!
小さく作って

使い回す！

ちくちく
Xcode上の画像を入れておくところは

デザイナーしか触らないという運用ルール

Plugin measure-master
エンジニアさんに伝える情報を簡単に書き込んでくれる。

pixelだけじゃなくてdpでの表記も可能！

レイアウト指示書

Google Drive
ローカルファイルのやりとりをしない。

いつでも最新情報

ということを

今までやっていたんですが、、、

7月20日の朝、

レイアウト指示書をちくちくと

作成しなくてよい

便利なツールを見つけました！

レイアウト指示書の作成が

不要になるツール
Zeplin

https://zeplin.io/
ほんとに

昨日

発見しました

SketchからZeplinへ

アートボードをExportするだけで…

要素のサイズや位置関係を計算してくれたり

コメントを書き込んだりできる！

Android用プロジェクトは単位がdpに！

Color Paletteを作成でき、

Color Resourceをテキスト生成してくれる！
for

Android

もちろん、

Objective-C, Swiftにも対応してます。
for

iOS

Zeplinについては、

昨日みつけたばっかりで

どっぷり使い込んでみていないので、

後日ブログに詳しく書きます。

インタラクションを

デザインするツール
pixate Form
エンジニアさんにインタラクションを伝えられる

が！少々使い方が難しい。。。

まとめ
作業ではなく、UI設計に集中しよう 
適したツールを使うと作業時間が大幅に短縮でき、 
いろんなアイデアを試しやすい。

全体を俯かんしてUIを設計しよう 
Sketch+Prottを活用すると、アプリ全体を立体的
に設計しやすくなる。

最低限の技術的知識を持とう 
プログラマとデザイナーはお互いの仕事を知り合おう。
そうすることにより、さらによりよいアプリが生まれると思う。

Sketch3 is amazing!!
http://gomaapps.blogspot.jp
Sketchでアプリのデザインをするための

考え方やヒントをブログに書いております。
+AsamiYamamoto

Sketchで変わるワークフロー

More Related Content

Sketchで変わるワークフロー