シリーズ目次

5.画面幅で変わるUI

レスポンシブデザイン

5.画面幅で変わるUI

2023

年

月

日

スキルを上げて、創造のための武器を手に入れよう

すべての動画閲覧には、メンバーシップ加入が必要です

メンバー登録について

UIビジュアル基礎

全

本

シリーズの説明

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

08:02

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

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

NoContent

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

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

NoVideo

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

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

15:00

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

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

21:53

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

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

07:16

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

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

20:20

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

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

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

05:02

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

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

16:23

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

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

26:07

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

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

17:35

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

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

05:30

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

【解説】TRY2解答

11:10

【解説】TRY2解答

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

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

05:01

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

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

11:14

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

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

37:31

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

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

07:51

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

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

17:55

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

3-5.ボーダーの基本

05:03

3-5.ボーダーの基本

TRY3:レイアウト解答

08:24

TRY3:レイアウト解答

4.配色の基本

0000

4.配色の基本

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

05:11

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

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

18:39

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

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

08:32

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

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

12:12

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

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

12:24

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

TRY4の解答

08:32

TRY4の解答

5.画面幅で変わるUI

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

03:13

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

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

09:59

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

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

13:33

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

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

17:24

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

TRY5レスポンシブ解答

09:45

TRY5レスポンシブ解答

6.UI構造の理解

NoContent

6.UI構造の理解

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

05:35

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

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

09:28

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

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

13:04

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

6-3.シャドウの基本

23:50

6-3.シャドウの基本

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

11:02

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

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

17:17

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

TOP6:UI構造 - お題の解答

08:49

TOP6:UI構造 - お題の解答

閉じる

0 Comments

Active Here: 0

My Profile Image

Logout Edit Profile

Be the first to leave a comment.

Load Previous

Someone is typing...

No Name

Set

4 years ago

Moderator

(Edited)

Delete Forever

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.

2 Replies

Load Previous

No Name

Set

2 years ago

Moderator

(Edited)

Delete Forever

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.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

UIビジュアル基礎

シリーズの説明

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

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

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

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

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

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

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

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

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

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

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

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

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

【解説】TRY2解答

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

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

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

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

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

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

3-5.ボーダーの基本

TRY3:レイアウト解答

4.配色の基本

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

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

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

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

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

TRY4の解答