人と向き合うプロトタイピング

人と向き合うプロトタイピング

• 1.
  Speaker No.01 /KAYAC inc. 割石 裕太 Yuta Wariishi 達人たちから学ぶ。実践！プロトタイピング
• 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
• 4.
  つくっているもの | Lobi-Chat & Game Community-
• 5.
  つくっているもの | Lobi-Chat & Game Community-
• 6.
  つくっているもの | Lobi-Chat & Game Community-
• 7.
  つくっているもの | FILTERSapp
• 8.
  つくっているもの | FILTERSapp
• 9.
  つくっているもの | FILTERSapp
• 10.
  前段 ¦ プロトタイピングをなぜするのか amanatech night Vol.2 のテーマ プロトタイピング
• 11.
  前段 ¦ プロトタイピングをなぜするのか みなさんは、何のために プロトタイピングをしてますか？
• 12.
  前段 ¦ プロトタイピングをなぜするのか ぼくは、 「人と向き合う」ために プロトタイピングはあると考えています。
• 13.
  前段 ¦ プロトタイピングをなぜするのか まずは当然、ユーザーと向き合うためです。 ユーザー
• 14.
  前段 ¦ プロトタイピングをなぜするのか ユーザー ユーザーにとって必要な企画か？ ユーザーにとって使いやすいものであるか？
• 15.
  前段 ¦ プロトタイピングをなぜするのか 常にユーザーのことを考えて制作する ためにも、プロトタイピングは有効です。 ユーザー
• 16.
  前段 ¦ プロトタイピングをなぜするのか 制作チーム そして、チームと向き合うためでもあります。 ユーザー
• 17.
  前段 ¦ プロトタイピングをなぜするのか 制作チームでお互いの認識のズレをなくすため、 効率のよい無駄のない開発を行うため、 制作チームユーザー
• 18.
  前段 ¦ プロトタイピングをなぜするのか プロトタイピングは、チームが気持ちよく開発 するためにも有効な手段なのです。 制作チームユーザー
• 19.
  前段 ¦ プロトタイピングをなぜするのか 自分 そして、忘れがちなのが、 自分と向き合うためでもあるということです。 制作チームユーザー
• 20.
  前段 ¦ プロトタイピングをなぜするのか 今作ろうとしているものは、本当にベストか？ 全てにおいて自分は説明できるか？ 自分制作チームユーザー
• 21.
  前段 ¦ プロトタイピングをなぜするのか 自分自信に嘘をつかない、自分をごまかさない。 自分と向き合うためにも有効なのです。 自分制作チームユーザー
• 22.
  前段 ¦ プロトタイピングをなぜするのか ということで、ここから本編となります！ 自分制作チームユーザー
• 23.
  人と向き合う プロトタイピング
• 24.
  人と向き合うプロトタイピング 1. 企画の理解 2.遷移図 3. ラフデザイン 4. Prott チェック 5. 作り込む ペーパー プロトタイピング
• 25.
  人と向き合うプロトタイピング 1. 企画の理解 5.3.2.4. Prott ペーパー プロトタイピング 50% 重要度
• 26.
  人と向き合うプロトタイピング 1. 企画の理解 5.3.2.遷移図 4. Prott ペーパー プロトタイピング 50 40% 重要度 重要度
• 27.
  人と向き合うプロトタイピング 1. 企画の理解 5.作り込む3. ラフデザイン2. 4. Prott チェック ペーパー プロトタイピング 50 40 10% 重要度 重要度 重要度
• 28.
  人と向き合うプロトタイピング 1. 企画の理解 5.作り込む3. ラフデザイン2. 遷移図 4. Prott チェック ペーパー プロトタイピング 50% 40% 10% 重要度 重要度 重要度
• 29.
  1. 企画の理解 1. 企画の理解5.3.2. 4. Prott ペーパー プロトタイピング 50% 40 10 重要度
• 30.
  1. 企画の理解 プロトタイピングというと、
• 31.
  1. 企画の理解 1. 5.3.ラフデザイン2. 遷移図 4. Prott チェック ペーパープロトタイピング ここの部分のことを指すと思いますが、
• 32.
  1. 企画の理解 1. 企画の理解5.3.2. 4. Prott ペーパープロトタイピング この部分に入る前こそ、 一番大事だと考えています。
• 33.
  1. 企画の理解 実際に着手し始める前に、 見極めておきたい3点があります。
• 34.
  1. 企画の理解 ユーザーのゴールを明確にする ゴールにつながっているか 抵抗はないか
• 35.
  1. 企画の理解 この3点を意識して企画を 見直してみましょう。
• 36.
  1. 企画の理解 ¦ユーザーのゴールを明確にする ユーザーのゴールを明確にする ゴールにつながっているか 抵抗はないか
• 37.
  1. 企画の理解 ¦ユーザーのゴールを明確にする 企画には必ず 対象ユーザー がいます。
• 38.
  1. 企画の理解 ¦ユーザーのゴールを明確にする 本当にそのユーザーのために なっている企画ですか？
• 39.
  1. 企画の理解 ¦ユーザーのゴールを明確にする ユーザーの目的「体験のゴール」 はどこになるかを明確にしましょう。
• 40.
  1. 企画の理解 ¦ユーザーのゴールを明確にする Lobiの大方針としてのゴール 「ゲームを通じて人と繋がる」
• 41.
  1. 企画の理解 ¦ユーザーのゴールを明確にする これをブレイクダウンすると、 ・ユーザーがオープンなコミュニティでチャットする ・ユーザー同士が興味を持ち、フォローし合う ・ユーザーがプライベートチャットで話し合う…
• 42.
  1. 企画の理解 ¦ユーザーのゴールを明確にする …など、どんどん明確なゴールが 見えてきます。
• 43.
  1. 企画の理解 ¦ユーザーのゴールを明確にする 具体的なゴールであればあるほど 具体的なアクションがとれます。
• 44.
  1. 企画の叩き ¦ゴールにつながっているか ユーザーのゴールを設定する ゴールにつながっているか 抵抗はないか
• 45.
  1. 企画の理解 ¦ゴールにつながっているか ゴールを設定したら、次は企画が ゴールにつながっているかを見直します。
• 46.
  1. 企画の理解 ¦ゴールにつながっているか 企画時点で、ゴールにつながらない 開発・改修がないかを確認していきます。
• 47.
  1. 企画の理解 ¦ゴールにつながっているか 実作業に入り出す前に、 不必要な部分を削ぎ落とすことで、
• 48.
  1. 企画の理解 ¦ゴールにつながっているか 作業の無駄、認識のズレ、使いずらくなる、 などの無駄を省くことができます。
• 49.
  ユーザーのゴールを設定する ゴールにつながっているか 抵抗はないか 1. 企画の理解 ¦抵抗はないか
• 50.
  1. 企画の理解 ¦抵抗はないか リニューアルや改善では、 大きく分けて2種類のユーザーがいます。
• 51.
  1. 企画の理解 ¦抵抗はないか 新規ユーザー 既存ユーザー リニューアルレベルの大きな企画では
• 52.
  1. 企画の理解 ¦抵抗はないか 新規ユーザー 既存ユーザー 新規ユーザー向けの企画が多いと思います。
• 53.
  1. 企画の理解 ¦抵抗はないか それを意識した上で、大事なのは、 そのもう一方のユーザーのこと。
• 54.
  1. 企画の理解 ¦抵抗はないか 新しい機能は、 既存のユーザーの機能でもあります。
• 55.
  1. 企画の理解 ¦抵抗はないか 企画の意図とは別に、今まで通りの 機能が問題なく使えるか？ 
• 56.
  1. 企画の理解 ¦抵抗はないか その新しい機能は、 既存ユーザーに抵抗はないか？
• 57.
  1. 企画の理解 ¦抵抗はないか UIの設計に着手する前に、 この点を見過ごしてしまうと、
• 58.
  1. 企画の理解 ¦抵抗はないか 大きく修正、場合によっては 企画の根本からの見直しになります。
• 59.
  1. 企画の理解 ¦抵抗はないか 見過ごしがちですが、 もっとも重要な点です。
• 60.
  1.5. ペーパープロトタイピング 1. 5.3.2.4. Prott ペーパー プロトタイピング 50 40 10
• 61.
  1.5. ペーパープロトタイピング ペーパープロトタイピングは、 チームが大人数の場合に
• 62.
  1.5. ペーパープロトタイピング チームと向き合うために、 最大の効果を発揮します！
• 63.
  1.5. ペーパープロトタイピング ¦利点その1 : 批評モードを避けられる 利点 その1 批評モードを避けられる
• 64.
  1.5. ペーパープロトタイピング ¦利点その1 : 批評モードを避けられる 作りきったデザインを チームレビューにかけると、
• 65.
  1.5. ペーパープロトタイピング ¦利点その1 : 批評モードを避けられる チームメンバー個々のイメージと 違う結果になり、
• 66.
  1.5. ペーパープロトタイピング ¦利点その1 : 批評モードを避けられる きつい議論が起きたり、 巻き戻りが発生したりしますよね。
• 67.
  1.5. ペーパープロトタイピング ¦利点その1 : 批評モードを避けられる 人数が多いチームだと、 その分意見の数も増えます。
• 68.
  1.5. ペーパープロトタイピング ¦利点その1 : 批評モードを避けられる これは「具体的すぎる」 ということが原因だったりします。
• 69.
  1.5. ペーパープロトタイピング ¦利点その1 : 批評モードを避けられる 絵が出来上がった状態だと、 その絵の良し悪しの議論になりがち。
• 70.
  1.5. ペーパープロトタイピング ¦利点その1 : 批評モードを避けられる その絵に至った経緯や考え方より、 絵自体に話が終始しがちです。
• 71.
  1.5. ペーパープロトタイピング ¦利点その1 : 批評モードを避けられる プロトタイピングでは絵の美しさ より、考え方、設計が大事です。
• 72.
  1.5. ペーパープロトタイピング ¦利点その1 : 批評モードを避けられる その絵に至った経緯や考え方より、 絵自体に話が終始しがちです。
• 73.
  1.5. ペーパープロトタイピング ¦利点その1 : 批評モードを避けられる ペーパープロトタイピングは、 いわば骨組みの状態です。
• 74.
  1.5. ペーパープロトタイピング ¦利点その1 : 批評モードを避けられる 修正可能・参加可能なフェーズ なので、批評モードではなく、
• 75.
  1.5. ペーパープロトタイピング ¦利点その1 : 批評モードを避けられる 最小限の工数で、チーム全体に 「考え」を伝えることができます。
• 76.
  1.5. ペーパープロトタイピング ¦利点その1 : 批評モードを避けられる ユーザーのためになるアクションを、 無駄な議論で不意にせず済みます。
• 77.
  1.5. ペーパープロトタイピング ¦利点その2 : 個々のイメージの擦り合わせ 利点 その2 個々のイメージの擦り合わせ
• 78.
  1.5. ペーパープロトタイピング ¦利点その2 : 個々のイメージの擦り合わせ ペーパープロトタイピングでは 職種は関係ありません。
• 79.
  1.5. ペーパープロトタイピング ¦利点その2 : 個々のイメージの擦り合わせ 画面自体の必要性、要素の確認…
• 80.
  1.5. ペーパープロトタイピング ¦利点その2 : 個々のイメージの擦り合わせ エンジニア目線からの挙動や実装 を考慮したアイデアなど、
• 81.
  1.5. ペーパープロトタイピング ¦利点その2 : 個々のイメージの擦り合わせ あとで入りそうな意見も、 先に吸収できるチャンスです。
• 82.
  1.5. ペーパープロトタイピング ¦利点その2 : 個々のイメージの擦り合わせ そしてみんな当事者になったことで 個々の認識を共有でき、
• 83.
  1.5. ペーパープロトタイピング ¦利点その2 : 個々のイメージの擦り合わせ 大人数のチームでも、 イメージのすり合わせを行えます！
• 84.
  1.5. ペーパープロトタイピング ¦まとめ 利点 その1 批評モードを避けられる 利点 その2 個々のイメージの擦り合わせ
• 85.
  1.5. ペーパープロトタイピング ¦まとめ プロトタイピング用ペーパーは、
• 86.
  1.5. ペーパープロトタイピング ¦まとめ ネット上でも簡単にゲットできるので、
• 87.
  1.5. ペーパープロトタイピング ¦まとめ 印刷してつかってみましょう！
• 88.
  2. 遷移図 1. 5.3.2.遷移図 4. Prott ペーパー プロトタイピング 50 40% 10
• 89.
  2. 遷移図 ペーパープロトタイピングは、 プロジェクトが進むにつれ、
• 90.
  2. 遷移図 放置される可能性があるので、 (更新コスト /更新を伝えるのも面倒)
• 91.
  2. 遷移図 ここでおすすめするのが、 マインドマップによる遷移図です！
• 92.
  2. 遷移図 実際の必要な画面と、 要素の洗い出しをすることで
• 93.
  2. 遷移図 自分の中での振り返りと、 抜け漏れのないUI設計を行なえます。
• 94.
  2. 遷移図 ペーパープロトタイピングの有無 に関わらず、遷移図は重要！
• 95.
  2. 遷移図 ¦利点その1 : 頭の中の整理 と 現状把握 利点 その1 頭の中の整理 と 現状把握
• 96.
  2. 遷移図 ¦利点その1 : 頭の中の整理 と 現状把握 いきなりデザインを起こすと、 要素やページの抜け漏れ、
• 97.
  2. 遷移図 ¦利点その1 : 頭の中の整理 と 現状把握 現状把握が不十分なまま、 デザインを追加することになりがち。
• 98.
  2. 遷移図 ¦利点その1 : 頭の中の整理 と 現状把握 デザインを捨てたり、 更新を繰り返すのはすごいコスト。
• 99.
  2. 遷移図 ¦利点その1 : 頭の中の整理 と 現状把握 遷移図を書くと 頭の中の整理 と 現状把握 ができます。
• 100.
  2. 遷移図 ¦利点その1 : 頭の中の整理 と 現状把握 ページ名だけではなく その中の要素も書くのが大事。