公開日：2023年7月4日

Figmaとは何か：今や習得必須のプロトタイピングツールを解説します

Webデザイン業界で人気が急上昇しているプロトタイピングツールであるFigmaについて解説し、どのような場面で使われ、どのようなメリットがあるのかを解説していきます。

Figmaとは

Figmaとは米国のFigma Inc.によって開発された、クラウドベースのプロトタイピングツールです。FigmaはWebブラウザ上で動作し、さまざまなデバイスやプラットフォームに対応しています。

UI設計、アプリケーション、Webなどさまざまなデザインプロジェクトで使用されており、デザイナーはFigmaを使用してユーザーインターフェースやビジュアルコンポーネントを作成し、画面の遷移やアニメーションを設定することができます。

FigmaはWebデザイン業界で人気が急上昇しているプロトタイピングツールであり、共同編集機能によってデザイナーをはじめとする関係者間のコラボレーションや効率的なワークフローを実現するために広く利用されています。その手軽さと利便性の高さから今やWeb業界で働く人たちにとって習得が必須のツールとなりつつあります。

この記事ではプロトタイピングツールとは何なのか、Figmaはどのような場面で使われ、どのようなメリットがあるのかを解説していきます。

プロトタイピングツールとは

Web サイトを制作するプロセスでは、まず顧客の要望を聞き取りながら要件を定義し、プロトタイプを作ります。それからコーディングして Webサイトを構築します。細かいところに着目すればケースバイケースのことも多く、必ずしも常にこのプロセス通りとは限りませんが、概ねこのような段階を経てWebサイトができあがっていくと考えていいでしょう。

■ コーディングの直前までがプロトタイピング

プロトタイピングが何かをイメージできない人がいるかもしれません。プロトタイピングとは、仕様を細かいところまで決めていくために、本物そっくりのサイトを仮で作ることを指します。ここで作る仮の成果物がプロトタイプです。細部まで頭の中で想像しながら議論するのではなく、途中の段階でプロトタイプを作ることで、仮とはいえ具体的なイメージを見ながらページデザインや操作性などを決めていきます。プロトタイプは1回作ればいいというものではありません。段階に応じて、何度かプロトタイプを作るのが一般的です。建築でいうところの、建物を建てる前の図面や3DCG モデル、模型などがWebサイトのプロトタイプにあたります。プロトタイプを作り直すほど、Webサイトは完成形に近づいていきます。言ってみれば、「あとはコーディングするだけ」のところまでアイデアを形に煮詰めるのがプロトタイピングです。この段階で使うツールが、プロトタイピングツールです。

■ プロトタイピングツールとグラフィックソフトの違い

プロトタイピングツールが登場したのは、比較的最近のことです。それ以前はPhotoshop やIllustratorなど、グラフィックソフトで画像を作り、その画像をもとにデザインを検討していくのが主流でした。この方法だと、動かないページのイメージしかプロトタイプにできません。このためユーザーの操作に合わせて動的に変化するページや動的なアニメーションを表現することができません。一方で、この段階でそういったWeb ページを仮に作るとなると、使われないかもしれないコードをそのつど作成することになり、デザイナー側の負担が増大します。

そこで、本物そっくりのサイトの見た目を簡単に再現できて、それも動的な変化のトリガーとなるボタンをノーコードで作ったり、アニメーションをはじめとするWeb ページ上の動きも表現したりすることが可能なツールが求められるようになりました。そこで生まれたのがプロトタイピングツールです。プロトタイピングツールはその登場後ほどなくWebデザインを行う上での必携ツールになりました。

プロトタイピングツールは、画面を作ることに関しては優れたツールですが、初期のツールはパソコン上で動作するアプリ形式が主流で、作成したプロトタイプをスマートホンで確認するには何らかの形でパソコンのプロトタイピングツールと接続する必要があったり、クライアントに見た目を確認してもらうときには、先方のパソコンにも同じプロトタイピングツールをインストールしてもらう必要があったりといったように、データの共有や他デバイスでの確認が面倒でした。

そうしたプロトタイピングツールの弱点を解決したのが、「Figma」です。当初から、Web上のアプリケーションとして開発されたFigmaの登場により、作成したプロトタイプはURLだけで簡単に共有できるようになり、今では最もメジャーなツールの一つとして、世界中で使われるようになっています。

Figmaの使いどころ

では、「プロトタイピングツールをどう使うか」について、実際の検討に即したシーンを見ていただきましょう。

デザインの方向性を決めるとき

要件を定義した段階では、Webサイトはまだ何も形になっていません。ゼロの状態からサイトやページを作っていくことになります。ここで、アイデアをもとに具体的なデザインを作っていく段階でプロトタイピングツールを使います。

デザイン案をレビューするとき

デザインの方向性が決まってきたら、より幅広い人に見てもらってブラッシュアップしていくこともあります。たとえば、ここまではクライアントの担当者とやり取りしながら進めてきましたが、先方の社内では現場の担当社員あるいは部長や役員クラスの意見や承認を得ておきたい。そんなときにもプロトタイピングツールが有効に使えます。「プロトタイピング」という言い方ではなかなか伝わらなかったりすることもあるので、表現の仕方は先方に合わせて工夫します。

プロジェクターに映せたり、パソコンの画面を見てもらったりできる環境であれば、その場で出た意見をすぐにデザイン案に反映させ、その場で確認を得るといったことも可能です。デザイン案を一気にまとめ上げたいといったときにもプロトタイピングツールが力を発揮します。

Web 開発会社に依頼するとき

自分が主体となってサイトを構築するときでも、すべての作業を自分がやるとは限りません。たとえば、複雑なJavaScript のコーディングをエンジニアに依頼したり、サーバー構築を開発会社に委託したりするケースなどが考えられます。単にデザイン案を共有するだけでなく、Web ページに持たせる機能について伝える必要があります。そうした場合も、プロトタイピングツールが有効です。

Figma のコメント機能を使うことで、補足情報を伝えたり、不明な点を質問したりといったこともFigma だけで簡単にできます。このため情報共有の手間を減らして、スムーズに開発を進めることができます。ただし、こうした使い方をする場合には、自分はもちろん相手側もFigmaに習熟していないとスムーズに話が進まないこともあります。その点には、注意が必要です。

Figmaの特徴とメリット

このように利用シーンからFigmaの用途を見てみました。実は、Figmaには大きく三つの特徴があります。

プロトタイピング
リアルタイム更新
共同編集

です。

プロトタイピングでは、簡単にページのラフデザインを作る機能が力を発揮します。Figmaには図形やペンツールなどが用意されており、一般的なグラフィックスソフトと同等の操作性でWebページのデザインと画面遷移を作成できます。

データはWeb上に保管されており、画面を修正すると自動で保存され、特に何の操作をしなくても即プレビュー画面に反映されます。このリアルタイム更新のおかげで、一度URLを先方と共有しておけば、特にファイルやデータをやり取りすることなく常に最新版で確認してもらえます。

ミーティングの途中で「ここを直したらどうなるだろう」といった要望が出たときでも、その場で修正してすぐにFigmaで確認してもらえるのは本当に便利です。

共同編集は、Googleドキュメントやスプレッドシートで同じファイルを誰かと同時に編集した経験をしたことがある人なら、イメージしやすいと思います。Figmaも同じページやデータを同時に複数のメンバーで編集することができます。Webサイト制作の案件では常に誰かと作業している形になります。すべてを自分で引き受けるような場合でもクライアントとは密接にコンタクトをた持ちながら作業する必要がありますし、まして他のデザイナーと分担したり、アプリケーションやサーバーの構築でエンジニアの手を借りたりといったような場合ではなおさら共同編集の重みが増えます。

（共同編集の機能を利用する場合は、有料のアカウントを取得する必要があります。）

同じデータを同時に編集するというのは、それほど機会が多くはありませんが、それでも機能として備わっていることが重要になる場面もあります。また、共同編集までは使わなくても、Figmaはプロトタイピングとリアルタイム更新だけで十分に他の人とコラボレーションするのに有用かつ強力なツールです。ぜひ、一緒にマスターしていきましょう。

出典：「ゼロからはじめるWebデザイナー」　黒卓陽著