スクリーンショット_2019-05-08_18

『1週間UX+UIチャレンジ』という修行法でデザイナーへの道をハックしよう

ARスタートアップMESONで、CEOのカジさん(梶谷健人)(『やさしいグロースハックの教科書』著者)から伝授された『1週間UX+UIチャレンジ』というトレーニングがめちゃくちゃよいです。


- UX+UIデザインが未経験の人が
- 最短3ヶ月で知識0/実践0の状態からでもサービスデザインを行えるようになるための(3-6ヶ月でUX+UIでサービスデザインにジョインするための)
- UX+UIの実践的なトレーニング方法
なのです。

職場や機会に恵まれないと学べないのが未だにUX+UIの現状だと思うので、UXやUIの本は読んだ事あるが実際に手を動かした経験がない人、誰しもができる実践トレーニングとして、この方法が使われていったら嬉しいです。
(※数冊のUX+UIの本を読んだことがある。sketchをudemyで学んで基本操作がある程度わかる人なら今すぐ実践できます)

ではさっそく方法を!

UX+UIトレーニング方法 4steps
1. サービス・アプリのお題をランダムに考える
2. UXを5ステップで設計する
3. UIをデザインする
4. フィードバックを受ける

シンプルに、この4ステップを1週間でぐるっと回していきます。


[準備]
UX+UIについて造詣が深いボスに修行の監督をしてもらえるようお願いする。
or
切磋琢磨できる友人を探す。
などで複数人でおこなってください!
サービスをランダムに考えたり、フィードバックを受ける際に、ふたり以上が必須となるからです。

1. サービス・アプリのお題をランダムに考える

1-1. サービス・アプリのお題をなんでもよいので紙に書く

たとえば、
「Space-Xが販売する宇宙へのチケット販売アプリ」
「ビールをサブスクリプションするサービス」
…とにかく思いついたものを気ままに、ふたりで書いていきましょう。


1-2. シャッフルする

互いに3案くらい書いたところで、何らかの箱に入れシャッフルをします。


1-3. 1枚引いてそのサービスを今週のお題にする

今週のお題は
世界中のイケてるARデモ動画をキュレートしてくれるアプリ
になったので、続いてUXやUIについて考えていきます。



2. UXを5つのステップで設計する

ここからは自分のいままでのインプットした本やwebサイトを参考にUXを設計していきます。
(=何が正しいかというより今回の自分の進め方がこの先備忘録的に記載されています。)


2-0. お題となるサービスのUXをどう設計していくか考える

1. 行動・操作シナリオの作成…ユーザーシナリオを考える
2. コンテンツの分類軸の設計…サービスに掲載するコンテンツを考える
3. UIモデルの設計…フロー図を書く
4. レイアウトとインタラクションの設計…ペーパープロトタイプ
5. デザインツールで実際にデザイン…UIデザイン

イメージとしては
 Jesse James Garrett 氏の以下図のような考えでデザインを進めます。

参考文献『はじめてのUIデザイン』『Elements of User Experience』「UX を構成する 5 つの段階を振り返る」




2-1. 行動・操作シナリオの作成…ユーザーシナリオを考える

サービスが、どのようにユーザーの課題を解決するかを考えていくステップ。
そのため、
- どのような人が
- どのようなときに
- 「ARデモ動画をキュレートするサービスを用いるか
について考察をする

・「どのような人が」の深掘り方法
人物像
…ARに関するプランニング・デザインを行なう24歳男性、水橋大樹

1日の行動イメージ
…プランニングやデザインに関するリサーチから、アイデアブレストを行なう。ソーシャルでの発信もたまに行なう。

達成したい目標
…アイデアにインスピレーションをもたらしたい。知見を深めたい。世の中の人をあっと驚かせるARデモコンテンツをつくりたい。

現状の課題
…アイデアの参考になるUIやデモコンテンツが見つからないor手間がかかる


・「どのようなときに
ストーリーとタスクで分解して考える。

- ストーリー
「来週控える、ARに関するコンセプト・アイデア会議にてARに関する事例を集め、みんなの参考資料として使う必要が出てきた。また他方開発中のアプリケーションにてUIデザインを学ぶ必要が出てきた」
と仮定する

- タスク
ログイン
→自分と関係あるARデモ動画を調べる
→絞り込む
→再生する
→参考になったものをアカウントに保存する


2-2. コンテンツの分類軸の設計…サービスに掲載するコンテンツを考える

コンテンツ(=今回で言うとデモ動画)が持つ属性を洗い出す。

- 作者名
- デモ名
- 会社名
- デバイス
- 発表日
- 何を目的としたデモか
- どのようなコードが書かれているか
- 使われたSDK
- カテゴリ・ジャンル(どの産業につかわれるものか)
- 評価される点/秀でている点

ユーザー視点で必要な要素をpickする。

- 作者名
- デモ名
- 会社名
- デバイス
- 発表日
- 何を目的としたデモか
- どのようなコードが書かれているか
- 使われたSDK
- カテゴリ・ジャンル(どの産業につかわれるものか)
- 評価される点/秀でている点

またここでサービスを整理し、動画を投稿する人も存在するような
動画を見たい人とデモ動画も見せたい人が共存するアプリ
というサービスの方向性にした。



2-3. UIモデルの設計…フロー図を書く

サービスのUXが決まったので、次は画面遷移図に落とし込んでみましょう

どう画面が遷移するかを考えていくフェイズです。こちらの記事のようにフロー図を作成していきましょう。(なお書き方はいくつかあるようです、下のは勧めやすい一例の一つです)


2-4. レイアウトとインタラクションの設計…ペーパープロトタイプ

画面遷移が決まったら、画面ごとのレイアウトとインタラクションを考えましょう。

ペーパープロトタイプを作る際は「 類似サービスをいくつか集める」ことから始めていきます。

このサービスは
「好きな/観たい動画や作品と出会える」
「ユーザーの投稿や自由なやり取りがある」

という点から、 
note, NETFLIX, Youtube, Mercaridribbble(海外のデザイナーのポートフォリオSNS)
を参考にしつつ設計をイメージしていきました。

     今回のペーパープロトとは違いますが1例となります


3. UIをデザインする

udemyでデザインツールのfigmaやsketchのを一通り勉強すると良いかもです、困った方は筆者まで)
画面遷移やレイアウトを作成したら、最後にデザインを勧めていきましょう

- 類似サービスをとにかく探しペーパープロトを完成させる
- 必要そうなUIキットをインターネット上でさがす(ui8fontawesomeといったuiキットを探せるサービスを)
- デザインツールで作成
という3ステップでデザインしていく。

そして今回デザインしたのが
demofullというサービスです
いつでもデモを見たい人は自分のインスピレーションを受けるARの動画を鑑賞することができ、クリエイターは制作したデモ動画を自由にシェアすることで評価され自身の仕事につながる
というテーマで制作しました。

Top画面


トップ画面ドロワーメニュー


Explore(デモ動画探し)画面


Demo(デモ動画)詳細画面


アップロード画面


ユーザー詳細画面




4. フィードバックを受ける

1週間行ったことを簡単にボスかパートナーにプレゼンテーションします
&
UX設計とUIデザインという2側面でフィードバックをもらいましょう!
(友達とやる際はユーザーインタビューのように純粋にそのプロダクトを使用するとしてどう思ったかフィードバックをもらいましょう)

UX設計編

- ペルソナよりCPS(Customer, Problem, Solution)がそもそも存在するかを検証、あるかを確かめるが先。CPSをきちんと定義する言葉やフレーズが足りていなかった。
- ペルソナは以下の4象限(人柄イラスト、人柄文言、普段の振る舞い、ゴール)で考えると良い

- サービス体験を説明する際に、考えのプロセスだけが述べられ結論がないことがあった。思考と結論はセットでないと相手につたわらない。
- 表示するコンテンツを決定する際に、ユーザーニーズに根ざして根拠を提言すること。主観だけでサービス内コンテンツを決めないようにする。

等が挙げられた。ので次回以降取り入れていく

UIデザイン編

- ユーザーのゴールが、動画をすぐに見つけられることであるならトップページの最初のタブは「following」ではなく「Popular」や検索画面ではないのか?
そういう仕掛けがある類似サービスを探したほうがよい。

- 投稿者もいて初めて成り立つCGM系のサービスは投稿への障壁をとことん減らす必要がある。しかしこの動画投稿デザインではその障壁を下げることができていない、ので投稿や出品するユーザーが多い類似サービスを探す。

- 何個も良いサービスと触れることで引き出しを増やす

というフィードバックを受けたのでこれから取り入れていきます。


以上が

『1週間UX+UIチャレンジ』の内容でした!

UX+UIトレーニング方法 4steps
1. 架空のサービス・アプリをランダムに考える
2. UXを5つのステップで設計する
3. UIをデザインする
4. フィードバックを受ける

の4ステップをぜひ試してみてください。

これからも毎週、お題を受けてサービスデザインをしていくので良かったらご覧ください。
UX+UIに関するご意見やご感想もぜひぜひ、自分のツイッターアカウントまでよろしくおねがいします。


-----------------------------------------------------------------------------


MESONはこのように本質的にサービス・ARの価値や未来について考え、ものづくりしていく集団です。一緒に本当に価値のあるARサービスを作っていきたいクライアント、メンバーを募集中なので是非ともお気軽に連絡くださいませ。



👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾👾          ⚡️ピピピッ⚡️               🛸