TRY1解答！ユースケースから見た目のアイデアを作る流れ

まずは流れから真似してみてください！

今回のお題は難しいと思います。解答のレベルでできる必要はありません。こうやって見た目が変わるのか、逆に考えていくのか。これを体験してみてください。

‍

□ プロセスを辿るのが今回は大事！です

1. ユーザーのユースケースを整理ができているか？
2. ユースケースを元に : 機能や情報のアイデアが出せているか？
3. ユースケースを元に : 見た目のアイデアが出せているか？

‍

□ ショートバージョンはこちらから

まずは簡単に見たい方はこちらから

https://www.bo-no.design/contents/uibiziyu-1-5

‍

‍

Figmaのファイルはこちら

‍
https://www.figma.com/file/iaXpHPClRMRI8YCxVmmJyd/3-1.UI%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%81%AE%E5%9F%BA%E6%9C%AC?node-id=1630%3A14832

‍

‍

1 : ユーザーのユースケースを整理

□ POINT

• いつどこでどんなふうに使ってもらえるとユーザーが喜ぶかを考える
• 今回は、「プロフィールを見せたい」人をユーザーと置く

□ 手順

1 : お題の情報をまずは軽く考えてみる
2 : いつ使われそうか - ユースケースをアイデア出し
3 : ユースケースから求められる情報や使用感をアイデア出し

‍

‍

2 : コンテンツを中心に”情報情報”の見せ方を考える

□ POINT

• 見た目ではない。表示する”構造 - 骨格”で考える。切り分ける。
• ユーザーが『見せたい情報』を『どう表示する』かの2つで考える

□ 手順

1 : 具体的な”情報”を考えて見る

2 : 構造-プロトタイプを作成、パターン出し

3 : パターンから検討 / ブラッシュアップ / 決定する

‍

‍

3 : ユースケースから相応しい見た目にする

□ POINT

• コンセプトを考える
• 自分の頭ではなく、まずは参考を集める

□ 手順

1. ユーザーの目的から”コンセプト”を考える
2. コンセプトに合致する参考イメージを集める
3. UIのグラフィックテイストにする

‍

まずは流れから真似してみてください！

今回のお題は難しいと思います。解答のレベルでできる必要はありません。こうやって見た目が変わるのか、逆に考えていくのか。これを体験してみてください。

‍

□ プロセスを辿るのが今回は大事！です

1. ユーザーのユースケースを整理ができているか？
2. ユースケースを元に : 機能や情報のアイデアが出せているか？
3. ユースケースを元に : 見た目のアイデアが出せているか？

‍

□ ショートバージョンはこちらから

まずは簡単に見たい方はこちらから

‍

‍

Figmaのファイルはこちら

メンバーのみ見れます。

‍

1 : ユーザーのユースケースを整理

□ POINT

• いつどこでどんなふうに使ってもらえるとユーザーが喜ぶかを考える
• 今回は、「プロフィールを見せたい」人をユーザーと置く

□ 手順

1 : お題の情報をまずは軽く考えてみる
2 : いつ使われそうか - ユースケースをアイデア出し
3 : ユースケースから求められる情報や使用感をアイデア出し

‍

‍

2 : コンテンツを中心に”情報情報”の見せ方を考える

□ POINT

• 見た目ではない。表示する”構造 - 骨格”で考える。切り分ける。
• ユーザーが『見せたい情報』を『どう表示する』かの2つで考える

□ 手順

1 : 具体的な”情報”を考えて見る

2 : 構造-プロトタイプを作成、パターン出し

3 : パターンから検討 / ブラッシュアップ / 決定する

‍

‍

3 : ユースケースから相応しい見た目にする

□ POINT

• コンセプトを考える
• 自分の頭ではなく、まずは参考を集める

□ 手順

1. ユーザーの目的から”コンセプト”を考える
2. コンセプトに合致する参考イメージを集める
3. UIのグラフィックテイストにする

‍

‍