FigmaでレスポンシブWEBデザインの作り方！Figmaの基礎からWEBデザイン実践まで解説！
FigmaでレスポンシブWEBデザインの作り方！Figmaの基礎からWEBデザイン実践まで解説！
講座の内容
- （トータル収録時間：約8時間）
- ▼----- この講座について
- どういう講座？：イントロ 00:50
- 講座を受講する前に Text
- 【リソース】レッスン用素材ファイルのダウンロード
- Figmaのアップデート情報 Text
- ▼----- Figmaについて
- Figmaとは・他のソフトとの違い：イントロ 01:04
- Figmaの始め方 04:02
- ▼----- Figmaの基本の使い方
- Figmaの基本：イントロ 01:09
- 新しいUIについて Text
- Figmaのホーム画面とファイル構成 10:19
- Figmaの画面解説 02:30
- Figmaのツールバーの使い方 52:00
- Figmaのプロパティパネルの使い方 51:09
- Figmaのレイヤー構造と入れ子の仕様 12:57
- Figmaの基本のショートカット 11:43
- Figmaの検索と置換機能 07:24
- ▼----- Figmaの便利な機能
- Figmaの便利な機能：イントロ 00:26
- オートレイアウトの便利な使い方・フレームとの違い 19:54
- コンポーネント・インスタンス・バリアントの使い方 07:54
- 色スタイル・テキストスタイル・エフェクトスタイルの使い方：コンポーネントとも併用 06:20
- マスクの使い方：マスクを使った写真の合成 07:32
- プラグイン・ウィジェットの使い方 04:25
- ▼----- レスポンシブデザイン実践：パソコン版デザイン
- レスポンシブWEBデザインの考え方：イントロ 01:45
- レイアウトグリッド・ガイドの作成 05:31
- ヘッダーエリアの作成 〜優先度に応じたデザイン〜 22:57
- メインビジュアルエリアの作成 ～FIgmaで簡単な画像の加工～ 08:04
- コンポーネントを活用したグローバルナビの作成 13:02
- コース一覧エリア ～横スクロールオブジェクトの作り方～ 29:06
- スクールについてエリア 〜写真やテキストをキレイに見せる〜 18:32
- 人気の理由エリア ～入れ子のフレームによるレスポンシブ対応～ 17:01
- バナーエリア ～優先度の高いバナーデザイン～ 13:06
- フッターエリア ～調整しやすいリンクの作り方～ 12:29
- デザインのチェック ～バランス調整・不具合のチェック～ 04:25
- 美しいデザインにするためのポイント 12:14
- ▼----- 実践：スマホ版・タブレット版のレスポンシブ化
- 実践：タブレット版デザイン 19:48
- 実践：スマホ版デザイン 57:00
- 実践：スマホ版メニューデザイン 14:02
- 実践：スマホ版下層ページデザイン 05:55
- ▼----- プロトタイプの作り方
- プロトタイプの作成 12:47
- Figma公式アプリでスマホの実機チェック 03:25
- 終わりのご挨拶 00:39
こんな方にオススメ
- FigmaでWEBデザインを作る手順を知りたい方
- レスポンシブWEBデザインの作り方を知りたい方
- WEBデザイン初級レベルの方
- WEBデザイン経験はあるけど、Figmaの使い方がわからない方
- Figmaの便利な使い方を知りたい方
- 他のソフトから、Figmaに乗り換えたい方
習得できるスキル
- Figmaの基本の使い方
- Figmaの便利な機能
- Figmaを使ったWEBデザインの進め方
- プラグイン・ウィジェットの使い方
- PC版・スマホ版・タブレット版のレスポンシブデザイン
- レスポンシブウェブデザインに使えるパーツの作成
講座内容
当講座はFigmaを使ったことが無い「Figma初心者」の方が、Figmaでひととおり実践的なWEBデザインができるようになるまでを学べる講座です。
Figmaのダウンロードや基本操作から始まり、Figmaの便利な機能を使いこなす方法を経て、PC版・タブレット版・スマホ版の３つの異なる画面サイズのデザインを作る「レスポンシブWEBデザイン」の作り方と考え方を、その工程を見せながら一緒に作っていく講座で、これからWEBデザイナーを目指す方や、他のツールからFigmaに乗り換えたい方へ向けた動画です。
また単にFigmaの使い方を学ぶだけでなく、美しく見やすいデザインの作り方や今風のデザインを作るには、どのような考え方でデザインすれば良いのか？といったところまで踏み込んで、実際にデザインを作る工程を収録しており、UI/UXデザインにも応用可能な講座となっております。
講座提供者
WEBデザイン・グラフィックデザイン歴約20年の本業はWEBデザイナーです。WEB制作会社２社、グラフィックデザイン会社1社にて、チーフデザイナーや部署長として勤務した経験を経て現在フリーランスのデザイナーとして、WEBデザイン業務やブログ運営、WEBデザイン講師業、コンテンツ作成・動画講座運営などの活動しております。
受講要件
- パソコンの基本的な使い方や操作ができる方
- WEBデザインに興味のある方
よくある質問
WEBデザインの完全な初心者で、右も左もわかりませんが、大丈夫ですか？
当講座はFigmaを使ってWEBデザインの作り方を学ぶ講座です。ある程度初心者の方にも分かりやすく解説するよう心がけていますので、WEBデザインの作り方については安心学んで頂けます。ただしデザイン作成以外の知識は、別途ご自分で学んで頂く必要があります。
Photoshop・illustrator・XDからFigmaに乗り換えたいのですが…
Figmaに乗り換えたい方にもってこいの講座です。
Windowsを使ってますが大丈夫でしょうか？
講座はMacで撮影していますが、Windowsとの違いも解説しており、操作はほとんど同じなので問題ありません。
Figmaを無料プランで使っていますが、問題ないでしょうか？
当講座は基本的に「無料プランの方」に向けた講座となっております。
