UI Crunch 03 『プロトタイピングの助走と飛躍』
Click here to load reader
-
Upload
ryo-yoshitake -
Category
Design
-
view
7.240 -
download
1
Transcript of UI Crunch 03 『プロトタイピングの助走と飛躍』
![Page 1: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/1.jpg)
UI Crunch #3
プロトタイピングの助走と飛躍
![Page 3: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/3.jpg)
いま話してる人について
吉竹 遼@ryo_pan
2011年~2014年10月までフェンリル株式会社で受託
開発に従事。2014年10月からStandard Incに参画。
![Page 4: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/4.jpg)
![Page 5: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/5.jpg)
プロトタイピングと聞いて
何を思い浮かべますか?
![Page 6: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/6.jpg)
プロトタイピングは
ツールだけで終わらないし
できるものではない
![Page 7: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/7.jpg)
プロトタイピング = 試行錯誤と捉えてみる。
![Page 8: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/8.jpg)
試 行 錯 誤Prototype
Prototyping
![Page 9: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/9.jpg)
プロトタイピングの助走いま
![Page 10: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/10.jpg)
スケジューリング実装
企画提案ビジュアル
アイデア出しユーザーテスト
要件定義設計
![Page 11: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/11.jpg)
スケジューリングの試行錯誤
• プロトタイピングを取り入れたことはあるか
• エンジニアや営業と連携は取れているか
• 修正やテスト準備の期間は考慮しているか
![Page 12: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/12.jpg)
企画提案 の試行錯誤
• リーンキャンバス
• KPI、KGIの設定
• プロモーション施策など
![Page 13: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/13.jpg)
アイデア出しの試行錯誤
• リサーチ
• 紙ベースのスケッチを繰り返しやる
• ペーパープロトタイピングは必要に応じて
![Page 14: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/14.jpg)
要件定義 の試行錯誤
• デザイナーだけが独走している部分はないか
• 認識に齟齬はないか
• プロトタイプベースで話は進められそうか
![Page 15: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/15.jpg)
設計 の試行錯誤
• ユーザビリティやインタラクションの考慮
• 自分の中で仮説をちゃんと立てられているか
• 体験の統一感は保たれているか
![Page 16: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/16.jpg)
ユーザーテストの試行錯誤
• 仮説が検証できるテスト設計か
• デザインデータは柔軟に対応できているか
• テストを通じてヒントを見つけられるか
![Page 17: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/17.jpg)
ビジュアル
• 世界観は設定できているか
• 言葉使いやアイコンは共感を呼べそうか
• 編集や実装を想定したデザインデータの作成
の試行錯誤
![Page 18: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/18.jpg)
実装 の試行錯誤
• エンジニアと正しく意思疎通できているか
• アニメーションを伴った実装
• レイアウト仕様は伝わりやすく直しやすいか
![Page 19: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/19.jpg)
勇気を持って試行錯誤しよう
• 早い段階で周りと共有する
• 捨てる勇気と変えない勇気
• 言いなりになれというわけではない
![Page 20: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/20.jpg)
助走、めっちゃ走ってる
障害物競争かってくらい範囲が多岐。これら全部
をマスターして実践するのは大変だけど
意識せざるを得ない時代にはなるし、瞬時に多く
の物事を判断する力が求められている。が、もちろん1人で全部やろうとする必要はない
![Page 21: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/21.jpg)
スケジューリング実装
企画提案ビジュアル
アイデア出しユーザーテスト
要件定義設計
![Page 22: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/22.jpg)
点線(なんとなくやる)ではなく
実線(考え実行し続ける)の
プロトタイピングを心がける
![Page 23: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/23.jpg)
プロトタイピングの飛躍これから
![Page 24: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/24.jpg)
これからの時代、
求められるプロトタイピングとは試行錯誤
![Page 25: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/25.jpg)
少し話は飛躍します
![Page 26: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/26.jpg)
そもそも、私たちは
何をデザインしているのか?
![Page 27: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/27.jpg)
というか、“私たち”って?
![Page 28: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/28.jpg)
Web
スマホアプリ
Webデザイナー
UIデザイナー
![Page 29: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/29.jpg)
Web
スマホアプリ
Webデザイナー
UIデザイナー
![Page 30: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/30.jpg)
私たちがデザインしているもの
体験・物語
![Page 31: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/31.jpg)
Webやアプリケーションは、
あくまで体験や物語を伝えるための
インターフェイスのひとつに過ぎない
![Page 32: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/32.jpg)
![Page 33: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/33.jpg)
「プロトタイピング」が広範囲に及んだ際に
基点となりそうな考え方は何か。
![Page 34: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/34.jpg)
人に寄り添う体験や物語を届けるために、
人への興味を持ち続けること
![Page 35: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/35.jpg)
自分は人間だし、あなたも人間で、
この世界で生きているということを
忘れずにい続けることが、
これからの時代を考えるデザイナー、
プロトタイピングに求められている
ことなのではないでしょうか。
![Page 36: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/36.jpg)
われわれが、「ユーザ」や「顧客」を理解するためには、彼らが自分たちと変わらない人間であり、同じように日常的に暗黙の境界や区分をまたいでいることを覚えておく必要がある。(中略)
人は一貫性がなく、めったにはっきりと物を言わないし、社会的、文化的な境界を思いがけないやり方で越えようとする。 人を理解するための第一歩は、現実に即して人を
見ることだ。(第3章「人間を理解する新しい方法」より)
“
”
![Page 37: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/37.jpg)
まとめ
• 試行錯誤し続けよう
• 勇気を持ち続けよう
• 人間への興味を失わずにい続けよう
![Page 38: UI Crunch 03 『プロトタイピングの助走と飛躍』](https://reader037.fdocuments.net/reader037/viewer/2022100300/55a92be61a28ab7e3e8b469e/html5/thumbnails/38.jpg)
ありがとうございました。