• 投稿者サムネイル画像 yuki.ono
    • #Figma
    • #webデザイン

自己紹介

初めまして。

デザイナーの小野です。

WEBデザイン制作ツールといえばPhotoshop・Adobe XD(現在は、利用する為の条件が複雑になってきている)と様々ですが、最近急激にFigmaでの制作が急増しています。WEB制作会社のほとんどが変わってきているのではないでしょうか?

実際、アルサーガもFigmaの使用が増えてきました!

そこで今回は私が実務で経験してきて感じたWEBデザインをFigmaで行うメリット・デメリットを紹介していきます。

メリット

リアルタイムでの共同作業ができる

Figmaはクラウドベースのツールのため、デザイナーと開発者が同時にプロジェクトに取り組むことが出来ます。これにより、チーム全体のコミュニケーションが円滑に進み認識の違いなど早めの段階で確認することが可能になり作業効率が向上します。

どこでも作業ができる

ネット環境であれば、Windows・Macでもどのパソコンからでもアクセス可能です。これにより、リモートワークや異なるプラットフォーム間での作業がスムーズに出来ます。また、自動保存をしてくれるので画面が急に固まってしまって最初からやり直しなんて事もなく最後の作業した状態からまた作業することが出来ます。

プロトタイピングを制作できる

Figmaにはプロトタイピング機能が内蔵されており、デザインをすぐに試せます。その為クライアントやチームメンバーに対して、視覚的に分かりやすいプレゼンテーションが可能です。

無料からでも始められる

Figmaの料金とAdobeツールの料金比較

Figmaは高価なライセンスや専用ハードウェアが不要で、デザインをしてみたいけど迷っているという方でも気軽に始めることが出来ます。なお、無料で使えるプランは機能に制限があります。
しかし、学生・教育関係者は学割で通常有料のプロフェッショナルプランを無料で使えると公式サイトに明記されている為、確認してみてください!

比較するとFigmaとプロトタイプが制作出来るなど一番特徴が近いため比較対象に挙げさせていただきましたが、Adobe XDは2023年1月24日に開発を終了しています。その為AdobeのWebサイトの製品一覧ページからXDが消えていて新しく単体での契約が出来なくなったそうです。Adobe CCから7日間無料体験は出来るようです。

デザインの一貫性を保ちやすい

デザインシステムやコンポーネントを効率的に作成・管理でき、複数のプロジェクトで再利用が可能です。これにより、デザインの一貫性が保たれます。

開発者との連携がスムーズ

デザインから開発への移行がスムーズで、開発者が必要とするCSSやその他のコードを簡単に抽出できます。そのためデザインと開発の間のギャップが埋められます。

デメリット

オフライン使用の制限がある

Figmaのオフライン警告の表示

Figmaはクラウドベースのツールであるため、インターネット接続が必須です。サーバーのダウンやFigmaのサービス停止時にはアクセスできなくなるリスクがあります。アクセスしていたプロジェクトは、オフラインでも作業が可能な場合もあります。しかし、編集した内容はオンライン時に更新されるため保存が出来ないなど制限があります。

高機能な画像編集は難しい

Figmaの画像編集画面のスクショ

画像を明るくしたりトリミングなど簡易的な編集は可能ですが、Photoshopのように詳細な画像編集機能が不足しているため、高度なレタッチや特定のエフェクトを使用する場合に限界があります。背景を切り抜くプラグインなどもありますが、細かな調整が今のところ難しいようです。

有料プランの内容が複雑で分かりづらい

無料プランもありますが、チームでの利用や高度な機能を使用する場合は有料プランが便利です。しかし、編集者に対してプラス料金がかかるので気をつけていないと思わぬ出費に繋がります。

またプラグインにはサードパーティ決済という仕組みもあり、支払い段階が使用した時点でかかるものや条件付きで無料で使えるもの、クラウドファンディングに近い寄付形式だったりと無料で使えるか判断がつきにくいプラグインも存在するため注意が必要です。

バージョン互換性が乏しい

他のツールとのファイル形式の互換性が完全ではなく種類も少ないため、他のデザインツールとの間でデータを移行する際に問題が発生することがあります。

まとめ

これらの要因が組み合わさることでFigmaはWebデザインの分野で急速に普及し、今まで業務で一般的に使用されていたPhotoshopに代わるツールとしての地位を確立しています。

実際使っていくと便利な機能の多さに感動しました。今はもっと使いこなせるようになりたいと日々勉強中です。

プラグインが次々と提供されていたりアップデートも定期的に行われているので今後はFigmaに、こんな機能があるよというのを発信していけたらと思います。