Figmaを使ったWebデザインとは？依頼前に知っておきたい基本とメリット

昨今、Webデザインの現場では、「Figma（フィグマ）」というツールを使うケースが増えています。複数人がリアルタイムで共同編集できる特性から、制作会社やデザイナーだけではなく、クライアント企業にもメリットが多いためです。

しかし、Webデザインを発注する側からすると、制作会社がFigmaを使っていることが、何にどう影響するのかわかりづらいかもしれません。

そこで今回は、Web制作会社の視点から、Figmaを使ったWebデザインの基本や制作の流れ、依頼前に確認しておきたいポイントについて解説します。Webサイト制作の発注を検討している方は、ぜひ参考にしてみてください。

Figmaとは？

Figmaは、WebデザインやUIデザインに特化したクラウド型のデザインツールです。

かつてWebデザインといえば、Adobe社の「Adobe XD」というツールが主流でした。しかし2023年、Adobe XDの単体プラン販売が終了し、メンテナンスモードへと移行しました。利用を継続するには、Photoshop・Illustratorといった、その他のAdobe製品を含む一括契約プランを契約する必要があり、Webデザイナーにとってはコスト負担が増す結果となっています。

このような状況の中、Webデザイン業界で注目を集めたのがFigmaです。ブラウザ上でどこからでも作業でき、複数人によるリアルタイム共同編集にも対応しています。さらに、デザイン作成からプロトタイピング、開発者へのデザイン情報の受け渡しまでを一貫して行えるため、Adobe XDに代わるツールとして採用するWebデザイナーが年々増加しました。

また、デザイナーとエンジニア（コーダー）の連携を効率化する「開発モード（Dev Mode）」や、デザインからWebサイトの公開までをFigma上で完結できる「Figma Sites」といった機能も登場しています。Figmaは単なるデザインツールの枠を超え、Web制作全体を支えるプラットフォームへと進化を続けている状況です。こうした背景から、FigmaはWebデザイン業界の標準ツールになりつつあるのです。

Figmaでできること

Figmaでできることは多岐にわたりますが、Webデザインの発注側に役立つ機能としては、次の4つが挙げられます。

• Webページのデザイン制作
• 動作イメージの確認（プロトタイピング）
• リアルタイムでの共同編集
• デザインパーツの一括管理（コンポーネント）

どのような機能なのか、それぞれ詳しく見ていきましょう。

Webページのデザイン制作

Figmaでは、Webページのワイヤーフレームからデザインカンプまで、ワンストップで作成できます。

なお、ワイヤーフレームとは、色や画像を入れる前に、「どこにどのような要素をレイアウトするか」を決める、設計図のことです。Figmaでは、いくつか無料テンプレートも公開されています。

画像出典：Figma

また、デザインカンプとは、ワイヤーフレームで固めた構成に、色・フォント・画像を入れ、公開画面に近い状態として仕上げた「完成サンプル」のことです。

従来のデザイン制作では、修正が発生するたびにデザインファイルを書き出してメールで送付し、返信を待ってから修正するという手順を繰り返す必要がありました。一方、FigmaではURLを共有するだけで、関係者全員が最新のデザインをリアルタイムで確認・フィードバックできるため、コミュニケーションの効率化につながります。

なお、2025年には、テキストの指示からプロトタイプやWebアプリを生成できるAI機能「Figma Make」が発表されるなど、制作プロセスのさらなる効率化が進んでいます。

動作イメージの確認（プロトタイピング）

Figmaはデザイン制作だけでなく、実際に操作できる状態のプロトタイプ（モックアップ）の作成にも対応しています。

先述したデザインカンプは、あくまでWebサイトの見た目を再現したものであり、実際のWebページとして画面がどのように動くかまでは確認できません。一方、プロトタイプでは「ページ間の遷移」や「ボタンクリック時の動作」を再現できるため、コーディングの前段階で、ユーザーが実際に操作した際の感覚をつかむことが可能です。

Figmaのプロトタイプ機能を使えば、たとえば「お問い合わせボタンをクリックしたら入力フォームに遷移する」といった画面の動きを、コーディング不要でデザインカンプから再現できます。発注側にとっても、静止画だけでは伝わりにくい完成後の操作感を事前に体験できるため、制作会社との認識のズレを防ぎやすくなる点が大きなメリットです。

リアルタイムでの共同編集

画像出典：Figma

複数人が同じファイルをリアルタイムで開き、同時に編集・確認できる点も、Figmaが重宝される理由の一つです。

デザイナー・ディレクター・エンジニア・クライアントが同じ画面を見ながら作業を進められるため、「最新版はどれか」「修正が反映されているか」といった確認の手間がなくなります。また、デザインの該当箇所に、直接フィードバックを書き込む機能もあるため、修正指示のやりとりがスムーズになることも特徴です。

なお、デザインが確定したあとは、先述したDev Mode（開発モード）を活用することで、デザインの仕様やサイズ・カラーコードといった情報を、エンジニア（コーダー）へ正確に引き継ぐことが可能です。

デザインパーツの一括管理（コンポーネント）

デザインパーツの一括管理機能が充実しており、デザインシステムを構築・運用しやすい点も、Figmaの特徴です。

Webデザインの実務では、ボタンやアイコンといったUI要素を、複数の場所で使い回すことも少なくありません。一貫性のあるデザインに仕上げるには、同じパーツを何度も作り直すのではなく、一度作成したパーツを再利用できる仕組みが必要です。

こうしたデザインパーツの一括管理を実現するのが、Figmaの「コンポーネント」機能です。ボタンや見出しなどのパーツをコンポーネントとして登録しておけば、各ページへ簡単に配置できます。

さらに、コンポーネントの元データに変更を加えると、デザイン上のすべての使用箇所へ自動で反映されるため、ページ数が多いサイトであってもデザインの修正・管理にかかる工数を大幅に削減できる仕組みです。

Figmaを使ったWebデザイン制作の流れ

それでは、Figmaを使ったWebデザイン制作の流れについて見ていきましょう。

1. 要件整理・サイト設計 
2. ワイヤーフレーム作成
3. デザインカンプ作成
4. プロトタイプで動作確認
5. フィードバック
6. コーディング・公開

それぞれの工程を順に解説します。

1.要件整理・サイト設計 

いきなりFigmaを操作するのではなく、まずはWebサイトの目的や要件を整理します。効果的なデザインにするためには、「誰に・何を伝えるためのWebサイトなのか」を明確にし、必要なページ構成を洗い出すことが欠かせません。
また、後工程の手戻りを防ぐためには、デザインに着手する前に、関係者間の認識を合わせておく必要もあります。

ターゲットの設定やページ構成の判断には、Webやマーケティングの知識が求められます。何となく作り始めると、期待通りの成果が得られないWebサイトになってしまうため、社内に専門家がいない場合は、実績のあるWeb制作会社への相談も検討しましょう。

2.ワイヤーフレーム作成

要件が固まったら、Figmaでワイヤーフレームを作成します。色や画像は使わず、どこに何を置くか、レイアウトだけを決める工程です。たとえばトップページのワイヤーフレームでは、以下のような点を決めていきます。

• ヘッダーの位置・ナビゲーション内容
• ファーストビュー（最初に目に入るエリア）のイメージ
• コンテンツの順番

ワイヤーフレームが完成したら、画面右上の「共有」ボタンからURLを発行し、関係者へ共有します。この段階でレイアウトの方向性を合意しておくことで、デザインカンプ作成後の大幅な修正を防げます。

先述したとおりFigmaの無料テンプレートを参考にする方法もあります。ただし、テンプレートはあくまで土台に過ぎず、「ユーザーが迷わない導線になっているか」「コンテンツの優先順位は適切か」といった判断にはWebデザインの知識・経験が不可欠です。思い通りにサイトの設計が進まないと感じた場合は、プロのWeb制作会社に相談することをおすすめします。

3.デザインカンプ作成

ワイヤーフレームの構成が固まったら、写真やテキストなどの素材を準備し、デザインカンプを仕上げていきます。この工程で、カラーやフォント、画像の配置といったWebサイトの見た目が具体的に決まります。

Figmaであれば、デザインカンプの制作途中であってもURLを共有し、関係者がリアルタイムで進捗を確認できます。完成後に大幅な方向転換が生じるリスクを抑えられる点は、Figmaならではのメリットといえるでしょう。修正が必要な場合も、該当箇所に直接コメントを書き込めるため、指示内容の伝達に齟齬が生じにくい点も特徴です。

フォントの選定・余白の取り方・配色のバランスといった判断には、デザインの専門知識が欠かせません。明確な意図を持って設計されたデザインと、そうでないデザインとでは、ユーザーへの訴求力に大きな差が生まれます。

4.プロトタイプで動作確認

デザインカンプが完成したら、コーディングに入る前にプロトタイプを作成し、画面遷移やボタンの動作を確認します。

プロトタイプモードの操作イメージは、下記のFigma公式YouTubeでも紹介されています。

プロトタイプモードの操作自体はシンプルですが、「ユーザーが迷わず目的のページへ到達できるか」「ボタンの配置や遷移の流れに違和感がないか」といった観点でサイトの導線を設計するには、UX（ユーザー体験）に関する知識が求められます。プロトタイプの段階で専門的なチェックを受けておくと、公開後の修正コストを抑えることにもつながります。

5.フィードバック

プロトタイプが完成したら、関係者にURLを共有して、フィードバックをもらいます。実際の画面遷移やボタンの動作を確認したうえで意見を集められるため、コーディング完了後に「想定していた動きと違う」といったズレが生じるリスクを大幅に抑えられます。

また、フィードバックを受けて修正が入った場合も、デザイナーがFigma上で変更を加えれば共有URLのデザインが即座に更新されます。修正のたびにファイルを書き出して再送付する手間がかからない点も、Figmaを使った制作フローの大きな利点です。

6.コーディング・公開

デザインが確定したら、コーディング工程へ進みます。エンジニア（コーダー）がFigmaのDev Modeでデザインデータを数値的に参照できるため、余白・フォントサイズ・カラーを正確に再現しやすくなります。

コーディングが完了したらサーバーへアップロードし、各ページの表示崩れやリンク切れがないかなどの動作確認を経て、Webサイトが公開されます。

Figmaを使ったWebデザインを依頼するメリット

Figmaにはさまざまな機能やテンプレートが用意されていますが、あくまで「デザインツール」であり、制作物の品質は利用者のスキルに左右されます。ここまで紹介してきたように、成果につながるWebサイトに仕上げるには、Figmaの操作スキルに加え、Webデザインやマーケティングの専門知識も欠かせません。さらに、Webサイトを公開するにはデザインをコーディングする工程も不可欠です。

こうした点を考慮すると、効果的なWebサイトを制作したい場合は、Figmaを使いこなしているWeb制作会社へ依頼するのが合理的な選択といえます。Figmaの特性を活かすことで、発注側にも次のようなメリットが生まれるためです。

• URLを共有するだけでデザインを確認できる
• 完成イメージとのズレが起きにくい
• 修正指示を効率的にやり取りできる

それぞれのメリットについて、詳しく見ていきましょう。

URLを共有するだけでデザインを確認できる

かつてPhotoshopやIllustratorが主流だった時代には、デザインデータを確認するだけでも専用のソフトウェアが必要でした。ファイル形式によっては発注者側で開けないケースもあり、確認作業そのものに手間がかかっていたのが実情です。

一方、Figmaはクラウド型のツールであるため、発注者側がソフトをインストールしたり、有料プランを契約したりする必要はありません。共有されたURLにブラウザからアクセスするだけで、最新のデザインをすぐにチェックできます。

パソコンだけでなくスマートフォンからも閲覧に対応しており、外出先や移動中でもデザインの確認が可能です。場所やデバイスを問わず手軽にアクセスできる点は、発注者にとっても利便性が高いといえます。

完成イメージとのズレが起きにくい

Figmaを使ったWebサイト制作では、ワイヤーフレーム・デザインカンプ・プロトタイプの各ステップで、発注者が随時デザインを確認できます。工程ごとに方向性のすり合わせが行われるため、先に進んでから「完成イメージと違った」という事態が起きにくい仕組みです。PC版・スマートフォン版それぞれのデザインを並べて表示できるので、レスポンシブデザインの仕上がりも具体的にイメージしやすくなります。

また、静止画のデザインカンプだけでなく、画面遷移やボタンの動きといった操作感をプロトタイプで体験できることも、Figmaならではの利点です。コーディングが完了してから修正が発生すると、追加のコストや時間がかかるケースは少なくありません。デザイン段階でこうしたズレを解消しておけるのは、発注者にとって大きな安心材料になります。

修正指示を効率的にやり取りできる

Webサイト制作では、デザインの修正に想像以上のコミュニケーションコストがかかることがあります。たとえば、デザイナーからデザインカンプを画像ファイルで受け取り、スクリーンショットを撮って修正箇所をメールで説明する、といった方法を取っているケースは珍しくありません。こうした従来型のやりとりでは、指示の意図が正確に伝わらず、修正が反映されるまで何往復もメールが必要になることがあります。

一方、Figmaでは修正してほしい箇所に直接コメントを書き込めるため、「どこの」「何を」「どのように」変更するのかを、正確かつ簡潔に伝えることが可能です。コメントへの返信やステータス管理もFigma上で完結し、対応漏れを防ぎやすい仕組みになっています。さらに、デザイナーが加えた修正はリアルタイムで共有URLに反映されるため、修正済みのファイルを再送付してもらう手間も発生しません。

Figmaを使ったWebデザインを依頼する前に確認すべきこと

Figmaを活用したWebサイト制作は、発注側にとっても多くのメリットが存在します。ただしWeb制作会社によって、Figmaへの対応可否や修正範囲、料金体系はさまざまです。

そのため外注先を選ぶ際は、次の6つのポイントを確認してみてください。

• Figmaを使ったデザインの対応可否
• 制作実績・ポートフォリオ
• デザインデータの共有方法と納品形式
• デザイン以外の対応範囲
• 修正対応の範囲と進め方
• 費用相場・料金プラン

それぞれ詳しく見ていきましょう。

Figmaを使ったデザインの対応可否

まず確認すべきは、そもそも依頼先の制作会社が、Figmaを使いこなせているかどうかです。

Figmaのシェアは年々拡大していますが、Adobe XDやPhotoshop、IllustratorといったAdobe製品で、デザインを行っているWeb制作会社も依然として少なくありません。また、Figmaを導入して間もなく、ツールの活用ノウハウが十分に蓄積されていない会社も存在します。

外注先を検討する際は、Figmaを使った制作実績が具体的にあるかどうかを事前に確認しておくことが大切です。

制作実績・ポートフォリオ

Web制作会社の実力を見極めるうえで、制作実績（ポートフォリオ）の確認は欠かせません。

Figmaを使ったデザイン経験があることは前提として、どの程度のクオリティでWebサイトを制作できるのか、過去の実績をホームページなどで確認しておくと安心です。

実績をチェックする際は、単に見栄えの良さだけでなく、自社と近い業種・規模の案件を手がけているか、Webマーケティングを意識したサイト構成になっているかといった観点も持っておくと、より適切な外注先を選びやすくなります。

JPCの制作実績はこちら

デザインデータの共有方法と納品形式

制作中の共有方法としては、FigmaのURLリンクを発行して関係者全員がブラウザ上で閲覧・コメントできる形が一般的です。ただし、閲覧専用のリンクなのか、編集権限付きのリンクなのかは制作会社の方針によって異なります。

納品形式についても、制作会社によって対応が分かれます。Figmaの編集可能なデータごと引き渡してもらえるケースもあれば、閲覧用リンクのみの共有にとどまるケースや、PNG・PDF・SVGといった画像ファイルとして書き出したデータでの納品となるケースもあります。

納品後に社内でデザインを修正・流用する可能性がある場合は、Figmaの編集データを受け取れるかどうかが重要な確認項目です。契約前に、共有方法と納品形式の両方について制作会社とすり合わせておくとよいでしょう。

関連記事：Webデザイン依頼の進め方ガイド｜費用相場・準備・失敗しないポイントを解説

デザイン以外の対応範囲

Webデザインを外注する際は、デザイン以外にどこまで対応してもらえるかも比較しておきたいポイントです。

そもそもWebサイトを公開するには、デザインだけでなくHTMLやCSSといった言語によるコーディングが不可欠です。「Webデザイン」の依頼範囲は、デザインのみなのか、コーディングや機能実装まで含むのかが案件によって異なるため、対応範囲を契約前に明確にしておく必要があります。

コーディングまで依頼する場合は、次の点もあわせて確認しておくと安心です。

• スマホ・タブレット対応のレスポンシブデザインは含まれるか
• CMSへの組み込みは対応しているか

現在のWebサイトはPCだけでなく、スマートフォンやタブレットからのアクセスも多いため、画面サイズに応じてレイアウトが最適化される「レスポンシブデザイン」への対応が欠かせません。しかし、スマートフォン・タブレット向けのデザインがオプション扱いとなっている制作会社もあるため、標準対応かどうかをあらかじめ確認しておく必要があります。

また、Webサイトを社内で簡単に更新できるようにするには、CMSの組み込みも重要な検討項目です。

Figmaで作成したデザインをCMS上に実装できるWeb制作会社もあれば、静的なHTMLサイトとしての納品のみに対応している会社もあります。自社の運用方針に合った対応範囲かどうか、契約前に確認しておくことが大切です。

修正対応の範囲と進め方

スムーズに修正対応してもらえるか判断するために、次のような点も確認しておきましょう。

• 修正の受付方法はFigmaのコメント機能か、それとも別の手段か
• 修正対応は何回まで無料か
• どのタイミングで修正を依頼すると追加費用が発生するか

Webサイトの制作過程では、デザインの修正が複数回発生することも珍しくありません。Figmaを使った制作であれば、ワイヤーフレームやデザインカンプの段階から都度確認できるため後戻りは起きにくいものの、修正回数や追加費用の条件は契約前に明確にしておくと安心です。

費用相場・料金プラン

ここまで紹介したチェックポイントに対応できる制作会社であることを前提に、料金プランも確認しておきましょう。

Webサイトの制作費用は、ページ数や機能の複雑さ・デザインのクオリティ・対応範囲によって異なりますが、おおよその目安は次のとおりです。

サイト規模・機能	費用相場	概要
大規模・多機能	150万円～500万円以上	20ページ以上。 投稿機能が複数あり。 会員機能、検索機能、多言語機能、決済機能などを搭載
中規模・標準的な機能	50万円～200万円	10～20ページ前後。 投稿機能＋お問い合わせフォームなど標準的な機能のみ実装。
小規模・最低限の機能のみ	10万円～50万円	5ページ以内。 Googleフォームなどの簡易的な問い合わせ対応。投稿機能なしの場合も。

関連記事：ホームページ作成費用の相場を解説【料金早見表付き】2025年最新版

なお、Figmaを活用しているからといって、制作費用が高くなることはありません。むしろ、Figmaの共同編集機能・コメント機能によって制作プロセスが効率化され、工数を削減できるため、相場よりも低い水準で対応してもらえることもあります。

まとめ

クラウド型のデザインツール「Figma」は、ワイヤーフレームからデザインカンプ・プロトタイプまで一貫して制作でき、共同編集やコメントによるフィードバック機能も充実しています。こうした特性から、Webデザインの現場で急速に普及が進んでおり、発注側にとっても、デザイン確認や修正指示を効率的に行える点が大きなメリットです。

しかし、Figmaはあくまでデザインツールであり、成果につながるWebサイトに仕上げるには、Webデザインやマーケティングの知識、そしてコーディングのスキルが欠かせません。外注先を選ぶ際は、Figmaの活用実績に加え、対応範囲・修正体制・料金プランなどを事前に確認し、自社の目的に合った制作会社を見極めることが大切です。

JPCでは、Webデザインからコーディング・公開までをワンストップで承っています。制作の進め方やツールについても柔軟に対応しておりますので、Webサイト制作をご検討の方はお気軽にご相談ください。