はじめてのアプリUI、実践的プロトタイピング

5,325
-1

Published on

2014年4月19日 (土)にDeNAで開催した、若手デザイナー向けのワークショップで使用したスライドで、スマートフォンアプリのUI,UXデザインのノウハウを、1日で効率的に習得して頂く事を目的としたワークショップです。

Published in: Design
0 Comments
34 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,325
On Slideshare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
20
Comments
0
Likes
34
Embeds 0
No embeds

No notes for slide

はじめてのアプリUI、実践的プロトタイピング

  1. 1. 1 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. April 19, 2014
 DeNA Co., Ltd. はじめてのアプリUI 実践的 プロトタイピング クリエイターワークショップ#01
  2. 2. 2 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. ▼座学を織り交ぜつつ全体説明(60分程度) ・ペルソナとは? ・ユーザーシナリオとは? ・課題テーマ「ヘアカタログSNS」の説明 ! ▼ブレスト(60分) ・グループ分け(5分) ・グループディスカッション ! ▼プロトタイピング(90分) ・ホワイトボード or 模造紙を使って、サービスのワイヤーフレームを作成 ・プロトタイピングツール(POP等)の説明 ・プロトタイピングの作成 ! ▼まとめ(60-90分) ・発表と講評会、リフレクション ! ▼懇親会(60分) Agenda
  3. 3. Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. 3 自己紹介 和泉純一(いずみじゅんいち) 水谷友一(みずたにともかず) 山本麻友美(やまもとまゆみ) 佐藤遥(さとうはるか)
  4. 4. Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. 4 実践の中でペルソナ/シナリオ法を、 具体的なアウトプットに紐づけて理解すること 目的
  5. 5. 5 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. はじめに ペルソナとは 一般的に ユーザーモデル としてのペルソナと 開発手法 としてのペルソナと 2つの意味合いが混ざって話されているので、 それぞれの意味合いを整理します。
  6. 6. 6 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. ペルソナとは 1.企業が提供する製品・サービスにとって、 最も重要で象徴的なユーザモデルの呼称
 2.ソフトウェア/サービスのデザインに関す る開発手法のひとつ ペルソナ・シナリオ 法 の総称
 ペルソナとは
  7. 7. 7 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. ペルソナとは ペルソナとは 1.企業が提供する製品・サービスにとって、 最も重要で象徴的なユーザモデルの呼称
 2.ソフトウェア/サービスのデザインに関す る開発手法のひとつ ペルソナ・シナリオ 法 の総称

  8. 8. 8 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. ペルソナの作り方 今回のユーザーモデル として設定したペルソナ
  9. 9. 9 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. ユーザーモデルとして ペルソナが、もたらす効果 ユーザーモデルを設定することで 得られる具体的な効果について ペルソナが、もたらす効果
  10. 10. 10 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. ペルソナが、もたらす効果 サービスのユーザーモデルとして 22歳(女性)をイメージしてください プランナー エンジニア 殿様
  11. 11. 11 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. ペルソナが、もたらす効果 プランナー エンジニア 殿様
  12. 12. 12 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. 過去の自分 友人 テレビ 雑誌 好みのタイプ タレント 家族 アニメのキャラ 漫画 2ch ペルソナが、もたらす効果 趣味、経験、文化等の違いでイメージはバラバラ プランナー エンジニア 殿様
  13. 13. 13 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. ペルソナが、もたらす効果 22歳(女性)? ユーザーモデルの共通化が難しい プランナー エンジニア 殿様
  14. 14. 14 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. ペルソナが、もたらす効果 22歳(女性)の共通イメージ ユーザーモデル ! ペルソナ
  15. 15. 15 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. ペルソナが、もたらす効果 22歳(女性)の共通イメージ ビジュアルイメージだけでは機能しにくい
  16. 16. 16 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. ペルソナが、もたらす効果 人物像を明確に するために、知 識レベル、普段 の仕事、ライフ スタイルなどを 設定する ユーザーとサービスとの適切なインタラクションを 具体的にイメージしやすくなる
  17. 17. 17 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. ペルソナが、もたらす効果 ビジュアライズ、言語化する事で 誰のためのサービス/システムなのかが 明確になる UI/UXを考える際 ユーザー視点の共通化が計れる
  18. 18. 18 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. ペルソナが、もたらす効果 ペルソナを自分に憑依させる くらいの気持ちで
  19. 19. 19 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. ユーザーモデルとしての ペルソナの作り方 ※割愛 ペルソナの作り方
  20. 20. 20 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. ただ、これだけだと。。 ! ユーザーモデルとしての ペルソナを作った後の 具体的な開発手法ってのが、 イマイチよくわからない。 ペルソナの使い方
  21. 21. 21 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. ペルソナとは ペルソナとは 1.提供する製品・サービスにとって、
 最も重要で象徴的なユーザモデルの呼称
 2.ソフトウェア/サービスのデザインに関す る開発手法のひとつ ペルソナ・シナリオ 法 の総称

  22. 22. 22 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. ペルソナとは 開発手法として ペルソナを使って デザインできるコト
  23. 23. 23 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. ユーザーの目的にあった ソフトウェア/サービスの使い勝手 提供すべき機能自体も含めた " UX : ユーザー体験 " ソフトウェア/サービスによってユーザーが、どのような価値を受け取るのか? ユーザーの受け取る価値(良質なユーザー体験)を最大化するための開発手法 ペルソナとは 開発手法として ペルソナを使って デザインできるコト
  24. 24. 24 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. ペルソナを使ったデザイン開発手法 ペルソナ・シナリオ法 仮想的なユーザーモデルの詳しい プロフィールを設定し、ロールプ レイ的にサービス/システムを、 評価しながら最適なデザインを探 る開発手法 ペルソナの使い方
  25. 25. 25 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. ペルソナの使い方 まずは、ペルソナの目的、ゴールまでの 行動シナリオを 物語風 に作成 サービスの目的、コンセプトを明らかにするため サービスのターゲットユーザー(ペルソナ)が、 そのサービスをどういった目的で、どういった利用の仕方をするのか? 利用することでどういった体験を得るのか? というユースケースを、物語風のシナリオとして描く開発手法 ! サービスがペルソナのニーズに応えるためにはどうすればよいかを探るために用いる ! 物語風の行動シナリオからユーザーの利用状況を明確にする事で、 調査、開発の段階に携わって居なかったメンバーにユーザの利用状況から、 その背後のコンテキストまで含めた形で伝える事もできる コンテキスト(Context)あるいはコンテクストとは、文脈や背景となる分野によってさまざまな用例がある言葉であるが、一般的に「文 脈」と訳されることが多い。文脈により「脈絡」、「状況」、「前後関係」、「背景」などとも訳される。
  26. 26. Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. 26 ヘアカタログSNSアプリをつくろう お題
  27. 27. 27 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. ペルソナの使い方 ペルソナの目的、ゴールまでの ヘアカタログSNSアプリのシナリオ 自宅での夕食後に録画していないテレビ番組 を見ている時に、出演者のアスタイルが気に 入った。自分も似たような髪型にしたいが、 そもそも髪の長さが違うし、イメージがわか ないので、このアプリで似たようなヘアスタ イルの人を探した。
  28. 28. 28 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. ペルソナの使い方 ペルソナの目的、ゴールまでの ヘアカタログSNSアプリのシナリオ 春になったので心機一転でイメージチェンジ したい。たくさんあって絞りきれずどんな髪 型にしたらよいか迷っているところ。このア プリでトレンド、ライフスタイル、自分の顔 の雰囲気にマッチする髪型を探した。
  29. 29. 29 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. ペルソナの使い方 ペルソナの目的、ゴールまでの ヘアカタログSNSアプリのシナリオ 休日にパーマをかけ、このアプリを使って自 分の写真を簡単にアップロードして、リアル な友人に感想を聞けたので嬉しい。面識のな い人達の意見も、このアプリならプライバシー の心配なく、ポジティブな感想をメインに聞 けるので嬉しい。
  30. 30. 30 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. 5W1Hを押さえると ゴールが明確なシナリオになりやすい ペルソナの使い方
  31. 31. Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. 31 自分の求めるヘアスタイルが見つけられ、 評価を得る事によって、満足出来る。 サービスの提供したい価値
  32. 32. 32 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. ペルソナ・シナリオ法のデメリット? 最初にペルソナとシナリオを使って仕様を細かい ところまで固めて、それを基にしてサービス/シス テムの仕様を作っていく手法なので、仕様につい てはスクラム(イテレーション)というよりも、 ウォーターフォールに近い。 ペルソナの使い方 イテレーション 【iteration】特にアジャイル開発における、短い間隔で反復しながら行われる開発サイクルのこと。設計・試験・調査・改善という 一連の工程で構成され、内在するリスクや問題点を短いサイクルで発見・改善しながら開発を進められるという利点がある。   出典:デジタル大辞泉
  33. 33. 33 Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. ペルソナをアップデートする必要性とタイミング ペルソナを作成、使用している間に、社会情勢が変わり、それに応じて 企業戦略が変わることもある。このような場合の対応は、フォーカスの 当て方がロングタームなのかショートタームなのかによって決める。 ! 大きく普遍的なテーマ(課題)を取り扱うのであれば、社会的な環境の 変化に影響を受けないため、そのままペルソナを使用できます。 ! 具体的なプロダクト(サービス/システム)の場合は、フォーカスが当たっ ている方がインサイト*を得やすいため、ペルソナの情報を変えていくべ きです。 *インサイト(英: insight)とは、 ユーザー(顧客)の持つ潜在意識や洞察 ペルソナをアップデートする必要性とタイミング
  34. 34. Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. 34 ブレストする際のルール 1:批判をしない 2:自由奔放な意見を大事に 3:質より量 4:アイデアの便乗を歓迎 出典参考:http://nanapi.jp/18779/
  35. 35. Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. 35 シェアしたい相手のIDを 検索して追加 ここから   POPを共有   してください POPでのプロジェクトをシェア
  36. 36. Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved. 36 http://creator.dena.jp/archives/37709363.html こちらのセミナーについての まとめ記事は下記
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×