投稿日：2024年5月30日 | 更新日：2024年05月30日

Figmaは近年注目されているWebデザインツールです。Webデザインやアプリケーション開発をする方は気になっているのではないでしょうか。

この記事では、Figmaの特徴や活用事例、他のデザインツールとの違いを解説します。最後まで読むと、Figmaを使って効率的にWebデザインやアプリデザインを作成できることがわかるでしょう。

Figmaの概要

Figmaはアメリカで誕生したWebデザインツールです。Webデザインにおいて役立つワイヤーフレームやデザインカンプ、プロトタイプが作成できます。工夫次第でバナー作成なども可能です。

FigmaはSlack、X（旧Twitter）、Zoom、Dropboxなどの有名な企業でも使われています。2022年にはFigmaの日本支社が設立され、その後Figmaの日本語版が発表されました。日本語でもFigmaが使えるようになったことで、日本市場での拡大が今後も見込まれるでしょう。

また、開発者向けの開発モードも存在します。適切なコードのコピーなどの開発者向けの機能が充実したことで、開発者にデザインを共有しやすくなりました。

このように、Figmaはデザインをチームで共有することに重きを置いているWebデザインツールといえるでしょう。

Figmaの特徴

世界の有名企業で使われるようになったFigmaですが、一体なぜ利用者が増えているのでしょうか。その理由とも言えるFigmaの特徴4点をご紹介します。Figmaの導入を検討している方はぜひ参考にしてください。

• ソフト不要でブラウザで手軽に作業できる
• 複数人で同時編集できる
• 無料プランで全ての機能が使える
• 職種問わず横断的に活用できる

ソフト不要でブラウザで手軽に作業できる

FigmaはWebブラウザ上で操作できるデザインツールです。デスクトップアプリもありますが、Webブラウザで動くため、インターネット環境があればどこでもアクセスできます。従来はPCにソフトをインストールして使うことが主流だったデザインツールですが、FigmaではWebブラウザがあればよいため、手軽に作業できるようになりました。

Webブラウザで利用できることで、ソフトをインストールするよりも、操作者の動作環境に柔軟に対応可能です。たとえばOSやスペックなどもFigmaが操作できる環境であれば、制限を受けません。

デザインツールの利用のハードルが下がり、より活用しやすいのもメリットでしょう。

複数人で同時編集できる

Figmaは複数人で同時に編集作業ができます。たとえばWeb制作では、チームで作業を行うことが多いため、同時並行でデザインに関する作業ができるとより効率が上がります。作業後に保存して次に受け渡すような手順が不要になり、同時に編集することで時間短縮に繋がることもあるでしょう。

同時に操作できることでワイヤーフレームのアイデア出しや、ブレストにも使うことができます。通常はデザインツールでデザインを起こす前に、別でブレストを行いますが、Figmaではブレストからデザインを固める段階まで、一貫してFigmaの中で完結可能です。たとえばオンラインでミーティングしながら、デザインのブレストからワイヤーフレームを固めていくような使い方もできるでしょう。

無料プランで充実した機能が使える

Figmaではいくつか料金プランが存在しますが、無料プランでもデザインを作成する基本的な機能が充実しています。たとえば無料プランでは以下の機能を利用可能です。

引用：Figmaの無料プラン、プロフェッショナルプラン、およびビジネスプランの価格設定。

デザインの基本的な機能はもちろんのこと、クラウドストレージが無制限であり、Figmaのファイルを閲覧しコメントを追加することもできます。気になる方はまずは無料プランを利用してみるのもよいでしょう。

職種問わず横断的に活用できる

Figmaはデザイナーに限らず、エンジニアなど職種を問わずに横断的に活用可能です。Webブラウザ上で利用できるため、たとえばデザイナーがデザインした後に内部レビュー者やクライアントにコメントをもらう、プロトタイプをエンジニアが起こす、という使い方もできます。

具体的には、デザインのレビューを行う場合はPDF化したデザインカンプを渡し、レビュー内容を別途ドキュメントにまとめる、PDFにコメントするなど、デザイナーはレビュー内容をデザインとは別に参照する必要がありました。それがWeb上で完結し、ファイル管理が不要で全員が同じものを参照できます。

様々な人が同じデザインにアクセスできることにより、効率的な開発の助けとなります。

Figmaの活用事例3選

実際のFigmaの活用事例を3選ご紹介します。これからFigmaの利用を検討している方はぜひ参考にしてください。

①Webデザイン・アプリデザイン

デザインカンプと呼ばれる、出来上がりのWebデザインを作成できます。Figmaはデザインツールとして開発されているため、デザイン作成に必要な基本機能が備わっています。

Figmaを活用することでWeb制作のスピード改善にもつながります。なぜなら、Web上でデザインを確認することで、チームの誰もが常に最新のデザインを確認できるからです。

たとえば、クライアントから追加の修正依頼が入った場合などに役立ちます。一般的にはデザイナーがデザインカンプを作成し、クライアントに確認後に、コーダーやエンジニアにデザインカンプを渡し、Webページのコーディングやアプリの開発が始まります。

コーディングや開発が始まった後に、クライアントから追加の修正が入り、修正を受ける場合はデザインカンプの修正があるため、再度コーダーやエンジニアに共有しなければなりません。

従来だとPDFのデザインカンプを再度、制作チームに共有する手間や時間が必要でしたが、Figmaであれば制作チームがデザインにアクセスできることで、共有する時間が大幅に短縮され、コーダーやエンジニアは修正箇所を確認し、迅速な対応が取れると考えられます。

このようにFigmaをWebデザインに活用することで制作のリードタイムを短縮することにつながります。

②ワイヤーフレーム作成

Webデザインを起こす前段階の下書きのワイヤーフレーム作成も可能です。FigmaはWebデザインに必要な余白（paddingやmargin）を設定できる機能がワイヤーフレーム作成でも利用できます。より実際の画面の状態に近いワイヤーフレームを作成できます。

また、Figmaではレスポンシブ対応のページのワイヤーフレームを効率よく作成できます。繰り返し同じ要素を配置する場合は縦や横の並びをすぐに変更し見た目を変えられる機能や、同じ繰り返し要素を使うアセット機能などを利用し、効率化に繋がります。

Webサイトの基礎配置が迅速にしっかり決まることで、クライアントへの確認が早くなり、クライアントへの信頼も高まり、デザイナーとしてはデザインに時間をかけることもできるようになるでしょう。

③プロトタイプ作成

Figmaではデザインだけでなく、プロトタイプも作成できます。プロトタイプとは、画面のイメージだけでなく、実際の操作した時の画面の切り替わりや動きを再現することです。

アプリ開発などでは、実際のアプリの動きを確認することはユーザーの使い心地（ユーザーインターフェース）を検証できます。

アプリ開発によくありがちな内容としては、画像などで見るデザインは問題ないと感じたにもかかわらず、実際に出来上がった画面では文字の大きさや色、画面内の配置などのデザイン部分や、画面遷移に違和感を感じることです。本物と同じ動きをするプロトタイプで事前確認ができれば、開発後の手戻りを大幅に短縮することができるでしょう。

Figmaをプロトタイプ作成に利用することで、結果として開発のリードタイムを短縮できる可能性があります。

Figmaと他のデザインツールの違い

Figmaと他のデザインツールの違いを紹介します。まずは以下の表に概要を記載します。

AdobeXDとの違い

Adobe XDもFigmaと同様、ワイヤーフレームやデザインカンプを作成できるツールです。機能としてはFigmaと変わらず、共同編集やコンポーネント（アイコンやボタンなど）管理、アセット（繰り返しつかうカラーやコンポーネントなど）管理が行えます。

Figmaは大規模なチームでのアセット、コンポーネント管理も行えるため、大規模なチームで共同編集をすることが向いているでしょう。Adobe XDはどちらかというと個人向けの傾向が強いと考えられます。

Photoshopとの違い

Photoshopは写真やWebのバナー編集、グラフィックデザインなどに主に使われるソフトです。写真や画像に対して細かな加工や微調整を得意としています。レイヤー機能や豊富な加工効果を利用することで、画像そのもののクオリティを上げられます。

Photoshopでもワイヤーフレームやデザインカンプを作成できますが、Figmaと比べレイヤー機能や加工を利用すると画像ファイルが重くなる点や、共同編集が行えないデメリットがあります。美容系などのLP作成では、高度な加工が求められるためPhotoshopを使用する傾向があります。

それぞれのソフトの特徴を活かし、Photoshopは画像そのものを加工し、WebページのデザインはFigmaで行うなどと使い分けるのもよいでしょう。

Sketchとの違い

SketchはFigmaと同様に、ベクターデザインを扱え、ワイヤーフレームやデザインカンプを作成できるツールです。Figmaとの違いは、Sketchはデスクトップアプリのみのためインストールが必要なのと、Macでのみしか使えません。Figma同様に共同編集は行えますが、共同編集を行うユーザーの全員の有料プラン契約が必要であり、Macへのアプリのインストールが必要になります。

Canvaとの違い

CanvaはWebで利用できるデザインツールです。Canvaの特徴はテンプレートや素材が豊富なため、初心者でもプロ並みの画像が作成できることです。WebページのデザインもCanvaで作成できます。

しかし初心者向けであるため、高度なレイヤー管理機能や、細かな微調整は行えません。ワイヤーフレームやデザインカンプを細かく作り込みたい場合はFigmaが適していると言えるでしょう。

Canvaはテンプレートや素材が豊富です。アイデアを探す、またはアイキャッチなどの画像を作成し、それをFigmaに取り込んで使う方法もよいかもしれません。

Figmaの料金について

Figmaの料金プランは下記4つのパターンがあります。

無料のスタータープランから、大規模組織で使うことを想定したエンタープライズプランまで豊富です。

引用：Figmaの無料プラン、プロフェッショナルプラン、およびビジネスプランの価格設定。

無料の「スターター」プランはプロジェクトやファイル制限がありますが、組織で共有して利用せずフリーランスなどの場合、個人ファイル内で作業し無料で利用することを考えるのもよいでしょう。デザインの基本的な機能は無料プラン内でも十分に使えます。

「Figmaプロフェッショナル」プランはフリーランスとして本格的に活動する方におすすめです。「スターター」に比べ、バージョン管理の期間制限がないのと、プロジェクト内におけるファイル数が無制限です。

「Figmaビジネス」や「エンタープライズ」は組織でFigmaを利用することを考えられています。セキュリティに配慮したシングルサインオンや、開発に必要なブランチ管理・マージ機能も利用できます。より高度なアクセス制限や管理が必要な場合は「エンタープライズ」プランがよいでしょう。

Figmaを活用してWebデザインをスムーズに行おう

FigmaはWeb上で操作できてかつ、共同編集ができるデザインツールです。Figmaを利用することで、デザインを制作チームでリアルタイムに共有ができるため、結果としてWeb制作やアプリ開発のリードタイムが短縮されることにつながる可能性があります。

操作性も優れ、使いやすいインターフェイスであるのも特徴です。また、アセットやコンポーネントといったよく使うものを登録し、整理することで、複数のデザイナーが担当してもトンマナを簡単に揃えることができます。デザインチーム内の連携もスムーズになるでしょう。

Figmaを活用して、Webデザインをスムーズに行うことにぜひお役立てください。