Contenu connexe
Similaire à 人と向き合うプロトタイピング (20)
人と向き合うプロトタイピング
- 2. 自己紹介 | Profile @KAYAC inc.
割石 裕太
Yuta Wariishi
KAYAC inc. | Art Director / UI Designer
- 3. 自己紹介 | Profile @OH
@wariemon
OH | Personal Design Project
http://wariemon.com | ohmake.it@gmail.com
- 36. 1. 企画の理解 ¦ ユーザーのゴールを明確にする
ユーザーのゴールを明確にする
ゴールにつながっているか
抵抗はないか
- 38. 1. 企画の理解 ¦ ユーザーのゴールを明確にする
本当にそのユーザーのために
なっている企画ですか?
- 39. 1. 企画の理解 ¦ ユーザーのゴールを明確にする
ユーザーの目的「体験のゴール」
はどこになるかを明確にしましょう。
- 40. 1. 企画の理解 ¦ ユーザーのゴールを明確にする
Lobiの大方針としてのゴール
「ゲームを通じて人と繋がる」
- 41. 1. 企画の理解 ¦ ユーザーのゴールを明確にする
これをブレイクダウンすると、
・ユーザーがオープンなコミュニティでチャットする
・ユーザー同士が興味を持ち、フォローし合う
・ユーザーがプライベートチャットで話し合う…
- 42. 1. 企画の理解 ¦ ユーザーのゴールを明確にする
…など、どんどん明確なゴールが
見えてきます。
- 43. 1. 企画の理解 ¦ ユーザーのゴールを明確にする
具体的なゴールであればあるほど
具体的なアクションがとれます。
- 44. 1. 企画の叩き ¦ ゴールにつながっているか
ユーザーのゴールを設定する
ゴールにつながっているか
抵抗はないか
- 45. 1. 企画の理解 ¦ ゴールにつながっているか
ゴールを設定したら、次は企画が
ゴールにつながっているかを見直します。
- 46. 1. 企画の理解 ¦ ゴールにつながっているか
企画時点で、ゴールにつながらない
開発・改修がないかを確認していきます。
- 47. 1. 企画の理解 ¦ ゴールにつながっているか
実作業に入り出す前に、
不必要な部分を削ぎ落とすことで、
- 48. 1. 企画の理解 ¦ ゴールにつながっているか
作業の無駄、認識のズレ、使いずらくなる、
などの無駄を省くことができます。
- 50. 1. 企画の理解 ¦ 抵抗はないか
リニューアルや改善では、
大きく分けて2種類のユーザーがいます。
- 51. 1. 企画の理解 ¦ 抵抗はないか
新規ユーザー 既存ユーザー
リニューアルレベルの大きな企画では
- 52. 1. 企画の理解 ¦ 抵抗はないか
新規ユーザー 既存ユーザー
新規ユーザー向けの企画が多いと思います。
- 53. 1. 企画の理解 ¦ 抵抗はないか
それを意識した上で、大事なのは、
そのもう一方のユーザーのこと。
- 55. 1. 企画の理解 ¦ 抵抗はないか
企画の意図とは別に、今まで通りの
機能が問題なく使えるか?
- 57. 1. 企画の理解 ¦ 抵抗はないか
UIの設計に着手する前に、
この点を見過ごしてしまうと、
- 58. 1. 企画の理解 ¦ 抵抗はないか
大きく修正、場合によっては
企画の根本からの見直しになります。
- 95. 2. 遷移図 ¦ 利点その1 : 頭の中の整理 と 現状把握
利点 その1
頭の中の整理 と 現状把握
- 96. 2. 遷移図 ¦ 利点その1 : 頭の中の整理 と 現状把握
いきなりデザインを起こすと、
要素やページの抜け漏れ、
- 97. 2. 遷移図 ¦ 利点その1 : 頭の中の整理 と 現状把握
現状把握が不十分なまま、
デザインを追加することになりがち。
- 98. 2. 遷移図 ¦ 利点その1 : 頭の中の整理 と 現状把握
デザインを捨てたり、
更新を繰り返すのはすごいコスト。
- 99. 2. 遷移図 ¦ 利点その1 : 頭の中の整理 と 現状把握
遷移図を書くと
頭の中の整理 と 現状把握 ができます。
- 100. 2. 遷移図 ¦ 利点その1 : 頭の中の整理 と 現状把握
ページ名だけではなく
その中の要素も書くのが大事。
- 101. t
2. 遷移図 ¦ 利点その1 : 頭の中の整理 と 現状把握
Mindmeister
https://www.mindmeister.com
おすすめのツール
- 102. 2. 遷移図 ¦ 利点その2 : 行き止まりとエラーの発見
利点 その2
行き止まりとエラーの発見
- 103. 2. 遷移図 ¦ 利点その2 : 行き止まりとエラーの発見
単純に画面遷移をまとめるだけでも
便利なのですが、
- 104. 2. 遷移図 ¦ 利点その2 : 行き止まりとエラーの発見
その他にも、0件表示やエラーなど
行き止まりの存在を把握できることが
- 105. 2. 遷移図 ¦ 利点その2 : 行き止まりとエラーの発見
遷移図がもたらす最たるもの
だと考えています。
- 106. 2. 遷移図 ¦ 利点その2 : 行き止まりとエラーの発見
ユーザーの目線に立って、
行き止まりを見つけたとき、
- 107. 2. 遷移図 ¦ 利点その2 : 行き止まりとエラーの発見
どんな提案があれば、気持ち良く
サービスを体験できるか。
- 108. 2. 遷移図 ¦ 利点その2 : 行き止まりとエラーの発見
要件以上の +αの部分まで
考える土台が出来上がります。
- 109. 2. 遷移図 ¦ まとめ
利点 その1
頭の中の整理 と 現状把握
利点 その2
行き止まりとエラーの発見
- 114. t
3. ラフデザイン ¦ Sketch の利点その1 : データ・挙動の軽さ
利点その1 :
データ・挙動の軽さ
iOS-templete.sketch
655 KB
- 115. t
3. ラフデザイン ¦ Sketch の利点その1 : データ・挙動の軽さ
画像をいれれば重くなるのはPhotoshop
などと同じですが、
iOS-templete.sketch
655 KB
- 116. t
3. ラフデザイン ¦ Sketch の利点その1 : データ・挙動の軽さ
基本的なファイルサイズが圧倒的に違います!
そして挙動も軽い。
iOS-templete.sketch
655 KB
- 117. t
3. ラフデザイン ¦ Sketch の利点その2 : 画面を並べて作業できる
利点その2 :
画面を並べて作業ができる
ArtBoard
- 118. t
3. ラフデザイン ¦ Sketch の利点その2 : 画面を並べて作業できる
ページ数・パターン出しが多くなりがちな
UIデザインにはこの機能、うってつけなのです。
ArtBoard
- 119. t
3. ラフデザイン ¦ Sketch の利点その3 : 素材書き出しが簡単
利点その3 :
素材書き出しが簡単
Output
- 120. t
3. ラフデザイン ¦ Sketch の利点その3 : 素材書き出しが簡単
@2x, @3xなども簡単に書き出せるほか、
レイヤーをドラッグ&ドロップで書き出せます!
Output
- 121. 3. ラフデザイン ¦ Sketch まとめ
利点その3 :
素材書き出しが簡単
利点その2 :
画面を並べて作業ができる
利点その1 :
データ・挙動の軽さ
- 123. 3. ラフデザイン ¦ Sketch まとめ
ベクターツールも使い勝手は やはりIllustrator
.sketch というオリジナルの拡張子
ウォークスルーなど作り込みは やはりPhotoshop
Photoshop使い泣かせのショートカット
- 124. 3. ラフデザイン ¦ Sketch まとめ
それでも挑戦してみてほしい
魅惑のデザインツールです!
- 129. 4. Prott チェック ¦ 利点その1 : オーガナイゼーション機能
KAYAC ではクライアントワークなども含めて
多数のアプリ制作が行われています。
- 130. 4. Prott チェック ¦ 利点その1 : オーガナイゼーション機能
オーガナイゼーションで共有されたプロジェクトは
社内のデザイナーなら誰でも、チェックできます!
- 131. 4. Prott チェック ¦ 利点その1 : オーガナイゼーション機能
これで簡単にデザインチームでの
UIレビューや、進行の確認などができます。
- 132. 4. Prott チェック ¦ 利点その2 : iOSアプリでネイティブのような快適さ
利点その2 :
iOSアプリでネイティブのような快適さ
t
- 135. 5. 作り込む ¦ ツールの使い分け
ウォークスルー(チュートリアル)
ストアのスクリーンショットなど作り込み要素
t
Adobe Photoshop
- 136. 5. 作り込む ¦ ツールの使い分け
t
Adobe Illustrator
アイコンやベクターデータで製作するものは、
スピード優先で Illustrator を使用
- 137. t
5. 作り込む ¦ ツールの使い分け
Sketch
Sketchを基軸に適したツールを使いつつ、
画面を作りこんでいきます。
- 139. 1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック
ペーパー
プロトタイピング
50% 40% 10%
人と向き合うプロトタイピング ¦ まとめ
表面のインタラクションや、
ビジュアルデザインなどの見た目に、
- 140. 1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック
ペーパー
プロトタイピング
50% 40% 10%
人と向き合うプロトタイピング ¦ まとめ
目が向きがちですが、
- 141. 1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック
ペーパー
プロトタイピング
50% 40% 10%
人と向き合うプロトタイピング ¦ まとめ
インターフェース・サービスは
人と向き合うもの。
- 142. 1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック
ペーパー
プロトタイピング
50% 40% 10%
人と向き合うプロトタイピング ¦ まとめ
企画自体が本当にユーザーのため
になっているか。
- 143. 1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック
ペーパー
プロトタイピング
50% 40% 10%
人と向き合うプロトタイピング ¦ まとめ
もっと歩み寄った設計や、
アイデアを盛り込めないか。
- 144. 1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック
ペーパー
プロトタイピング
50% 40% 10%
人と向き合うプロトタイピング ¦ まとめ
自分自身に嘘をつかず、
チーム全員の理解を深めながら
ユーザーと向き合って開発をする。
- 145. 1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック
ペーパー
プロトタイピング
50% 40% 10%
人と向き合うプロトタイピング ¦ まとめ
プロトタイピングは
「人と向き合う」ためにある。