Webサイト・アプリの画面設計
Webサイトやアプリの
画面をデザインできます。
Figmaとは？Webサイトの画面設計と
プロトタイプを学ぶ
デザインツール
Figmaでできることや Web制作での使われ方、
初心者が最初に理解したい基本を分かりやすく紹介します。
Figmaとは？
Figmaは、Webサイトやアプリの画面を設計し、プロトタイプを作成・共有できるデザインツールです。
ブラウザ上で共同編集しやすく、企画から確認、開発への受け渡しまで一つの流れで進められます。
アイデア・構成
目的やターゲットを整理し、
サイトの構成を考えます。画面デザイン
ワイヤーフレームやデザインを
作成し、見た目を整えます。試作・共有
プロトタイプで動きを確認し、
チームで共有します。
Figmaでできること
ワイヤーフレームの作成
構成を整理した
ワイヤーフレームを作成できます。
コンポーネントとスタイルの管理
よく使うパーツや色・文字スタイルを
管理し、効率的に制作できます。
画面遷移のプロトタイプ
実際の動きを確認できる
プロトタイプを作成できます。
コメントを使った共同確認
チームでコメントをやり取りし、
フィードバックをまとめられます。
開発者へのデザイン共有
開発に必要な情報を共有し、
スムーズに受け渡せます。
Web制作の中でFigmaを使う場面
Figmaは、企画からデザイン、確認、開発への受け渡しまで、Web制作のさまざまな場面で活用されます。
チームでの情報共有がしやすく、スムーズに制作を進めることができます。
- 01
要件・構成を整理
目的やターゲットをもとに
要件を整理します。 - 02
ワイヤーフレーム
ページ構成を設計し、
ワイヤーフレームを作成します。 - 03
デザイン
ビジュアルを作成し、
画面をデザインします。 - 04
プロトタイプ
実際の動きを確認できる
プロトタイプを作ります。 - 05
共有・受け渡し
チームで共有し、
開発へ受け渡します。
初心者が最初に覚えたい基本
- 01
フレームとページの考え方
デザインの土台となるフレームやページの使い方を理解します。
- 02
文字・画像・図形の配置
テキストや画像、図形を配置する基本を学びます。
- 03
余白・整列・レイアウト
見やすく整理されたレイアウトの基礎を身につけます。
- 04
コンポーネントとスタイル
再利用できるパーツやスタイルの使い方を学びます。
- 05
プロトタイプと共有
動きをつけたプロトタイプの作成と共有方法を理解します。
BLUE FLAMEで学べる内容
仮原稿・正式提供は確認後に差し替え
Figmaの基本操作
画面の見方や基本的な
操作方法を学びます。
ワイヤーフレームの作成
Webサイトの構成を考え、
ワイヤーフレームを作成します。
Webサイトデザインの作成
実際のデザインを作成し、
見た目を整えます。
共有・フィードバック・修正の進め方
コメントを活用し、
修正の進め方を学びます。
※仮原稿です。正式な提供内容は確認後に差し替えます。
Figmaを仕事に活かすために必要なこと
Figmaの操作方法だけでなく、デザインの基礎知識やユーザー視点、相手に伝える力も大切です。
ツールを使いこなすだけでなく、よりよいものをつくるために必要な考え方を身につけましょう。
レイアウトの基礎
見やすく使いやすい
レイアウトの考え方を学びます。文字と配色
読みやすさや印象を考えた
文字と配色を理解します。使いやすい環境
ユーザーの視点で
使いやすい画面を考えます。相手へ伝える力
意図を言語化し、
チームに伝える力を身につけます。
よくある質問
Figmaは初心者でも使えますか？
基本の画面や操作から順番に学べば、はじめての方でも取り組めます。
FigmaはWebサイトを公開するツールですか？
Figmaは画面を設計・デザインするツールです。公開にはWordPressやSTUDIOなどを使います。
PhotoshopやIllustratorとの違いは何ですか？
Figmaは画面設計やプロトタイプ、Photoshopは写真の編集、Illustratorはロゴやイラストの制作が得意です。
FigmaだけでWebデザインの仕事ができますか？
Figmaに加えて、デザインの基礎や伝える力を身につけることで、仕事につなげやすくなります。
