Embed Size (px)
Citation preview
ProttとSketchと�Zeplinのススメ
山本麻美�
山本麻美
1997年からフリーランス�Web制作、ケータイサイト制作など
2010年�Androidの会に行ったことがきっかけでアプリのUIデザインに特化。
2015年�グッドパッチ入社Prottの2代目デザイナー
2015こうしたいとおもいはじめる
つまり、こうしたかった
企画
デザインエンジニア�リング
企画
デザインエンジニア�リング
2014年10月�（Prottリリース直後）
某社長
使おうよ！なにこれ�すごい！！
超楽しいんですけどー
専門学校、高校の授業で
使おう！
いいですね、これ！�我が社も導入しよう！
クライアント先で、Facebookで
必須です！
Prott1周年記念イベント
ActiveUser賞を�授与する
わーい！！
グッドパッチ�土屋社長
グッドパッチの門を叩いたら
Prott�作って！
○♪※△#�！！え！！
グッドパッチ�土屋社長
2015年12月グッドパッチ入社
Prottの2代目デザイナーとして働きはじめる
今日のおはなし
•Prott:なぜプロトタイピングが必要なのか�
• Sketch:なぜアプリのデザインにSketchが向いているのか�
•Zepelin:もうレイアウト指示書を作らなくてよいのです�
• おまけ:マテリアルデザインとの向き合い方の一例
Prottなぜプロトタイピングが必要なのか
Webページの場合
情報の閲覧が主な目的
アプリやWebツールの場合
多くのアクションが発生する”ツール”
スワイプ
ドラッグ
ジェスチャ
ワイヤーフレーム+遷移図では、�気づけない&伝わらないことが多い！
UserInterface
システムデバイス人
処理結果を�視覚的に表すのが�
お役目
Prottにはプロトタイプ（試作品）�を作るための機能がたくさんある
Prottを使って�実際に動かしてみて検証する
使いにくいね�これじゃ！
そうだね�変えよう！
プロトタイピングのメリット
•遷移や、要素の確認ができるワイヤーフレームを見てもイメージできないクライアントさんだとちょっと大変だったりする�
• 常に完成イメージをチーム内で統一できるワイヤーフレームのでやめてしまわず、ビジュアルデザインに進んでもProttを使って共有すると尚良し�
• 早い段階でたくさん失敗するアプリが出来上がってから直すのはとても大変だしコストかかる
プロトタイピングの注意点
• プロトタイプを作ることに夢中になりすぎない完成させるべきはアプリであって、プロトタイプではない。 少々きたなくてもいいからどんどんさくさくアイデアを共有する。�
• プロトタイプと完成品はイコールではないことを認識するたとえばiOSでは5と6でテキストの表示サイズが違う。Androidでは画像の処理が遅く思っていた挙動にならない。�
•必要に応じてツールを使い分けるプロトタイプとひとくちに言うが、用途に応じた種類がある
全体を設計する
“動き”を設計する
Prott Marvel Invision Flinto
Pixate Form
今後登場してくる�プロトタイピングツール
Adobecomet Silver
ところでプロトタイプは�誰が作るの？
常にデザイナー チームの主軸の人× ○
アプリで 手書きスケッチをアプリで�撮影&取り込み
Webで ワイヤーフレーム作成機能
豊富なUIパーツ
SketchからProttへ直接Export!!
Sketchで ProttSketchプラグイン
誰でも素早くアイデアを共有できる
エンジニア�とか
ディレクター�とか
デザイナー�とか
ちょっとした余談
ダイアログ画面て、地味にいっぱいあって、作るのめんどくさいです。�
でも、無いと困りますよね。
ここを押す
※画面の画像は、AndroidLUIKitSketchResourceを使っています�http://www.sketchappsources.com/free-source/659-android-l-ui-kit-sketch-freebie-resource.html
次に�ここを押す
パーツを�ドラッグする
テキストを�変更する
ぱぱっとダイアログが作れる！
※Sketchでいちいち作らなくてよいかも
当然、iOS用のパーツもあります
がんがん&すばやく試せる
これならプロトタイプを�作ることが目的みたく�ならないね
ちゃっちゃか作って�どんどん試そう！！
Sketchなぜアプリのデザインに�Sketchが向いているのか
StyleとSymbol
UIパーツをコンポーネントとして�デザインすることに適している
コンポーネント化しておく！
UIパーツの一括修正
エクスポート
iOS用のassets書き出しがラク
※Android版はZeplinからエクスポートするとラク！
Skechのexport
• 複数要素に対する一括スライス設定ができる�
• 背景（写真や図形など）を含めず、アイコンなど必要な要素だけを背景透過でexportすることができる�
• iOSアプリに必要な等倍、2倍、3倍の3種類のサイズのassetsを一回でexportすることができ、ファイル名の末尾に”@2x”,“@3x”を自動的に付与してくれる
プラグイン
Contentgenerator
ダミーの写真やテキストを生成してくれる�人名、長文テキスト、電話番号、住所もある
ProttSketchplugin
Sketchのアートボードを直接Prottへエクスポート
ProttSketchPlugin
Sketch Prott
その他おすすめプラグイン
• Sketchmeasure�
• CRAFT�
• DynamicButton
SketchAppSources
Sketchのプラグインや�テンプレート集
Zeplin連携
テキスト問題解決した！！！
これまでのSketch
このへんな余白に�苦しめられ続けてきましたよね
当然Zeplinにそのまま�exportされる
このへんな余白に�苦しめられ続けてきましたよね
しかたがないので
テキスト用のガイドを書いていました
Sketch3.6
ぴ、ぴったりだ！！！
当然Zeplinにそのまま�exportされる
なくなってる！！！！！
Zeppelinもうレイアウト指示書を�作らなくてよいのです
UIの実装にはこういう情報が必要です
要素のサイズや位置関係を計算してくれたり
コメントを書き込んだりできる！
Android用プロジェクトは単位がdpに！
解像度を選択できる
Zeplinからassetsのexportができる。�（特にAndroid用assets書き出しが便利）
ColorPaletteを作成でき、�ColorResourceのxmlを生成してくれる！
for�Android
iOS用プロジェクトの場合は�Objective-C,Swift用になっている。
for�iOS
某エンジニアさん曰く、�
「このコードの書き方いまいち」�
だそうなので、ご注意ください！
おまけマテリアルデザインとの�向き合い方の一例
マテリアルデザインを�ガイドラインとしてではなく、�フレームワークとして捉える
さらには無料の�高機能テンプレートと�捉えてみる
リリースしないとスタートできない
サービス�概要
チーム�ビルディング
リサーチ 資金調達
プロモーション 戦略プロダクト�制作
etc.
少人数スタートアップでは�アプリUIのことばっかり�考えているわけにいかない。
一番大事なのはUIでなく�コンテンツの質だ
ああ�しよう
こう�しよう そう�
しよう
ひととおり揃ってる！�アイコンもある！！�しかも無料だ！！！
マテリアルデザインサイト通りに�SketchでUIコンポーネントを作り、
組み合わせてどんどんアプリ作る
小さく産んで
UX�
UI
UX�
大きく育てる
UX�
UI
こうじゃなくて こうなるとおもうよ！
UI
ユーザーテストをしたり、�分析したりして、じっくりUIを考える
更に�ああしよう
更に�こうしよう 更に�
そうしよう
無理してゼロからUIデザインを�うんうんがんばらなくても�ちゃんと一定以上の�
クオリティを担保できます。�どうぞ安心してコンテンツ磨きに�
没頭してください。
と、解釈してみるのはどうでしょうか
• Prott:動くものを作ってトライ&エラーをすばやく繰り返すチームメンバーの認識統一�
• Sketch:ビジュアルデザインのトライ&エラーがとても容易�
•Zepelin:もうレイアウト指示書を作らなくてよいのです�
• MaterialDesign:テンプレートとして捉えてみるとリソース不足を解消できる
まとめ
面倒な作業はツールに任せて、
作業作業
作業 ああ�しよう
こう�しよう
そう�しよう
試行錯誤する時間を増やそう！
