Figma基礎講座を公開しました｜Webデザイン初心者でも安心して学べる入門コースから

2025年12月4日2025年12月14日

WebTraining.jp の新しいトレーニングに、Figma基礎講座 を公開しました。
Figma は、WebデザインやUIデザインの現場で必須となっているデザインツールです。デザイン的なツールのトレーニングは初めてですが、デザインというより、サイトやプログラムを設計するためのツールとしても使います。
これからWeb制作を学ぶ方、設計の基礎を身につけたい方に向けて、インストール方法から基本操作、アイコン作成までを丁寧にまとめた入門講座となっています。

Figmaを初めて使う方でも迷わないよう、図解・ショート動画・練習ファイルを組み合わせて構成しています。

Contents

Figmaとは？なぜ今Figmaを学ぶべきなのか

Figma（フィグマ）は、ブラウザで動作するUIデザインツールです。
Webサイトやスマホアプリのデザイン制作を中心に、世界中で使われています。

● Figmaが選ばれる理由

ブラウザだけで使える（インストール不要）
リアルタイム共同編集が可能
操作がシンプルで初心者でも使いやすい
デザインからプロトタイプ作成まで一つで完結
Webデザインの現場で最も使われているツール

デザインのプロだけでなく、ノンデザイナー・学生・エンジニアにも採用が急増しており、「Web制作を学ぶならまずFigmaから」という流れが主流になっています。

Figmaを始めるための準備

（ログイン・ダウンロード・インストール）

Figma基礎講座では、最初に Figmaを使える状態にするまでを丁寧に解説しています。

1. Figmaのアカウントを作成する

メールアドレスまたはGoogleアカウントで簡単に登録できます。

2. Figmaにログイン

ブラウザからログインできるため、PCに依存せず利用できます。
初めての方は「Figma Dashboard」の見方も説明しています。

3. Figmaデスクトップ版のインストール（任意）

Mac / Windows向けにアプリ版も用意されています。
動作が軽く、PCにインストールされているフォントが使えるのがメリットです。

これらの準備手順は 画像付きで分かりやすく解説しています

Figma基礎｜インストール・ログイン方法はこちら

Figmaへのログイン・インストール方法

WebTraining.jp｜Figma基礎講座のカリキュラム

今回の講座は、Webデザインをこれから学ぶ方向けに、デザインの基礎スキルを Figma で体系的に習得できるように設計しています。

01｜Figmaの画面構成

Figmaのワークスペース、ツールバー、レイヤーパネルなど、まず「どこに何があるか」を理解します。
効率よく作業するためのショートカットも紹介。

08｜オートレイアウト（Auto Layout）

ボタンやカードUIを例にしながら、Figmaで最も重要な機能のひとつ「オートレイアウト」を習得します。

方向（水平/垂直）
間隔
内側の余白（Padding）
整列
テキスト変更時の伸縮
コンポーネント化

実務で使う UI パーツの作り方が理解できます

09｜アイコン作成とエクスポート

ベクターを使ってアイコンを作成し、PNG / SVG / PDF といった形式で書き出します。
実際にデザインデータとして利用できるようになります。

初めてでも安心して学べる構成

WebTraining.jp の Figma基礎講座は、初心者の方でもステップを追って確実に身につくよう、次の3つを意識して構成しています。

できるだけ短いステップ

１つのレッスンをコンパクトにまとめ、理解 → 手を動かす → 完成する の流れを自然に繰り返せるように設計。短時間でも着実に力がつきます。

操作ごとの短尺動画付き

20〜30 秒の操作動画を各レッスンに添え、何度でも見返せるようにしています。
画面を見ながら再現できるため、初心者でも迷わず進められます。

実務につながる講座構成

バナー作成やアイコン制作、オートレイアウトなど、Web制作の現場で求められる操作だけを厳選しています。

Figma基礎を学ぶと「コーディング」までつながる理由

Figmaでデザインを学ぶことは、HTML / CSS の理解にも直結します。

余白（padding / margin）の考え方
文字サイズ・行間・フォント設定
レイアウトの組み方（グリッド / 配置）
ボタンやカードUIの構造
画像の扱い方・書き出し
セクション分けの考え方

Figmaで“デザインの型”を理解しておくことで、そのままコーディングの設計に活かせるようになります。

結果として、

デザイン → コーディング → サイト完成

という一連の流れを自分一人で作れるようになります。

デザインからコーディングまで対応できると、仕事の幅が広がる

Figmaで作れるようになり、HTML/CSSで実装できるようになると、以下のような案件に対応できるようになります。

LP（ランディングページ）デザイン＋コーディング
小規模Webサイト制作
バナー制作＋設置
WordPressテーマのデザインカンプ作成
企業のWeb担当サポート
ベースデザインからのパーツ制作

「デザインだけ」「コーディングだけ」ではなくデザインからサイト公開まで一貫して対応できる人材は、
フリーランスでも企業でも非常に重宝されます。

まずは Figma基礎から、Web制作の第一歩を

Figmaを使いながらデザインの基礎を理解し、
そこからHTML/CSSへとつなげていくことで、“作れるデザイナー / 実装できるクリエイター” を目指していけます。

Web制作を始めたい方にとって、Figma基礎は最適なスタートラインです。

URLをコピーしました！