友人の聴いている音楽がわかる、フィード/UIデザインの基本/BONO
こんにちは、おそのです。
UI/UXの知識をしっかり身に付け、パワーアップしてデザイナーになる！
ために、UI/UXについてのアウトプットをnoteに書きます。
Figmaを使いこなせるようになる！＆UIの基本を身に付けるため、
コミュニティBONOのUIデザインの基本について書きます。
お題:友人が聴いてる音楽がわかる、UIをデザイン
Spotifyのような音楽アプリで、友人の聴いている音楽から新しい音楽を知ることができるUIをデザインしてください。
ペルソナは既設定がされています。
・既存の仕組みは損なわない
・β版として反応を見るのも含む
・UIテイストは既存のアプリに従うものとする
先見せ👀出来たものがこちらです👇
この画面を作るまでのアイディアを出すやり方が知れて、実践に繋がる内容です。画面を止め、考えるタイムを設け、手を動かしました。
間違った部分や足りなかった部分は、次に活かします。
気を付けます。
お題に取り組む前の説明👇
１.アイデア
情報はどんなものが必要か？いきなり作らない。
何が課題・目的を照らし合わせて進む
２.プロトタイピング
パターンを作成最初はラフを紙に描く
３.UI完成
スマホで確認して、修正を繰り返す
👇ここから手を動かして行きます⚽
1-2条件を網羅する
目的に必要な要素を把握します。
ユーザーの体験をフローで、並べるのがポイントです。
※間違っていても自分で考えることが頭に入ると思ったので、青字が私の考えです。
カイクンの解説後に補足や修正のために赤字で書いています。
以下、文字の色分けをしています。
1-3アイデア出し
フローからアイデア出しをします。
まずは、既存のフローを整理してから
"音楽が聴きたくなる"体験はアプリを使う前から始まっているということを抜かしていたことに、解答をみて気が付きました。
"曲が飽き、次の曲を探す"こちらもただ、再生するだけじゃないと気が付けました。
1-4アイデアに対して何を考えるべきか
コンセプトとアイデアを照らし合わせます。
ユーザーの特徴と課題感何が一番重要か見つけます。
定めたアイデアに必要な要素フローを使い、整理をします。
浅い。
もう少し、具現化が必要だと気付かさせられました。
今回はセキュリティ選択などは行わないけれど、サブ要素もしっかり懸念点もしっかり考えたいと思います。
1-5アイデア出しのまとめ
今までは、アイデア出し（方向性を決める）
👇
具体化を考える
考えること
１.オブジェクト
２.ナビゲーション（どこに配置するか）
2-1UIオブジェクトに必要な情報をアイデア出し
オブジェクトの中の必要な情報をブレストします。
細かく見ていくところが少し必要でした。
曲にもシングル/アルバム/プレイリストも、出しきれるようにしていきたいと思います。
2-2既存のSpotifyの中で最適な表示場所を考える
ボトムナビゲーションのタブの中で、最も相性が良いかを考えます。
ライブラリに入れるのが、最もしっくりくると考えました。
2-3My Libraryの中での情報の表示場所を考える
まだまだ、情報設計。紙とペンで良いです。
ライブラリ(親)の中にフォロー(子)要素を入れて行きます。
2-4UIグラフィックのリサーチ
具体的なUIの形を作って行くので、その前にリサーチ。
Spotify、twitter、インスタなど
2-5UIラフを紙に描く
ワイヤーフレームを手描きする（ラフって言ってもOK）
こうゆうパターンがあるよっていうレベルでOK
3-1UIパターン出し-Spotifyの参考パターン
UIビジュアルのパターンを作成
ピクセルまでこだわらず、ある程度のパターン出し
一旦作ってみて、要素の位置がおかしくないか？など見ました。
3-2パターン出し:実機確認でのUIチェック
スマホで確認をしました。実機は違いますね！
再パターン出しをしました。
3-3フィードバック内容を修正して完成
次のお題のために、ズレると不具合がでるかも？なので
カード部分は多少カイクンの作品に寄せて作っています。
グラフィック前のアイデアの出し方をふんだんに盛り込まれていて、
自分のアイデアの浅さを感じました。もっと深ぼろう。
赤字がいっぱいでしたが、アイデア出しの挑戦になりました。
次回、このアイデア出しを使い、続きのお題に挑みます。臨機応変にいいアイデア出しを取り入れてます。
でわでわ
この記事が気に入ったらサポートをしてみませんか？