アジェンダ

UX/UIとは？：30min

UXデザインワークショップ：120min（途中休憩）

事例紹介：15min

まとめ・Q&A：15min

自己紹介

高橋真理

2008年新卒でメンバーズに入社

デザイナーとして社会人スタート

コーポレートサイトとか作ってました

2011年 子会社コネクトスターに参画して自社サービス開発担当に

toCのサービス開発に携わる中でUXから実装まで

今はAS8でアジャイル開発やってます

UX/UIとは？なんか、最近よく聞くよね

http://www.slideshare.net/SaoriBaba/ux-14752690■UXデザインとは

わたしたちが提供するサイトの中心は間違いなくユーザ。彼ら彼女らを理解し、満足させるサイトにしないと価値がない。

why UX?

http://www.naharnet.com/stories/en/77439

UXから考えてる 開発から考えてる

天気予報アプリの例

http://www.atmarkit.co.jp/ait/articles/1303/25/news013_5.html■もし新人女子営業が『UXデザイン入門』を読んだら

UX/UI？

UserExperience

UserInterface

→ユーザ体験

→ユーザと情報をやりとりするインターフェイス

UX

UI

■J. J. Garrett氏の考えるUX

http://www.atmarkit.co.jp/ait/articles/1008/31/news096.html

Good UI ≠ Good UX

■1分でわかるUIとUXをわかりやすく説明する写真とお話

http://www.persistent.org/me/?p=389

もう一度、UXとは

http://www.slideshare.net/SaoriBaba/ux-14752690■UXデザインとは

とはいってもねー

ちょっと概念的でわかりづらいですよね

UXとは極めてあいまいな概念なのです

このあとのワークショップで「UXから考えるとは何か」を体験してもらえたらなと思います

なにはともあれ、全てはユーザを知ることから始めよう！

では、ワークショップに参ります

ワークショップのゴール

ユーザ中心のサイトまたはアプリを1つ考えてみたいと思います

※このプロセスを「UXデザイン」と呼んだりします

やること

1. ユーザを知る

2. ユーザに対して何が提供できるか考えてみる

3. ちょっと形にしてみる

4. 発表

大学の授業ってつまんないよね

寝ちゃうよね

突然ですが

どうすれば大学の授業が楽しくなるか？

お題

大学の授業が楽しくなるサイトまたはアプリについて考えていきましょう！

まずはユーザを知ろう

インタビュー

ユーザがなぜ授業が楽しくないと思っているのか/どうしたら楽しいと思うのかを聞き出してください

まず、10分間で質問リストを作ってみます（5、6個）

その後二人一組でインタビューをしてみます

質問/インタビューの注意点

Do Don’t

- たくさんのメモをとる- 自由形式の回答を促す

質問- 背景にある物語を聞く（な

ぜXXですか？どうXXだったのですか？）

- 事実を聞く- 黙ってよく耳を傾ける- 笑顔でいる

- 未来の行動について質問する

- yes/noで終わる質問（yes, and?）

- 誘導尋問をする- しゃべりすぎる

質問リスト作成（10分）

インタビュータイム10分×2

終了！

インタビュー内容を整理しましょう

行動 ニーズ/課題

高橋真理さんの・・・

-就職決まったし単位もヨユーだし、遊びで学校に来てる

-授業はつまらないのでノート上で友達と喋ってる

-誰も知ってる友達がいない時は寝てる

-友達と楽しく過ごしたい-大学では友達に会いたい（友達に会えるから大学に来る）

-友達がいないとガッカリするけど、いちいちメールで聞くのもめんどくさい

インタビュー内容整理10分

終了！

おつかれさまでした休憩10分

どんなサイト/アプリが考えられる？

ワークショップ第2部

どんなサイト/アプリ？

インタビューした同期が「大学の授業めっちゃ楽しい！」ってなるためにはどんなサイト/アプリが考えられるでしょうか？

インタビューで聞いたニーズ/課題を元に考えてみましょう

こんな感じでまとめてみよう

[XXXXX]したい○○○○くん向けのこのサービスは[XXXXXXXX]ができることで、

○○○○くんは大学の授業がメッチャ楽しくなる

まとめタイム15分

※1枚に書く

終了！

最後ですちょっとだけ形にしてみましょう

手書きでサイト/アプリのプロトタイプ（※試作品）を

つくってみよう

超超ーラフな、こんな感じでOKです

手書きプロトタイプづくり20分

※1枚あたり1ページで※このあと発表です

終了！

おつかれさまでした休憩10分

発表タイム

※1人3分以内くらいで

さっき書いてもらった1文と、主要機能を紹介してください。

ではちょっとだけ、事例紹介します

大塚製薬様の「ヘルシー大豆レシピ」（iPhoneアプリ）構築事例をシェアします

ダウンロード

してね！

レビューも書いてほしい・・な

https://itunes.apple.com/jp/app/id628311086?mt=8

「大豆レシピ」で検索

やったことです

1.ファクト収集

2.ファクト整理

3.仮説づくり

4.プロトタイプ作成

（普通ですが）競合調査レシピサイト・アプリ 20個くらい

大豆×料理で仮説づくりのブレストをしました

大豆=健康イメージある健康な料理って淡白であまりバリエーションないいつも同じ料理作ってて、レシピにバリエーションを求めてる

社員インタビューと観察

1.事前に用意した質問項目で、普段の料理に関する行動やレシピとの接し方を聞き出します。

2.同時に普段のようにスマホでレシピを探してもらいその時の行動（どうやって検索するか）を観察します。

質問項目＆シナリオ

1.普段料理していますか？

2.料理しているときにレシピを見ますか？

3.食方面での健康に対して気をつけてることがありますか？（大豆というテーマだったため）

4.いつものようにレシピを探してもらう

1.スマホ使っているか？

2.複数メディアを見ているか？

3.どういう気持ちで見ているか？

インタビューメモ※とにかくメモをとりまくります

こんなんがA410枚くらいに渡ってあります。

集めたファクトを整理します

まずはばーっと事実を書きだして、徐々にグループにまとめます。

最後に箇条書きで多くみられた意見を書き出します

集めたファクトの最大公約数をペルソナとして落とします。

※イメージ写真出典： http://www.slideshare.net/clevergirl/tokyo-1-day-9327971

ペルソナがとると思われる行動のシナリオをファクトを元に策定します。

行動シナリオがあることで、ユーザが具体的にどのシーンでどんな機能が必要なのかが見えてきます。

※このように、本来は「どうすればユーザニーズを満たせるか」についてはインタビューで聞くのではなく、集めたファクトを元にプランニングします

行動シナリオで出てきた必要機能を元に紙に手書きでプロトタイプ（ペーパープロトタイプといいます）を作成します。ツールを使用し、手書き段階で動かして

アプリの全体観を確認します。

紙を写真に撮るだけで動きをつけて簡易プロトタイプを作れる無料iPhoneアプリ「POP」を使用しました。http://popapp.in/

その後実装の中でブラッシュを繰り返し、リリースバージョン完成です

まとめという感じでユーザを知ることで、どんな機能が必要か、どんな見た目がいいのかをより確実に考えることができます。だからUXの考え方は大事です。

ついお客さんの視点とか要望起点になってしまいがちですが常に「ユーザ視点」を持ってユーザにきちんと使われるサイトなりアプリを作りましょう。

でも、ユーザの気持ちをきちんと理解して、それにきちんと答える機能を作るのって思った以上に難しいです。だから、（特にtoCのサービスでは）変化につよいアジャイル開発が有効なのです。＜次の研修に続く＞

Q&A

ありがとうございました！

https://www.facebook.com/mari.takahashi.211