シリーズ目次

UIビジュアル基礎

20
シリーズの説明
s
シリーズの説明

シリーズの説明

【進め方】デザイナーはやってる見た目の”キホン”をマスター!
08:02
【進め方】デザイナーはやってる見た目の”キホン”をマスター!

【進め方】デザイナーはやってる見た目の”キホン”をマスター!

TRY1 : コンセプトを考えてリデザインしよう!
NoContent
TRY1 : コンセプトを考えてリデザインしよう!

TRY1 : コンセプトを考えてリデザインしよう!

TRY1:プロフィールUIをリデザイン!
NoVideo
TRY1:プロフィールUIをリデザイン!

TRY1:プロフィールUIをリデザイン!

1-1. 【解説①】アイデア:誰が使うか?で見た目を考える方法
15:00
1-1. 【解説①】アイデア:誰が使うか?で見た目を考える方法

1-1. 【解説①】アイデア:誰が使うか?で見た目を考える方法

1-2.【解説②】表現の方向性 : コンセプトを決めて見た目をデザインする方法
21:53
1-2.【解説②】表現の方向性 : コンセプトを決めて見た目をデザインする方法

1-2.【解説②】表現の方向性 : コンセプトを決めて見た目をデザインする方法

【7分】TRY1解答!見た目だけ考えるのはNGなんです
07:16
【7分】TRY1解答!見た目だけ考えるのはNGなんです

【7分】TRY1解答!見た目だけ考えるのはNGなんです

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

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

TRY2 ビジュアルシステムでリデザインしよう!
s
TRY2 ビジュアルシステムでリデザインしよう!

TRY2 ビジュアルシステムでリデザインしよう!

TRY2 : ホームUIをリデザイン!
05:02
TRY2 : ホームUIをリデザイン!

TRY2 : ホームUIをリデザイン!

2-1.良いUIを作るコツは見た目の"システム化"
16:23
2-1.良いUIを作るコツは見た目の"システム化"

2-1.良いUIを作るコツは見た目の"システム化"

2-2.システム化でUI作成が楽になる5要素とは
26:07
2-2.システム化でUI作成が楽になる5要素とは

2-2.システム化でUI作成が楽になる5要素とは

2-3.Figmaで見た目のシステムを作る方法
17:35
2-3.Figmaで見た目のシステムを作る方法

2-3.Figmaで見た目のシステムを作る方法

【5分】TRY2解答 システムを適応して見た目を整える
05:30
【5分】TRY2解答 システムを適応して見た目を整える

【5分】TRY2解答 システムを適応して見た目を整える

【解説】TRY2解答
11:10
【解説】TRY2解答

【解説】TRY2解答

TRY3 レイアウトのきほんでリデザイン!
n
TRY3 レイアウトのきほんでリデザイン!

TRY3 レイアウトのきほんでリデザイン!

TRY3:動画詳細UIをリデザイン!
05:01
TRY3:動画詳細UIをリデザイン!

TRY3:動画詳細UIをリデザイン!

3-1.サイズの決め方:倍数で管理しよう
11:14
3-1.サイズの決め方:倍数で管理しよう

3-1.サイズの決め方:倍数で管理しよう

3-2.情報を優先度とグループで整理する
37:31
3-2.情報を優先度とグループで整理する

3-2.情報を優先度とグループで整理する

3-3.余白は論理でサイズと種類を決めよう
07:51
3-3.余白は論理でサイズと種類を決めよう

3-3.余白は論理でサイズと種類を決めよう

3-4.グリッド - 統一感あるサイズ簡単に組むテクニック
17:55
3-4.グリッド - 統一感あるサイズ簡単に組むテクニック

3-4.グリッド - 統一感あるサイズ簡単に組むテクニック

3-5.ボーダーの基本
05:03
3-5.ボーダーの基本

3-5.ボーダーの基本

TRY3:レイアウト解答
08:24
TRY3:レイアウト解答

TRY3:レイアウト解答

4.配色の基本
0000
4.配色の基本

4.配色の基本

TRY4 : スマホの動画詳細UIをリデザイン!
05:11
TRY4 : スマホの動画詳細UIをリデザイン!

TRY4 : スマホの動画詳細UIをリデザイン!

4-1.ここからはじめる配色設計
18:39
4-1.ここからはじめる配色設計

4-1.ここからはじめる配色設計

4-2.テーマカラーの決め方
08:32
4-2.テーマカラーの決め方

4-2.テーマカラーの決め方

4-3.配色はメインUIを引き立てよう
12:12
4-3.配色はメインUIを引き立てよう

4-3.配色はメインUIを引き立てよう

4-4テーマカラー2つ以上の時の考え方
12:24
4-4テーマカラー2つ以上の時の考え方

4-4テーマカラー2つ以上の時の考え方

TRY4の解答
08:32
TRY4の解答

TRY4の解答

5.画面幅で変わるUI
s
5.画面幅で変わるUI

5.画面幅で変わるUI

お題:レスポンシブなホームUIをデザイン
03:13
お題:レスポンシブなホームUIをデザイン

お題:レスポンシブなホームUIをデザイン

5-1.知らないと怖い”高解像度"ディスプレイについて
09:59
5-1.知らないと怖い”高解像度"ディスプレイについて

5-1.知らないと怖い”高解像度"ディスプレイについて

5-2.レスポンシブ5つのポイント
13:33
5-2.レスポンシブ5つのポイント

5-2.レスポンシブ5つのポイント

5-3.異なるディスプレイサイズのUI作成
17:24
5-3.異なるディスプレイサイズのUI作成

5-3.異なるディスプレイサイズのUI作成

TRY5レスポンシブ解答
09:45
TRY5レスポンシブ解答

TRY5レスポンシブ解答

6.UI構造の理解
NoContent
6.UI構造の理解

6.UI構造の理解

UI構造を意識してリデザインしよう!
05:35
UI構造を意識してリデザインしよう!

UI構造を意識してリデザインしよう!

6-1.平面の”階層”表現について
09:28
6-1.平面の”階層”表現について

6-1.平面の”階層”表現について

6-2.UIを構成する3ブロックを知ろう
13:04
6-2.UIを構成する3ブロックを知ろう

6-2.UIを構成する3ブロックを知ろう

6-3.シャドウの基本
23:50
6-3.シャドウの基本

6-3.シャドウの基本

6-5.モードと遷移 "←"と"×"の違い
11:02
6-5.モードと遷移 "←"と"×"の違い

6-5.モードと遷移 "←"と"×"の違い

6-6.モーダルとモードについて
17:17
6-6.モーダルとモードについて

6-6.モーダルとモードについて

TOP6:UI構造 - お題の解答
08:49
TOP6:UI構造 - お題の解答

TOP6:UI構造 - お題の解答

トップ
/
UIビジュアル基礎
/
1-2.【解説②】表現の方向性 : コンセプトを決めて見た目をデザインする方法
ビジュアル

1-2.【解説②】表現の方向性 : コンセプトを決めて見た目をデザインする方法

2023
11
12
スキルを上げて、創造のための武器を手に入れよう
すべての動画閲覧には、メンバーシップ加入が必要です
メンバー登録について

方向性を決めると見た目が変わります!

今回は「3つのテーマ」に沿って、見た目のコンセプトを作る方法を解説していきます。
やり方を真似して、お題デザインに生かしてみましょう!

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

カフェを探すアプリだけどテイストが違う理由

使って欲しい方向性が違うので、それぞれの「場」として適切なコンセプトが違います。
今回はこれを反映した結果、使っている色や、角丸などのテイストが違う結果になりました。

場のコンセプトをどう定義するの?

いろんな方法があります。アイデアを出すのに決まった方法なんてないです。
が、今回は「ユーザーを起点」に”ふさわしい場所/人格"を模索した一例を解説してみました。

付箋の数はかなり少ないです。動画ように絞ってます。
実際に考えるときは様々なアイデアを多く出して、そこから収束していくようにしましょう。

詳しくは動画で!

方向性を決めると見た目が変わります!

今回は「3つのテーマ」に沿って、見た目のコンセプトを作る方法を解説していきます。
やり方を真似して、お題デザインに生かしてみましょう!

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

カフェを探すアプリだけどテイストが違う理由

使って欲しい方向性が違うので、それぞれの「場」として適切なコンセプトが違います。
今回はこれを反映した結果、使っている色や、角丸などのテイストが違う結果になりました。

場のコンセプトをどう定義するの?

いろんな方法があります。アイデアを出すのに決まった方法なんてないです。
が、今回は「ユーザーを起点」に”ふさわしい場所/人格"を模索した一例を解説してみました。

付箋の数はかなり少ないです。動画ように絞ってます。
実際に考えるときは様々なアイデアを多く出して、そこから収束していくようにしましょう。

詳しくは動画で!

制作中です...

UIビジュアル基礎

20
シリーズの説明
s
シリーズの説明

シリーズの説明

【進め方】デザイナーはやってる見た目の”キホン”をマスター!
08:02
【進め方】デザイナーはやってる見た目の”キホン”をマスター!

【進め方】デザイナーはやってる見た目の”キホン”をマスター!

TRY1 : コンセプトを考えてリデザインしよう!
NoContent
TRY1 : コンセプトを考えてリデザインしよう!

TRY1 : コンセプトを考えてリデザインしよう!

TRY1:プロフィールUIをリデザイン!
NoVideo
TRY1:プロフィールUIをリデザイン!

TRY1:プロフィールUIをリデザイン!

1-1. 【解説①】アイデア:誰が使うか?で見た目を考える方法
15:00
1-1. 【解説①】アイデア:誰が使うか?で見た目を考える方法

1-1. 【解説①】アイデア:誰が使うか?で見た目を考える方法

1-2.【解説②】表現の方向性 : コンセプトを決めて見た目をデザインする方法
21:53
1-2.【解説②】表現の方向性 : コンセプトを決めて見た目をデザインする方法

1-2.【解説②】表現の方向性 : コンセプトを決めて見た目をデザインする方法

【7分】TRY1解答!見た目だけ考えるのはNGなんです
07:16
【7分】TRY1解答!見た目だけ考えるのはNGなんです

【7分】TRY1解答!見た目だけ考えるのはNGなんです

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

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

TRY2 ビジュアルシステムでリデザインしよう!
s
TRY2 ビジュアルシステムでリデザインしよう!

TRY2 ビジュアルシステムでリデザインしよう!

TRY2 : ホームUIをリデザイン!
05:02
TRY2 : ホームUIをリデザイン!

TRY2 : ホームUIをリデザイン!

2-1.良いUIを作るコツは見た目の"システム化"
16:23
2-1.良いUIを作るコツは見た目の"システム化"

2-1.良いUIを作るコツは見た目の"システム化"

2-2.システム化でUI作成が楽になる5要素とは
26:07
2-2.システム化でUI作成が楽になる5要素とは

2-2.システム化でUI作成が楽になる5要素とは

2-3.Figmaで見た目のシステムを作る方法
17:35
2-3.Figmaで見た目のシステムを作る方法

2-3.Figmaで見た目のシステムを作る方法

【5分】TRY2解答 システムを適応して見た目を整える
05:30
【5分】TRY2解答 システムを適応して見た目を整える

【5分】TRY2解答 システムを適応して見た目を整える

【解説】TRY2解答
11:10
【解説】TRY2解答

【解説】TRY2解答

TRY3 レイアウトのきほんでリデザイン!
n
TRY3 レイアウトのきほんでリデザイン!

TRY3 レイアウトのきほんでリデザイン!

TRY3:動画詳細UIをリデザイン!
05:01
TRY3:動画詳細UIをリデザイン!

TRY3:動画詳細UIをリデザイン!

3-1.サイズの決め方:倍数で管理しよう
11:14
3-1.サイズの決め方:倍数で管理しよう

3-1.サイズの決め方:倍数で管理しよう

3-2.情報を優先度とグループで整理する
37:31
3-2.情報を優先度とグループで整理する

3-2.情報を優先度とグループで整理する

3-3.余白は論理でサイズと種類を決めよう
07:51
3-3.余白は論理でサイズと種類を決めよう

3-3.余白は論理でサイズと種類を決めよう

3-4.グリッド - 統一感あるサイズ簡単に組むテクニック
17:55
3-4.グリッド - 統一感あるサイズ簡単に組むテクニック

3-4.グリッド - 統一感あるサイズ簡単に組むテクニック

3-5.ボーダーの基本
05:03
3-5.ボーダーの基本

3-5.ボーダーの基本

TRY3:レイアウト解答
08:24
TRY3:レイアウト解答

TRY3:レイアウト解答

4.配色の基本
0000
4.配色の基本

4.配色の基本

TRY4 : スマホの動画詳細UIをリデザイン!
05:11
TRY4 : スマホの動画詳細UIをリデザイン!

TRY4 : スマホの動画詳細UIをリデザイン!

4-1.ここからはじめる配色設計
18:39
4-1.ここからはじめる配色設計

4-1.ここからはじめる配色設計

4-2.テーマカラーの決め方
08:32
4-2.テーマカラーの決め方

4-2.テーマカラーの決め方

4-3.配色はメインUIを引き立てよう
12:12
4-3.配色はメインUIを引き立てよう

4-3.配色はメインUIを引き立てよう

4-4テーマカラー2つ以上の時の考え方
12:24
4-4テーマカラー2つ以上の時の考え方

4-4テーマカラー2つ以上の時の考え方

TRY4の解答
08:32
TRY4の解答

TRY4の解答

5.画面幅で変わるUI
s
5.画面幅で変わるUI

5.画面幅で変わるUI

お題:レスポンシブなホームUIをデザイン
03:13
お題:レスポンシブなホームUIをデザイン

お題:レスポンシブなホームUIをデザイン

5-1.知らないと怖い”高解像度"ディスプレイについて
09:59
5-1.知らないと怖い”高解像度"ディスプレイについて

5-1.知らないと怖い”高解像度"ディスプレイについて

5-2.レスポンシブ5つのポイント
13:33
5-2.レスポンシブ5つのポイント

5-2.レスポンシブ5つのポイント

5-3.異なるディスプレイサイズのUI作成
17:24
5-3.異なるディスプレイサイズのUI作成

5-3.異なるディスプレイサイズのUI作成

TRY5レスポンシブ解答
09:45
TRY5レスポンシブ解答

TRY5レスポンシブ解答

6.UI構造の理解
NoContent
6.UI構造の理解

6.UI構造の理解

UI構造を意識してリデザインしよう!
05:35
UI構造を意識してリデザインしよう!

UI構造を意識してリデザインしよう!

6-1.平面の”階層”表現について
09:28
6-1.平面の”階層”表現について

6-1.平面の”階層”表現について

6-2.UIを構成する3ブロックを知ろう
13:04
6-2.UIを構成する3ブロックを知ろう

6-2.UIを構成する3ブロックを知ろう

6-3.シャドウの基本
23:50
6-3.シャドウの基本

6-3.シャドウの基本

6-5.モードと遷移 "←"と"×"の違い
11:02
6-5.モードと遷移 "←"と"×"の違い

6-5.モードと遷移 "←"と"×"の違い

6-6.モーダルとモードについて
17:17
6-6.モーダルとモードについて

6-6.モーダルとモードについて

TOP6:UI構造 - お題の解答
08:49
TOP6:UI構造 - お題の解答

TOP6: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

0 Comments

Active Here: 0
Be the first to leave a comment.
Loading
Load Previous
Someone is typing...
No Name
Set
4 years ago
Moderator
(Edited)
This is the actual comment. It's can be long or short. And must contain only text information.
Your comment will appear once approved by a moderator.
Load Previous
No Name
Set
2 years ago
Moderator
(Edited)
This is the actual comment. It's can be long or short. And must contain only text information.
Your reply will appear once approved by a moderator.
Load More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Load More