FigmaはWebサイトやアプリのデザイン制作で広く使われているデザインツールです。
しかし、初心者の方の中には「Figmaを使って実際にWebサイトデザインを作る場合、どのような流れで進めるのか分からない」という方も多いのではないでしょうか。
この記事で分かること
この記事では、
- Figmaを使ったWeb制作の流れ
- Figmaをどこで使うのか
- 各工程の役割
- 各工程の詳しい解説記事
を紹介します。
Figmaとは
Figmaは、Webサイトやアプリなどのデザインをブラウザ上で作成できるUI/UXデザインツールです。Webサイトやアプリケーションデザイン制作に特化しており、複数人で同じデザインを同時に編集できるため、デザイナーだけでなく、ディレクターやエンジニアなど、制作に関わるメンバー全員で作業を進められるのが大きな特徴です。
この記事では、Figmaの基本的な使い方ではなく、「企画書から公開まで、Webサイトをどのような流れで制作するのか」を中心に解説します。
FigmaをWeb制作で使う主な場面
・企画.情報整理
・ワイヤーフレーム
・デザインカンプ
・プロトタイプ
・デザイン共有
・ 開発者との連携
Figmaを使用したWeb制作の流れ
Figmaは企画・情報整理・ワイヤーフレーム・デザイン・プロトタイプ・開発への引き渡しなど、Web制作の設計・デザイン工程を中心に活用します。その後、HTML/CSSなどを使ってコーディングを行い、Webサイトとして実装します。
※「基本的な流れとして紹介しますが、実際の制作では工程を行き来することがあります」
STEP 1｜企画・設計｜Webサイトを作る前に考えること
Webサイト制作では、いきなりデザインを始めるのではなく、サイトの目的やターゲット、必要なページ、ユーザーの行動などを整理する「企画・設計」の工程から始まります。
Web制作の企画・設計では、Figmaのオンラインホワイトボードツール「FigJam」を活用して、アイデアや情報を整理する方法もあります。
（※FigJamは、付箋や図形などを使ってアイデアを出したり、情報を整理したりするオンラインホワイトボードです。）。
：FigJamを使うメリット
- リアルタイムで共同編集できる
- テンプレートを使って効率よく整理できる
- 付箋や図形などで情報を視覚化できる
FigJamには、ブレインストーミング、フローチャート、カスタマージャーニー、プロジェクト計画など、さまざまなテンプレートが用意されています。
：FigJamで整理できること
- ブレインストーミング
- サイト構成の整理
- ユーザーフロー
- カスタマージャーニー
- プロジェクト計画
なお、すべての案件でFigJamを使うわけではありません。小規模なサイトでは、Figma Design上で直接構成を考えたり、Googleドキュメントなど別のツールを使ったりする場合もあります。
⚠️企画段階では「目的に合ったツール」を選ぶ
FigmaやFigJamは複数人で共同編集できますが、実際の制作ではデザイナーだけでなく、ディレクターやクライアントなど、デザインツールを普段使わない人が参加することもあります。
そのため、参加者や目的によっては、FigJamやFigma以外のツールを使った方がスムーズな場合もあります。
「Webサイト制作だからFigmaを使う」のではなく、「何を整理・共有したいのか」に合わせてツールを選ぶことが大切です。
👉 （※記事準備中）
あわせて読みたい：[【初心者向け】Figmaのホワイトボード機能「FigJam」の基本的な使い方と活用メリット]
STEP 2｜ワイヤーフレーム作成
Webサイト制作では、いきなりデザインを始めるのではなく、まずサイト全体の構成や各ページの情報配置を整理します。
この工程では、主にサイト設計とワイヤーフレームを作成します。
サイト設計では、Webサイトに必要なページやページ同士のつながりなど、サイト全体の構造を整理します。
一方、ワイヤーフレームでは、各ページにどのような情報を配置するのか、どのような順番で見せるのかといったページの構成を整理します。
この工程で決めること
- 必要なページ
- ページの構成
- 情報の優先順位
- ナビゲーション
- ボタンやCTAの配置
- ページ間の導線
この段階では、色や装飾などの細かなデザインよりも、**「何を・どこに・どの順番で配置するか」**を考えることが重要です。
Figmaでワイヤーフレームを作る
Figmaでは、図形やテキストなどの機能を使って、Webページの構成を視覚的に整理できます。
また、ファイルを共有することで、制作メンバーやクライアントとページ構成を確認したり、コメントを使って修正点を共有したりできます。
そのため、サイト設計やワイヤーフレームの作成・確認にもFigmaを活用できます。
ワイヤーフレーム作成の基本的な流れ
サイト全体の構成を整理
↓
必要なページを決める
↓
ページごとの情報を整理
↓
ワイヤーフレームを作成
↓
確認・修正
↓
デザインカンプへ
ワイヤーフレームでページの構成を固めておくことで、その後のデザイン工程で「どこに何を配置するか」を考え直す作業を減らせます。
Figmaでサイト設計・ワイヤーフレームを作成するメリット
- サイトマップやワイヤーフレームを1つのファイルで管理できる
- リアルタイムで共同編集できる
- コメント機能でフィードバックを共有できる
- ページの構成を視覚的に確認できる
Figmaには、ワイヤーフレーム作成に必要な図形やテキストなどの機能が用意されているため、ページの構成を整理しながら制作を進められます。
👉 （※記事準備中）
あわせて読みたい：[【初心者向け】FigmaでWebサイトのワイヤーフレームを作る方法｜初心者向けに基本から解説］
次のSTEP
ワイヤーフレームでページの構成を固めたら、次は色・文字・画像などを使って、実際の見た目をデザインしていきます
STEP 3｜デザインカンプ
デザインカンプは、ワイヤーフレームやモックアップとは異なり、完成形に近いビジュアルを提供する点が特徴です。
ワイヤーフレームが「何を・どこに配置するか」を決める工程なのに対して、デザインカンプでは「どのような見た目にするか」を決めていきます。
デザインカンプでは、見た目の美しさだけでなく、実際にHTML・CSSなどで実装できるかを意識することも重要です。
複雑すぎるレイアウトや、画面サイズによって成立しないデザインを作ってしまうと、コーディングの段階で大幅な修正が必要になる場合があります。
そのため、PCだけでなくスマートフォンでの表示や、文字量が変わった場合のレイアウトなども意識してデザインします。
この工程で決める・作ること
- 配色 フォント
- 画像
- 見出しや本文のデザイン
- ボタン
- カード
- 余白
- レイアウト
- PC・スマートフォンのデザイン
見た目を整えるだけでなく、実際のWebサイトとして実装できるかも意識してデザインします。
Figmaを使うメリット
- デザインを一つのファイルで管理できる
- コンポーネントを使ってパーツを再利用できる
- Auto Layoutを使ってレイアウトを調整できる
- チームメンバーやクライアントとデザインを共有しやすい
- コメント機能で修正内容を共有できる
- Dev Modeなどを使って開発時に必要な情報を確認・共有できる（有料版のみ）
などが挙げられます、完成イメージを事前に共有することで、デザインについての認識のズレや、実装後の大きな修正を減らしやすくなります。
注意点・知っておきたいこと
デザインカンプでは、見た目の美しさだけを優先するのではなく、実際のWebサイトとして実装できるか、ユーザーが使いやすいかを考えることが重要です。
特に、
- PCだけでなくスマートフォンの表示を考える
- 実際の文字量を想定する
- 実装が難しいレイアウトになっていないか確認する
- ボタンやリンクなどの操作を想定する
といった点を意識します。
また、デザインカンプは基本的に静的な画面なので、ボタンを押したときの動きやページ遷移など、実際の操作感を確認するにはプロトタイプを併用します。
👉 （※記事準備中）
あわせて読みたい：[【初心者向け】FigmaでWebサイトのデザインカンプを作る方法｜初心者向けに基本から解説］
次のSTEP
デザインカンプでWebサイトの見た目を固めたら、次はボタンをクリックしたときの動きやページ間の遷移など、実際の操作を確認します。
STEP 4｜プロトタイプ
Figmaのプロトタイプとは、デザインカンプに画面遷移やクリックなどのインタラクションを設定し、実際のWebサイトやアプリのような操作を再現する機能です。コードを書かなくても、ボタンをクリックしたときの画面遷移などを確認できます。
デザインカンプが完成した段階でプロトタイプを作成することで、実際のユーザー操作を想定しながら、画面遷移やユーザー導線に問題がないかを確認できます。
これをすることにより、ユーザーの操作や行動と同じ操作ができるので、サイトを作成する前に、機能やUIに問題がないかテストをすることができます。
作成したプロトタイプはURLで共有できるため、クライアントやチームメンバーに実際の操作イメージを確認してもらうことができます。共有方法や閲覧できる範囲は、Figmaの共有設定によって異なります。
この工程で決める・作ること
- 画面遷移：どのページからどのページへ移動するか
- 操作時の動作：ボタンやメニューを操作したときに何が起こるか
- インタラクション：クリックやホバーなどに対する画面の変化
- ユーザー導線：ユーザーがサイト内をどのように移動するか
※高度な機能には有料プランあり
Figmaを使うメリット
- 実際の操作イメージを確認できる
- 画面遷移やユーザー導線を検証できる
- デザインの問題点を早い段階で発見できる
- クライアントやチームに操作イメージを共有できる
特に、Figmaでは作成したデザインやプロトタイプをURLで共有できるため、ファイルを書き出して送付する手間を減らし、チームやクライアントと操作イメージを共有しやすい点もメリットです。
④ 注意点・知っておきたいこと
プロトタイプを設定した後に、画面構成やレイヤーを大きく変更すると、設定したインタラクションが意図せず変更・削除される場合があります。
特に、プロトタイプの設定後に要素の移動・削除・コピーなどを行う場合は、画面遷移やインタラクションが正しく設定されているか確認しましょう。
（例）
※なお、プロトタイプはWebサイトそのものではありません。あくまでデザイン上の操作や画面遷移を確認するためのものです。プロトタイプの確認が終わったら、HTML/CSS/JavaScriptなどを使って実際のWebサイトとして実装します。
⑤ あわせて読みたい
👉 （※記事準備中）
あわせて読みたい：[【初心者向け】Figmaでデザインカンプからプロトタイプを作る方法｜初心者向けに基本から解説］
STEP 5｜Figmaのデザインを確認してコーディングにつなげる
デザインカンプやプロトタイプが完成したら、次はFigmaのデザインを確認しながら、Webサイトの実装に必要な情報を整理します。
Webサイトをコーディングするときは、デザインを見た目だけで再現するのではなく、フォントサイズやカラー、要素のサイズ、余白などを確認しながら実装する必要があります。
Figmaでは、完成したデザインを開発者と共有し、開発者がFigma上でデザインの詳細を確認しながらコーディングを進めることができます。
例えば、テキストやボタンなどの要素を選択して、サイズやカラーなどの情報を確認したり、使用する画像やアイコンなどの素材を用意したりします。
つまり、この工程では新しくデザインを作るのではなく、
「完成したデザインを確認し、Webサイトを実装するために必要な情報を把握する」
ことがポイントです。
Figmaで確認する主な情報
- フォント：種類・サイズ・ウェイトなど
- カラー：文字色・背景色・ボタンの色など
- サイズ：画像やボタンなど各要素の幅・高さ
- 余白：要素同士の間隔や配置
- 素材：画像・アイコンなど、実装に使用する素材
このような情報をFigma上で確認し、デザインをもとにHTML/CSSなどを使ってWebサイトを実装していきます。
Dev Modeについて
Figmaには、開発者向けの機能としてDev Modeがあります。
Dev Modeを使うと、デザインのプロパティやコードなど、開発に必要な情報を確認しやすくなります。
ただし、Dev Modeは無料のStarterプランでは利用できず、現在は有料プランのFullまたはDev seatが必要です。
無料プランを利用している場合でも、Figmaのデザインを確認しながらコーディングを進めることはできます。
Dev Modeの詳しい使い方や、Figmaのデザインをコーディングに活かす方法については、別の記事で詳しく解説します。
この工程で確認すること
- フォント：種類・サイズ・ウェイト
- カラー：文字色・背景色など
- サイズ・余白：各要素の大きさや間隔
- 素材：実装に使用する画像やアイコン
- レイアウト：ページ全体の配置や構造
Figmaを使うメリット
- デザインを見ながら実装に必要な情報を確認できる
- デザイナーと開発者で完成イメージを共有しやすい
- デザインと実装のズレを減らしやすい
- 必要な素材を確認・準備しやすい
注意点・知っておきたいこと
Figmaのデザインは、あくまでWebサイトの完成イメージを表したものです。
Figmaで確認した数値をそのままコーディングするだけでは、すべての環境で同じ見た目になるとは限りません。
実際のWebサイトでは、画面幅に応じてレイアウトを変えるレスポンシブ対応や、HTML・CSSによる構造の設計なども必要になります。
そのため、Figmaはコーディングそのものを行うツールではなく、デザインを確認し、実装につなげるためのツールとして活用します。
あわせて読みたい
👉 【初心者向け】Figma Dev Modeの使い方｜デザインをコーディングに活かす方法
※記事準備中
STEP 6｜コーディング
ここからは、Figmaで作成したデザインをもとに、実際のWebサイトを実装する工程です。
コーディングはFigmaの機能ではなく、HTML・CSS・JavaScriptなどを使って行います。
Figmaで作成したデザインを確認しながら、HTMLでページの構造を作り、CSSで色・サイズ・余白・レイアウトなどを実装していきます。
STEP 7｜Webサイトを公開
コーディングが完了したら、サーバーへファイルをアップロードしてWebサイトを公開します。
まとめ
今回は、Figmaを活用したWebサイト制作の基本的な流れを紹介しました。
Web制作では、まず企画・設計を行い、ワイヤーフレーム、デザインカンプ、プロトタイプへと進めていきます。
その後、Figma上でデザインの詳細を確認しながら、HTML・CSS・JavaScriptなどを使ってWebサイトを実装し、完成したサイトをサーバーへアップロードして公開します。
このように、FigmaはWebサイトそのものを完成させるためのツールというよりも、企画・設計・デザイン・プロトタイプなど、Webサイトを作るための前半工程を支えるツールとして活用します。
また、現在はFigma Sitesのように、デザインからWebサイトの公開までを行える機能も登場しています。
Web制作の目的やスキル、制作方法に合わせて、Figma Designを使った従来の制作方法と、Figma Sitesなどの新しい方法を使い分けることが大切です。
