---

ニジボックスのUIデザインフローや案件事例をご紹介！

---

「Figma」は2016年9月末にリリースされたデザインツールです。
リアルタイムで複数人との同時作業が可能であり、効率的なデザイン制作を実現できるため、デザイナーだけでなく非デザイナーの方にも支持されています。

Figmaを使いこなせれば、デザイン作業の効率化や新しいスキルの習得も見込めます。
しかし「Figmaを利用すべきかどうか悩んでいる」「Figmaの具体的な活用方法を知りたい」と考えている方も多いのではないでしょうか。

本記事では、Figmaの特徴や活用方法、他ツールとの違いについて解説します。

Figmaとは？

Figmaとは、オンラインで利用できる多機能デザインツールです。
ワイヤーフレーム、プロトタイプの制作からスライド資料まで、幅広いデザインニーズに対応できます。特に、リアルタイムでの共同編集機能やバージョン管理機能が強みであり、チームでの作業に適しています。

また、Figmaは対応OSの柔軟性にも優れているツールです。OS面ではWindowsとMacの両方に対応しているため、さまざまなデバイスで作業が可能です。

さらに、言語面でも対応の幅を広げています。Figmaはアメリカで開発されたツールのため、以前は日本語に対応していませんでしたが、2022年3月の日本法人設立を皮切りに、日本語ローカライズを含めた大規模なアップデートなどが行われ、国内でも注目が高まっています。

Figmaの4つの特徴

Figmaの魅力は、無料プラン、ブラウザベースのシステム、デザイン共有と共同作業やバージョン管理が容易といった点です。ここでは、各特徴や機能について詳しく見ていきましょう。

1.無料プランでお試しができる

Figmaには無料で利用できる「スタータープラン」が用意されています。スタータープランでは、個人用ファイル数は無制限で作成可能です。また、デザイン・プロトタイプ用のFigmaファイル、ホワイトボード用のFigJamファイルをそれぞれ3つまで作成できます。

ファイル数に制限はあるものの、ストレージやコラボレーター数に制約はありません。そのため、共同編集する際にも人数を気にせず進められるのが特徴です。個人や小規模チームの利用には十分といえる機能がそろっています。

2.ブラウザベースで作業が可能

Figmaはブラウザ上で動作するツールのため、専用アプリのインストールは不要です。そのため、OS（Windows・Mac）やデバイスに左右されずに利用できる点がメリットとなります。

インターネット環境が整っていればアクセスが容易であり、効率的にデザイン作業が可能です。開発メンバーやクライアントに対し、デザイン制作の進行状況を容易に共有できる点もポイントだといえるでしょう。

3.デザイン共有や共同作業がスムーズ

Figmaには複数人が同時に作業を行えるリアルタイムコラボレーション機能が備わっているため、デザインする画面数が多くても効率的に作業を進められます。

また、デザインにコメントを入れながらその場で変更を加えることも可能です。具体的な機能として、次の5種類があります。

スポットライト

スポットライトは画面共有機能です。自分の作業画面をメンバーの画面に投影したり、他のメンバーが見ている画面を自分の画面に映したりと、デザイナー同士で作業状況をリアルタイムに共有できます。

視覚的に共有できるため、オンライン上でも実際に対面しているような感覚で意見交換やフィードバックを行うことができ、チーム間のコミュニケーションがスムーズになります。

カーソルチャット

カーソルチャットはマウスカーソル上にフィードバックなどのテキストを置ける機能です。

制作物の特定の箇所にコメントをつけるのではなく、カーソル上に載せて共同作業者に見せることにより、通話しなくてもリアルタイムでやりとりできます。

URLの挿入

デザイン内のテキストに外部リンクを挿入する機能です。

使用素材の配布サイトや参考にしたサイトを埋め込むことにより、チームメンバーが再リサーチする手間が不要になります。

コメント

デザイン内で選択した箇所に、意見や質問をコメントとして直接記入できる機能です。

修正が必要なオブジェクトに直接コメントをつけられるため、修正箇所が視覚的に分かりやすくなり、デザイナーの修正作業も効率化できます。

音声チャット

音声チャット機能は、同じファイルを開いている他のメンバーと通話ができる機能です。

他の通話アプリを開くことなく音声会話ができるため、チーム間でのイメージ共有をより迅速かつ直感的に行えます。ただし、利用するには有料プランの契約が必要です。

コラボレーション機能の活用によってデザインの共有やフィードバックの受け取りが容易に行えるため、チームメンバー間でスムーズなコミュニケーションをとることができます。Figmaのリアルタイムコラボレーション機能によって、効率的かつ円滑なデザイン作業が可能になるといえます。

4.バージョン管理が可能

Figmaでは、作成したファイルのバージョン管理ができるため、開発工程の更新履歴をさかのぼって確認することが可能です。チームで開発する際にも更新履歴が残り、情報共有がスムーズに行えます。

またデータは自動で保存されるため、作業効率向上のほか、ブラウザのクラッシュなどによるデータ消失の防止も見込めます。バージョン管理機能を活用することで、デザイン変更や修正の過程が追いやすくなり、個人だけでなくチームでのデザイン作業も円滑に進められるでしょう。

Figmaの活用方法4点

FigmaはWeb・UIデザインからワイヤーフレーム、プロトタイプ、スライド資料作成まで幅広い用途に活用できます。具体的な活用方法について見ていきましょう。

1.Web・UIデザイン

FigmaではWebデザインやUIデザインを手軽に行えます。
「ボタンの色を目立たせたい」など文字で共有されていた情報を可視化できる機能が豊富なため、チーム内で認識合わせをスムーズに行うことが可能です。

例えば、図形やアイコンなどを自由に描くことができるシェイプツール、画面のサイズや比率に合わせて要素を配置できるピクセルグリッド・レイアウトグリッドなどの機能があります。また、プレビュー機能により仕上がりの確認も容易です。

さらに、Web・UIデザインの効率化につながるプラグインが豊富にそろっている点も魅力です。例としてダミーデータや人物のダミー画像などを簡単に挿入できる「Content Reel」、高品質な写真素材を無料で提供している「Unsplash」などがあります。

これらの機能により、Web・UIデザインの作成におけるスムーズな確認や共有、変更が可能といえるでしょう。

■参考記事：UI・UIデザインの概要や改善ステップなどについては、以下の記事で解説しています。

2.ワイヤーフレーム

ホームページやソフトウエア、アプリなどのインターフェースを設計する際に必要となるワイヤーフレームの作成が可能です。
PCやスマートフォンなど各規格サイズのテンプレートが用意されており、一から作成する必要がないため、効率よく作業できます。

Figmaのワイヤーフレームテンプレートは公式サイトでも配布されており、ログアウト状態でサンプルの確認が可能です。
無料オンラインワイヤフレーム作成ツール|Figma

例えば、iPhone SEのサイズのワイヤーフレームを作りたい場合は、以下手順でフレームを設置できます。

• ツールバーから[フレーム]を選択
• 右サイドバーから[デザイン]を選択
• [スマホ]から[iPhone SE]を選択

他のiPhoneシリーズやAndroid、Apple Watchなどにも対応可能なため、多様なデバイスに合わせたワイヤーフレームの作成が容易だといえるでしょう。

■参考記事：ワイヤーフレームの作成方法について詳しく知りたい場合は、以下の記事を参考にしてみてください。

3.プロトタイプ

Figmaでは、プロトタイプの作成も可能です。
Web制作業界におけるプロトタイプとは、多くの場合、システム・サービス開発の初期段階に作られるホームページやアプリなどの試作品を指します。プロジェクトメンバー間で認識をそろえたり、システムやサービスなどに対する仮説を検証したりする目的で作成されます。

ワイヤーフレームは視覚的に情報設計を整理できるのに対し、プロトタイプは動きなども含めた完成品のイメージを確認できる点が特徴です。Figmaを使用してプロトタイプを作成すれば、デザインが実際に動作する様子を把握することができるため、早い段階で完成イメージを共有できます。

イメージを共有し、プロジェクトメンバー間で認識の擦り合わせを行うことで、後から仕様変更が発生するといったリスクが避けられ、効率のよいプロジェクト進行が可能です。

■参考記事：プロトタイプの活用法や種類などについては、以下の記事で解説しています。

4.スライド資料

プレゼンテーション用のスライド資料も作成可能です。
効果的なデザインを取り入れたスライド資料を作成できれば、メッセージ性がより高まり、聞き手の理解が深まるでしょう。また、資料を視覚的に共有すると、制作の意図も伝わりやすくなります。

一般的に、主流のスライド資料制作ツールはPowerPointとされています。しかし、Figmaの機能を適切に使うことができれば、PowerPointと同様に高クオリティで分かりやすい資料を作成可能です。

Figmaの料金プラン

Figmaの料金プランは「スターター」「Figmaプロフェッショナル」「Figmaビジネス」「エンタープライズ」の4つに分けられています。
無料プランも含めた各料金プランの特徴は以下の通りです。それぞれのプランの特徴をふまえて、ニーズに合ったプランを選択しましょう。

• スターター
  • デザイン・プロトタイプ作成に関する全ての機能
  • バージョン履歴の保存期間は30日間まで
  • 使用できるビデオはFigmaコミュニティ上の作品のみ
• Figmaプロフェッショナル
  • 学生と教育関係者は無料で加入できる
  • オリジナルのビデオを使用できる
  • 音声チャット機能、パスワード保護機能などの解放
• Figmaビジネス
  • 法人利用向けのプラン
  • ほぼ全ての機能が使用できる
  • 一元管理、シングルサインオン（SSO）機能などが使用できる
• エンタープライズ
  • セキュリティ機能がさらに充実
  • サービスサポートが受けられるようになる
  • 大規模なプロジェクトに向いている

各プランの価格詳細は公式サイトをご確認ください。
Figmaの無料プラン、プロフェッショナルプラン、およびビジネスプランの価格設定

Figmaと他のデザインツールの比較

Figma以外にもAdobeXDやSketchなどのデザインツールがあります。
ここでは、各ツールとFigmaの特徴を比較していきます。場合によっては組み合わせて使用するケースもあるため、それぞれのツールの特徴を把握しておくことが大切です。

■参考記事：UIデザインに関するツールや選び方については、以下の記事にて紹介しています。

Adobe XDとの比較

Adobe XDはFigmaと比べると個人作業向きのツールです。
Figmaと同様に共同編集機能が利用できるものの、使用環境やファイルサイズによってタイムラグが大きくなるため、やりとりする中でトラブルが起こる可能性があります。また、ソフトのバージョンが異なる人同士で作業をするとファイルが開けなくなることがあるため、複数名で作業をする際には注意が必要です。

Adobe XDは有料プランである「Adobe Creative Cloud」の契約が必要となります。また、ファイルを共有する際はURL発行後に更新リンクを押す必要があり、手間を要するのが欠点です。

一方、Figmaは複数人で制作を行い、バージョン管理が重要なプロジェクトに適しています。Figmaではリアルタイムで編集内容が反映され、スムーズなやりとりが実現可能です。データ共有もURLの発行のみで行えるため、効率的だといえます。
プロジェクト要件に応じて適切なツールを選択しましょう。

■参考記事：Adobe XDの特徴をさらに詳しく知りたい場合は、以下の記事を参考にしてください。

Sketchとの比較

SketchとはMac専用のデザインツールであり、使いやすさや独自のデザイン機能が重視されるプロジェクトに適しています。
Sketchは2010年9月初旬にリリースされ、デザイナーから使いやすさに定評がある点も特徴です。

ただし、Sketchでは共同作業者全員がライセンスを取得する必要があります。そのため、30日間のお試し版はあるものの、長期的に見ると価格面において負担がかかります。なお対応言語は英語のみです。

一方、Figmaはリアルタイムでの共同編集や日本語対応、OSの柔軟性が求められるプロジェクトに適したツールです。2016年のリリース以降、機能更新も頻繁に行われています。

Figmaは無料プランから共有機能も利用が可能で、リアルタイムで共同作業ができ、タイムラグもほとんどありません。WindowsとMacの両OS、日本語ローカライズにも対応している点が強みです。

FigmaとSketchを比較した場合、SketchはWindows・日本語に非対応といったデメリットがあり、利用シーンが限定されるでしょう。

■参考記事：Sketchについては下記の記事でも機能を紹介しているので、ぜひ併せてご覧ください。

まとめ

Figmaは多機能なデザインツールであり、デザイン制作において幅広いシーンで活躍が見込めます。ワイヤーフレームやプロトタイプの制作だけでなく、スライド資料の作成も可能です。リアルタイムでの共同編集やバージョン管理が効率的に行えるため、複数人でプロジェクトを進行する場合に向いています。

Adobe XDやSketchと比較しても、Figmaは言語対応やOSの柔軟性、共有機能の利便性といった点で優れています。また、近年の著しい成長から今後のアップデート内容にも期待できるツールの一つだといえるでしょう。

ニジボックスでは以前Figmaに関する社内参加型イベントを開催しました。以下の記事でイベント当日の様子を掲載しているため、ぜひ本記事と併せてご覧ください。
Figma＆FigJamの世界観を知る！参加型イベントが盛大に開催！|株式会社ニジボックス

また、下記の記事では基本編と実践編に分けてFigmaの使い方を紹介しているので、ぜひ併せてご覧ください。

ニジボックスでは、サイト制作や開発における情報設計やビジュアル設計、デザインガイドライン制作といったUIデザイン面のご支援も行っております。
下記資料にて、人間中心設計の考え方をベースとしたUXリサーチ結果に基づいた、ニジボックスのユーザー課題解決型のUIデザインフローや、支援事例を一部紹介しています。

ご興味を持たれた方はぜひ、下記ダウンロードリンクよりご参照ください！