Sketchで変わるワークフロー

Transcript of "Sketchで変わるワークフロー"

1. 1. Sketchで変わる スマートフォンアプリの デザインワークフロー 山本麻美
2. 2. 山本麻美 フリーランスのUIデザイナー 商業高校や専門学校の講師 ←ここのメンバーでもあります。
3. 3. デザインツール比較 ベクトルイラストレーションを作成するために開発 されている フォトレタッチのために開発されている Webデザインのために開発されている アイコンを描くときは最強。激しく使ってる たまーにしか使わない。 ※CC2015の”デザインスペース”は今後の進化が 若干気になる。exportはSketchにかなわないのでは？ Sketchが出る前はこれを使ってた Adobe、 開発終了 宣言
4. 4. Sketchの登場 スマートフォンアプリの UIデザインのために 開発されている！ これはすごい！！ よし！
5. 5. Sketch3のすごいところ Style
 塗り色、枠線色やフォント情報を登録して使いまわせる Symbol
 Styleを含めたUI要素をパーツごとにひとつの塊とし て登録して使いまわせる Sketch Mirror
 PCでの作業をリアルタイムでiPhoneの画面に
 同期できる Export
 iOSアプリ用の画像パーツ書き出しが神 Plugins
 様々なプラグインをインストールして自分仕様の Sketchを作れる
 Androidアプリ用画像パーツ切り出しのプラグイン がすごい Versionsに対応してるとか、値段が安いとかetc.
6. 6. style ひとつの図形やテキストの、塗り色、枠線、文字サイズを 登録して使いまわせるよ！
7. 7. symbol 複数の要素の、色、サイズ、などのかたまりを 登録して使いまわせるよ！
8. 8. Sketch Mirror PCで作成中の画面をリアルタイムで iPhoneの画面に表示できる！
9. 9. Export iOSアプリ用画像パーツの書き出しが超カンタン （Adobe製品の比じゃ無いよ）
10. 10. Plugin export-assets-master 発狂しそうなAndroidアプリ用の画像パーツ書き出しが 一瞬で終わるよ！（涙が出たよ！） ※MDPIのサイズでデザインを作成しておけば、おk
11. 11. Plugin contents-generator ダミーの写真やテキストを生成してくれるよ！ 人名、長文テキスト、電話番号、住所もあるよ！ 英語のと日本語のがあるよ！
12. 12. UIデザインに特化している iPhone画面にリアルタイムで同期できる
 アプリは完成したらスマートフォンで見る使うわけなので、
 デザインの確認もスマートフォンの画面で！ 共通のUI要素を使いまわせる修正が簡単
 変更が一発で全画面に反映されるので、作業に時間をとられず、
 UI設計に集中できる。 画像パーツの書き出しが神すぎる
 ExportがそもそもiOSアプリの画像パーツを切り出すことを前提に
 開発されている。Adobe製品は昔からスライスツールが使いにくい。 ツールの優劣の話じゃなくて、そもそも目的が違うという話です。
13. 13. アプリ「BizReach」に見る 企画からデザインまでのワークフロー実例 ここでちょっと、 株式会社ビズリーチ マーケティング部 本間裕二さんに聞いてみる！
14. 14. Copyright  ©  BizReach,  Inc.  All  Right  Reserved. ‹#› アプリをゼロからつくるとき、   SketchとProttがいかに便便利利かの話 ~∼アプリ「BizReach」に⾒見見る                    企画からデザインまでのワークフロー実例例~∼
15. 15. Copyright  ©  BizReach,  Inc.  All  Right  Reserved. ‹#› 本間 　裕⼆二   2013年年にビズリーチに参画   営業経験後   ・マーケティング部   ・BtoBマーケティング部   ・サービス企画部を兼務し、   2014年年11⽉月〜～現在まで   アプリのプロデューサー
16. 16. Copyright  ©  BizReach,  Inc.  All  Right  Reserved. ‹#›
17. 17. Copyright  ©  BizReach,  Inc.  All  Right  Reserved. ‹#› 転職潜在層をターゲットにしたキャリア形成アプリ ハイクラス⼈人材のキャリア形成アプリ  -‐‑‒  BizReach（ビズリーチ）
18. 18. Copyright  ©  BizReach,  Inc.  All  Right  Reserved. ‹#› 企画 ワイヤー デザイン 開発 改善活動
19. 19. Copyright  ©  BizReach,  Inc.  All  Right  Reserved. ‹#› 企画 ワイヤー デザイン 開発 改善活動
20. 20. Copyright  ©  BizReach,  Inc.  All  Right  Reserved. ‹#› 企画の⾻骨⼦子を考える。ホワイトボードで。
21. 21. Copyright  ©  BizReach,  Inc.  All  Right  Reserved. ‹#› 「UX」のラフver.   を考える   まだ、   ホワイトボード  
22. 22. Copyright  ©  BizReach,  Inc.  All  Right  Reserved. ‹#› 企画 ワイヤー デザイン 開発 改善活動
23. 23. Copyright  ©  BizReach,  Inc.  All  Right  Reserved. ‹#› 議論論議論論議論論議論論   ↓   「UX」や導線を   Excelで作成   議論論：ホワイトボード   清書：Excel  
24. 24. Copyright  ©  BizReach,  Inc.  All  Right  Reserved. ‹#› 現状の企画内容をメンバーに共有・・・ みなさん、アプリの⽬目的   とUX、あとコンテンツなど   こんな感じっす！どやっ   はい∼ん？ なんだよこれ、 ぜんぜん 伝わらねぇよ！ 開発メンバー
25. 25. Copyright  ©  BizReach,  Inc.  All  Right  Reserved. ‹#› 企画 ワイヤー デザイン 開発 改善活動
26. 26. Copyright  ©  BizReach,  Inc.  All  Right  Reserved. ‹#› イメージを伝え、   Sketchでワイヤーを作成   Prottに落落とし込むの術 オネシャス！ OK！さくさくっ！
27. 27. Copyright  ©  BizReach,  Inc.  All  Right  Reserved. ‹#› Prottをメンバーに配布 ⼿手元で   体験できる！ え！ひぃっ！はっ！ 触ると言われるより めちゃわかる！！！ 開発メンバー
28. 28. Copyright  ©  BizReach,  Inc.  All  Right  Reserved. ‹#› ワイヤーレベルで   作成したPrott画像数 300〜～400枚！ Sketchだから   描けたんだと思う
29. 29. Copyright  ©  BizReach,  Inc.  All  Right  Reserved. ‹#› 余談： ✓ Style   ✓ Symbol   ✓ Export ３つを理理解しておくと、   Sketchファイルの修正や   簡単なワイヤーの作成が   サクサクできやす！ ワイヤーレベルまではいける！
30. 30. Copyright  ©  BizReach,  Inc.  All  Right  Reserved. ‹#› 企画 ワイヤー デザイン 開発 改善活動
31. 31. Copyright  ©  BizReach,  Inc.  All  Right  Reserved. ‹#› デザインをSketchで作成し、   ワイヤー版Prottを差し替えまくる
32. 32. Copyright  ©  BizReach,  Inc.  All  Right  Reserved. ‹#› Prottをメンバーに配布 ⼿手元で   体験できる！ おお！ワイヤー レベルの体験が、 デザインでもっと わかりくなってる！ 開発メンバー
33. 33. Copyright  ©  BizReach,  Inc.  All  Right  Reserved. ‹#› 企画 ワイヤー デザイン 開発 改善活動
34. 34. Copyright  ©  BizReach,  Inc.  All  Right  Reserved. ‹#› ＋ レイアウト指⽰示書 導線はProttで。細かいレイアウトは指⽰示書を作成
35. 35. Copyright  ©  BizReach,  Inc.  All  Right  Reserved. ‹#› 企画 ワイヤー デザイン 開発 改善活動 ?
36. 36. Copyright  ©  BizReach,  Inc.  All  Right  Reserved. ‹#›
37. 37. Copyright  ©  BizReach,  Inc.  All  Right  Reserved. ‹#› ProttとSketch 俺らも使った 方が効率的だぜ エンジニアがSketchを使えることで、   画像の書き出しやレイアウト作成までが圧倒的に短縮 開発メンバー
38. 38. Copyright  ©  BizReach,  Inc.  All  Right  Reserved. ‹#› 体験の共有 圧倒的スピード まとめ 初⼼心者であっても、企画→実装のブレがなく   早くアプリを作成でき、学習により改善が⾼高速化。   ＋ 　メンバーの満⾜足度度も⾼高まる ＋
39. 39. モジュール化 しよう! はい！ iOSエンジニアの 関根元和さん（@cheebow）と 取り組んだ考え方や 役割分担方法をご紹介。 UIのモジュール化と役割分担 （コンポーネント化）
40. 40. UIのモジュール化
41. 41. カードパターン1
42. 42. カードパターン2
43. 43. カードごとで 作った場合は… やっぱ、ユーザアイコンは 四角形にしてー！ 1枚 2枚 3枚 あ、カードのパターン、 5つ抜けてたわ！
44. 44. モジュール化しておくと… はい、次！ 1回の修正ですべてに反映される
45. 45. Xcodeでスライスの設定して Githubでpush! 小さく作って 使い回す！ ちくちく Xcode上の画像を入れておくところは デザイナーしか触らないという運用ルール
46. 46. Plugin measure-master エンジニアさんに伝える情報を簡単に書き込んでくれる。 pixelだけじゃなくてdpでの表記も可能！
47. 47. レイアウト指示書 Google Drive ローカルファイルのやりとりをしない。 いつでも最新情報
48. 48. ということを 今までやっていたんですが、、、 7月20日の朝、 レイアウト指示書をちくちくと 作成しなくてよい 便利なツールを見つけました！
49. 49. レイアウト指示書の作成が 不要になるツール Zeplin https://zeplin.io/ ほんとに 昨日 発見しました
50. 50. SketchからZeplinへ アートボードをExportするだけで…
51. 51. 要素のサイズや位置関係を計算してくれたり
52. 52. コメントを書き込んだりできる！
53. 53. Android用プロジェクトは単位がdpに！
54. 54. Color Paletteを作成でき、 Color Resourceをテキスト生成してくれる！ for Android
55. 55. もちろん、 Objective-C, Swiftにも対応してます。 for iOS
56. 56. Zeplin https://zeplin.io/
57. 57. Zeplinについては、 昨日みつけたばっかりで どっぷり使い込んでみていないので、 後日ブログに詳しく書きます。
58. 58. インタラクションを デザインするツール pixate Form エンジニアさんにインタラクションを伝えられる が！少々使い方が難しい。。。
59. 59. まとめ 作業ではなく、UI設計に集中しよう
 適したツールを使うと作業時間が大幅に短縮でき、
 いろんなアイデアを試しやすい。 全体を俯かんしてUIを設計しよう
 Sketch+Prottを活用すると、アプリ全体を立体的 に設計しやすくなる。 最低限の技術的知識を持とう
 プログラマとデザイナーはお互いの仕事を知り合おう。 そうすることにより、さらによりよいアプリが生まれると思う。 

60. 60. Sketch3 is amazing!! http://gomaapps.blogspot.jp Sketchでアプリのデザインをするための 考え方やヒントをブログに書いております。 +AsamiYamamoto