![見出し画像](https://assets.st-note.com/production/uploads/images/151181189/rectangle_large_type_2_c6e28dac8dc93fc0f3ad674b21a691f2.png?width=1200)
Google UXデザインコース3 学習感想〜ローファイ・プロトタイプ、ストーリーボード
いよいよコース3は実際の制作物だらけになっています。今回は手書きのワイヤーフレームを量産するので、芯の柔らかい鉛筆を用意することをおすすめします。フリクションスリムでやるのはやめましょう(自戒)
![](https://assets.st-note.com/img/1723984655672-bkjq933qts.png?width=1200)
特にこのコース3は手書きの物が多いです。コース2では資料ばかり作っていましたが、こっちはこっちで別のしんどさがありました。
本当はコース3と4をひとまとめの記事にしようと思っていたのですが、コース4の課題量が地獄すぎて一緒にすることはできませんでした笑。ああ…前回まではそんなにハードじゃなかったんだなって、コース4が終了した今現在振り返るとわかるのでした。
コース3の内容
Build Wireframes and Low-Fidelity Prototypes
ユーザーフロー(フローチャート)を考える
手書きのストーリーボードを作成する
手書きのワイヤーフレームを作成する
Figmaでワイヤーフレームとプロトタイプを作成する
みんなFigmaのプロトタイプに期待しているかもしれませんが、その前までめっちゃ長いです。メモを紙に書き散らす癖がない人には大変かもしれません。
私は法学の修士1年のときに判例研究の要約やアイデア出しの訓練をさせられていたので、その時に比べたら楽でした。梅棹先生の『知的生産の技術』はM1には難しかった。
ストーリーボード
ビックピクチャーとクローズアップ
PDFの配布があったので、iPadを使ってGood Notes 5にApplePencilで記入しました。
![](https://assets.st-note.com/img/1723984703546-XswnqgWZXc.png?width=1200)
ストーリーボードは手書きで「ビッグピクチャー」と「クローズアップ」を作成するので、ユーザーに注目した一連の流れとアプリの画面遷移に注目した一連の流れとの違いが勉強になりました。
![](https://assets.st-note.com/img/1723984723488-azhNSKfw5u.png?width=1200)
前回のコース2では、エンパシー・マップやユーザーストーリー、ユーザージャーニーを作成し(スプレッドシートに細かく書き込むことになったユーザージャーニーが大変だったのは覚えている…)、そこから問題文・仮説文(プロブレム・ステートメント)を抽出しました。
今回はそのプロブレム・ステートメントからゴール・ステートメントを導き出し、ユーザー・フロー(いわゆるフローチャート)、ストーリーボードを作成しました。
手書きのワイヤーフレームは数勝負
1画面につき5案ずつだとぉーーー?!
紙の手書きワイヤーは、雑に作れてアイデアをさっさと形にできるという利点があります。デジタルのワイヤー(ローファイ・プロトタイプ。ローフィデリティ・プロトタイプ)では、作るのに時間がかかるので案の数も少なくなってしまう。
それは、わかる。頭ではわかるし、現場的にもわかる。
が…実際に課題としてやると……
数が多い……………死ぬ………
![](https://assets.st-note.com/img/1723984942751-htBICg6fkk.png?width=1200)
上の写真はホーム画面の案の一部分のみです。。
想定したページの分×(最低5案+最終案)って手が痛い。
やばい。軽い気持ちでフリクションで書くんじゃなかった。手が痛い。芯が柔らかい鉛筆にしておくべきだった。
お題の選び方
お題は…、Sharpenとかいうテーマガチャを何度も引き直すことになります。
もう始める前の自分に一言アドバイスできるならこれですよ。コース3の最初のあたりのユーザーフローの段階で、手順が多いアプリにしないほうがいい!手順が多くて画面が多くなってしまうアプリだとコース4がしんどいからめっちゃ時間かかるしつらいっスよ。
私の反省から、おすすめのお題の選び方をまとめるとこうです。
自分が普段から不満を感じているアプリを想像する(利用シーンを描きやすくするため)
自分が利用者に共感できるアプリを選ぶ(UXリサーチで躓かないため)
何らかのアクション達成までの手順が少ないものを選ぶ(デザインの挫折防止)
画面が多すぎないものを選ぶようにする(プロトタイプの挫折防止)
課題のアプリを考えるときのお題(対象)ですが、コース2あたりでSharpenというランダムにお題を選べるアプリでそれっぽいお題を選びます。が、基本がアメリカっぽい考えで出来てるのか、私にはしっくりこないお題が多くていっぱいガチャボタン押しました。いつまでも決まらなくてつらかった。
じゃあ学習のときに出てくるような例に似せたら…と思うじゃないですか。
例で出てくるのはピザ配達アプリとか、お花配達アプリとか、犬の散歩アプリとかなんですけど、私はピザは二枚目無料を狙ってお店まで取りに行くし、お花は直接選びたい派だし、飼ってるのは猫だしで、どういうアプリを対象とするかも悩みました。
結局、ストアカとかココナラとか見ている時に悩むことが多いので自分におすすめの先生をサジェストしてくれるスクールアプリにしようかなと思いました。
デジハリの予約システムには2023年4月時点でおすすめ機能ついてないから、もしあったらどういうUIがいいんだろうって考えるのは楽しいなと感じたのです。
Figmaでローファイ・プロトタイプを作成
![](https://assets.st-note.com/img/1723985151264-Xpk2loeA6S.png?width=1200)
はぁ〜、今回こそこのコースを始める前にイメージしていたことかもしれません。Figmaを使って画面をタップできるローファイ・プロトタイプを作るっていう今風っぽいUIっぽい学習です。そのはずなんだけどなーここまででもうつかれたなー虚無だなー
前の手書きの紙の作業で生み出したり統合したりした作業が膨大だったのでこっちやってるときは虚無でした。はよ終えたいみたいな気持ちでいっぱい。
幸い、実務でFigmaには慣れているのでチュートリアルは聞き流し、ザクザク作って完成させました。でも画面が多くてつらかった。ギリギリ最低数の画面になるようなシンプルなアプリにすればよかった。つらかった。
私は架空のスクールのアプリで「先生検索機能」を実装することにしましたが、ああーめんどくせー!今戻れるならテーマ変えてえーというのが本音です。でもここまできちゃったからね。仕方ない。いままでのペルソナとかユーザージャーニーとかの膨大な英語で作った資料を無にするのは嫌だ。がんばるぞ。。
NEXT!コース4は「書類」地獄です!!!笑
★GoogleUXDesignの感想記事