シリーズ目次

UIタイポグラフィ入門

1. UIのタイポグラフィの基本を知ろう
xxx
1. UIのタイポグラフィの基本を知ろう

1. UIのタイポグラフィの基本を知ろう

UIタイポグラフィ入門スキル習得の流れ
text
UIタイポグラフィ入門スキル習得の流れ

UIタイポグラフィ入門スキル習得の流れ

【意外とムズイ】AとBのUI、どっちがプロ仕様か見抜けますか?UIタイポグラフィ入門
26:02
【意外とムズイ】AとBのUI、どっちがプロ仕様か見抜けますか?UIタイポグラフィ入門

【意外とムズイ】AとBのUI、どっちがプロ仕様か見抜けますか?UIタイポグラフィ入門

2. 実践してタイポグラフィの基礎を習得しよう
xxx
2. 実践してタイポグラフィの基礎を習得しよう

2. 実践してタイポグラフィの基礎を習得しよう

【Figma】"タイポグラフィ階層"を設定して、使えるようにしよう
22:15
【Figma】"タイポグラフィ階層"を設定して、使えるようにしよう

【Figma】"タイポグラフィ階層"を設定して、使えるようにしよう

3. ニュースアプリUIをリデザインしよう
xxx
3. ニュースアプリUIをリデザインしよう

3. ニュースアプリUIをリデザインしよう

【練習】ニュースアプリで学ぶ文字のサイズと階層のデザイン術
08:42
【練習】ニュースアプリで学ぶ文字のサイズと階層のデザイン術

【練習】ニュースアプリで学ぶ文字のサイズと階層のデザイン術

【解説】文字サイズで変わるニュースUI体験を確認しよう
10:05
【解説】文字サイズで変わるニュースUI体験を確認しよう

【解説】文字サイズで変わるニュースUI体験を確認しよう

4. レシピUIをデザインしよう
xxx
4. レシピUIをデザインしよう

4. レシピUIをデザインしよう

【練習】レシピ詳細UIで鍛える文字デザイン力
05:43
【練習】レシピ詳細UIで鍛える文字デザイン力

【練習】レシピ詳細UIで鍛える文字デザイン力

【解説】読みやすさの違いはここ!レシピUI解答例を解説
17:48
【解説】読みやすさの違いはここ!レシピUI解答例を解説

【解説】読みやすさの違いはここ!レシピUI解答例を解説

トップ
/
UIタイポグラフィ入門
/
【意外とムズイ】AとBのUI、どっちがプロ仕様か見抜けますか?UIタイポグラフィ入門
タイポグラフィ

【意外とムズイ】AとBのUI、どっちがプロ仕様か見抜けますか?UIタイポグラフィ入門

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

UIタイポグラフィの基礎を知ろう

みなさん、こんにちは。
このレッスンでは「タイポグラフィ基礎をデザインで使ってスキルを習得しよう」というテーマで、UIデザインにおけるタイポグラフィの基本を学んでいきます。

A、Bのデザインを比較しながらタイポグラフィで変わる体験を実感していきましょう。

タイポグラフィは、文字の大きさや間隔、配置などを工夫することで、情報を分かりやすく、魅力的に伝えるための重要なスキルです。

□ 動画で利用するスライド

こちら

実践にチャレンジしよう

学んだ知識を活かして、3つの実践課題にチャレンジします。Figmaを使いながら、階層設定やリデザイン、レシピ詳細UIの作成を通して手を動かして学びます。

① Figmaでタイポグラフィの階層をセットしよう

まずは、UIデザインにおけるタイポグラフィの階層を正しく設定する練習です。
FigmaのStyle設定機能でサービスで使うタイポグラフィの設定を行います。

② 文字のでかいニュースUIをリデザインしよう

次に、文字サイズが大きいニュースアプリのUIをリデザインする課題です。視認性をタイポグラフィで変更できることを実践して学びましょう

③ 階層に気をつけてレシピ詳細UIをデザインしよう

最後に、階層構造に注意しながらレシピ詳細ページのUIをデザインします。情報の優先順位や読みやすさを意識して仕上げましょう。

UIタイポグラフィの基礎を知ろう

みなさん、こんにちは。
このレッスンでは「タイポグラフィ基礎をデザインで使ってスキルを習得しよう」というテーマで、UIデザインにおけるタイポグラフィの基本を学んでいきます。

A、Bのデザインを比較しながらタイポグラフィで変わる体験を実感していきましょう。

タイポグラフィは、文字の大きさや間隔、配置などを工夫することで、情報を分かりやすく、魅力的に伝えるための重要なスキルです。

□ 動画で利用するスライド

こちら

実践にチャレンジしよう

学んだ知識を活かして、3つの実践課題にチャレンジします。Figmaを使いながら、階層設定やリデザイン、レシピ詳細UIの作成を通して手を動かして学びます。

① Figmaでタイポグラフィの階層をセットしよう

まずは、UIデザインにおけるタイポグラフィの階層を正しく設定する練習です。
FigmaのStyle設定機能でサービスで使うタイポグラフィの設定を行います。

② 文字のでかいニュースUIをリデザインしよう

次に、文字サイズが大きいニュースアプリのUIをリデザインする課題です。視認性をタイポグラフィで変更できることを実践して学びましょう

③ 階層に気をつけてレシピ詳細UIをデザインしよう

最後に、階層構造に注意しながらレシピ詳細ページのUIをデザインします。情報の優先順位や読みやすさを意識して仕上げましょう。

UIタイポグラフィの基礎を知ろう

みなさん、こんにちは。
このレッスンでは「タイポグラフィ基礎をデザインで使ってスキルを習得しよう」というテーマで、UIデザインにおけるタイポグラフィの基本を学んでいきます。

A、Bのデザインを比較しながらタイポグラフィで変わる体験を実感していきましょう。

タイポグラフィは、文字の大きさや間隔、配置などを工夫することで、情報を分かりやすく、魅力的に伝えるための重要なスキルです。

□ 動画で利用するスライド

こちら

実践にチャレンジしよう

学んだ知識を活かして、3つの実践課題にチャレンジします。Figmaを使いながら、階層設定やリデザイン、レシピ詳細UIの作成を通して手を動かして学びます。

① Figmaでタイポグラフィの階層をセットしよう

まずは、UIデザインにおけるタイポグラフィの階層を正しく設定する練習です。
FigmaのStyle設定機能でサービスで使うタイポグラフィの設定を行います。

② 文字のでかいニュースUIをリデザインしよう

次に、文字サイズが大きいニュースアプリのUIをリデザインする課題です。視認性をタイポグラフィで変更できることを実践して学びましょう

③ 階層に気をつけてレシピ詳細UIをデザインしよう

最後に、階層構造に注意しながらレシピ詳細ページのUIをデザインします。情報の優先順位や読みやすさを意識して仕上げましょう。

‍タイポグラフィ基礎をデザインで使ってスキルを習得しよう

UIタイポグラフィ入門

1. UIのタイポグラフィの基本を知ろう
xxx
1. UIのタイポグラフィの基本を知ろう

1. UIのタイポグラフィの基本を知ろう

UIタイポグラフィ入門スキル習得の流れ
text
UIタイポグラフィ入門スキル習得の流れ

UIタイポグラフィ入門スキル習得の流れ

【意外とムズイ】AとBのUI、どっちがプロ仕様か見抜けますか?UIタイポグラフィ入門
26:02
【意外とムズイ】AとBのUI、どっちがプロ仕様か見抜けますか?UIタイポグラフィ入門

【意外とムズイ】AとBのUI、どっちがプロ仕様か見抜けますか?UIタイポグラフィ入門

2. 実践してタイポグラフィの基礎を習得しよう
xxx
2. 実践してタイポグラフィの基礎を習得しよう

2. 実践してタイポグラフィの基礎を習得しよう

【Figma】"タイポグラフィ階層"を設定して、使えるようにしよう
22:15
【Figma】"タイポグラフィ階層"を設定して、使えるようにしよう

【Figma】"タイポグラフィ階層"を設定して、使えるようにしよう

3. ニュースアプリUIをリデザインしよう
xxx
3. ニュースアプリUIをリデザインしよう

3. ニュースアプリUIをリデザインしよう

【練習】ニュースアプリで学ぶ文字のサイズと階層のデザイン術
08:42
【練習】ニュースアプリで学ぶ文字のサイズと階層のデザイン術

【練習】ニュースアプリで学ぶ文字のサイズと階層のデザイン術

【解説】文字サイズで変わるニュースUI体験を確認しよう
10:05
【解説】文字サイズで変わるニュースUI体験を確認しよう

【解説】文字サイズで変わるニュースUI体験を確認しよう

4. レシピUIをデザインしよう
xxx
4. レシピUIをデザインしよう

4. レシピUIをデザインしよう

【練習】レシピ詳細UIで鍛える文字デザイン力
05:43
【練習】レシピ詳細UIで鍛える文字デザイン力

【練習】レシピ詳細UIで鍛える文字デザイン力

【解説】読みやすさの違いはここ!レシピUI解答例を解説
17:48
【解説】読みやすさの違いはここ!レシピUI解答例を解説

【解説】読みやすさの違いはここ!レシピUI解答例を解説

閉じる

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