無料特典付【基礎編】WEB制作初心者のためのFigmaデザイン入門講座
こんな方へWebデザイン未経験 / 初心者の方
Webデザイン、UIデザインツールとして世界的なシェアを誇るFigma（フィグマ）。「これからWebデザインを学んでみたい」というWeb制作未経験者向けに、Figmaのはじめかた、基本操作を中心にわかりやすく解説します。Webページのデザインを作りながら、基礎を習得しましょう！
この講座で、できるようになること
- Figmaの概要・登録方法がわかる
- Figmaの作業画面を理解できる
- Figmaの基本操作・主要ツールがわかる
この講座について
デザインツール未経験者歓迎！
完全無料でFigma基礎スキルを習得
～ 高シェア率のデザインツール『Figma』ではじめるWebデザイン ～
Webデザイン/UIデザインにおいて高いシェア率を誇るデザインツールFigma。開発関連の機能も充実している多機能なツールで、実際の業務で使われることも多く、Figma使用が条件のフリーランス案件も存在します。
Figmaは期間制限なく、基本機能は無料で利用可能。XDなどとも操作感が似ているので、他のUI/Webデザインツールの習得も容易になります。Webデザインを始めてみたい方の、学習スタートにもおすすめです。
Webデザイン/Figmaのお悩み、ありませんか？
どのデザインツールを
勉強すべきか迷っている
入門書を買ったけれど
読んでもわからなかった
メニューやウィンドウが多く
何が何だかわからない
遊ぶように試して、気楽に覚える。
コンパクトで実践的なカリキュラム
FigmaはUI開発にも使われる多機能なデザインツールです。しかし、Web制作初心者の方にとっては、解説で知らない用語が頻出する点が学習を始めたい方のハードルになることもあります。デザイントークン、バリアントのプロパティ、など日常生活では使わない言葉がバンバン出てきて、嫌になってしまった方もいらっしゃるのではないでしょうか？
本講座では、そうした用語の理解のために、まずFigmaを試してみることを推奨しています。言葉上で概念を理解しようとすると難しいけれど、実際に使ってみたら「なんだ、これか」と納得できる事が沢山あります。以下のような簡単なWebデザインを作りながら、基本操作やFigmaの便利機能を把握していきましょう！
短時間で実践的な基礎スキルを習得可能にするSkillhubメソッド
多くの未経験者をフリーランスWeb制作者としてデビューさせてきた、Skillhubの講座は無駄なくミニマムな内容。ほんとうに必要な知識だけを厳選しているからこそ、受講した日のうちにレベルアップを感じられる超短期学習が実現できます。
アニメーション＆図解たっぷり! 初めてでも一緒に操作できます
Skillhubの講座は、Webデザイン未経験・学習をはじめたばかりの方でも分かりやすいことが大前提。親しみやすい表現+図解を使った解説が中心です。
本講座も、受講者様が一緒に手を動かせるよう、Figmaの無料アカウントを作るところから始まります。Figmaのデザイン制作操作は、静止図解と操作デモアニメーションで解説。効率よく要点を抑えながら一緒に操作を進めていただけます。
むずかしく考えない。Figmaの操作と一緒に用語も理解できる
FigmaはUIデザインをベースにしたデザインツール。フロントエンドやデザインの知識がないと、公式ドキュメントで使われている用語がむずかしく、ちょっとした設定も難解に感じてしまいがちです。
最初に専門用語の定義・概念をしっかり覚えようとすると、精根尽き果ててしまいます。まずは実際に動かしてみて、イメージを掴むことをスキルハブでは大事にしています。その後に、むずかしかった説明を読むと「なんだ、このことか」と腑に落ち、自分で活用方法を考えたり出来るようになりますよ。
短時間で基礎を理解、あとは自分でどんどんレベルアップ
本講座では、簡単なWebページのデザインを作りながら、Figmaの基本機能を一通り使っていただきます。基本操作・基礎スキルは暗記するものではなく、使っていれば勝手に身につきます。わからない・忘れちゃった部分があっても、調べられれば良いのです。
操作に慣れる、公式ガイドなどで調べて取り入れる。
この２つが出来れば、自分の作りたいデザインを形にすることが出来ます。使わない機能まで１つずつ暗記なんてせず、実践的な覚え方をするからこそ、短時間で必要最低限のスキルが身につきます。
本講座を終えると、できるようになること
- Figmaの基本操作がわかる
- Figmaで簡単なデザインが作れる
- スタイル・バリアントの登録と利用ができる
- オートレイアウトを使った配置方法がわかる
- デザイン図、素材画像の書き出しができる
- Figmaの基本的なプロトタイプ設定ができる
本講座ご受講の推奨条件
本講座はWeb制作未経験の方でもご受講いただけるよう作成しています。
ただし、Figmaはコーディング・CSSで無理なく設定できる構成が意識されたデザインツールです。HTMLとCSSの基礎理解があったほうが、Figmaの操作・設定などはスムーズに理解できるでしょう。
- HTML,CSSの基本書式を理解している
- CSS Flexboxを使える（レイアウトができる）
Web制作の基礎スキルを一通り学習したい・受講順に悩んでいるという方は、先に以下講座のご受講がおすすめです。
この講座で学べること
- Figmaの概要・登録方法がわかる
- Figmaの作業画面を理解できる
- Figmaの基本操作・主要ツールがわかる
- Figmaのコンポーネント・インスタンスが理解できる
- Figmaのオートレイアウトを使い、柔軟なレイアウトを組める
- FigmaでWebページのデザインから画像の書き出しまで行える
こんな方におすすめです
- Webデザイン未経験 / 初心者の方
- グラフィックソフト未経験 / 初心者の方
- Figmaを使ってデザインをしてみたい方
- 無料で基礎を学習してみたい方
受講の前に用意するもの
- WindowsもしくはMacのパソコンをもっている方。
- パソコンの基本操作ができる方。
カリキュラム
1章 Figmaのはじめ方2レッスン
- 1Figmaとは～概要・無料で始める方法～Webデザイン、UIデザインツールとして世界的なシェアを誇るFigma（フィグマ）。 無料でも高性能なデザイン機能が使えます。 「これからWebデザインを学ぶのに使ってみたい」という方向けに、Figmaの無料プラン登録方法から解説...
- 2Figmaのファイルブラウザ画面、デザイン画面の構成を把握するFigmaの画面構成について紹介します。ホーム画面（ファイルブラウザ画面）の配置、ドラフトとチームの違いを把握しましょう。これから使っていくデザイン画面の基本構成と、バージョン履歴を使ったファイルの保存方法についても解説します。
2章 Figmaの基本操作と機能6レッスン
- 3ここからのレッスン・使用素材についてここから先のレッスンでは、Figmaを使ってデザイン制作を行いながら、効率的にFigmaの基本操作を学んでいただきます。完成目標と、解説で使用している画像素材をご確認下さい。
- 4使用頻度高！最初に把握したいFigmaの3ツールと基本操作Figmaのフレームツール、移動ツール、円や四角・線などを描画できるシェイプツール。デザイン制作によく使う3つのツールを使いながら、Figmaの基本操作も習得しましょう。アニメーション図解たっぷりで解説します。
- 5Figmaでの文字入れ方法とテキスト設定Figmaでの文字入れ方法について学びます。テキストツールの基本的な使い方、文字色・文字サイズの変更方法について学びましょう。CSS line-clampを指定したような、行数を指定した省略表示も設定可能です。
- 6Figmaでデザインに画像を挿入・トリミングする方法Figmaで画像を挿入する方法を学びます。figma上での画像の考え方（扱い方）や、画像のサイズ調整・切り抜きの方法を知り、目的にあった方法を選択できるようになりましょう。
- 7Figmaのコンポーネントとインスタンスを理解するFigmaでの作業効率をアップさせるコンポーネント機能とインスタンスについて学びます。「そもそもコンポーネントって何？」というWeb制作未経験の方も大丈夫。Figmaの操作だけではなく、どんなふうに使っていくのかも図解たっぷりで解説します。
- 8【特典】ショートカット道場（ゲーム付き）
3章 実践～FigmaでWebページを作る～0レッスン
4章 Figmaのプロトタイプ機能0レッスン
無料特典付【基礎編】WEB制作初心者のためのFigmaデザイン入門講座
Webデザイン未経験 / 初心者の方に向けた、全8レッスンの講座です。上から順に、1つずつ進めてください。
- Figmaの概要・登録方法がわかる
- Figmaの作業画面を理解できる
- Figmaの基本操作・主要ツールがわかる
- Figmaのコンポーネント・インスタンスが理解できる
入門講座終了時点でも、基本的なWebデザインは作成できるようになります。リファレンスや解説の説明も理解できるようになるので、更にステップアップするための地力もできますよ。