どちらも「カフェを探せるアプリ」

両方のUIとも、同じ目的のアプリです。が、使う人の想定が違います。もっというと大事にしたいユーザーさんと、その人が1番サービスを使いたい時が違います。
このUIの違いをテーマに”コンセプトで見た目が変わる、デザインする方法”を解説していきます。その解説を受けて、お題にチャレンジしてみてください！

‍

‍

‍

動画で使っている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=561%3A6108

‍

誰がなぜ使うのか？から見た目のアイデアを出します

‍

UIは見た目を作る前に、「どういう形が適切か」が実は決まっています。
これを整理する（要件定義とかって呼ばれたりします）ことで良いUIも作れます。し、優先度もはっきりするので良い見た目も作れます。

‍

‍

誰がなぜどんな感情で利用するのか？

まず「誰」をしっかりイメージすることが大事です。そこからしかUIの見た目のアイデアを出すことが難しいです。
なので、作る前はしっかりとこの表のように「誰」をまとめてみましょう。

カフェを探せる。は一緒ですが、こう見ると全く違う使い道になりそうですよね・・・？これが「誰」で作るものが変わる、優先するものが変わることにつながります！

‍

‍

‍

‍

定義した使い手に沿って、UIのアイデアを出します！

この続きは動画で...!

‍

どちらも「カフェを探せるアプリ」

両方のUIとも、同じ目的のアプリです。が、使う人の想定が違います。もっというと大事にしたいユーザーさんと、その人が1番サービスを使いたい時が違います。
このUIの違いをテーマに”コンセプトで見た目が変わる、デザインする方法”を解説していきます。その解説を受けて、お題にチャレンジしてみてください！

‍

‍

誰がなぜ使うのか？から見た目のアイデアを出します

‍

UIは見た目を作る前に、「どういう形が適切か」が実は決まっています。
これを整理する（要件定義とかって呼ばれたりします）ことで良いUIも作れます。し、優先度もはっきりするので良い見た目も作れます。

‍

‍

誰がなぜどんな感情で利用するのか？

まず「誰」をしっかりイメージすることが大事です。そこからしかUIの見た目のアイデアを出すことが難しいです。
なので、作る前はしっかりとこの表のように「誰」をまとめてみましょう。

カフェを探せる。は一緒ですが、こう見ると全く違う使い道になりそうですよね・・・？これが「誰」で作るものが変わる、優先するものが変わることにつながります！

‍

<続きはメンバーシップ登録で見れます。>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

1. Item 1
2. Item 2
3. Item 3

Unordered list

• Item A
• Item B
• Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

1. Item 1
2. Item 2
3. Item 3

Unordered list

• Item A
• Item B
• Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript