デザインコミュニティ【BONO】で学んだUIデザインの基本
はじめに
こちらの記事は、ぴよぴよスマホアプリエンジニアである私が、BONOに入会して学んだことをまとめたものです
単なるメモではなく、UIUXに興味があるエンジニアの皆さんのためになる内容を目指します！
黄色いセクションだけ読むとポイントを拾うことができます！
BONOとは
UI/UXデザインの未経験者、初心者がデザイナーに転職できるレベルまで成長できるコミュニティと認識しています！
入会して2日目ですが、教材の豊富さに慄いています.......いつ終わるのでしょうか？
今回学んだセッション
UIデザインの基本というセッションを一周しました！
内容としては、見た目を決めるための情報整理やアイデア出しを学べるセッションでした！
作ったもの
まずはビジュアルがあった方がわかりやすいと思うので、作ったものから紹介します！
A. Spotifyに追加する友達が聞いている音楽がわかるUI ← 動画を見ながら一緒にやりました！
B. Spotifyを初めて使う人が、1を知れて使いやすくするためのUI ← 自分で作りました！
| 初回マイライブラリ | クエリが空 | クエリ入力 |
|---|---|---|
 |
 |
 |
UIを作るまでの過程
さて、これができるまでに何が起きたのか、Bの制作過程と共にポイントを解説します！
条件を網羅する
Bのお題は、「AをSpotifyを初めて使う人が知れて、使いはじめやすくするためのUI」です
そこで、初めて使うひとと知れるが大切と考えました
それを踏まえ、ユーザーフローを書きました！
＊フロー図は全て紙とペンで書きましたが、私以外は読めないので全て清書して載せます
アイデア出し
アイデア出しでは、既存の体験を整理してから、各画面ごとに考えうるアイデアを出していきます！
考えたこと
シェアでフォローは良さそうですが、インスタの投稿と重なるかな？と思い保留としました
オンボーディングでの機能説明を入れると新規ユーザーに訴求できると考えましたが、この機能はコアユーザー向けなため、オンボーディングには入れない方が良いと判断しました
マイライブラリからフォローできる動線と、機能をイメージするUIがあるのは、アーティスト追加などの既存UIと近しくて良さそうです
フォローを促すポップアップを何度か曲を聴いた後に出すのもアリかと思いましたが、オンボーディング同様、全ユーザーに出す必要はないと判断しました
よって、マイライブラリからフォローできる動線と、機能をイメージするUIが採用されました！！
アイデアを具現化
アイデアを具現化するためには、ユーザーの体験を再度フローにして曖昧な要件を洗い出します！！
考えたこと
既存機能を使うことが望ましいと考え、FaceBook連携を示すことはマストとしました
また、マイライブラリでは常にアーティストやポッドキャストの追加を促すアイコンがあったので、表示条件は特につけず、常にフォローを訴求するUIを出すことにしました
また、そこから遷移する、フォローするためのページが別途必要そうと判断しました
UIオブジェクトに必要な情報をアイデア出し
オブジェクトに必要な情報を考えるにあたって、まずは片端から思いつくものを書き出します！
そしてその後、書き出した情報に優先順位をつけていきます！
考えたこと
正直、ここはよくわからず、テキトーに番号をつけました......
そのため、後のデザインとの不整合が多く、ここでしっかり考えて粘るべきだったと反省しています💦
ナビゲーションの検討
マイライブラリに設置することは決めていましたので、マイライブラリの情報を細分化してそれぞれの特徴を検討しました！
タブ：選択のための場所
コンテンツ：すでに選んだものを表示
〇〇を追加：機能紹介と訴求 ← ここでは！
考えたこと
アイデア出しフェーズのイメージに引っ張られ、〇〇を追加に設置することが良さそうとは思っていましたが、特徴を整理することで、より根拠を持ってなぜそこが良いか言語化できることに気がつきました！
UIグラフィックのリサーチ
UIを考えるにあたって、参考になるアプリのスクショを撮って撮って撮りまくります！
そして、全てFigmaに実際と同じ大きさで貼り付けて準備完了です！
よくみるデザイナーさんの作業Figmaの意図がわかって衝撃を受けました！
UIラフを紙に描く
パターンにより注目するためにまずはデザインツールを使わずに紙に書いていきます！
エンジニアの方だと、デザインを作る際はデザインツールも紙も使わずに頭の中で完結する人も多いと思いますが（私もやりがちです）、スクショを見ながら紙にパターンを書いていってやっと気づくことがたくさんあります！
良いUIを作るためには、必ず手を動かそう！と思いました
| Spotify参考 | Instagram参考 |
|---|---|
 |
 |
UIパターン出し
ここからはFigmaを使って、パターンを再現していきます！
紙の段階では良し悪しを判断せず、一回作ってみる、と学びました
また、作成したパターンは必ずFigma Mirrorを使って実機で確認することが重要です！エンジニア業務と一緒ですね！
これで終了です！
その他学んだこと、気がついたこと
- 基本的に、既存アプリのUIを使い回すことが大切なんだなと身に沁みました
- アクションは右利きが多いため右下にありがち、など知識も必要だと知りました
- 動画では、カイクンさんが実際にデザインを作っているところを見ることができ、Figmaの知らない機能の多さに慄きました
おわりに
UI/UXデザイン、エンジニアリング、ともにぴよぴよなので、間違った部分がありましたら優しく教えてください
これからも学んだことをまとめて発信していこうと思います！
Discussion