This is some text inside of a div block.

Heading

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

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

メンバー登録について

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

Item 1
Item 2
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

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

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の解答

5.画面幅で変わるUI

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

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

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

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

TRY5レスポンシブ解答

6.UI構造の理解

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

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

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

6-3.シャドウの基本

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

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

TOP6:UI構造 - お題の解答

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

何に色を振るべきか？

何に色を振るべきか？

何に色を振るべきか？

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の解答

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

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