Outlecture
Home
About
Technology
Design
Video
Contact
Official
English
Outlecture
Home
About
Technology
Design
Video
Contact
Twitter Official
  • Home
  • Design

Figma のおすすめの教材8選! 【 2024年11月 最新版】

更新日:2024年11月4日

こちらは、独学で Figma を学ぼうとしている初学者の方に最適な学習講座を紹介するページです。

目次

1. 本ページの説明

1. 本ページの説明

Figma を独学で学ぶ上でおすすめの講座を動画プラットフォームから合計8選紹介します。

Figmaとは

Figma(フィグマ)とは、オンライン上で動作するインターフェースデザインツールで、UI/UXデザイン、プロトタイプ作成、共同作業が可能です。多くのデバイスに対応しており、他のデザインツールと比べてリアルタイムでの共同作業に特化しています。また、チームでのデザイン作業にも適しているため、UI/UXデザインの現場で広く利用されています。

本サイト「Outlecture(アウトレクチャー)」は講座の評価、情報の鮮度、購入者や視聴者数、直近の数値上昇率などを全てバランスよく採点し、ユーザーにとって最適な講座のみ抜粋できるよう独自のアルゴリズムで評価を行っています。

また、各動画プラットフォームもそれぞれ特徴があり、「こういう状況の方にはこちらの方が良い」というユースケースも合わせて説明していきます。

Figmaをこれから学ぼうとしているみなさまのご参考にしていただければ幸いです。

※ 英語での視聴に問題なければ、 英語版の講座 をおすすめします。

2. Udemy おすすめ講座5選

Outlectureで厳選したおすすめのUdemy講座5選はこちらです。

コース名 平均評価 総購入者数 先月の購入者数
(2024年10月)
コースレベル コース時間 作成日 更新日 料金

【最新版】FigmaでレスポンシブWEBデザイン作り方!Figmaの基礎からWEBデザイン実践まで完全サポート

thumbnail
4.6 4,665 182 初級〜上級 6 時間 43 分 2022年11月12日 2024年10月15日 ¥27,800

初心者【話題のFigmaでWEBデザイン。すぐ知れる作れる!】難しい説明よりも現役デザイナーと一緒にまず作ってしまおう!

thumbnail
4.2 2,961 - 初級 2 時間 40 分 2022年1月20日 2023年6月29日 ¥21,800

【2023年最新アップデート対応】WebデザインツールFigmaの準備・使い方の基礎から、実際の制作方法まで丁寧に解説!

thumbnail
4.23 2,691 166 初級 5 時間 5 分 2023年10月24日 2024年9月14日 ¥24,800

初心者から始めるアプリデザイン<UI/UXデザインをFigmaで学ぼう!>Webデザインにも応用可能

thumbnail
4.46 23,861 533 初級〜上級 26 時間 28 分 2020年4月19日 2024年10月30日 ¥27,800

ちゃんと学ぶ、Figma(UI3対応 2024年最新版)

thumbnail
4.65 2,916 234 初級 6 時間 59 分 2022年2月28日 2024年10月18日 ¥10,000

Udemy(ユーデミー)は、アメリカ・シリコンバレー発祥のユニコーン企業で、世界最大級のオンライン学習プラットフォームを運営しています。

Udemyの特徴は、

  • 15.5万以上(※海外講座含む)の豊富な講座を提供している
  • 講師陣の多くが世界最先端の現場で活躍されている
  • 1講座あたり数千~数万円で、キャンペーン時は70~90%OFFとなる良心的な値段
  • 講座は1度購入すれば視聴期限なく受講でき、30日返金保証もついている
  • 講座は0.5~2倍の変速機能を備え、自分のペースで学習することができ、専用アプリを使えばスマホからでもオフライン環境で受講可能
  • 講師に直接掲示板から質問ができるため、疑問を解決し自学自習をサポートしてくれる

等があげられます。

Outlectureの管理メンバーは、ソフトウェアエンジニアやクリエイター、webデザイナーが現役で活躍しています。私たちは初めて触るプログラミング言語やプロダクトの多くはUdemyの受講からキャッチアップをはじめています。
私たちの体験談として、Udemyの講座の質は非常に高いと感じています。講師陣が世界最先端で活躍している方々ばかりで、最先端の知識や現場でのノウハウを丁寧にわかりやすく教えてくれます。試験で使う知識ではなく、実際の現場・案件で使う知識と技術を習得することができます。

Udemyの講座は、実際の現場で活用したい方や自己学習を始めたい方に特におすすめです。一度購入すれば、視聴期限がなく、30日間の返金保証もあるため、安心して学びを始めることができます。

こんな方におすすめ

  • 実案件でFigmaを使用する
  • 現役の(世界)トップ戦線で活躍している方のノウハウを学びたい
  • サブスクリプションの加入に抵抗のある

各講座の詳細は以下に記載します。


【最新版】FigmaでレスポンシブWEBデザイン作り方!Figmaの基礎からWEBデザイン実践まで完全サポート

最新日本語版Figmaの基本操作から、PC・タブレット・スマホの3つ画面サイズデザインを作る「レスポンシブWEBデザイン」の作り方と考え方を学べる、初心者+FIgma乗換えを検討中の現役デザイナーの方向け講座(UI/UXデザインにも応用可)

thumbnail
平均評価
4.6
総購入者数
4,665
先月の購入者数
(2024年10月)
182
コースレベル
初級〜上級
コース時間
6 時間 43 分
作成日
2022年11月12日
更新日
2024年10月15日
料金
¥27,800

当講座は「最新の日本語版Figma」の画面を使って、Figmaの基本操作から始まり、PC版・タブレット版・スマホ版の3つの異なる画面サイズのデザインを作る「レスポンシブWEBデザイン」の作り方と考え方を、その工程を見せながら一緒に作っていくという、WEBデザイナーを目指す方や、他のツールからFigmaに乗り換えたい方へ向けた動画です。

また単にFigmaの使い方を学ぶだけでなく、美しく見やすいデザインの作り方や今風のデザインを作るには、どのような考え方でデザインすれば良いのか?といったところまで踏み込んで、実際にデザインを作る工程を収録しており、UI/UXデザインにも応用可能です。

Figmaは現在、PhotoshopやXDを超える使いやすさと便利さで、大人気のツールです。

私自身10年以上Photoshopを使ってWEBデザインをしてきましたが、そんな私がFigmaの魅力に取り憑かれ、現在ではPhotoshopとFigmaを使い分けて、両方でWEBデザインをするようになりました!

Photoshopにもその良さはありますが、Figmaにしか無い魅力もたくさんあり、そのFigmaの使いやすさや便利さを余すことなくお伝えしたいと思います。

  1. この講座について
  2. 当講座はどういう講座?
  3. 講座を受講する前に
  4. 【スキップ可】Udemy動画の便利な機能と使い方
  5. 当講座に関わる「Figmaのアップデート情報」
  6. Figmaについて
  7. Figmaとは・他のソフトとの違い
  8. Figmaの始め方
  9. Figmaの基本の使い方
  10. Figmaの基本:イントロダクション
  11. Figmaの無料プランでできること
  12. Figmaの画面解説と基本操作
  13. Figmaのレイヤー構造と入れ子の仕様
  14. Figmaの基本のショートカット
  15. Figmaの検索と置換機能
  16. Figmaの各種ツールバーの使い方
  17. Figmaのプロパティパネルの使い方
  18. Figmaの便利な機能
  19. Figmaの便利機能:イントロダクション
  20. オートレイアウトの便利な使い方・フレームとの違い
  21. コンポーネント・インスタンス・バリアントの使い方
  22. 色スタイル・テキストスタイル・エフェクトスタイルの使い方:コンポーネントとも併用
  23. マスクの使い方:マスクを使った写真の合成
  24. プラグイン・ウィジェットの使い方
  25. レスポンシブデザイン実践:パソコン版デザイン
  26. レスポンシブWEBデザインの考え方
  27. レイアウトグリッド・ガイドの作成
  28. ヘッダーエリアの作成 〜優先度に応じたデザイン〜
  29. メインビジュアルエリアの作成 ~FIgmaで簡単な画像の加工~
  30. コンポーネントを活用したグローバルナビの作成
  31. コース一覧エリア ~横スクロールオブジェクトの作り方~
  32. スクールについてエリア 〜写真やテキストをキレイに見せる〜
  33. 人気の理由エリア ~入れ子のフレームによるレスポンシブ対応~
  34. バナーエリア ~優先度の高いバナーデザイン~
  35. フッターエリア ~調整しやすいリンクの作り方~
  36. デザインのチェック ~バランス調整・不具合のチェック~
  37. 美しいデザインにするためのポイント
  38. 実践:スマホ版・タブレット版のレスポンシブ化
  39. 実践:タブレット版デザイン
  40. 実践:スマホ版デザイン
  41. 実践:スマホ版メニューデザイン
  42. 実践:スマホ版下層ページデザイン
  43. プロトタイプの作り方
  44. プロトタイプの作成
  45. Figma公式アプリでスマホの実機チェック
  46. 終わりのご挨拶
  47. ボーナスレクチャー
初心者【話題のFigmaでWEBデザイン。すぐ知れる作れる!】難しい説明よりも現役デザイナーと一緒にまず作ってしまおう!

Figmaって最近よく耳にする。知りたいけどホームページの説明を読んだりして勉強するのもどうかな、すぐに知りたい。導入に二の足の方はぜひ実際にツールを触ってみてください。導入してデザインを作るまで一緒に進めてFigmaできたと思える講座#1

thumbnail
平均評価
4.2
総購入者数
2,961
先月の購入者数
(2024年10月)
-
コースレベル
初級
コース時間
2 時間 40 分
作成日
2022年1月20日
更新日
2023年6月29日
料金
¥21,800

Figma講座 #1


Figmaって最近よく耳にする。

これまでもデザインツールもあるのに

なんで話題なの?何が良いのでしょう?

Figmaの概要、特長を知れます。


良いならすぐ使ってみたい。

難しい説明は面倒

登録から分からない

二の足を踏んでいる

現役プロデザイナーと作業画面を見ながら

一緒に制作してしまいましょう!


課題としてデザインを2つ作っていきます。

(課題用の素材データもリソースにご用意しました。

 すぐできます、準備はすこしのお時間だけ)

1、小さなカードで操作を学ぶ。

2、WEBサイトトップページを作ります。

 ワイヤーフレーム、デザインします。


ーーー


(対象の方)

初級講座です。Figmaを知りたい、触りたい方。


(((講座を受講いただくと)))

  • Figmaの概要、特長が知れます。

  • すぐ知りたい。すぐ触ってみたい。

  • Figmaが使えるように一緒にアカウント(登録)準備も行います

  • ワイヤーフレームが作れるようになります。

  • 簡単なデザインができるようになります。


(向かない方)

Tipsテクニック講座ではありません。

すでにグラフィックツールでデザイン制作をされている方。

XDをすでにご使用の方にも基本的な内容と思います。


(免責)

Figmaはユーザーみんなで改善され続け機能も随時アップデートされています。

操作パネルや機能は開講時のものですので少し異なる場合がありますがご了承ください。


ーーー


ベテランデザイナーが一緒に作り、語り口調でこうしておくといいぞとお伝えしていきます。

そして操作で「あっ間違えたっ」「なんかできない」という箇所もそのまま作業を進めて

よくある事例の解消としてご紹介しています。


受講後にもっと自分で作ってみたいな、と思っていただけるものと思います。

ではどうぞよろしくお願いいたします。

ひげあん


  1. 講座紹介
  2. コース概要、こんな方に
  3. 講師紹介
  4. カリキュラム
  5. まとめ)講座で習得できること
  6. Figmaとは
  7. Figmaの概要
  8. Figmaのメリット
  9. Figmaのデメリット
  10. まとめ)Figmaとは
  11. Figma登録
  12. (課題1)カードを作る
  13. セクション確認、できるようになること
  14. フレームと素材、ラフ確認
  15. ツール を使って四角や丸を描く。線と塗り、レイヤーを知る。
  16. レイアウトグリッド、余白
  17. (デザイン)ラフレイアウト
  18. (デザイン)デザインブラッシュアップ
  19. (まとめ)使用ツールおさらい
  20. (まとめ)カードデザインで得られたこと。
  21. (課題2)WEBデザイン1 ワイヤーフレムを作る
  22. セクション確認
  23. WEBデザイン、デザイン制作論(NEW)
  24. WF ワイヤーフレームを作る ガイドとカラム
  25. WF テキストと要素
  26. WF headerとheroview
  27. WF welcome
  28. WF sectionと拡大縮小
  29. WF concept
  30. WF menu
  31. WF shopと名前
  32. WF footer
  33. (課題2)WEBデザイン2  デザインする
  34. WEBデザイン header、heroview、welcom、concept
  35. WD menu
  36. WD shop
  37. WD footer
  38. WD ブラッシュアップ
  39. WD プレビュー確認
  40. 講座振り返りまとめ
  41. 講座まとめ
【2023年最新アップデート対応】WebデザインツールFigmaの準備・使い方の基礎から、実際の制作方法まで丁寧に解説!

デザイン初心者の方、Figmaの活用を検討中の現役デザイナーの方向けのFigma基礎講座。ツールの使い方に集中して、丁寧に解説しています。 実際の制作手順の共有や、Figmaファイルの特典もついています。

thumbnail
平均評価
4.23
総購入者数
2,691
先月の購入者数
(2024年10月)
166
コースレベル
初級
コース時間
5 時間 5 分
作成日
2023年10月24日
更新日
2024年9月14日
料金
¥24,800

本講座は、2023年最新アップデート版のFigmaに対応しています。

Figmaを使う前の準備から、基本的な使い方、実際のデザインを作る手順を、スライドと、実際のツールを用いてご説明していきます。


レクチャーは機能ごとに分かれていますので、一度で覚えられなくても大丈夫。何度も復習して、身につけてください。スライドを使用した説明とFigma画面を共有しながらの説明のほか、合計7つの実践レクチャーもありますので、ぜひ一緒に手を動かしながら取り組んでください!

  1. Figma講座へようこそ!
  2. ごあいさつ
  3. 講座について
  4. 講座のゴールと対象者
  5. 操作環境について
  6. 講師紹介&この講座を作った理由
  7. はじめてのFigma
  8. Figmaの特徴
  9. 他のデザインツールとの違い
  10. Figmaを使う前に知っておきたい基礎知識
  11. 利用プラン
  12. まとめ
  13. Figmaを使う準備をしよう
  14. Figmaアカウントの作成
  15. ローカルフォントへのアクセス
  16. プロジェクトファイルの作成
  17. 画面の説明
  18. まとめ
  19. ツールの使い方
  20. 移動ツール|Move Tool
  21. リージョンツール|Region Tool
  22. シェイプツール|Shape Tool
  23. 作成ツール|Creation Tool
  24. テキスト|Text
  25. リソース|Resource
  26. 手のひらツール|Hand Tool
  27. コメント追加|Add Comment
  28. 【実践】デザインを作ってみよう!
  29. まとめ
  30. オブジェクトに対する編集ツールの使い方
  31. 塗りと線|Fill&Stroke
  32. エフェクト|Effects
  33. ブレンドモード|Layer
  34. 新しいセクションで囲む|Wrap in new section
  35. オブジェクトの編集|Edit Object
  36. コンポーネントの作成|Create Component
  37. マスクとして使用|Use as Mask
  38. 画像のトリミング|Crop Image
  39. 選択範囲の結合|Union Selection
  40. リンクの作成|Create Link
  41. 【実践】デザインを作ってみよう!
  42. まとめ
  43. もっと便利に使うために
  44. 基本機能(他ツール共通)
  45. Figma特有の機能
  46. 整列とグルーピング
  47. 制約|Constrains
  48. スタイル登録
  49. サムネイル登録
  50. 困ったときは
  51. まとめ
  52. デザインの共有
  53. 共有モーダル
  54. 権限の種類
  55. ファイルへの招待
  56. リンクで共有
  57. 書き出し
  58. ローカル保存
  59. 開発モード|Dev Mode
  60. まとめ
  61. プラグインとウィジェットを活用したデザイン制作
  62. プラグインとは
  63. ウィジェットとは
  64. プラグインとウィジェットの使い方
  65. おすすめプラグインとウィジェットの紹介
  66. 【実践】デザインを作ってみよう!
  67. まとめ
  68. Webサイト制作の流れと、デザイン模写
  69. Webサイト制作の流れ
  70. 【実践】Webサイトのワイヤーフレームを作ってみよう
  71. 【実践】Webサイトのデザインを作ってみよう
  72. ボーナスレクチャー
  73. ボーナスレクチャー
初心者から始めるアプリデザイン<UI/UXデザインをFigmaで学ぼう!>Webデザインにも応用可能

<Mac / Windows対応>高品質なUIデザインにはルールがある!Figmaの基本的な使い方はもちろん、AppleのAppデザインを忠実に再現する応用編まで収録。アニメーションを駆使して、圧倒的に表現力豊かなプロトタイプをつくろう!

thumbnail
平均評価
4.46
総購入者数
23,861
先月の購入者数
(2024年10月)
533
コースレベル
初級〜上級
コース時間
26 時間 28 分
作成日
2020年4月19日
更新日
2024年10月30日
料金
¥27,800

ーーーーーーーーーーー
\ 新UI(UI3)に対応 /
2024年10月31日、すべての動画をリニューアルしました!
AI機能などの最新情報も取り込んでいます。
※ 現在受講中の方のために、旧バージョンも引き続き公開中です。
ーーーーーーーーーーー

この講座をきっかけに著書『Figma for UIデザイン(翔泳社)』が発売されました。

Figmaは誰でも気軽に使えるデザインツールであり、プロの現場でも使われる素晴らしいソフトウェアです。Mac / Windows / Webブラウザを使って誰でもデザインを始められ、その柔軟さと機能性でユーザー数を伸ばしていますが、日本語の体系的な教材がまだ少ない印象です。

この講座では、Appleのデザインを題材に本格的なUIデザインを学習します。
また、Figmaの強力なインタラクション機能とプラグインを使って、ハイレベルなプロトタイプを作成します(プロトタイプとは、できるだけ早い段階でデザインに欠陥がないかをテストする手法です)。

モバイルアプリをデザインする際のルール、一貫性のあるデザインの大切さ、感覚に頼らないデザインなど、デザイナーの思考法を解説しながら一緒にUIを作り上げていきますので、初学者はもちろん、エンジニアやマネージャーなど、普段デザインに関わらない方にもお勧めです!
学習した知識とテクニックは、Webデザイン制作にも活かすことができます。また、最終的なデザインは公開されており、自由に確認、編集することができます。

UIデザインのノウハウを習得しましょう!

  1. はじめに
  2. この講座の概要
  3. この講座で使用する教材
  4. 初めてのFigma
  5. Figmaを始める
  6. チーム・プロジェクト・ファイル
  7. プランによる機能の違い
  8. デスクトップアプリとモバイルアプリ
  9. Figmaの基本
  10. フレーム・ページ・キャンバス
  11. 基本的なオブジェクト
  12. テキストオブジェクト
  13. グループとフレームの違い
  14. ブーリアングループ
  15. 立方体を描いてみよう
  16. ペンツールでパスを描く
  17. ベジェ曲線にチャレンジ
  18. 線とテキストのアウトライン化
  19. 画像サイズに関する注意点
  20. 画像を読み込む
  21. 画像の色味と配置方法
  22. 画像をマスクする
  23. グラデーションとブレンドモード
  24. レイヤーのエフェクト
  25. よく使うスタイルを登録する
  26. Figmaの高度な機能
  27. コンポーネントとインスタンス
  28. オートレイアウトで可変サイズのボタンを作る
  29. 制約でサイズ変更に対応する
  30. 整列とオートレイアウトを使ってオブジェクトを並べる
  31. 解像度に応じた画像の書き出し
  32. UIデザインを始める
  33. イントロダクション
  34. アプリデザインの外枠を作成する
  35. ヘッダーの要素を追加する
  36. カードの要素を追加する
  37. レイアウトグリッドを作成する
  38. ナッジングとナッジの調整幅
  39. グリッドシステムと8ptの理由
  40. グリッドシステムにおける例外
  41. レイアウトを始めよう
  42. タブナビゲーションを作る
  43. コンポーネントでデザインのテンプレートを作る
  44. アイコン作成にチャレンジ 1(ブーリアングループの応用)
  45. アイコン作成にチャレンジ 2(ベジェ曲線あり)
  46. アイコン作成にチャレンジ 3(オブジェクトの基点が重要)
  47. アイコン作成にチャレンジ 4
  48. アイコンをコンポーネントに変換する
  49. 入れ子になったインスタンスを入れ替える
  50. コンポーネントプロパティ(応用)
  51. 外部リソースで時間を節約(iOS UI Kit)
  52. 高品質な写真で画面を美しく飾る(Unsplash)
  53. タブナビゲーションに制約を追加してサイズ変更に対応する
  54. ヘッダーとカードに制約を追加してサイズ変更に対応する
  55. カードのコンポーネントを作成する
  56. カードのデザインをカスタマイズ
  57. バリアントを使ったコンポーネントの管理(応用)
  58. インスタンスを配置してプロパティを上書きする
  59. アプリのリストUIを作成する 1
  60. アプリのリストUIを作成する 2(行間について)
  61. アプリのリストUIを作成する 3(オートレイアウトの応用)
  62. アプリのリストUIを作成する 4(コンポーネント化)
  63. 高品質なUIデザインのプロトタイプ
  64. 実際のiPhoneを使ったプロトタイプの確認
  65. より良いデザインの管理
  66. 作成済みテキストのバリエーションを確認
  67. コンポーネントのテキストスタイルを作成する
  68. 上下トリミングを含むテキストスタイル
  69. その他のテキストスタイル
  70. カラーパレットの作成
  71. コンポーネントにカラースタイルを適用する
  72. その他の要素にカラースタイルを適用する
  73. バリアブルで色を管理する(応用)
  74. ページを分割して見通しを良く
  75. 折り返し地点のまとめ
  76. アプリ画面の作り込み 1
  77. TodayDetail 1 / Heroセクションのデザイン
  78. TodayDetail 2 / コンテンツの作成
  79. TodayDetail 3 / 別ページへの導線
  80. TodayDetail 4 / シェアボタンの作成
  81. TodayDetail 5 / ブラッシュアップ
  82. アプリ画面の作り込み 2
  83. AppDetail 1 / デザインの確認
  84. AppDetail 2 / ナビゲーションの設置
  85. AppDetail 3 / ヘッダーセクションの作成
  86. AppDetail 4 / サマリーセクションの作成
  87. AppDetail 5 / 変更履歴セクションの作成
  88. AppDetail 6 / スクリーンショットと開発者セクションの作成
  89. AppDetail 7 / レイティングセクションの作成
  90. AppDetail 8 / レビューセクションの作成
  91. AppDetail 9 / アイコン付きのリンクを作成
  92. AppDetail 10 / コンポーネントを使ってリストUIを作る
  93. AppDetail 11 / 複雑なアイコンにチャレンジ
  94. AppDetail 12 / 付加情報セクションの作成(マスクの応用)
  95. AppDetail 13 / レコメンデーションセクションの作成
  96. AppDetail 14 / 制約を追加してリサイズに対応する
  97. AppDetail 15 / スタイルの確認と修正
  98. さらに高品質なプロトタイピング
  99. イントロダクション
  100. 画面遷移を設定する
  101. 画面遷移にアニメーションを追加する
  102. マッチングレイヤーで要素を固定する
  103. プレビュー機能とアニメーションの種類
  104. 横スクロールを実現する
  105. プロトタイプを改善してリッチなUIに
  106. オーバーレイを表示する
  107. アフターディレイとスマートアニメート
  108. オーバーレイを入れ替えて複雑なアニメーションを実現する
  109. キーフレームアニメーションによる豊かな表現
  110. イントロダクション
  111. 完成形のデモとスマートアニメートの限界
  112. ローディングアイコンの素材作成
  113. Figmotionを使ったアニメーション作成
  114. アニメーションするボタンの素材作成
  115. 少し複雑なキーフレームアニメーション
  116. プラグインとAI機能で作業を効率化
  117. そのほかの画面について
  118. すべての画面をつなぐ
  119. プラグインでコンテンツを作成する
  120. AIで繰り返し要素のコンテンツを作成する
  121. AIでレイヤーを命名する
  122. AIで文章や画像を生成する
  123. AIでプロトタイプやデザインを作成する
  124. ーーー 以下はリニューアル前のレッスンです ーーー
  125. 全面リニューアルしました
  126. はじめに(UI1)
  127. はじめに
  128. この講座で使用する教材
  129. 初めてのFigma(UI1)
  130. アカウント作成とデスクトップ版のダウンロード
  131. チーム・プロジェクト・ファイル
  132. フォントのインストール
  133. Figmaの基本(UI1)
  134. UIが変更されます
  135. イントロダクション
  136. Figmaの基本操作
  137. 図形をまとめる方法の違い
  138. 立方体を描く
  139. カスタムシェイプを描く
  140. ベジェ曲線を描く
  141. テキストを追加する
  142. パスをアウトライン化する
  143. 最適な画像サイズ
  144. 画像を読み込んで使用する
  145. 画像オプションを変更する
  146. 塗りオプションを使う
  147. よく使うスタイルを登録する
  148. コンポーネントとインスタンス
  149. オートレイアウト
  150. 制約・コンストレイント
  151. オブジェクトを効率的に整列させる
  152. 画像をエクスポートする
  153. 複雑なオートレイアウト
  154. UIデザインとFigmaの応用テクニック(UI1)
  155. イントロダクション
  156. フレームとエレメントの追加
  157. グリッドとナッジの設定
  158. なぜグリッドシステムか
  159. グリッドシステムの例外
  160. レイアウトを始めよう
  161. タブナビゲーションの追加
  162. コンポーネントを作成する
  163. ファイルの整理と変更履歴
  164. アイコンを描く 1
  165. アイコンを描く 2
  166. アイコンを描く 3
  167. アイコンを描く 4
  168. タブメニューのアイコンを差替える
  169. 外部リソースで時間を節約
  170. 高品質な写真で画面を美しく
  171. 無料の仕組み Unsplash
  172. デザインに写真を設置する
  173. 制約を追加する
  174. タブナビゲーションの制約
  175. カードとヘッダーの制約
  176. カードUIのコンポーネント化
  177. カードUIのカスタマイズ
  178. カードUIを追加する
  179. アイテムUIのレイアウト
  180. 価格ボタンのデザイン
  181. オートレイアウト
  182. サイズ可変のボタンをつくる
  183. UI変更[スクロール時に位置を固定]のお知らせ
  184. リアリティのあるUIモック
  185. iPhoneでデザインを確認
  186. より良いデザインの管理(UI1)
  187. イントロダクション
  188. テキストスタイルを作成する
  189. インスタンスのスタイルを上書き
  190. スタイルを使うメリット
  191. カラースタイルを作成する
  192. カラースタイルを適応する
  193. ページを分割して見通しを良く
  194. チームライブラリを公開する
  195. 色指定の漏れをチェックする
  196. 折り返し地点ラップアップ
  197. アプリ画面の作り込み 1(UI1)
  198. イントロダクション
  199. Today-Detail 1 / 遷移後の画面
  200. Today-Detail 2 / ページのコンテンツを作成
ちゃんと学ぶ、Figma(UI3対応 2024年最新版)

Figmaで作るボタンデザイン、バナーデザインとアプリ設計

thumbnail
平均評価
4.65
総購入者数
2,916
先月の購入者数
(2024年10月)
234
コースレベル
初級
コース時間
6 時間 59 分
作成日
2022年2月28日
更新日
2024年10月18日
料金
¥10,000

FigmaはWebベースで利用可能な、高機能デザイン・プロトタイプ設計ツールです。

デザイナーの方はもちろん、アイデアを設計したいアプリ開発者の方や、Webサイトのディレクターの方など幅広く活用することができます。また、HTMLの実装する方やアプリの開発をする方は、共有されたFigmaデータを元に開発を進めることができる、コラボレーションツールともなっています。

この講座では、ディレクターとしてWebデザインなどを行う講師のたにぐちと、デザイナーのanygraphicaにより、Figmaをデザインツールとしての側面と設計ツールの側面を両方紹介します。

Figmaをこれから使っていきたいという方はもちろん、すべての機能を使いこなせていないという方の復習にも活用頂ければ幸いです。

  1. 紹介
  2. Udemyでの受講にあたって
  3. Figmaの基本操作を学んでボタンを作ろう(UI3)
  4. Figmaのアカウントを作成して、長方形シェイプを描こう
  5. 角の角度を調整して、角丸の長方形を作ろう
  6. 線の調整とドロップシャドウを調整しよう
  7. テキストツールを使って、ボタンのラベルを作ろう
  8. ペンツールを使って矢印を作ろう
  9. グループ化と整列ツールで、各パーツの位置を仕上げよう
  10. シェイプについて詳しく知ろう
  11. カラーコードについて知ろう
  12. ベクターパスについて知ろう
  13. テキストツールを使いこなして利用規約ページの設計を作ろう(UI3)
  14. テキストツールでタイトルを配置しよう
  15. 全部大文字の英文テキストを配置しよう
  16. 高さの自動調整モードで幅を固定したタイトルを作ろう
  17. ルーラーを使って位置調整しよう
  18. 固定サイズテキストで本文を配置しよう
  19. 箇条書きの自動設定と解除の方法を知ろう
  20. テキストの装飾を使ってリンクっぽい要素を作ろう
  21. フィルターやマスク機能を使ってバナー画像を作成しよう(UI3)
  22. 写真素材をUnsplashプラグインから挿入しよう
  23. レイヤーについて知ろう
  24. 写真にフィルターをかけよう
  25. バナーに文字要素を配置しよう
  26. マスクを使って文字の背景を画像にしよう
  27. レイヤーをロックして移動できないようにしよう
  28. 画像をエクスポートしよう
  29. ブーリアングループについて知ろう
  30. オートレイアウトと制約機能で画面を設計しよう(UI3)
  31. メニューバーの設計を作ろう
  32. オートレイアウト機能でメニューを作ろう
  33. 検索窓と検索ボタンを作ろう
  34. 制約機能で右端に寄せよう
  35. 制約機能の拡大・縮小を使おう
  36. その他の制約機能
  37. フレームを使って本文エリアを仕上げよう
  38. プロトタイプモードで、スマホアプリのモックアップを作成しよう(UI3)
  39. プロトタイプを作ろう
  40. iPhoneのトップバーを作成しよう
  41. アートレイアウトで一覧画面を作成しよう
  42. スクロール固定機能でトップバーを固定しよう
  43. 詳細ページを作成しよう
  44. コネクションでページ遷移しよう
  45. 「戻る」ボタンを実装しよう
  46. バリアントで見た目が変わるコンポーネントを作ろう
  47. バリアントにアクションを設定しよう
  48. アフターディレイで自動アニメーションする要素を追加しよう
  49. Figma編: Figmaの基本操作を学んでボタンを作ろう【旧講座】
  50. ここより下のレクチャーについて
  51. Figmaのアカウントを作成してログインしよう
  52. 長方形や楕円などのシェイプを描こう
  53. デザインパネルで細かな調整を行おう
  54. ボタンパーツを作成しよう
  55. テキストツールでボタンのラベルを作ろう
  56. テキストツールの細かい調整をしよう
  57. ペンツールでパス編集とベジェ曲線を描こう
  58. ペンツールでボタンの矢印を描こう
  59. パス編集をして、シェイプを自由に編集しよう
  60. 位置揃えツールで、シェイプの位置揃えを調整しよう
  61. グループ化で、複数のシェイプをグループにしよう
  62. レイヤーでシェイプの前後関係を調整しよう
  63. 合成とグループ化の違いについて知ろう
  64. コンポーネント化して再利用可能なパーツにしよう
  65. Figma編:バナー画像を作成しよう【旧講座】
  66. 写真素材を挿入しよう
  67. プラグインを使って写真の挿入を簡単にしよう
  68. マスクを使って、写真を一部分だけ切り抜いて利用しよう
  69. 補足:AIデータをFigmaで利用する方法について
  70. Adobe Illustratorのデータを挿入しよう
  71. フィルターを利用して写真を加工しよう
  72. ロックをして不意の変更ができないようにしよう
  73. 文字要素を配置してバナーを仕上げよう
  74. エクスポート機能を利用して画像を書きだそう
  75. Figma編:プロトタイプモードでスマホアプリの設計をしよう【旧講座】
  76. Figmaコミュニティから、テンプレートを利用しよう
  77. 画像パーツをコピーしよう
  78. レイアウトグリッドを表示して、画面のレイアウトを調整しやすくしよう
  79. 制約を設定して、画面サイズが変化したときのレイアウトを設計しよう
  80. 子フレームを使ってレイアウトしやすくしよう
  81. オートレイアウト機能を使って、複数のパーツを配置しよう
  82. オートレイアウトについてさらに詳しく知ろう
  83. オートレイアウトを使って、柔軟なボタンを作成しよう
  84. 補足:スクロールの固定について
  85. プレゼンテーションモードを使って作った設計をプレビューしよう
  86. 詳細画面を制作しよう
  87. インタラクションを設定して画面を遷移できるようにしよう
  88. プロパティを利用してタップで状況の変わるボタンを作ろう
  89. プロパティを使って、ボタンのテキストも変更できるようにしよう
  90. インタラクションを使って、ローディングアニメーションを作成しよう
  91. 共有機能でデザイナーやプログラマーと共有しよう

3. YouTubeおすすめ講座3選

Outlectureで厳選したおすすめのYouTube講座3選はこちらです。

動画名 総視聴数 先月の視聴数
(2024年10月)
いいね数 公開日

【2024最新】30分マスター講座 Figmaの基本と便利な使い方! | WEBデザインツール

thumbnail

チャンネル名:HIROCODE.ヒロコード

104,466 9,800 2,762 2024年1月23日

Figmaの使い方講座:基本からWEBデザイン制作までの完全版

thumbnail

チャンネル名:マイウェブスクール【WEB×稼ぐ】

59,137 1,509 1,413 2022年9月4日

【超入門】Figma(フィグマ)って何?特徴や使い始め方を解説【Webデザイン初心者・コーダー必見】

thumbnail

チャンネル名:Webの神様

28,768 1,523 576 2023年12月3日

YouTubeは、広告がつくものの無料で視聴でき、日常生活でもお馴染みとなっています。
最近では、良質な教材も増えており、学びたいけどお金をかけるほどでもない方や、概要をさらっと理解したい方には、YouTubeで学ぶことをおすすめします。

こんな方におすすめ

  • お金をかけずに学びたい
  • Figmaの概要だけさらっと理解したい

各講座の詳細は以下に記載します。

【2024最新】30分マスター講座 Figmaの基本と便利な使い方! | WEBデザインツール

HIROCODE.ヒロコード

総視聴数
104,466
先月の視聴数
(2024年10月)
9,800
いいね数
2,762
公開日
2024年1月23日
WEBデザインツール「Figma(フィグマ)」の基本的な使い方・便利な機能について解説しています。😊♪
まだ使ったことがある方や、使い始めたばかりの方にオススメの内容です😆❗️
【※以前の動画内容を一部アップデートしたものです】

Figmaがもっと効率的に使える、プラグインの紹介動画はこちら 🔽
https://youtu.be/loP9yAc-EY0

🎥 この動画の構成 🎥
00:00 Figma(フィグマ)の基本的な使い方
00:29 Figmaとは?
00:40 Figmaでできること
00:50 アカウントの作成
01:02 無料プラン・有料プラン
01:29 ログイン後の画面について
01:54 ファイルを作成する場所
02:04 チームとは?
02:32 下書きについて
03:01 新規デザインファイルを作成する
03:27 画面構成(デザイン画面)
03:58 ツール(ツールパネル)
06:47 ・フレーム
08:27 ・グループ
08:57 ・コンストレインツ
10:15 ・レイヤー
11:05 ・整列・並び替え
11:31 ・オートレイアウト
12:32 ・画像
13:39 ・スタイルの定義
15:28 ・バリアブル
15:58 ・コンポーネント / インスタンス
20:34 ・バリアント
22:45 ・プロトタイプ
24:18 ・共有
26:02 ・書き出し


✅ ご視聴いただきありがとうございます🙇‍♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
👇『HIROCODE.ヒロコード』をチャンネル登録する 👇
http://www.youtube.com/hirocode?sub_confirmation=1

◆ Twitter. ツイッター
https://twitter.com/hirocodeweb

◆ Instagram. インスタグラム 👈 オススメ❗️
https://www.instagram.com/hirocodeweb/

🔋 僕が使っている、おすすめのデバイス 🔋(アフィリエイト広告を使ってます!)
【 マウス 】
✅ ロジクール アドバンスド ワイヤレスマウス MX Master 3
https://amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "

【 キーボード 】
✅ ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS
https://amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "

【 パソコン 】
----- パソコン -----
✅ 【 Apple 13インチMacBook Pro 2022 】
https://amzn.to/3bDPYmU
"最新M2チップ搭載!初期投資で良いパソコンの使用をオススメします。 "

【 周辺機器 】
✅ Apple AirPods Pro
https://amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。

✅ Apple iPad Pro 11インチ
https://amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "


📕 おすすめ書籍 📕
【 デザイン 基礎編 】
✅ 1冊ですべて身につくHTML & CSSとWebデザイン入門講座
https://amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "

✅ なるほどデザイン
https://amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "

【 デザイン 思考編 】
✅ 誰のためのデザイン?
https://amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "

✅ IAシンキング Web制作者・担当者のためのIA思考術
https://amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "

【 書籍デバイス 】
✅ キンドルペーパーホワイト Kindle Paperwhite
https://amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。


🎧 BGM 🎧
----------------------------------------------------------
Music Title: Happy And Joyful Children
Music Link: https://youtu.be/lv1YPeP1O8k
----------------------------------------------------------

#WEBデザイン #Figma #XD
Figmaの使い方講座:基本からWEBデザイン制作までの完全版

マイウェブスクール【WEB×稼ぐ】

総視聴数
59,137
先月の視聴数
(2024年10月)
1,509
いいね数
1,413
公開日
2022年9月4日
今回は、Figmaを活用してダウンロードの方法から基本操作、WEBデザイン制作まで一気にお教えします!一緒にお洒落なWEBデザインを作成してFigmaの操作を0から完璧にマスターしていきましょう。

▼今回の学習素材はこちらからダウンロード可能
https://drive.google.com/file/d/1_xUrpYV15TXlgfaTcP3VZaaBnfcqENw7/view?usp=sharing

\\\\\\\\\\\\\✅「完全無料」の書籍ダウンロードできます👇///////////
未経験からウェブデザインで成功したい人は、絶対手に入れてください♪
【書籍ダウンロード】https://yasuda.clickfunnels.com/you_mybook55367413

✅ご視聴いただきありがとうございます🙇‍♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️

◆ チャンネル登録お願いします💛
https://www.youtube.com/c/%E3%83%A4%E3%82%B9%E3%83%80%E5%85%88%E7%94%9F/featured

-------------
◆ Twitter. ツイッター
https://twitter.com/YasudaDesign

◆ Instagram. インスタグラム
https://www.instagram.com/yasudadesign01/

◆ 「保田デザイン事務所」公式ホームページ
https://yasuda-design.com/

◆ 「マイウェブサロン」運営
https://web.prodesign-school.com/p/home

◆マイウェブブログ
https://myweb-design.net/
-------------

---------------------------------------------------------------------------
★PROFILE
---------------------------------------------------------------------------
保田デザイン事務所
代表取締役 / webデザイナー / UIデザイナー / Udemy講師

完全未経験でウェブデザイナーに転身。フリーランスのWebデザイナー/UIデザイナーとして活動しながら、自由に在宅ワークで暮らしている。2021年に保田デザイン事務所を設立しHP制作を行っている。

現在では大手企業のHP制作を多く受け持ち、大手テレビ局のアプリデザイン制作も担当。保田デザイン事務所の社長。Udemyベストセラー講師。

自身の体験をもとに「未経験からウェブデザイナーになりたい人を全力応援」している。
-------------

#figma #webデザイナー #web #フリーランス #副業 #職業訓練校 #ウェブデザイナー #リモート
【超入門】Figma(フィグマ)って何?特徴や使い始め方を解説【Webデザイン初心者・コーダー必見】

Webの神様

総視聴数
28,768
先月の視聴数
(2024年10月)
1,523
いいね数
576
公開日
2023年12月3日
昨今話題の最強デザインツール「Figma」の特徴や、使い始め方を解説しました!
「Figma」って何?といまいち正体が掴めていなかった方は必見です!
今後、別動画でもっと詳しい使い方を解説していきます。

Figma
https://www.figma.com/

Figmaの基本 - Figma Basics 日本語版(初心者向けチュートリアル)
https://www.figma.com/community/file/1228577958737472070

★★★「Webの神様」メンタープランのご案内★★★

ナビゲーターの「なつこ」が講師となって、皆さんのWebデザイン・プログラミング学習をサポートする「メンタープラン」を実施中です!

【お知らせ動画】
「Webの神様」があなたのメンターになります
https://youtu.be/pJfpEVjAdqk

【プランの詳細・お申し込み(MENTA)】
https://menta.work/plan/5148

未経験から学習中の方、Web・IT業界に就職・転職活動中の方、フリーランス独立を目指して活動中の方など、必要として頂いている皆さんのお役に立てるように精一杯サポートさせて頂きます!
是非ともご検討いただければ幸いです。

★★★★★★★★★★★★★★★★★★★★★★★

--- Webの神様 ---
未経験、初心者のみなさんのHTML・CSSの学習を応援していくチャンネルです!

【タグ】
#コーディング #プログラミング

【SNS】
--- Twitter ---
https://twitter.com/webgodweb

--- Facebook ---
https://www.facebook.com/webgodweb/

【運営会社】
株式会社カラフルクローバー
https://www.colorful-clover.co.jp/

5. まとめ

Figmaのおすすめ講座を紹介しました。他の関連講座を学びたい方は、下記をご参考ください。

Fresco
XD
Illustrator
Fresco
XD
Illustrator

今回紹介したいずれかの講座を受講した後にさらに深掘りして学びたい方は、公式サイトやコミュニティサイトに行くことを、最新の情報をキャッチアップしていきたい方場合は、公式twitterアカウントをフォローすることをおすすめします。

また、ChatGPTなどの汎用AIを勉強のヘルプツールとして活用することも強くおすすめします。これにより、より効果的な学習が可能になりますのでぜひ試してみてください。

「自ら機会を創り出し、機会によって自らを変えよ」

株式会社リクルート創業者 江副浩正氏の有名な言葉です。自分の知識やスキルを高めることは、機会を作り出すことに役に立ちます。自らを変えようとしている方にとって、本ページの情報が少しでもお役に立てれば幸いです。

一覧に戻る
Home About Share
Home
About
Privacy policy
Disclaimer
Contact
Official
© 2024 outlecture.com All Rights Reserved.