Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Speaker No.01 / KAYAC inc. 割石 裕太 Yuta Wariishi 達人たちから学ぶ。実践！プロトタイピング
自己紹介 | Profile @KAYAC inc. 割石 裕太 Yuta Wariishi KAYAC inc. | Art Director / UI Designer
自己紹介 | Profile @OH @wariemon OH | Personal Design Project http://wariemon.com | ohmake.it@gmail.com
つくっているもの | Lobi -Chat & Game Community-
つくっているもの | Lobi -Chat & Game Community-
つくっているもの | Lobi -Chat & Game Community-
つくっているもの | FILTERS app
つくっているもの | FILTERS app
つくっているもの | FILTERS app
前段 ¦ プロトタイピングをなぜするのか amana tech night Vol.2 のテーマ プロトタイピング
前段 ¦ プロトタイピングをなぜするのか みなさんは、何のために プロトタイピングをしてますか？
前段 ¦ プロトタイピングをなぜするのか ぼくは、 「人と向き合う」ために プロトタイピングはあると考えています。
前段 ¦ プロトタイピングをなぜするのか まずは当然、ユーザーと向き合うためです。 ユーザー
前段 ¦ プロトタイピングをなぜするのか ユーザー ユーザーにとって必要な企画か？ ユーザーにとって使いやすいものであるか？
前段 ¦ プロトタイピングをなぜするのか 常にユーザーのことを考えて制作する ためにも、プロトタイピングは有効です。 ユーザー
前段 ¦ プロトタイピングをなぜするのか 制作チーム そして、チームと向き合うためでもあります。 ユーザー
前段 ¦ プロトタイピングをなぜするのか 制作チームでお互いの認識のズレをなくすため、 効率のよい無駄のない開発を行うため、 制作チームユーザー
前段 ¦ プロトタイピングをなぜするのか プロトタイピングは、チームが気持ちよく開発 するためにも有効な手段なのです。 制作チームユーザー
前段 ¦ プロトタイピングをなぜするのか 自分 そして、忘れがちなのが、 自分と向き合うためでもあるということです。 制作チームユーザー
前段 ¦ プロトタイピングをなぜするのか 今作ろうとしているものは、本当にベストか？ 全てにおいて自分は説明できるか？ 自分制作チームユーザー
前段 ¦ プロトタイピングをなぜするのか 自分自信に嘘をつかない、自分をごまかさない。 自分と向き合うためにも有効なのです。 自分制作チームユーザー
前段 ¦ プロトタイピングをなぜするのか ということで、ここから本編となります！ 自分制作チームユーザー
人と向き合う プロトタイピング
人と向き合うプロトタイピング 1. 企画の理解 2. 遷移図 3. ラフデザイン 4. Prott チェック 5. 作り込む ペーパー プロトタイピング
人と向き合うプロトタイピング 1. 企画の理解 5.3.2. 4. Prott ペーパー プロトタイピング 50% 重要度
人と向き合うプロトタイピング 1. 企画の理解 5.3.2. 遷移図 4. Prott ペーパー プロトタイピング 50 40% 重要度 重要度
人と向き合うプロトタイピング 1. 企画の理解 5. 作り込む3. ラフデザイン2. 4. Prott チェック ペーパー プロトタイピング 50 40 10% 重要度 重要度 重要度
人と向き合うプロトタイピング 1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック ペーパー プロトタイピング 50% 40% 10% 重要度 重要度 重要度
1. 企画の理解 1. 企画の理解 5.3.2. 4. Prott ペーパー プロトタイピング 50% 40 10 重要度
1. 企画の理解 プロトタイピングというと、
1. 企画の理解 1. 5.3. ラフデザイン2. 遷移図 4. Prott チェック ペーパープロトタイピング ここの部分のことを指すと思いますが、
1. 企画の理解 1. 企画の理解 5.3.2. 4. Prott ペーパープロトタイピング この部分に入る前こそ、 一番大事だと考えています。
1. 企画の理解 実際に着手し始める前に、 見極めておきたい3点があります。
1. 企画の理解 ユーザーのゴールを明確にする ゴールにつながっているか 抵抗はないか
1. 企画の理解 この3点を意識して企画を 見直してみましょう。
1. 企画の理解 ¦ ユーザーのゴールを明確にする ユーザーのゴールを明確にする ゴールにつながっているか 抵抗はないか
1. 企画の理解 ¦ ユーザーのゴールを明確にする 企画には必ず 対象ユーザー がいます。
1. 企画の理解 ¦ ユーザーのゴールを明確にする 本当にそのユーザーのために なっている企画ですか？
1. 企画の理解 ¦ ユーザーのゴールを明確にする ユーザーの目的「体験のゴール」 はどこになるかを明確にしましょう。
1. 企画の理解 ¦ ユーザーのゴールを明確にする Lobiの大方針としてのゴール 「ゲームを通じて人と繋がる」
1. 企画の理解 ¦ ユーザーのゴールを明確にする これをブレイクダウンすると、 ・ユーザーがオープンなコミュニティでチャットする ・ユーザー同士が興味を持ち、フォローし合う ・ユーザーがプライベートチャットで話し合う…
1. 企画の理解 ¦ ユーザーのゴールを明確にする …など、どんどん明確なゴールが 見えてきます。
1. 企画の理解 ¦ ユーザーのゴールを明確にする 具体的なゴールであればあるほど 具体的なアクションがとれます。
1. 企画の叩き ¦ ゴールにつながっているか ユーザーのゴールを設定する ゴールにつながっているか 抵抗はないか
1. 企画の理解 ¦ ゴールにつながっているか ゴールを設定したら、次は企画が ゴールにつながっているかを見直します。
1. 企画の理解 ¦ ゴールにつながっているか 企画時点で、ゴールにつながらない 開発・改修がないかを確認していきます。
1. 企画の理解 ¦ ゴールにつながっているか 実作業に入り出す前に、 不必要な部分を削ぎ落とすことで、
1. 企画の理解 ¦ ゴールにつながっているか 作業の無駄、認識のズレ、使いずらくなる、 などの無駄を省くことができます。
ユーザーのゴールを設定する ゴールにつながっているか 抵抗はないか 1. 企画の理解 ¦ 抵抗はないか
1. 企画の理解 ¦ 抵抗はないか リニューアルや改善では、 大きく分けて2種類のユーザーがいます。
1. 企画の理解 ¦ 抵抗はないか 新規ユーザー 既存ユーザー リニューアルレベルの大きな企画では
1. 企画の理解 ¦ 抵抗はないか 新規ユーザー 既存ユーザー 新規ユーザー向けの企画が多いと思います。
1. 企画の理解 ¦ 抵抗はないか それを意識した上で、大事なのは、 そのもう一方のユーザーのこと。
1. 企画の理解 ¦ 抵抗はないか 新しい機能は、 既存のユーザーの機能でもあります。
1. 企画の理解 ¦ 抵抗はないか 企画の意図とは別に、今まで通りの 機能が問題なく使えるか？ 
1. 企画の理解 ¦ 抵抗はないか その新しい機能は、 既存ユーザーに抵抗はないか？
1. 企画の理解 ¦ 抵抗はないか UIの設計に着手する前に、 この点を見過ごしてしまうと、
1. 企画の理解 ¦ 抵抗はないか 大きく修正、場合によっては 企画の根本からの見直しになります。
1. 企画の理解 ¦ 抵抗はないか 見過ごしがちですが、 もっとも重要な点です。
1.5. ペーパープロトタイピング 1. 5.3.2. 4. Prott ペーパー プロトタイピング 50 40 10
1.5. ペーパープロトタイピング ペーパープロトタイピングは、 チームが大人数の場合に
1.5. ペーパープロトタイピング チームと向き合うために、 最大の効果を発揮します！
1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる 利点 その1 批評モードを避けられる
1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる 作りきったデザインを チームレビューにかけると、
1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる チームメンバー個々のイメージと 違う結果になり、
1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる きつい議論が起きたり、 巻き戻りが発生したりしますよね。
1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる 人数が多いチームだと、 その分意見の数も増えます。
1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる これは「具体的すぎる」 ということが原因だったりします。
1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる 絵が出来上がった状態だと、 その絵の良し悪しの議論になりがち。
1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる その絵に至った経緯や考え方より、 絵自体に話が終始しがちです。
1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる プロトタイピングでは絵の美しさ より、考え方、設計が大事です。
1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる その絵に至った経緯や考え方より、 絵自体に話が終始しがちです。
1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる ペーパープロトタイピングは、 いわば骨組みの状態です。
1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる 修正可能・参加可能なフェーズ なので、批評モードではなく、
1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる 最小限の工数で、チーム全体に 「考え」を伝えることができます。
1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる ユーザーのためになるアクションを、 無駄な議論で不意にせず済みます。
1.5. ペーパープロトタイピング ¦ 利点その2 : 個々のイメージの擦り合わせ 利点 その2 個々のイメージの擦り合わせ
1.5. ペーパープロトタイピング ¦ 利点その2 : 個々のイメージの擦り合わせ ペーパープロトタイピングでは 職種は関係ありません。
1.5. ペーパープロトタイピング ¦ 利点その2 : 個々のイメージの擦り合わせ 画面自体の必要性、要素の確認…
1.5. ペーパープロトタイピング ¦ 利点その2 : 個々のイメージの擦り合わせ エンジニア目線からの挙動や実装 を考慮したアイデアなど、
1.5. ペーパープロトタイピング ¦ 利点その2 : 個々のイメージの擦り合わせ あとで入りそうな意見も、 先に吸収できるチャンスです。
1.5. ペーパープロトタイピング ¦ 利点その2 : 個々のイメージの擦り合わせ そしてみんな当事者になったことで 個々の認識を共有でき、
1.5. ペーパープロトタイピング ¦ 利点その2 : 個々のイメージの擦り合わせ 大人数のチームでも、 イメージのすり合わせを行えます！
1.5. ペーパープロトタイピング ¦ まとめ 利点 その1 批評モードを避けられる 利点 その2 個々のイメージの擦り合わせ
1.5. ペーパープロトタイピング ¦ まとめ プロトタイピング用ペーパーは、
1.5. ペーパープロトタイピング ¦ まとめ ネット上でも簡単にゲットできるので、
1.5. ペーパープロトタイピング ¦ まとめ 印刷してつかってみましょう！
2. 遷移図 1. 5.3.2. 遷移図 4. Prott ペーパー プロトタイピング 50 40% 10
2. 遷移図 ペーパープロトタイピングは、 プロジェクトが進むにつれ、
2. 遷移図 放置される可能性があるので、 (更新コスト / 更新を伝えるのも面倒)
2. 遷移図 ここでおすすめするのが、 マインドマップによる遷移図です！
2. 遷移図 実際の必要な画面と、 要素の洗い出しをすることで
2. 遷移図 自分の中での振り返りと、 抜け漏れのないUI設計を行なえます。
2. 遷移図 ペーパープロトタイピングの有無 に関わらず、遷移図は重要！
2. 遷移図 ¦ 利点その1 : 頭の中の整理 と 現状把握 利点 その1 頭の中の整理 と 現状把握
2. 遷移図 ¦ 利点その1 : 頭の中の整理 と 現状把握 いきなりデザインを起こすと、 要素やページの抜け漏れ、
2. 遷移図 ¦ 利点その1 : 頭の中の整理 と 現状把握 現状把握が不十分なまま、 デザインを追加することになりがち。
2. 遷移図 ¦ 利点その1 : 頭の中の整理 と 現状把握 デザインを捨てたり、 更新を繰り返すのはすごいコスト。
2. 遷移図 ¦ 利点その1 : 頭の中の整理 と 現状把握 遷移図を書くと 頭の中の整理 と 現状把握 ができます。
2. 遷移図 ¦ 利点その1 : 頭の中の整理 と 現状把握 ページ名だけではなく その中の要素も書くのが大事。
t 2. 遷移図 ¦ 利点その1 : 頭の中の整理 と 現状把握 Mindmeister https://www.mindmeister.com おすすめのツール
2. 遷移図 ¦ 利点その2 : 行き止まりとエラーの発見 利点 その2 行き止まりとエラーの発見
2. 遷移図 ¦ 利点その2 : 行き止まりとエラーの発見 単純に画面遷移をまとめるだけでも 便利なのですが、
2. 遷移図 ¦ 利点その2 : 行き止まりとエラーの発見 その他にも、0件表示やエラーなど 行き止まりの存在を把握できることが
2. 遷移図 ¦ 利点その2 : 行き止まりとエラーの発見 遷移図がもたらす最たるもの だと考えています。
2. 遷移図 ¦ 利点その2 : 行き止まりとエラーの発見 ユーザーの目線に立って、 行き止まりを見つけたとき、
2. 遷移図 ¦ 利点その2 : 行き止まりとエラーの発見 どんな提案があれば、気持ち良く サービスを体験できるか。
2. 遷移図 ¦ 利点その2 : 行き止まりとエラーの発見 要件以上の +αの部分まで 考える土台が出来上がります。
2. 遷移図 ¦ まとめ 利点 その1 頭の中の整理 と 現状把握 利点 その2 行き止まりとエラーの発見
3. ラフデザイン 1. 企画の叩き 5.3. ラフデザイン2. 4. Prott ペーパー プロトタイピング 50 40 10
3. ラフデザイン ここからは実際に使っている ツールのお話をさくさくと。
ここから作り込むところまで Sketch というツールを使っていきます。 t 3. ラフデザイン ¦ Sketch
t 3. ラフデザイン ¦ Sketch プロトタイピング / UIデザインに向いている 大きな利点が3つあります。
t 3. ラフデザイン ¦ Sketch の利点その1 : データ・挙動の軽さ 利点その1 : データ・挙動の軽さ iOS-templete.sketch 655 KB
t 3. ラフデザイン ¦ Sketch の利点その1 : データ・挙動の軽さ 画像をいれれば重くなるのはPhotoshop などと同じですが、 iOS-templete.sketch 655 KB
t 3. ラフデザイン ¦ Sketch の利点その1 : データ・挙動の軽さ 基本的なファイルサイズが圧倒的に違います！ そして挙動も軽い。 iOS-templete.sketch 655 KB
t 3. ラフデザイン ¦ Sketch の利点その2 : 画面を並べて作業できる 利点その2 : 画面を並べて作業ができる ArtBoard
t 3. ラフデザイン ¦ Sketch の利点その2 : 画面を並べて作業できる ページ数・パターン出しが多くなりがちな UIデザインにはこの機能、うってつけなのです。 ArtBoard
t 3. ラフデザイン ¦ Sketch の利点その3 : 素材書き出しが簡単 利点その3 : 素材書き出しが簡単 Output
t 3. ラフデザイン ¦ Sketch の利点その3 : 素材書き出しが簡単 @2x, @3xなども簡単に書き出せるほか、 レイヤーをドラッグ&ドロップで書き出せます！ Output
3. ラフデザイン ¦ Sketch まとめ 利点その3 : 素材書き出しが簡単 利点その2 : 画面を並べて作業ができる 利点その1 : データ・挙動の軽さ
3. ラフデザイン ¦ Sketch まとめ もちろん導入するにあたっての デメリットもあります。
3. ラフデザイン ¦ Sketch まとめ ベクターツールも使い勝手は やはりIllustrator .sketch というオリジナルの拡張子 ウォークスルーなど作り込みは やはりPhotoshop Photoshop使い泣かせのショートカット
3. ラフデザイン ¦ Sketch まとめ それでも挑戦してみてほしい 魅惑のデザインツールです！
4. Prott チェック 1. 企画の叩き 5.3.2. 4. Prott チェック ペーパー プロトタイピング 50 40 10
t 4. Prott チェック KAYAC ではプロトタイピングツール として Prott を採用しています。
t 4. Prott チェック Flinto などと同じで、 ユーティリティツールのプロトタイプにぴったり！
4. Prott チェック ¦ 利点その1 : オーガナイゼーション機能 利点その1 : オーガナイゼーション機能
4. Prott チェック ¦ 利点その1 : オーガナイゼーション機能 KAYAC ではクライアントワークなども含めて 多数のアプリ制作が行われています。
4. Prott チェック ¦ 利点その1 : オーガナイゼーション機能 オーガナイゼーションで共有されたプロジェクトは 社内のデザイナーなら誰でも、チェックできます！
4. Prott チェック ¦ 利点その1 : オーガナイゼーション機能 これで簡単にデザインチームでの UIレビューや、進行の確認などができます。
4. Prott チェック ¦ 利点その2 : iOSアプリでネイティブのような快適さ 利点その2 : iOSアプリでネイティブのような快適さ t
5. 作り込む 1. 企画の叩き 5. 作り込む3.2. 4. Prott ペーパー プロトタイピング 50 40 10%
5. 作り込む 基本的にこのフェーズも Sketch を使って進めていきます。
5. 作り込む ¦ ツールの使い分け ウォークスルー（チュートリアル） ストアのスクリーンショットなど作り込み要素 t Adobe Photoshop
5. 作り込む ¦ ツールの使い分け t Adobe Illustrator アイコンやベクターデータで製作するものは、 スピード優先で Illustrator を使用
t 5. 作り込む ¦ ツールの使い分け Sketch Sketchを基軸に適したツールを使いつつ、 画面を作りこんでいきます。
人と向き合うプロトタイピング ¦ まとめ 1. 企画の叩き 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック ペーパー プロトタイピング 50% 40% 10%
1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック ペーパー プロトタイピング 50% 40% 10% 人と向き合うプロトタイピング ¦ まとめ 表面のインタラクションや、 ビジュアルデザインなどの見た目...
1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック ペーパー プロトタイピング 50% 40% 10% 人と向き合うプロトタイピング ¦ まとめ 目が向きがちですが、
1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック ペーパー プロトタイピング 50% 40% 10% 人と向き合うプロトタイピング ¦ まとめ インターフェース・サービスは 人と向き合うもの。
1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック ペーパー プロトタイピング 50% 40% 10% 人と向き合うプロトタイピング ¦ まとめ 企画自体が本当にユーザーのため になっているか。
1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック ペーパー プロトタイピング 50% 40% 10% 人と向き合うプロトタイピング ¦ まとめ もっと歩み寄った設計や、 アイデアを盛り込めないか。
1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック ペーパー プロトタイピング 50% 40% 10% 人と向き合うプロトタイピング ¦ まとめ 自分自身に嘘をつかず、 チーム全員の理解を深めながら ユー...
1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック ペーパー プロトタイピング 50% 40% 10% 人と向き合うプロトタイピング ¦ まとめ プロトタイピングは 「人と向き合う」ためにある。
人と向き合うプロトタイピング
Upcoming SlideShare
Loading in …5
×

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

97,601 views

Published on

Event : amana tech night Vol.2 -達人達から学ぶ。実践！プロトタイピング-
Location : DeNA Sakura Cafe
Date : 2015.04.22
Speaker : 割石裕太 / wariemon - UI Designer @KAYAC inc. / OH

amana tech night Vol.2 -達人達から学ぶ。実践！プロトタイピング
1番目のスピーカーとして登壇させていただきました。
プロトタイピングにおいて一番大事なのは「人と向き合う」ことができることだと考え、自身の担当しているサービス Lobi のリニューアルにおいて実際に行ったプロトタイピングのフローと、考えをまとめました。

Published in: Design
no profile picture user

  • Be the first to comment

Show More

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

  1. 1. Speaker No.01 / KAYAC inc. 割石 裕太 Yuta Wariishi 達人たちから学ぶ。実践！プロトタイピング
  2. 2. 自己紹介 | Profile @KAYAC inc. 割石 裕太 Yuta Wariishi KAYAC inc. | Art Director / UI Designer
  3. 3. 自己紹介 | Profile @OH @wariemon OH | Personal Design Project http://wariemon.com | ohmake.it@gmail.com
  4. 4. つくっているもの | Lobi -Chat & Game Community-
  5. 5. つくっているもの | Lobi -Chat & Game Community-
  6. 6. つくっているもの | Lobi -Chat & Game Community-
  7. 7. つくっているもの | FILTERS app
  8. 8. つくっているもの | FILTERS app
  9. 9. つくっているもの | FILTERS app
  10. 10. 前段 ¦ プロトタイピングをなぜするのか amana tech night Vol.2 のテーマ プロトタイピング
  11. 11. 前段 ¦ プロトタイピングをなぜするのか みなさんは、何のために プロトタイピングをしてますか？
  12. 12. 前段 ¦ プロトタイピングをなぜするのか ぼくは、 「人と向き合う」ために プロトタイピングはあると考えています。
  13. 13. 前段 ¦ プロトタイピングをなぜするのか まずは当然、ユーザーと向き合うためです。 ユーザー
  14. 14. 前段 ¦ プロトタイピングをなぜするのか ユーザー ユーザーにとって必要な企画か？ ユーザーにとって使いやすいものであるか？
  15. 15. 前段 ¦ プロトタイピングをなぜするのか 常にユーザーのことを考えて制作する ためにも、プロトタイピングは有効です。 ユーザー
  16. 16. 前段 ¦ プロトタイピングをなぜするのか 制作チーム そして、チームと向き合うためでもあります。 ユーザー
  17. 17. 前段 ¦ プロトタイピングをなぜするのか 制作チームでお互いの認識のズレをなくすため、 効率のよい無駄のない開発を行うため、 制作チームユーザー
  18. 18. 前段 ¦ プロトタイピングをなぜするのか プロトタイピングは、チームが気持ちよく開発 するためにも有効な手段なのです。 制作チームユーザー
  19. 19. 前段 ¦ プロトタイピングをなぜするのか 自分 そして、忘れがちなのが、 自分と向き合うためでもあるということです。 制作チームユーザー
  20. 20. 前段 ¦ プロトタイピングをなぜするのか 今作ろうとしているものは、本当にベストか？ 全てにおいて自分は説明できるか？ 自分制作チームユーザー
  21. 21. 前段 ¦ プロトタイピングをなぜするのか 自分自信に嘘をつかない、自分をごまかさない。 自分と向き合うためにも有効なのです。 自分制作チームユーザー
  22. 22. 前段 ¦ プロトタイピングをなぜするのか ということで、ここから本編となります！ 自分制作チームユーザー
  23. 23. 人と向き合う プロトタイピング
  24. 24. 人と向き合うプロトタイピング 1. 企画の理解 2. 遷移図 3. ラフデザイン 4. Prott チェック 5. 作り込む ペーパー プロトタイピング
  25. 25. 人と向き合うプロトタイピング 1. 企画の理解 5.3.2. 4. Prott ペーパー プロトタイピング 50% 重要度
  26. 26. 人と向き合うプロトタイピング 1. 企画の理解 5.3.2. 遷移図 4. Prott ペーパー プロトタイピング 50 40% 重要度 重要度
  27. 27. 人と向き合うプロトタイピング 1. 企画の理解 5. 作り込む3. ラフデザイン2. 4. Prott チェック ペーパー プロトタイピング 50 40 10% 重要度 重要度 重要度
  28. 28. 人と向き合うプロトタイピング 1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック ペーパー プロトタイピング 50% 40% 10% 重要度 重要度 重要度
  29. 29. 1. 企画の理解 1. 企画の理解 5.3.2. 4. Prott ペーパー プロトタイピング 50% 40 10 重要度
  30. 30. 1. 企画の理解 プロトタイピングというと、
  31. 31. 1. 企画の理解 1. 5.3. ラフデザイン2. 遷移図 4. Prott チェック ペーパープロトタイピング ここの部分のことを指すと思いますが、
  32. 32. 1. 企画の理解 1. 企画の理解 5.3.2. 4. Prott ペーパープロトタイピング この部分に入る前こそ、 一番大事だと考えています。
  33. 33. 1. 企画の理解 実際に着手し始める前に、 見極めておきたい3点があります。
  34. 34. 1. 企画の理解 ユーザーのゴールを明確にする ゴールにつながっているか 抵抗はないか
  35. 35. 1. 企画の理解 この3点を意識して企画を 見直してみましょう。
  36. 36. 1. 企画の理解 ¦ ユーザーのゴールを明確にする ユーザーのゴールを明確にする ゴールにつながっているか 抵抗はないか
  37. 37. 1. 企画の理解 ¦ ユーザーのゴールを明確にする 企画には必ず 対象ユーザー がいます。
  38. 38. 1. 企画の理解 ¦ ユーザーのゴールを明確にする 本当にそのユーザーのために なっている企画ですか？
  39. 39. 1. 企画の理解 ¦ ユーザーのゴールを明確にする ユーザーの目的「体験のゴール」 はどこになるかを明確にしましょう。
  40. 40. 1. 企画の理解 ¦ ユーザーのゴールを明確にする Lobiの大方針としてのゴール 「ゲームを通じて人と繋がる」
  41. 41. 1. 企画の理解 ¦ ユーザーのゴールを明確にする これをブレイクダウンすると、 ・ユーザーがオープンなコミュニティでチャットする ・ユーザー同士が興味を持ち、フォローし合う ・ユーザーがプライベートチャットで話し合う…
  42. 42. 1. 企画の理解 ¦ ユーザーのゴールを明確にする …など、どんどん明確なゴールが 見えてきます。
  43. 43. 1. 企画の理解 ¦ ユーザーのゴールを明確にする 具体的なゴールであればあるほど 具体的なアクションがとれます。
  44. 44. 1. 企画の叩き ¦ ゴールにつながっているか ユーザーのゴールを設定する ゴールにつながっているか 抵抗はないか
  45. 45. 1. 企画の理解 ¦ ゴールにつながっているか ゴールを設定したら、次は企画が ゴールにつながっているかを見直します。
  46. 46. 1. 企画の理解 ¦ ゴールにつながっているか 企画時点で、ゴールにつながらない 開発・改修がないかを確認していきます。
  47. 47. 1. 企画の理解 ¦ ゴールにつながっているか 実作業に入り出す前に、 不必要な部分を削ぎ落とすことで、
  48. 48. 1. 企画の理解 ¦ ゴールにつながっているか 作業の無駄、認識のズレ、使いずらくなる、 などの無駄を省くことができます。
  49. 49. ユーザーのゴールを設定する ゴールにつながっているか 抵抗はないか 1. 企画の理解 ¦ 抵抗はないか
  50. 50. 1. 企画の理解 ¦ 抵抗はないか リニューアルや改善では、 大きく分けて2種類のユーザーがいます。
  51. 51. 1. 企画の理解 ¦ 抵抗はないか 新規ユーザー 既存ユーザー リニューアルレベルの大きな企画では
  52. 52. 1. 企画の理解 ¦ 抵抗はないか 新規ユーザー 既存ユーザー 新規ユーザー向けの企画が多いと思います。
  53. 53. 1. 企画の理解 ¦ 抵抗はないか それを意識した上で、大事なのは、 そのもう一方のユーザーのこと。
  54. 54. 1. 企画の理解 ¦ 抵抗はないか 新しい機能は、 既存のユーザーの機能でもあります。
  55. 55. 1. 企画の理解 ¦ 抵抗はないか 企画の意図とは別に、今まで通りの 機能が問題なく使えるか？ 
  56. 56. 1. 企画の理解 ¦ 抵抗はないか その新しい機能は、 既存ユーザーに抵抗はないか？
  57. 57. 1. 企画の理解 ¦ 抵抗はないか UIの設計に着手する前に、 この点を見過ごしてしまうと、
  58. 58. 1. 企画の理解 ¦ 抵抗はないか 大きく修正、場合によっては 企画の根本からの見直しになります。
  59. 59. 1. 企画の理解 ¦ 抵抗はないか 見過ごしがちですが、 もっとも重要な点です。
  60. 60. 1.5. ペーパープロトタイピング 1. 5.3.2. 4. Prott ペーパー プロトタイピング 50 40 10
  61. 61. 1.5. ペーパープロトタイピング ペーパープロトタイピングは、 チームが大人数の場合に
  62. 62. 1.5. ペーパープロトタイピング チームと向き合うために、 最大の効果を発揮します！
  63. 63. 1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる 利点 その1 批評モードを避けられる
  64. 64. 1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる 作りきったデザインを チームレビューにかけると、
  65. 65. 1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる チームメンバー個々のイメージと 違う結果になり、
  66. 66. 1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる きつい議論が起きたり、 巻き戻りが発生したりしますよね。
  67. 67. 1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる 人数が多いチームだと、 その分意見の数も増えます。
  68. 68. 1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる これは「具体的すぎる」 ということが原因だったりします。
  69. 69. 1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる 絵が出来上がった状態だと、 その絵の良し悪しの議論になりがち。
  70. 70. 1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる その絵に至った経緯や考え方より、 絵自体に話が終始しがちです。
  71. 71. 1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる プロトタイピングでは絵の美しさ より、考え方、設計が大事です。
  72. 72. 1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる その絵に至った経緯や考え方より、 絵自体に話が終始しがちです。
  73. 73. 1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる ペーパープロトタイピングは、 いわば骨組みの状態です。
  74. 74. 1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる 修正可能・参加可能なフェーズ なので、批評モードではなく、
  75. 75. 1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる 最小限の工数で、チーム全体に 「考え」を伝えることができます。
  76. 76. 1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる ユーザーのためになるアクションを、 無駄な議論で不意にせず済みます。
  77. 77. 1.5. ペーパープロトタイピング ¦ 利点その2 : 個々のイメージの擦り合わせ 利点 その2 個々のイメージの擦り合わせ
  78. 78. 1.5. ペーパープロトタイピング ¦ 利点その2 : 個々のイメージの擦り合わせ ペーパープロトタイピングでは 職種は関係ありません。
  79. 79. 1.5. ペーパープロトタイピング ¦ 利点その2 : 個々のイメージの擦り合わせ 画面自体の必要性、要素の確認…
  80. 80. 1.5. ペーパープロトタイピング ¦ 利点その2 : 個々のイメージの擦り合わせ エンジニア目線からの挙動や実装 を考慮したアイデアなど、
  81. 81. 1.5. ペーパープロトタイピング ¦ 利点その2 : 個々のイメージの擦り合わせ あとで入りそうな意見も、 先に吸収できるチャンスです。
  82. 82. 1.5. ペーパープロトタイピング ¦ 利点その2 : 個々のイメージの擦り合わせ そしてみんな当事者になったことで 個々の認識を共有でき、
  83. 83. 1.5. ペーパープロトタイピング ¦ 利点その2 : 個々のイメージの擦り合わせ 大人数のチームでも、 イメージのすり合わせを行えます！
  84. 84. 1.5. ペーパープロトタイピング ¦ まとめ 利点 その1 批評モードを避けられる 利点 その2 個々のイメージの擦り合わせ
  85. 85. 1.5. ペーパープロトタイピング ¦ まとめ プロトタイピング用ペーパーは、
  86. 86. 1.5. ペーパープロトタイピング ¦ まとめ ネット上でも簡単にゲットできるので、
  87. 87. 1.5. ペーパープロトタイピング ¦ まとめ 印刷してつかってみましょう！
  88. 88. 2. 遷移図 1. 5.3.2. 遷移図 4. Prott ペーパー プロトタイピング 50 40% 10
  89. 89. 2. 遷移図 ペーパープロトタイピングは、 プロジェクトが進むにつれ、
  90. 90. 2. 遷移図 放置される可能性があるので、 (更新コスト / 更新を伝えるのも面倒)
  91. 91. 2. 遷移図 ここでおすすめするのが、 マインドマップによる遷移図です！
  92. 92. 2. 遷移図 実際の必要な画面と、 要素の洗い出しをすることで
  93. 93. 2. 遷移図 自分の中での振り返りと、 抜け漏れのないUI設計を行なえます。
  94. 94. 2. 遷移図 ペーパープロトタイピングの有無 に関わらず、遷移図は重要！
  95. 95. 2. 遷移図 ¦ 利点その1 : 頭の中の整理 と 現状把握 利点 その1 頭の中の整理 と 現状把握
  96. 96. 2. 遷移図 ¦ 利点その1 : 頭の中の整理 と 現状把握 いきなりデザインを起こすと、 要素やページの抜け漏れ、
  97. 97. 2. 遷移図 ¦ 利点その1 : 頭の中の整理 と 現状把握 現状把握が不十分なまま、 デザインを追加することになりがち。
  98. 98. 2. 遷移図 ¦ 利点その1 : 頭の中の整理 と 現状把握 デザインを捨てたり、 更新を繰り返すのはすごいコスト。
  99. 99. 2. 遷移図 ¦ 利点その1 : 頭の中の整理 と 現状把握 遷移図を書くと 頭の中の整理 と 現状把握 ができます。
  100. 100. 2. 遷移図 ¦ 利点その1 : 頭の中の整理 と 現状把握 ページ名だけではなく その中の要素も書くのが大事。
  101. 101. t 2. 遷移図 ¦ 利点その1 : 頭の中の整理 と 現状把握 Mindmeister https://www.mindmeister.com おすすめのツール
  102. 102. 2. 遷移図 ¦ 利点その2 : 行き止まりとエラーの発見 利点 その2 行き止まりとエラーの発見
  103. 103. 2. 遷移図 ¦ 利点その2 : 行き止まりとエラーの発見 単純に画面遷移をまとめるだけでも 便利なのですが、
  104. 104. 2. 遷移図 ¦ 利点その2 : 行き止まりとエラーの発見 その他にも、0件表示やエラーなど 行き止まりの存在を把握できることが
  105. 105. 2. 遷移図 ¦ 利点その2 : 行き止まりとエラーの発見 遷移図がもたらす最たるもの だと考えています。
  106. 106. 2. 遷移図 ¦ 利点その2 : 行き止まりとエラーの発見 ユーザーの目線に立って、 行き止まりを見つけたとき、
  107. 107. 2. 遷移図 ¦ 利点その2 : 行き止まりとエラーの発見 どんな提案があれば、気持ち良く サービスを体験できるか。
  108. 108. 2. 遷移図 ¦ 利点その2 : 行き止まりとエラーの発見 要件以上の +αの部分まで 考える土台が出来上がります。
  109. 109. 2. 遷移図 ¦ まとめ 利点 その1 頭の中の整理 と 現状把握 利点 その2 行き止まりとエラーの発見
  110. 110. 3. ラフデザイン 1. 企画の叩き 5.3. ラフデザイン2. 4. Prott ペーパー プロトタイピング 50 40 10
  111. 111. 3. ラフデザイン ここからは実際に使っている ツールのお話をさくさくと。
  112. 112. ここから作り込むところまで Sketch というツールを使っていきます。 t 3. ラフデザイン ¦ Sketch
  113. 113. t 3. ラフデザイン ¦ Sketch プロトタイピング / UIデザインに向いている 大きな利点が3つあります。
  114. 114. t 3. ラフデザイン ¦ Sketch の利点その1 : データ・挙動の軽さ 利点その1 : データ・挙動の軽さ iOS-templete.sketch 655 KB
  115. 115. t 3. ラフデザイン ¦ Sketch の利点その1 : データ・挙動の軽さ 画像をいれれば重くなるのはPhotoshop などと同じですが、 iOS-templete.sketch 655 KB
  116. 116. t 3. ラフデザイン ¦ Sketch の利点その1 : データ・挙動の軽さ 基本的なファイルサイズが圧倒的に違います！ そして挙動も軽い。 iOS-templete.sketch 655 KB
  117. 117. t 3. ラフデザイン ¦ Sketch の利点その2 : 画面を並べて作業できる 利点その2 : 画面を並べて作業ができる ArtBoard
  118. 118. t 3. ラフデザイン ¦ Sketch の利点その2 : 画面を並べて作業できる ページ数・パターン出しが多くなりがちな UIデザインにはこの機能、うってつけなのです。 ArtBoard
  119. 119. t 3. ラフデザイン ¦ Sketch の利点その3 : 素材書き出しが簡単 利点その3 : 素材書き出しが簡単 Output
  120. 120. t 3. ラフデザイン ¦ Sketch の利点その3 : 素材書き出しが簡単 @2x, @3xなども簡単に書き出せるほか、 レイヤーをドラッグ&ドロップで書き出せます！ Output
  121. 121. 3. ラフデザイン ¦ Sketch まとめ 利点その3 : 素材書き出しが簡単 利点その2 : 画面を並べて作業ができる 利点その1 : データ・挙動の軽さ
  122. 122. 3. ラフデザイン ¦ Sketch まとめ もちろん導入するにあたっての デメリットもあります。
  123. 123. 3. ラフデザイン ¦ Sketch まとめ ベクターツールも使い勝手は やはりIllustrator .sketch というオリジナルの拡張子 ウォークスルーなど作り込みは やはりPhotoshop Photoshop使い泣かせのショートカット
  124. 124. 3. ラフデザイン ¦ Sketch まとめ それでも挑戦してみてほしい 魅惑のデザインツールです！
  125. 125. 4. Prott チェック 1. 企画の叩き 5.3.2. 4. Prott チェック ペーパー プロトタイピング 50 40 10
  126. 126. t 4. Prott チェック KAYAC ではプロトタイピングツール として Prott を採用しています。
  127. 127. t 4. Prott チェック Flinto などと同じで、 ユーティリティツールのプロトタイプにぴったり！
  128. 128. 4. Prott チェック ¦ 利点その1 : オーガナイゼーション機能 利点その1 : オーガナイゼーション機能
  129. 129. 4. Prott チェック ¦ 利点その1 : オーガナイゼーション機能 KAYAC ではクライアントワークなども含めて 多数のアプリ制作が行われています。
  130. 130. 4. Prott チェック ¦ 利点その1 : オーガナイゼーション機能 オーガナイゼーションで共有されたプロジェクトは 社内のデザイナーなら誰でも、チェックできます！
  131. 131. 4. Prott チェック ¦ 利点その1 : オーガナイゼーション機能 これで簡単にデザインチームでの UIレビューや、進行の確認などができます。
  132. 132. 4. Prott チェック ¦ 利点その2 : iOSアプリでネイティブのような快適さ 利点その2 : iOSアプリでネイティブのような快適さ t
  133. 133. 5. 作り込む 1. 企画の叩き 5. 作り込む3.2. 4. Prott ペーパー プロトタイピング 50 40 10%
  134. 134. 5. 作り込む 基本的にこのフェーズも Sketch を使って進めていきます。
  135. 135. 5. 作り込む ¦ ツールの使い分け ウォークスルー（チュートリアル） ストアのスクリーンショットなど作り込み要素 t Adobe Photoshop
  136. 136. 5. 作り込む ¦ ツールの使い分け t Adobe Illustrator アイコンやベクターデータで製作するものは、 スピード優先で Illustrator を使用
  137. 137. t 5. 作り込む ¦ ツールの使い分け Sketch Sketchを基軸に適したツールを使いつつ、 画面を作りこんでいきます。
  138. 138. 人と向き合うプロトタイピング ¦ まとめ 1. 企画の叩き 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック ペーパー プロトタイピング 50% 40% 10%
  139. 139. 1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック ペーパー プロトタイピング 50% 40% 10% 人と向き合うプロトタイピング ¦ まとめ 表面のインタラクションや、 ビジュアルデザインなどの見た目に、
  140. 140. 1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック ペーパー プロトタイピング 50% 40% 10% 人と向き合うプロトタイピング ¦ まとめ 目が向きがちですが、
  141. 141. 1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック ペーパー プロトタイピング 50% 40% 10% 人と向き合うプロトタイピング ¦ まとめ インターフェース・サービスは 人と向き合うもの。
  142. 142. 1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック ペーパー プロトタイピング 50% 40% 10% 人と向き合うプロトタイピング ¦ まとめ 企画自体が本当にユーザーのため になっているか。
  143. 143. 1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック ペーパー プロトタイピング 50% 40% 10% 人と向き合うプロトタイピング ¦ まとめ もっと歩み寄った設計や、 アイデアを盛り込めないか。
  144. 144. 1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック ペーパー プロトタイピング 50% 40% 10% 人と向き合うプロトタイピング ¦ まとめ 自分自身に嘘をつかず、 チーム全員の理解を深めながら ユーザーと向き合って開発をする。
  145. 145. 1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック ペーパー プロトタイピング 50% 40% 10% 人と向き合うプロトタイピング ¦ まとめ プロトタイピングは 「人と向き合う」ためにある。

×