STEP 01
Figma基礎
Figmaへのログインや基本操作から始め、図形や文字の配置、フレーム、オートレイアウト、ワイヤーフレームの作り方を学びます。
Figma基礎から始める
FIGMA COURSE
見た目を整える前に、
伝わる画面を設計する。
Figmaの基本操作から始め、ワイヤーフレームやWebページ、アプリ画面を作りながら、コーディング前に画面を整理する方法を学ぶ講座です。
デザイン経験がない方でも大丈夫です。図形や文字を配置するところから、少しずつ進めます。
COURSE MAP
基礎から実践へ、2段階で進む
初めての方は基礎から。操作に慣れている方は実践から確認できます。
STEP 02
Figma実践
Figma基礎で覚えた操作を使い、WebページやLP、アプリ画面を作りながら、実際の制作に近い流れを身につけます。
Figma実践へ進むWHAT YOU WILL LEARN
この講座で学べること
操作を覚えるだけでなく、Web制作で使える設計の考え方を段階的に身につけます。
画面の土台を作る
フレーム、図形、文字、画像を使い、Webページやアプリ画面の基本的な形を作ります。
余白と並び方を整える
オートレイアウトを使い、要素の間隔や整列を自動で保つ方法を学びます。
制作前の設計図を作る
ワイヤーフレームを作り、どこに見出し、文章、画像、ボタンを置くか整理します。
画面の流れを見える形にする
入力画面、確認画面、完了画面などを並べ、利用者が操作する順番を分かりやすくします。
LEARNING FLOW
学習の流れ
設計から実装までのつながりを意識しながら進みます。
-
01
基本操作を覚える
Figmaの画面構成や、図形、文字、画像、レイヤーの扱い方を確認します。
-
02
画面を組み立てる
フレームとオートレイアウトを使い、要素を揃えながら画面の形を作ります。
-
03
情報を整理する
ワイヤーフレームやLP構成を作り、伝えたい内容の順番と優先順位を考えます。
-
04
コーディングへつなげる
完成した画面を見ながら、HTML・CSS・JavaScript・PHPでどのように作るか考えます。
BENEFITS
Figma講座を学ぶメリット
画面を作る前に整理できると、デザインと実装のどちらも進めやすくなります。
作り始める前に迷いを減らせる
コードを書く前に画面の構成を整理するため、作業途中で内容や配置に迷いにくくなります。
HTML・CSSの構造を考えやすくなる
見出し、文章、画像、ボタンのまとまりが見えるため、HTMLの入れ子やCSSの配置を考えやすくなります。
完成イメージを共有できる
制作前に画面の見本を作ることで、依頼者やチームの人と完成イメージを共有しやすくなります。
RECOMMENDED FOR
こんな方におすすめ
- Figmaを初めて使う方
- デザイン経験がなく、何から始めればよいか分からない方
- HTML・CSSを書く前に画面構成を整理したい方
- ワイヤーフレームやLPの設計図を自分で作りたい方
- Webサイトやアプリの画面を分かりやすく設計したい方
- 制作前に完成イメージを相手と共有できるようになりたい方
NEXT COURSES
設計を、実装につなげる
この講座で学んだ内容を、コードで動くWebページやアプリへ発展させます。
