WEB制作初心者のためのFigmaデザイン入門講座

レッスン内容

• Figmaとは～概要・無料で始める方法～

  Webデザイン、UIデザインツールとして世界的なシェアを誇るFigma（フィグマ）。 無料でも高性能なデザイン機能が使えます。 「これからWebデザインを学ぶのに使ってみたい」という方向けに、Figmaの無料プラン登録方法から解説します。
• Figmaのファイルブラウザ画面、デザイン画面の構成を把握する

  Figmaの画面構成について紹介します。ホーム画面（ファイルブラウザ画面）の配置、ドラフトとチームの違いを把握しましょう。これから使っていくデザイン画面の基本構成と、バージョン履歴を使ったファイルの保存方法についても解説します。
• ここからのレッスン・使用素材について

  ここから先のレッスンでは、Figmaを使ってデザイン制作を行いながら、効率的にFigmaの基本操作を学んでいただきます。完成目標と、解説で使用している画像素材をご確認下さい。
• 使用頻度高！最初に把握したいFigmaの3ツールと基本操作

  Figmaのフレームツール、移動ツール、円や四角・線などを描画できるシェイプツール。デザイン制作によく使う3つのツールを使いながら、Figmaの基本操作も習得しましょう。アニメーション図解たっぷりで解説します。
• Figmaでの文字入れ方法とテキスト設定

  Figmaでの文字入れ方法について学びます。テキストツールの基本的な使い方、文字色・文字サイズの変更方法について学びましょう。CSS line-clampを指定したような、行数を指定した省略表示も設定可能です。
• Figmaでデザインに画像を挿入・トリミングする方法

  Figmaで画像を挿入する方法を学びます。figma上での画像の考え方（扱い方）や、画像のサイズ調整・切り抜きの方法を知り、目的にあった方法を選択できるようになりましょう。
• Figmaのコンポーネントとインスタンスを理解する

  Figmaでの作業効率をアップさせるコンポーネント機能とインスタンスについて学びます。「そもそもコンポーネントって何？」というWeb制作未経験の方も大丈夫。Figmaの操作だけではなく、どんなふうに使っていくのかも図解たっぷりで解説します。
• Figmaのコンポーネント“バリアント”機能を知る

  Figmaのコンポーネントには、色・大きさなど任意の種類でバリエーションを登録できる“バリアント”という機能があります。コンポーネントを探しやすくなり、バリエーション変更も簡単にできるようになる、バリアント機能の使い方について学びましょう。
• Figma“オートレイアウト機能”の使い方・活用方法を知る

  Figmaのフレームには、コンテンツに合わせて大きさを自動的に調節したり、内包コンテンツを規則的に並べることが出来るオートレイアウト機能が用意されています。サイズ調整などの手間が省け、作業効率がアップする、オートレイアウト機能を使ってみましょう。
• “オートレイアウト”の組み合わせで柔軟なデザインを作る

  オートレイアウトを使って、フレキシブルな カード型レイアウトを作成します。 オートレイアウトを組み合わせ、縦並びと横並びを組み合わせる方法を学び、オートレイアウトを使って思った通りのデザインを作成できるようになりましょう。
• FigmaでWebページデザインを制作する（前半）

  Figmaを使ってWebページのデザイン制作します。コンポーネントの作成やフレーム、オートレイアウトの設定など、ここまでのレッスンの復習にもなります。図解・アニメーション図解たっぷりの解説を見ながら、一緒に手を動かしてみて下さい。
• Figmaのスタイル機能・バリアブル機能を活用する

  Figmaのスタイル機能とバリアブル機能について紹介していきます。実際にあるデザインを使いながら確認していくので、使い方から「何が便利なのか」まで体感できますよ。
• FigmaでWebページデザインを制作する（後半）

  ここまでのレッスンの総復習！今まで学んできたFigmaの機能を活用して、Webページのデザインを完成させましょう。
• エクスポート機能で画像の書き出しをしてみよう

  figmaでのエクスポート方法について解説します。 デザインをそのまま画像として書き出す方法、コーディングに使う画像素材を個別に書き出す方法、それぞれ見ていきましょう。
• Figmaプロトタイプ機能の基本・必要性を知る

  Figmaではプロトタイプ機能を使って、実際のWebサイト/アプリケーションに近い動きをつけることも出来ます。 プロトタイプを作成するメリットと、最も基本的な設定となるページ遷移（リンク）の設定方法を解説します。
• Figmaのインタラクション設定についてもっと知る

  Figmaでプロトタイプの作成時に使用する 『インタラクションの詳細』について見ていきましょう。Webデザインでよく使うホバーアニメーションやモーダル表示、ナビゲーションなどのアイテムを固定表示にする方法も解説します。
もっと見る