シリーズ目次

/

Figmaの使い方入門

/

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

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

2025

年

6

月

19

日

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

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

メンバー登録について

📜目次

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

00:00 使用するフォントをインストールしよう
01:30 Noto Sans Japaneseを使おう
04:33 動画UI部分を作成しよう
06:30 作成するUIの構造
07:15 動画時間のUIを作成
08:46 動画時間の数字を配置
12:03 背景UIをFrameで作成
18:57 動画部分のUIを作成
21:57 Frameに画像を配置
25:51 動画の再生バーを作成
29:15 グルーピングしよう
32:18 次の動画：動画UI部分を作成

‍

‍

📜目次

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

00:00 使用するフォントをインストールしよう
01:30 Noto Sans Japaneseを使おう
04:33 動画UI部分を作成しよう
06:30 作成するUIの構造
07:15 動画時間のUIを作成
08:46 動画時間の数字を配置
12:03 背景UIをFrameで作成
18:57 動画部分のUIを作成
21:57 Frameに画像を配置
25:51 動画の再生バーを作成
29:15 グルーピングしよう
32:18 次の動画：動画UI部分を作成

‍

‍

📜目次

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

00:00 使用するフォントをインストールしよう
01:30 Noto Sans Japaneseを使おう
04:33 動画UI部分を作成しよう
06:30 作成するUIの構造
07:15 動画時間のUIを作成
08:46 動画時間の数字を配置
12:03 背景UIをFrameで作成
18:57 動画部分のUIを作成
21:57 Frameに画像を配置
25:51 動画の再生バーを作成
29:15 グルーピングしよう
32:18 次の動画：動画UI部分を作成

‍

‍

‍

Figmaの使い方入門

1.Figmaについて知ろう

1.Figmaについて知ろう

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

閉じる

0 Comments

Active Here: 0

Login or register to join the conversation.

My Profile Image

Logout Edit Profile

Be the first to leave a comment.

Loading

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.

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.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.