シリーズ目次

Figmaの使い方入門

10
1.Figmaについて知ろう
00
1.Figmaについて知ろう

1.Figmaについて知ろう

【24年アプデ最新】現役デザイナーが解説!Figma(フィグマ)の使い方と便利な基本を解説。UIデザイン、Webデザインで活躍するデザインツール
1:05:02
【24年アプデ最新】現役デザイナーが解説!Figma(フィグマ)の使い方と便利な基本を解説。UIデザイン、Webデザインで活躍するデザインツール

【24年アプデ最新】現役デザイナーが解説!Figma(フィグマ)の使い方と便利な基本を解説。UIデザイン、Webデザインで活躍するデザインツール

2. バナーをデザインしてみよう
00
2. バナーをデザインしてみよう

2. バナーをデザインしてみよう

#1 - バナーをデザインして基本操作をマスターしよう(全3回)
29:07
#1 - バナーをデザインして基本操作をマスターしよう(全3回)

#1 - バナーをデザインして基本操作をマスターしよう(全3回)

#2 - テキスト配置、画像などのサイズ調整のやり方を実践しよう
44:16
#2 - テキスト配置、画像などのサイズ調整のやり方を実践しよう

#2 - テキスト配置、画像などのサイズ調整のやり方を実践しよう

#3 - バナー完成へ!デザイン基本原則”整列”で調整する方法を実践しよう
22:11
#3 - バナー完成へ!デザイン基本原則”整列”で調整する方法を実践しよう

#3 - バナー完成へ!デザイン基本原則”整列”で調整する方法を実践しよう

3.UIをトレースしよう!
20
 3.UIをトレースしよう!

3.UIをトレースしよう!

UI#1 YouTubeをUIトレースして基本機能を習得しよう
10:49
UI#1 YouTubeをUIトレースして基本機能を習得しよう

UI#1 YouTubeをUIトレースして基本機能を習得しよう

UI#2 UIトレースの準備をしよう
24:43
UI#2 UIトレースの準備をしよう

UI#2 UIトレースの準備をしよう

UI#3 YouTubeの動画UIを作ろう part.2
20:18
UI#3 YouTubeの動画UIを作ろう part.2

UI#3 YouTubeの動画UIを作ろう part.2

UI#3 YouTubeの動画UIを作ろう part.1
33:55
UI#3 YouTubeの動画UIを作ろう part.1

UI#3 YouTubeの動画UIを作ろう part.1

#5 YouTubeのヘッダーUIをトレースしよう part.1
33:44
#5 YouTubeのヘッダーUIをトレースしよう part.1

#5 YouTubeのヘッダーUIをトレースしよう part.1

UI#6 YouTubeのヘッダーUIをトレースしよう part.2
15:58
UI#6 YouTubeのヘッダーUIをトレースしよう part.2

UI#6 YouTubeのヘッダーUIをトレースしよう part.2

#7 ボトムナビのUIトレース/背景のぼかしのエフェクト
52:47
#7 ボトムナビのUIトレース/背景のぼかしのエフェクト

#7 ボトムナビのUIトレース/背景のぼかしのエフェクト

#8 ShortsUIのトレース/シャドウを使う理由とは?
28:22
#8 ShortsUIのトレース/シャドウを使う理由とは?

#8 ShortsUIのトレース/シャドウを使う理由とは?

#8 ShortsUIのトレース/シャドウを使う理由とは?
28:22
#8 ShortsUIのトレース/シャドウを使う理由とは?

#8 ShortsUIのトレース/シャドウを使う理由とは?

#10 タップ時のプレイヤーUIをデザインしよう!
33:00
#10 タップ時のプレイヤーUIをデザインしよう!

#10 タップ時のプレイヤーUIをデザインしよう!

#11 「チャンネルUI」をデザインしよう
29:25
#11 「チャンネルUI」をデザインしよう

#11 「チャンネルUI」をデザインしよう

#12 アクションUIを作って、UIを完成させよう!
27:47
#12 アクションUIを作って、UIを完成させよう!

#12 アクションUIを作って、UIを完成させよう!

4. 便利な操作を覚えよう
30
4. 便利な操作を覚えよう

4. 便利な操作を覚えよう

Figma:オートレイアウト機能 徹底解説
36:03
Figma:オートレイアウト機能 徹底解説

Figma:オートレイアウト機能 徹底解説

Figma: プロトタイピング機能 解説
36:03
Figma: プロトタイピング機能 解説

Figma: プロトタイピング機能 解説

【Figmaプロトタイプ機能】アニメーションとオーバーレイでプロトタイプ機能を使いこなす
16:48
【Figmaプロトタイプ機能】アニメーションとオーバーレイでプロトタイプ機能を使いこなす

【Figmaプロトタイプ機能】アニメーションとオーバーレイでプロトタイプ機能を使いこなす

【ショートカット】Figmaの操作速度が上がるたった1つの方法 ⌨️
21:21
【ショートカット】Figmaの操作速度が上がるたった1つの方法 ⌨️

【ショートカット】Figmaの操作速度が上がるたった1つの方法 ⌨️

トップ
/
Figmaの使い方入門
/
#2 - テキスト配置、画像などのサイズ調整のやり方を実践しよう
Figma

#2 - テキスト配置、画像などのサイズ調整のやり方を実践しよう

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


今回からデザインに入っていきます!

まずは簡単なバナーをトレースしながらFigmaの操作について入っていきましょう〜!

📜目次

-----------------------------------------------

01:44 画像を配置してみよう
01:47 a. パーツの移動
03:00 b. 背景の色を変更する
06:02 c. スクショを配置しよう
07:46 d. Figmaのロゴを配置しよう
08:31 位置の調整をしよう
08:34 a. 距離を測って位置を調整
09:19 b. レイヤーでスクショを選択
10:52 c. 実際に距離を測って位置を調整してみよう
15:27 人と文字を配置しよう
15:30 a. 人を配置しよう
18:18 b. テキストを配置しよう
20:13 c. タイポグラフィの解説
27:00 グラデーション素材で文字を読みやすく
27:03 a. グラデ素材を配置しよう
29:46 b. グラデーションも作れるよ
30:24 角丸ボックス×テキスト配置
30:27 a. Frameで四角を作る
34:45 b. テキスト配置して調整
41:51 まとめ
41:54 a. 配置と調整のやり方をやりました
42:23 b. 次:デザイン的な微調整で完成へ
43:09 c. 高評価・登録・BONOもお願いします!

🚩バナー作成で使う素材

-----------------------------------------------

https://www.figma.com/file/PuNqOnvB3I5XZkOlbaa6QJ?node-id=0:1&locale=en&type=design


今回からデザインに入っていきます!

まずは簡単なバナーをトレースしながらFigmaの操作について入っていきましょう〜!

📜目次

-----------------------------------------------

01:44 画像を配置してみよう
01:47 a. パーツの移動
03:00 b. 背景の色を変更する
06:02 c. スクショを配置しよう
07:46 d. Figmaのロゴを配置しよう
08:31 位置の調整をしよう
08:34 a. 距離を測って位置を調整
09:19 b. レイヤーでスクショを選択
10:52 c. 実際に距離を測って位置を調整してみよう
15:27 人と文字を配置しよう
15:30 a. 人を配置しよう
18:18 b. テキストを配置しよう
20:13 c. タイポグラフィの解説
27:00 グラデーション素材で文字を読みやすく
27:03 a. グラデ素材を配置しよう
29:46 b. グラデーションも作れるよ
30:24 角丸ボックス×テキスト配置
30:27 a. Frameで四角を作る
34:45 b. テキスト配置して調整
41:51 まとめ
41:54 a. 配置と調整のやり方をやりました
42:23 b. 次:デザイン的な微調整で完成へ
43:09 c. 高評価・登録・BONOもお願いします!

🚩バナー作成で使う素材

-----------------------------------------------

https://www.figma.com/file/PuNqOnvB3I5XZkOlbaa6QJ?node-id=0:1&locale=en&type=design


今回からデザインに入っていきます!

まずは簡単なバナーをトレースしながらFigmaの操作について入っていきましょう〜!

📜目次

-----------------------------------------------

01:44 画像を配置してみよう
01:47 a. パーツの移動
03:00 b. 背景の色を変更する
06:02 c. スクショを配置しよう
07:46 d. Figmaのロゴを配置しよう
08:31 位置の調整をしよう
08:34 a. 距離を測って位置を調整
09:19 b. レイヤーでスクショを選択
10:52 c. 実際に距離を測って位置を調整してみよう
15:27 人と文字を配置しよう
15:30 a. 人を配置しよう
18:18 b. テキストを配置しよう
20:13 c. タイポグラフィの解説
27:00 グラデーション素材で文字を読みやすく
27:03 a. グラデ素材を配置しよう
29:46 b. グラデーションも作れるよ
30:24 角丸ボックス×テキスト配置
30:27 a. Frameで四角を作る
34:45 b. テキスト配置して調整
41:51 まとめ
41:54 a. 配置と調整のやり方をやりました
42:23 b. 次:デザイン的な微調整で完成へ
43:09 c. 高評価・登録・BONOもお願いします!

🚩バナー作成で使う素材

-----------------------------------------------

https://www.figma.com/file/PuNqOnvB3I5XZkOlbaa6QJ?node-id=0:1&locale=en&type=design

Figmaの使い方入門

10
1.Figmaについて知ろう
00
1.Figmaについて知ろう

1.Figmaについて知ろう

【24年アプデ最新】現役デザイナーが解説!Figma(フィグマ)の使い方と便利な基本を解説。UIデザイン、Webデザインで活躍するデザインツール
1:05:02
【24年アプデ最新】現役デザイナーが解説!Figma(フィグマ)の使い方と便利な基本を解説。UIデザイン、Webデザインで活躍するデザインツール

【24年アプデ最新】現役デザイナーが解説!Figma(フィグマ)の使い方と便利な基本を解説。UIデザイン、Webデザインで活躍するデザインツール

2. バナーをデザインしてみよう
00
2. バナーをデザインしてみよう

2. バナーをデザインしてみよう

#1 - バナーをデザインして基本操作をマスターしよう(全3回)
29:07
#1 - バナーをデザインして基本操作をマスターしよう(全3回)

#1 - バナーをデザインして基本操作をマスターしよう(全3回)

#2 - テキスト配置、画像などのサイズ調整のやり方を実践しよう
44:16
#2 - テキスト配置、画像などのサイズ調整のやり方を実践しよう

#2 - テキスト配置、画像などのサイズ調整のやり方を実践しよう

#3 - バナー完成へ!デザイン基本原則”整列”で調整する方法を実践しよう
22:11
#3 - バナー完成へ!デザイン基本原則”整列”で調整する方法を実践しよう

#3 - バナー完成へ!デザイン基本原則”整列”で調整する方法を実践しよう

3.UIをトレースしよう!
20
 3.UIをトレースしよう!

3.UIをトレースしよう!

UI#1 YouTubeをUIトレースして基本機能を習得しよう
10:49
UI#1 YouTubeをUIトレースして基本機能を習得しよう

UI#1 YouTubeをUIトレースして基本機能を習得しよう

UI#2 UIトレースの準備をしよう
24:43
UI#2 UIトレースの準備をしよう

UI#2 UIトレースの準備をしよう

UI#3 YouTubeの動画UIを作ろう part.2
20:18
UI#3 YouTubeの動画UIを作ろう part.2

UI#3 YouTubeの動画UIを作ろう part.2

UI#3 YouTubeの動画UIを作ろう part.1
33:55
UI#3 YouTubeの動画UIを作ろう part.1

UI#3 YouTubeの動画UIを作ろう part.1

#5 YouTubeのヘッダーUIをトレースしよう part.1
33:44
#5 YouTubeのヘッダーUIをトレースしよう part.1

#5 YouTubeのヘッダーUIをトレースしよう part.1

UI#6 YouTubeのヘッダーUIをトレースしよう part.2
15:58
UI#6 YouTubeのヘッダーUIをトレースしよう part.2

UI#6 YouTubeのヘッダーUIをトレースしよう part.2

#7 ボトムナビのUIトレース/背景のぼかしのエフェクト
52:47
#7 ボトムナビのUIトレース/背景のぼかしのエフェクト

#7 ボトムナビのUIトレース/背景のぼかしのエフェクト

#8 ShortsUIのトレース/シャドウを使う理由とは?
28:22
#8 ShortsUIのトレース/シャドウを使う理由とは?

#8 ShortsUIのトレース/シャドウを使う理由とは?

#8 ShortsUIのトレース/シャドウを使う理由とは?
28:22
#8 ShortsUIのトレース/シャドウを使う理由とは?

#8 ShortsUIのトレース/シャドウを使う理由とは?

#10 タップ時のプレイヤーUIをデザインしよう!
33:00
#10 タップ時のプレイヤーUIをデザインしよう!

#10 タップ時のプレイヤーUIをデザインしよう!

#11 「チャンネルUI」をデザインしよう
29:25
#11 「チャンネルUI」をデザインしよう

#11 「チャンネルUI」をデザインしよう

#12 アクションUIを作って、UIを完成させよう!
27:47
#12 アクションUIを作って、UIを完成させよう!

#12 アクションUIを作って、UIを完成させよう!

4. 便利な操作を覚えよう
30
4. 便利な操作を覚えよう

4. 便利な操作を覚えよう

Figma:オートレイアウト機能 徹底解説
36:03
Figma:オートレイアウト機能 徹底解説

Figma:オートレイアウト機能 徹底解説

Figma: プロトタイピング機能 解説
36:03
Figma: プロトタイピング機能 解説

Figma: プロトタイピング機能 解説

【Figmaプロトタイプ機能】アニメーションとオーバーレイでプロトタイプ機能を使いこなす
16:48
【Figmaプロトタイプ機能】アニメーションとオーバーレイでプロトタイプ機能を使いこなす

【Figmaプロトタイプ機能】アニメーションとオーバーレイでプロトタイプ機能を使いこなす

【ショートカット】Figmaの操作速度が上がるたった1つの方法 ⌨️
21:21
【ショートカット】Figmaの操作速度が上がるたった1つの方法 ⌨️

【ショートカット】Figmaの操作速度が上がるたった1つの方法 ⌨️

閉じる

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