ABC2016Springでの講演資料

1. ProttとSketchと
Zeplinのススメ
山本麻美

2. 山本麻美
1997年からフリーランス
Web制作、ケータイサイト制作など
2010年
Androidの会に行ったことがきっかけでアプリの
UIデザインに特化。
2015年
グッドパッチ入社 Prottの2代目デザイナー

3. 2015 こうしたいとおもいはじめる

4. つまり、こうしたかった
企画
デザイン
エンジニア
リング
企画
デザイン エンジニア
リング

5. 2014年10月
（Prottリリース直後）
某社長
使おうよ！
なにこれ
すごい！！

6. 超楽しいんですけどー
専門学校、高校の授業で
使おう！

7. いいですね、これ！
我が社も導入しよう！
クライアント先で、Facebookで
必須です！

8. Prott 1周年記念イベント
Active
User賞を
授与する
わーい！！
グッドパッチ
土屋社長

9. グッドパッチの門を叩いたら
Prott
作って！
○♪※△#
！！え！！
グッドパッチ
土屋社長

10. 2015年12月 グッドパッチ入社
Prottの2代目デザイナーとして働きはじめる

11. 今日のおはなし
•Prott :
なぜプロトタイピングが必要なのか
• Sketch :
なぜアプリのデザインにSketchが向いているのか
• Zepelin :
もうレイアウト指示書を作らなくてよいのです
• おまけ : マテリアルデザインとの向き合い方の一例

12. Prott
なぜプロトタイピングが必要なのか

13. Webページの場合
情報の閲覧が主な目的

14. アプリやWebツールの場合
多くのアクションが発生する”ツール”

15. スワイプ

16. ドラッグ

17. ジェスチャ

18. ワイヤーフレーム+遷移図では、
気づけない伝わらないことが多い！

19. User Interface
システムデバイス人
処理結果を
視覚的に表すのが
お役目

20. Prottにはプロトタイプ（試作品）
を作るための機能がたくさんある

21. Prottを使って
実際に動かしてみて検証する
使いにくいね
これじゃ！
そうだね
変えよう！

22. プロトタイピングのメリット
• 遷移や、要素の確認ができる
ワイヤーフレームを見てもイメージできないクライアントさんだと
ちょっと大変だったりする
• 常に完成イメージをチーム内で統一できる
ワイヤーフレームのでやめてしまわず、ビジュアルデザインに
進んでもProttを使って共有すると尚良し
• 早い段階でたくさん失敗する
アプリが出来上がってから直すのはとても大変だしコストかかる

23. プロトタイピングの注意点
• プロトタイプを作ることに夢中になりすぎない
完成させるべきはアプリであって、プロトタイプではない。
少々きたなくてもいいからどんどんさくさくアイデアを共有する。
• プロトタイプと完成品はイコールではないことを
認識する
たとえばiOSでは5と6でテキストの表示サイズが違う。
Androidでは画像の処理が遅く思っていた挙動にならない。
• 必要に応じてツールを使い分ける
プロトタイプとひとくちに言うが、用途に応じた種類がある

24. 全体を設計する
“動き”を設計する
Prott Marvel Invision Flinto
Pixate Form

25. 今後登場してくる
プロトタイピングツール
Adobe comet Silver

26. ところでプロトタイプは
誰が作るの？
常にデザイナー チームの主軸の人
× ○

27. アプリで 手書きスケッチをアプリで
撮影取り込み

28. Webで ワイヤーフレーム作成機能

29. 豊富なUIパーツ

30. SketchからProttへ直接Export!!
Sketchで Prott Sketchプラグイン

31. 誰でも素早くアイデアを共有できる
エンジニア
とか
ディレクター
とか
デザイナー
とか

32. ちょっとした余談
ダイアログ画面て、
地味にいっぱいあって、
作るのめんどくさいです。
でも、無いと困りますよね。

33. ここを押す
※画面の画像は、Android L UI Kit Sketch Resource を使っています
http://www.sketchappsources.com/free-source/659-android-l-ui-kit-sketch-freebie-resource.html

34. 次に
ここを押す

35. パーツを
ドラッグする
テキストを
変更する

36. ぱぱっとダイアログが作れる！
※Sketchでいちいち作らなくてよいかも

37. 当然、iOS用のパーツもあります

38. がんがんすばやく試せる
これならプロトタイプを
作ることが目的みたく
ならないね
ちゃっちゃか作って
どんどん試そう！！

39. Sketch
なぜアプリのデザインに
Sketchが向いているのか

40. StyleとSymbol

41. UIパーツをコンポーネントとして
デザインすることに適している

42. コンポーネント化しておく！

43. UIパーツの一括修正

44. エクスポート

45. iOS用のassets書き出しがラク
※Android版はZeplinからエクスポートするとラク！

46. Skechのexport
• 複数要素に対する一括スライス設定ができる
• 背景（写真や図形など）を含めず、アイコンなど必要
な要素だけを背景透過でexportすることができる
• iOSアプリに必要な等倍、2倍、3倍の3種類の
サイズのassetsを一回でexportすることができ、
ファイル名の末尾に”@2x” , “@3x” を自動的
に付与してくれる

47. exportについての説明動画
https://www.sketchapp.com/learn/

48. プラグイン

49. Content generator
ダミーの写真やテキストを生成してくれる
人名、長文テキスト、電話番号、住所もある

50. Prott Sketch plugin
Sketchのアートボードを直接Prottへエクスポート

51. Prott Sketch Plugin
Sketch Prott

52. その他おすすめプラグイン
• Sketch measure
• CRAFT
• Dynamic Button
Sketch App Sources
Sketchのプラグインや
テンプレート集

53. Zeplin連携

54. レイアウト指示書の作成が
不要になるツール
Zeplin
https://zeplin.io/

55. テキスト問題解決した！！！

56. これまでのSketch
このへんな余白に
苦しめられ続けてきましたよね

57. 当然Zeplinにそのまま
exportされる
このへんな余白に
苦しめられ続けてきましたよね

58. しかたがないので
テキスト用のガイドを書いていました

59. Sketch3.6
ぴ、ぴったりだ！！！

60. 当然Zeplinにそのまま
exportされる
なくなってる！！！！！

61. Zeppelin
もうレイアウト指示書を
作らなくてよいのです

62. UIの実装にはこういう情報が必要です

63. Sketchデータから
レイアウト指示書を作成してくれる
Zeplin
https://zeplin.io/

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

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

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

67. 解像度を選択できる

68. Zeplinからassetsのexportができる。
（特にAndroid用assets書き出しが便利）

69. Color Paletteを作成でき、
Color Resourceのxmlを生成してくれる！
for
Android

70. iOS用プロジェクトの場合は
Objective-C, Swift用になっている。
for
iOS

71. 某エンジニアさん曰く、
「このコードの書き方いまいち」
だそうなので、ご注意ください！

72. おまけ
マテリアルデザインとの
向き合い方の一例

73. マテリアルデザインを
ガイドラインとしてではなく、
フレームワークとして捉える
さらには無料の
高機能テンプレートと
捉えてみる

74. リリースしないとスタートできない
サービス
概要
チーム
ビルディング
リサーチ 資金調達
プロモーション 戦略 プロダクト
制作
etc.
少人数スタートアップでは
アプリUIのことばっかり
考えているわけにいかない。

75. 一番大事なのはUIでなく
コンテンツの質だ
ああ
しよう
こう
しよう そう
しよう

77. ひととおり揃ってる！
アイコンもある！！
しかも無料だ！！！

78. マテリアルデザインサイト通りに
SketchでUIコンポーネントを作り、

79. 組み合わせてどんどんアプリ作る

80. 小さく産んで
UX
UI

81. UX
大きく育てる
UX
UI
こうじゃなくて こうなるとおもうよ！
UI

82. ユーザーテストをしたり、
分析したりして、じっくりUIを考える
更に
ああしよう
更に
こうしよう 更に
そうしよう

83. 無理してゼロからUIデザインを
うんうんがんばらなくても
ちゃんと一定以上の
クオリティを担保できます。
どうぞ安心してコンテンツ磨きに
没頭してください。
と、解釈してみるのはどうでしょうか

84. • Prott :
動くものを作ってトライエラーをすばやく繰り返す
チームメンバーの認識統一
• Sketch :
ビジュアルデザインのトライエラーがとても容易
• Zepelin :
もうレイアウト指示書を作らなくてよいのです
• Material Design :
テンプレートとして捉えてみるとリソース不足を解消できる
まとめ

85. 面倒な作業はツールに任せて、
作業
作業
作業 ああ
しよう
こう
しよう
そう
しよう
試行錯誤する時間を増やそう！