Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
美しいモバイルUX
の理解と実践

10の法則:
試作・プロトタイピング編

1
2

安藤幸央
ブログ安藤日記
@yukio_andoh
FB,G+
3

プロトタイピング・試作
今日の授業
 10分:準備
 20分:実践
 10分:コツ
 20分:質問

4
photo by milosevic

質問

授業の途中でも質問どうぞ
有益な質問にはプレゼント

5
美しいUX
心が美しい
立ち振る舞いが美しい
姿勢が美しい
バランスが整っている
手入れが行き届いている
and more ....
6
美しいUX
わかりやすい・ 見やすい
スムーズで心地よい
素早く操作できる
優雅な体験ができる
便利・役に立つ
手入れが行き届いている
7
質問:皆さんの目的は?
8

A : より良いスマートフォンアプリを作りたい
B : 今あるアプリをより良いものに改善したい
C : 考えているアイデアをアプリの形にしたい
9

●リサーチ●プロトタイピング●モックアップ●ベータ版
法則1
アプリを見直すと気づきがある
10
質問:朝いちアプリ
11
12

準備・道具

photo by karramarro
13

ペーパー
プロトタイピング

紙とペンでの試作

photo by gualtiero
14

質問:何のプロト?
15

質問:何のプロト?
16

Square
なぜ紙とペンを使う?

17

何よりも素早くできる。 試作コストが少なくてすむ。
やり直しが簡単。早めに的確な失敗ができる。
出来あがった感じがしない。重要なことだけに集中できる
目(と指)は口ほどにモノを言う。
利点
細かいところまで複数の人で議論できる
使いにくさ、使いやすさが体感できる
すぐに修正し、いろいろ試せる
完成していると思わせない

進歩の早い技術とは違い、たぶん10年後も有効なスキル

18
欠点

19

完成していないので、いろいろ想像しながら試すことになる
風で飛んでいく
一般的には理解が得られにくい            
「こんなメモみたいなアプリをどうやって試すんだ!」
法則2
道具にこだわろう!
20
方眼ノート/ポストイット/ペン

21
“UI template”

22
法則3
アウトプットの質はインプットの質と量に比例する
23

たくさん見る、使う、調べる
Human Interface Guidelines / Android Design
24
Google Play / Apple AppStore

25
Dribbble

26
Pinterest

27
“Mobile UI Patterns”

28
UI mini book

29
30

試作・実践
31

インスクリーン
(オンデバイス)
プロトタイピング
紙に描いたスケッチ
を、カメラで取り込
んでスマートフォン
の画面で確認します
photo via popapp.in
法則4
素早く試して、素早く失敗しよう
32
法則5
本当に大切な2,3の機能を作ろう
33
法則6
凝りすぎない。作り込みすぎない
34
法則7
完璧を目指さない。失敗を受け入れる
35

誰のせいでもない
法則8
実際の環境で検討するのが重要
36
法則9
客観的に見る、時間をおいて見る
37
法則10
素晴らしい試作も、本物ではない
38
39

便利ツール

photo by schnaars
40

POP
Prototyping
On
Paper

photo by schnaars
41

コツ, まとめ

photo by schnaars
コツ, まとめ

42

必要な要素を適切な場所に配置する。本当にそこに必要か?
ある目的に向かって、素直に操作できるか流れを確認する
間接的な操作(ボタンやスイッチ)と直接操作を意識する
アイデアが有益で正しい方向を向いているのか確かめる
抜...
photo by milosevic

質問
なんでも質問受付ます!
今日の授業のことでも、
普段気になることでも、
お困りごとでも、
お悩み相談でも....
43
宿題
あなたの良く使うアプリ
の1画面を紙にスケッチ
してみましょう。
実際のアプリと紙に描い
たスケッチを見比べてみ
ましょう。
44
photo by Bart
Thank you !

Next 2/12

@yukio_andoh
45

photo by blakespot
Nächste SlideShare
Wird geladen in …5
×

美しいモバイルUXの理解と実践〜10の法則:試作・プロトタイピング編 先生:安藤 幸央

ーーーーーーーーーーーーーーーーーーーーーーー
schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。
WEB生放送の授業を無料で配信しています。
▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。
https://schoo.jp/class/346/room
ーーーーーーーーーーーーーーーーーーーーーーー

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

美しいモバイルUXの理解と実践〜10の法則:試作・プロトタイピング編 先生:安藤 幸央

  1. 1. 美しいモバイルUX の理解と実践 10の法則: 試作・プロトタイピング編 1
  2. 2. 2 安藤幸央 ブログ安藤日記 @yukio_andoh FB,G+
  3. 3. 3 プロトタイピング・試作
  4. 4. 今日の授業  10分:準備  20分:実践  10分:コツ  20分:質問 4
  5. 5. photo by milosevic 質問 授業の途中でも質問どうぞ 有益な質問にはプレゼント 5
  6. 6. 美しいUX 心が美しい 立ち振る舞いが美しい 姿勢が美しい バランスが整っている 手入れが行き届いている and more .... 6
  7. 7. 美しいUX わかりやすい・ 見やすい スムーズで心地よい 素早く操作できる 優雅な体験ができる 便利・役に立つ 手入れが行き届いている 7
  8. 8. 質問:皆さんの目的は? 8 A : より良いスマートフォンアプリを作りたい B : 今あるアプリをより良いものに改善したい C : 考えているアイデアをアプリの形にしたい
  9. 9. 9 ●リサーチ●プロトタイピング●モックアップ●ベータ版
  10. 10. 法則1 アプリを見直すと気づきがある 10
  11. 11. 質問:朝いちアプリ 11
  12. 12. 12 準備・道具 photo by karramarro
  13. 13. 13 ペーパー プロトタイピング 紙とペンでの試作 photo by gualtiero
  14. 14. 14 質問:何のプロト?
  15. 15. 15 質問:何のプロト?
  16. 16. 16 Square
  17. 17. なぜ紙とペンを使う? 17 何よりも素早くできる。 試作コストが少なくてすむ。 やり直しが簡単。早めに的確な失敗ができる。 出来あがった感じがしない。重要なことだけに集中できる 目(と指)は口ほどにモノを言う。
  18. 18. 利点 細かいところまで複数の人で議論できる 使いにくさ、使いやすさが体感できる すぐに修正し、いろいろ試せる 完成していると思わせない 進歩の早い技術とは違い、たぶん10年後も有効なスキル 18
  19. 19. 欠点 19 完成していないので、いろいろ想像しながら試すことになる 風で飛んでいく 一般的には理解が得られにくい             「こんなメモみたいなアプリをどうやって試すんだ!」
  20. 20. 法則2 道具にこだわろう! 20
  21. 21. 方眼ノート/ポストイット/ペン 21
  22. 22. “UI template” 22
  23. 23. 法則3 アウトプットの質はインプットの質と量に比例する 23 たくさん見る、使う、調べる
  24. 24. Human Interface Guidelines / Android Design 24
  25. 25. Google Play / Apple AppStore 25
  26. 26. Dribbble 26
  27. 27. Pinterest 27
  28. 28. “Mobile UI Patterns” 28
  29. 29. UI mini book 29
  30. 30. 30 試作・実践
  31. 31. 31 インスクリーン (オンデバイス) プロトタイピング 紙に描いたスケッチ を、カメラで取り込 んでスマートフォン の画面で確認します photo via popapp.in
  32. 32. 法則4 素早く試して、素早く失敗しよう 32
  33. 33. 法則5 本当に大切な2,3の機能を作ろう 33
  34. 34. 法則6 凝りすぎない。作り込みすぎない 34
  35. 35. 法則7 完璧を目指さない。失敗を受け入れる 35 誰のせいでもない
  36. 36. 法則8 実際の環境で検討するのが重要 36
  37. 37. 法則9 客観的に見る、時間をおいて見る 37
  38. 38. 法則10 素晴らしい試作も、本物ではない 38
  39. 39. 39 便利ツール photo by schnaars
  40. 40. 40 POP Prototyping On Paper photo by schnaars
  41. 41. 41 コツ, まとめ photo by schnaars
  42. 42. コツ, まとめ 42 必要な要素を適切な場所に配置する。本当にそこに必要か? ある目的に向かって、素直に操作できるか流れを確認する 間接的な操作(ボタンやスイッチ)と直接操作を意識する アイデアが有益で正しい方向を向いているのか確かめる 抜け、漏れ、作らなければいけない事項を洗い出す 目的を実現するための機能、使いやすさ、楽しさを確認する
  43. 43. photo by milosevic 質問 なんでも質問受付ます! 今日の授業のことでも、 普段気になることでも、 お困りごとでも、 お悩み相談でも.... 43
  44. 44. 宿題 あなたの良く使うアプリ の1画面を紙にスケッチ してみましょう。 実際のアプリと紙に描い たスケッチを見比べてみ ましょう。 44 photo by Bart
  45. 45. Thank you ! Next 2/12 @yukio_andoh 45 photo by blakespot

×