シリーズ目次

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ビジュアル基礎
/
5-2.レスポンシブ5つのポイント

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

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

画面幅に対応するUIの基本

レスポンシブデザインを始める前に知っておくべき前提知識を紹介しましたー！
実践とは遠く感じるかもですが、レスポンシブデザインのベースの考えになっています。

・この考え方でいろんなサイトの横幅を変えてみる
・アプリをデザインするときも同じ考え方で大丈夫です

‍

目次

00:00 レスポンシブデザインとは
01:18 考え方:"ブロック"で考えよう
03:04 横幅のサイズを決める方法
08:22 超大事!サイズは%でデザインする
12:35 ブレイクポイントで切り分けよう！
13:18 質問あればコミュニティで！

‍

動画で使ったスライドのデータはこちら
https://www.figma.com/file/rT6sKci6xW3qkNjLUbVwZ9/6.%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96-%E7%94%BB%E9%9D%A2%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%8C%E5%A4%89%E3%82%8F%E3%81%A3%E3%81%A6%E3%82%82%E9%A0%86%E5%BF%9C%E3%81%A7%E3%81%8D%E3%82%8BUI%E3%82%92%E8%80%83%E3%81%88%E3%82%88%E3%81%86?node-id=13%3A3936

画面幅に対応するUIの基本

レスポンシブデザインを始める前に知っておくべき前提知識を紹介しましたー！
実践とは遠く感じるかもですが、レスポンシブデザインのベースの考えになっています。

・この考え方でいろんなサイトの横幅を変えてみる
・アプリをデザインするときも同じ考え方で大丈夫です

‍

目次

00:00 レスポンシブデザインとは
01:18 考え方:"ブロック"で考えよう
03:04 横幅のサイズを決める方法
08:22 超大事!サイズは%でデザインする
12:35 ブレイクポイントで切り分けよう！
13:18 質問あればコミュニティで！

‍

動画で使ったスライドのデータはこちら
https://www.figma.com/file/rT6sKci6xW3qkNjLUbVwZ9/6.%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96-%E7%94%BB%E9%9D%A2%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%8C%E5%A4%89%E3%82%8F%E3%81%A3%E3%81%A6%E3%82%82%E9%A0%86%E5%BF%9C%E3%81%A7%E3%81%8D%E3%82%8BUI%E3%82%92%E8%80%83%E3%81%88%E3%82%88%E3%81%86?node-id=13%3A3936

画面幅に対応するUIの基本

レスポンシブデザインを始める前に知っておくべき前提知識を紹介しましたー！
実践とは遠く感じるかもですが、レスポンシブデザインのベースの考えになっています。

・この考え方でいろんなサイトの横幅を変えてみる
・アプリをデザインするときも同じ考え方で大丈夫です

‍

目次

00:00 レスポンシブデザインとは
01:18 考え方:"ブロック"で考えよう
03:04 横幅のサイズを決める方法
08:22 超大事!サイズは%でデザインする
12:35 ブレイクポイントで切り分けよう！
13:18 質問あればコミュニティで！

‍

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構造 - お題の解答

閉じる

0 Comments

Active Here: 0
Login or register to join the conversation.
My Profile Image
LogoutEdit Profile
Be the first to leave a comment.
Loading
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.
0
0
Reply
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.
Cancel
0
0
Load More
Cancel
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Load More
利用規約プライバシーポリシー特定商取引法にに基づく表示お問い合わせ
Copyright ©︎ BONO All Right Reserved.