【超効率化】WebデザイナーがFigmaを利用する4つのメリットとは！最高月収160万円のワンオペママが徹底解説

インタビュアーのワカジツです！本日はよろしくお願いいたします。

早速ですが、WebデザイナーがFigmaを利用するメリットについて教えてください。

デザイナーのツールといえばIllustratorやPhotoshopが人気だと思うのですが、Figmaの魅力はなんでしょうか…？

私が考えるFigmaのメリットは、次の4つです！

1. 無料で使える
2. OSに依存しない
3. コーディングの負担が減る
4. 共同でのファイル編集ができる

それぞれ詳しく解説していくので、まだFigmaを使ったことがないという方は、ぜひご覧ください！

何と言っても、Figmaは無料で利用できるところが大きなメリットです。

有料のプランも用意されているのですが、個人でデザイン作業を行うだけなら、無料プランでも十分活用できます。

無料プランでもほとんどのデザイン機能が使えるんですね！

Webデザイナーのツールと言えばIllustratorやPhotoshopなどのAdobe製品が挙げられますが、これらを利用するには月数千円の料金が必要です。

無料のFigmaなら学習も進めやすいですし、初心者にとってかなりハードルが低いと思います。

ちなみに、機能面はAdobe製品と比べてどうなのでしょうか？

無料だけど機能は劣っている…ということはあるのでしょうか…？

そうですね。やはりIllustratorやPhotoshopはかなり多くの機能を有していて、Figmaでは対応できないこともあります。

Photoshopで画像の加工などを行ってから、Figmaにデータを配置するという方法でカバーすることもあります。

ただ、Webデザインに必要な機能はFigmaにも揃っているので、機能不足で困ることはありません。

むしろFigmaにしかない便利機能もたくさんあります！

そんなに使いやすいツールが無料なのは、ありがたいですね…！

Figmaはオンラインで利用するサービスなので、MacやWindowsなどのOSに依存しません。

例えばIllustratorやPhotoshopだと「クライアントとOSが違っていて、フォントを表示できない」ということも起きます。

紙媒体やバナーなどコーディングが発生しないものは、フォントをアウトライン化すれば問題ありません。
ただ、Webサイトなどはアウトライン化してしまうと、コーディングする際、テキストをコピーできなくなってしまうので不便です。

フォントを表示できないこと、確かにありますね！

以前Photoshopを使ってデータをやり取りしたことがあるのですが、デザインに使われているフォントを持っていなくて、見栄えが悪くなってしまいました…。

Figmaの場合、持っていないフォントが含まれたデザインも問題なく表示してくれます。

フォントを持っていない場合、操作はできませんが、作品の確認程度ならOSをまたいでも十分可能です！

Web制作の案件だと、作ったデザインをコーディングする作業が発生します。

Figmaはコーディングの発生するデザインに関して、負担を減らしてくれる機能がたくさんあるんです！

例えばFigmaには、このように余白を簡単に表示してくれる機能が備わっています。

これがもしIllustratorだと、ものさしツールで場所ごとに計測する必要があるんですよね。

いちいち計測しなくても、勝手に余白を表示してくれるのは、コーディングをするうえでかなり時短に繋がります！

なるほど。Web制作においては、Illustratorよりも優れた部分もあるということなんですね。

Illustratorはどちらかというと、名刺とかチラシのような紙媒体やロゴ制作に長けたツールです。

PhotoshopやIllustratorでサイトのデザインを制作される方もいらっしゃいますが、Web制作においては、Figmaのほうが使い勝手がいいと思っているので、Webをメインに活動している方にはぜひ使ってみてほしいですね。

Figmaはオンラインで稼働しているので、同じファイルを複数人で共同編集することが可能です。

誰がどこを編集しているのかがリアルタイムでわかりますし、コメントも残せます。

Googleドキュメントや、スプレッドシートのようなイメージでしょうか？

そうです！ファイルを送り合って更新していく…みたいな手間がないので、スムーズに作業を進められます。

個人のWebデザイナーであっても、クライアントと共同で作業をすることはあるので、かなり便利ですよ。

それでは反対に、Figmaを利用する際の注意点はありますでしょうか？

1. オフラインで使えない
2. Adobe製品指定の案件がある
3. Figmaにトラブルが起きるリスクがある

という点は、注意しておいたほうがいいポイントです。それぞれ紹介します。

繰り返しになりますが、Figmaはオンラインで利用するので、インターネット環境が必要です。

オフラインだと作業ができないのは、PhotoshopやIllustratorに慣れている人からするとデメリットかもしれません。

自宅がメインの作業場所なら問題ないですが、移動が多い人は要注意です。

移動が多い人は、ポケットWiFiやテザリング機能などで対応する必要がありそうですね。

Figmaは2022年に日本語版が提供された比較的新しいサービスなので、案件によってはPhotoshopやXDなどのAdobe製品での納品を指定されるケースもあります。

※もちろん制作物によってはPhotoshopでしか対応できないこともあります。

なるほど…となると、Figma1本で仕事を進めるのは難しそうですね。

そうですね。多くの案件を受注するためには、PhotoshopやIllustratorも使えるようになっておくことをおすすめします。

ただ、もちろんFigmaの利用OKな案件も多いので、初心者はFigmaで学習を進めて、徐々にできることを増やしていくというのも効率的です！

可能性の話にはなってしまいますが、Figmaはデータをクラウド上に保存しています。

万が一Figma側でトラブルがあった際に、データを失う可能性はあるので、定期的なローカル保存は欠かせません。

急なメンテナンスで使いたいときに使えない…ということも考えられるは、ひとつのリスクとして覚えておいてくださいね。

それでは、Figmaを活用するコツがあれば教えてください！

1. Figma独自の機能やショートカットをマスターする
2. 最新のプラグインを常にチェックする
3. 自分だけのデザインまとめ集を作る

です。それぞれ詳しく解説します！

Figmaは独自の機能やショートカットが充実しているので、しっかりマスターすることで、より効率よく業務を進められるようになります。

IllustratorやPhotoshopをメインに使っている人であっても、それらと同じような感覚でFigmaを操作することができますが、Figma独自の機能ってどうしても抵抗感があるので、利用しない人も多い印象です。

例えばどのような機能があるのでしょうか？

オートレイアウトとコンポーネントの機能は最低限押さえておきたい機能かなと思います。

どちらもかなり使い勝手がいいので、使い方を覚えておいて損はありません！

Figmaは、有志が作った独自のプラグインをインストールして利用可能です。Google Chromeの拡張機能みたいなものですね。

プラグインは使い勝手のいいものがどんどん登場しているので、常に最新のものをチェックしておくとさらに効率化に繋げられます！

Figmaを実務で使っていると、自分が制作したデザインがどんどん溜まっていきます。

すると、作ったデザインを、他の場所で使い回すことが可能なケースも多いです。

そこで、自分だけの「デザインまとめ集」を作っておくと、今後の案件を効率よく進められるようになります！

デザインは使い回せることもあるんですね！

はい。例えば、ボタンや見出しなどどのサイトでもよく使われる要素、お問い合わせページや記事ページなどで使われる要素は、毎回1から作るのではなく、過去に作ったものをお客様に合わせて改変したほうが速いことは間違いありません。

なるほど。ベースとなる要素をまとめておいて、クライアントに合わせて調整していく方法は、確かに速そうです！

私も過去に作ったデザインは、すぐに使えるようにまとめ集として保管していました。

そんな私のまとめ集を皆さんに使っていただけるように制作したのが、「デザイナーが初校提出するまでの作業を1/3にする Figmaデザインパーツまとめ集」です。

自分だけのデザインパーツ集を作るためのベースにできるだけでなく、複数案件に対応するためのテクニックも細かく解説しています。

またこのデザインパーツまとめ集は、今後も要素を追加するなど、更新を重ねていく予定です。

いまご購入いただいた方は、同じ料金で追加パーツも自由に使えるようになるので、ぜひお早めに手に取ってみてください！

ありがとうございました！