非デザイナがGoogleUXDesignを受講してみて

## 結論
---
### 面白かったけど、、
---
### 量、多いです。
---
## やったこと
---
- 座学
- ペルソナ、ユーザーストーリー作成
- アプリのWireFrame、<br>デザイン作成、[プロトタイプ](https://www.figma.com/proto/2xI3P1HZiIbnzE3uVZ2AGD/%E3%80%90GoogleUXDesign%E3%80%91Kens-Movie-App-At-Cousera?page-id=182%3A929&type=design&node-id=182-930&viewport=253%2C549%2C0.05&t=gPTBRifYDoBN1iQ0-1&scaling=min-zoom&starting-point-node-id=182%3A930&mode=design)
- WebのWireFrame、<br>デザイン作成、[プロトタイプ](https://www.figma.com/proto/2xI3P1HZiIbnzE3uVZ2AGD/%E3%80%90GoogleUXDesign%E3%80%91Kens-Movie-App-At-Cousera?page-id=350%3A3704&type=design&node-id=418-4237&viewport=321%2C-22%2C0.06&t=ae2FiQjTpRbUzM1u-1&scaling=min-zoom&starting-point-node-id=418%3A4237&show-proto-sidebar=1&mode=design)
- ポートフォリオ
---
## かかった時間
---
### <b>10</b>ヶ月(2023.3-2024.1）
---
## 5点の学び
---
### ①今、何のデザインやリサーチをしているんだろう？<br>って考えるようになりました。

---
- 今はどのレベルのデザインで会話するべき？
    - アイデア出しのためのデザインなのか、開発に渡す段階のデザインなのか。
- 何のリサーチをするの？
    - ユーザー理解なのか、UIUXの課題を見つけるのか？それともリリースした機能の効果検証？？

---
### ②デザインの知識・テクニックが身につきました。

---
（かなり抜粋してます）
- 〇〇を強調するためにはこの画面デザインの方が良いのでは？
    - あえてアシンメトリすることで注意を引く
- スマホならこういったデザインの方が使いやすいんじゃない？
    - 1つのタスクに集中させるUI
    - クリックを促すCTA
- モーションは速度や持続時間の効果
    - 遅い動きは離脱につながる
    - 早い動きはユーザーを不安にさせる

---
### ③バイアスがないかな？

---
- 何かを決めるときは十分なサンプルがあるのか？気にするようになりました。
- 自分自身がバイアスを持っていると自己認識するようになりました。
- インタビューなどで被験者が好意的に見られようとして回答するケースもあるんだと知りました。

---
### ④デザインの難しさ

---
- ユーザーのFBはどこまで取り入れるべきだろうか迷いました。
    - FBを対応することで、どうUXが変わるのか、どんなポジティブな影響があるのかをどこまで説明したFBかで判断して、あったらいいな程度であれば対応しない
- どこまでデザインするべきか、修正しようと思えばどこまでも修正もできるから線引きが難しいと体感しました。
    - 講義に基準が出てきます（私は時間で決めましたが。。)
- 地道な作業がやっぱりあります。
    - レイアウトの微調整はたくさん。階層が増えればフォントを定めたり、要素が増えれば色や形を決めるのも必要。1つの画面を修正したら水平展開するとか。。

---
### ⑤ユーザーテスト難しい

---
- プロトタイプの状態をうまく伝えるのが難しかったです。
    - データはないので・作り込めているわけではないので、動く部分動かない部分全てを説明するのは難しい。
- インタビューするとき回答を誘導するような質問をしてしまいがちと気づきました。
    - ×：このレイアウトを<font color="#ec5353">改善しました</font>がどう思いますか？<br>→意図が見える
    - ⚪︎：〜はできま<font color="#ec5353">した</font>か？<font color="#ec5353">なぜ</font>そう動かしたのですか？<br>→のような事実と理由を聞く！
- 観察しながらメモ取るのは無理！
    - スマホの画面遷移だと、どんな感じでボタンを見つけて、タップして戻ったり、スワイプしてみたり、被験者の顔や言葉を観察して変化があれば質問したい。でもメモも取らなきゃ。無理でした。

---
## 作ったもの、紹介します。
---
### の前に
---
### そもそも、この資格とは？
---
- Google UX Design プロフェッショナル認定証。
- Googleが用意したUXデザイナになるためのオンライン講座を受講することで取得できる資格。

---
- 全7コース
- 週10時間、6ヶ月。英語です。
- 英語字幕あります。日本語字幕ないです。

---
1. ユーザーエクスペリエンス（UX）デザインの基礎(26h)
1. UXデザインプロセスの開始（共感、定義、アイディエーション）(22h)
1. ワイヤーフレームとLowFiプロトタイプ作成(17h)
1. UXリサーチの実施(20h)
1. HighFiプロトタイプ作成(29h)
1. WebサイトのためのUI構築(22h)
1. SocialGoodなUXデザインと就職準備(24h)

---

## 要は、<br>UXデザインの基礎学んで<br>スマホアプリでデザインプロセス体験して<br>Webサイトのデザインで実践して<br>ポートフォリオを作って<br>UXデザイナとして働く準備をします

---

## そして、<br>これを受講した人は<br>「<b><font color="#1e90ff">エントリーレベル</font></b>の<br>UXデザイナとして働けますよ」<br>って資格ということです。
---

## 講座では、[Sharpen](https://sharpen.design/)でテーマを選びます。<br>「Design a mobile payment app for a movie theater.」を選びました。

---

### ペルソナ
<div>理想はユーザーインタビューして共感マップを作り、ペルソナを定義しました。</div>

![スクリーンショット 2024-02-04 22.38.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1782672/95ebd9b4-3b04-0352-3030-f7115b9acba2.png)

<div>その人にとって何が達成したいことで、何が不満か、背景情報が想像できるかがポイント</div>

---

### ジャーニーマップ

<div>ユーザーが目標を達成するために辿る道のりを考えました。</div>

![スクリーンショット 2024-02-04 23.01.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1782672/f85afec8-7472-b89a-9e1e-6ed27fceac72.png)

<div>Goalまでの障害を可視化することや回避ルートを考えるのに役立つ。バイアスも減らせるのがポイント</div>

---

### PROBLEM STATEMENT

<div>ジャーニーマップで整理した障害（ペインポイント）を分析して、ニーズや課題を明確にしました。</div>

![スクリーンショット 2024-02-04 23.13.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1782672/662f3e61-2613-9035-bd4a-fdbe80e091f3.png)

<div>誰が問題を経験していて、解決するペインポイントは何で、問題はいつ発生するのか？、なぜその問題が重要なのか、どこで起きるのか？今どのようにして目標達成しているのか？5w1hで分析します</div>

---
### GOAL STATEMENT

<div>PROBLEM STATEMENTの解決方法や対策の仮説を考えます。<br>そしてこれから作るソリューションのValuePropositionを考えます。<br>それをGOALSTATEMENTに書き出しました。</div>

![スクリーンショット 2024-02-04 23.09.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1782672/4c6f2c36-1211-c6a6-6c61-97c5e2dfe37c.png)

<div>ValuePropositionはアイディエーションしたり、競合調査をしたり、[HMW](https://projectdd.jp/hmw-ef75c975a4d2) のようなフレームワークを使って考えます。</div>

---
### ストーリーボード

<div>製品のユーザー体験を説明/追体験/理解できるようにポイントとなるUXを書き出しました。</div>

![スクリーンショット 2024-02-04 23.32.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1782672/62157a4b-b88c-e075-bfa6-b8fb0859c770.png)

<div>実際のデザイン活動においてはスキップしても良い気がします。どちらかというとステークホルダの説明資料や、内部の意識合わせのための意味合いが強い？</div>

---

### ペーパープロト

<div>アイデア出しのために簡易なデザイン(構造が分かればOK）を作りました。</div>

![スクリーンショット 2024-02-04 23.35.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1782672/9b094c8d-f4c2-be75-2691-644081f715de.png)

<div>特に重要な画面は何パターンかアイデア出しをしました。デジタル化する前にここでFBをもらいましょう。</div>

---

### Low-Fiデザイン

<div>ペーパープロトからデジタルプロト（Low-Fi）を作成しました。</div>

![スクリーンショット 2024-02-04 23.38.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1782672/b24cb512-5ff6-bd58-2f74-067240756493.png)

<div>いくつかのテクニック（講義に出てくる）を活かしながらデザイン化します。</div>

---

### ユーザーテスト

<div>Low-Fiのデザインでユーザーテストを実施しました。</div>

![スクリーンショット 2024-02-04 23.44.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1782672/e2e921e5-fe58-e588-66db-0bead9b601f2.png)

![スクリーンショット 2024-02-04 23.45.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1782672/2a1fbd54-9c3d-e8da-2b55-90bcaaacd480.png)

<div>テストの注意点や、インサイトの見つけ方なども講義に出てきます。</div>

---

### High-Fiデザイン

<div>ユーザーテストを終えたらLow-Fiのデザインをモックアップ（High-Fi）へ仕上げました。</div>

![スクリーンショット 2024-02-04 23.47.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1782672/33b713f1-d3f2-bbcd-e24a-09a9ab34451a.png)

<div>アニメーションや画面遷移も設定します。作成したらユーザーテストを行い改善します。</div>

---

### ポートフォリオ
<div>デザインスプリントとしては、High-Fiで完了ですが、講座ではUXデザイナとしての就職を見据えたポートフォリオを作成しました。</div>

![スクリーンショット 2024-02-04 23.50.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1782672/0b518f04-2efb-b824-eb87-d0885677a2f0.png)

![スクリーンショット 2024-02-05 12.52.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1782672/2ed420e4-c3f1-76f5-be67-68580f0f8043.png)

---

## 以上です！

---

## 最後に
- 講座の中では、テキストベースのテストだけではなく、デザイン成果物を受講生同士でピアレビューすることもありました。他の学生のアウトプットが見られるので面白いです。
- GoogleUXDesignの講座は、非デザイナの私でも修了できました（諦めないことが大事な気がする）。このQiitaの記事が他に講座を受講される方のお役に立てば幸いです。