4
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

FigmaとAdobe XDを比較。UI/UXデザインツールのお勧めについて解説。

Posted at

スマートフォンが日常で必須アイテムとなった現在、私たちの身の回りには多数のWEBサービスやアプリサービスが存在し、それらに触れない日はありません。

それらのサービス開発に共通している物の一つが「UI/UXデザイン」です。

優れた機能や便利な仕組みを「ユーザーにとって使いやすく満足度の高いサービス」として提供するためのUI/UXデザインですが、実際にそれらをデザインする現場で使用されている2大デザインツールとして、「Figma/フィグマ」と「Adobe XD/アドビ・エックスディー(以下XD)」が存在します。

今回は、そのふたつのデザインツールを比較します。これから導入を考えている方へ、どちらを選択するかの検討材料になる情報になれば幸いです。

UI/UXデザインツールの必要性
I/UXデザインのクオリティは、WEBサービスやアプリサービスの成功に直結すると言っても過言ではありません。

どんなに優れた機能を持ったWEBサービス・アプリサービスでも、直感的に使えてスムーズに結果を得られなくてはユーザーに受け入れてもらえないためです。

スマートフォンのアプリを使用する際に、何ページにもわたる取扱説明書を熟読するユーザーは、残念ながら存在しません。

WEBサービスやアプリサービスの理想は、ターゲットとなるユーザーが直感的に迷うことなく、求めていた結果を手に入れて高い満足を得ることです。

それらを実現するために、UI/UXデザインツールが重要な役割を果たします。

そのように重要な役割を持つUI/UXデザインですが、開発現場では現在様々なデザインツールが存在します。

それらの中でも、特に高いシェアを占めるふたつのUI/UXデザインツールが「Figma」と「XD」です。

画面デザインをするだけであれば、例えばPhotoshopでも制作が可能です。実際、WEBデザインの現場ではPhotoshopを使用しているデザイナーも多く存在します。

しかし、Photoshopでは「チームでの共有が難しい」という点と「画面遷移等の動きを表現しにくい」という点が、プロジェクトチームで共通認識のグリップが重要となるUI/UXデザイン制作の場面ではボトルネックとなってしまいます。

UI/UXデザインは、デザイナーやエンジニアだけでなく多角的な視点からのフィードバックが重要となるチーム作業です。そのため、FigmaやXDといったUI/UXデザインツールが備えている共同編集機能が非常に重要となります。 その共同作業の中で、想定される画面遷移など動きを表現してプロジェクトチーム内で認識の共有が図れるという観点でも、ページ単位のデザインのみを行えるPhotoshop等のデザインツールよりも、FigmaやXDといったツールの方が、よりUI/UXデザインには適していると言えます。

「Figma」と「Adobe XD」の違いは何か
現在のUI/UXデザインの現場で主流のツールとなっている「Figma」と「XD」ですが、それぞれどのような特徴があってどのような違いがあるのでしょうか。

この記事内では、FigmaとXDをUI/UXデザインツールの主流として比較していますが、じつはそのシェアは、世界市場ではFigmaが圧倒しています。XDについては、どちらかというと日本国内のデザインの現場では比較的ユーザーが残っているといった状況です。

また、2022年9月の出来事である「Adobe社によるFigma買収」と、2023年12月の「Adobe社がFigma買収を断念」のニュースは記憶に新しいところですが、この一連のAdobe社によるFigma買収騒動からも分かるように、Adobe社がこの先XDをどのように扱うのか、やや不透明な部分もあります。

実際、2024年3月時点ではXDの単体販売はストップしており、AdobeCCのコンプリートプランユーザーのみ使用出来る状態です。

もちろん、Adobe社がこの先XD開発に再び注力し、パワーアップさせたXDを単体販売再開する可能性もゼロではありませんが、2024年3月時点ではAdobeCCコンプリートプランを利用中でない方にとっては、選択肢としてXDは除外されてしまうのでご注意ください。

このような状況を前提条件として、FigmaとXDを比較してみたいと思います。

Figmaの特徴
リリースは2016年です。当時のUI/UXデザインツール市場では、Sketchというツールが圧倒的なシェアを占めていました。そのような状況ですので、当然リリース直後のシェアは低く、ユーザーからのフィードバックを的確に取り入れた開発力と開発スピードが支持を得て、着実にユーザー数を伸ばし、現在の圧倒的なシェアに到達しました。

ちなみに、当時の王者であったSketchは2024年現在、残念ながらそのシェアを大きく落としています。

Figmaの特徴ですが、その最も大きな物は「クラウドベースのデザインツールであり、ブラウザ上で作業が可能」という点です。

全ての作業をブラウザ上で完結できるため、ソフトをPCにインストールする必要がありません。また無料プランもあり、オンラインであればブラウザから誰でもプロジェクトに参加出来るため、プロジェクトチームの足並みを揃えることが必須となるUI/UXデザインでは大きなアドバンテージがあります。

XDの特徴
Adobe社が開発したプロトタイピングとデザイン用ツールです。デスクトップアプリケーションとして提供されており、利用するためにはPCへのインストールが必要です。

その優位性はなんといっても、Adobe社のエコシステム内に統合されていることです。そのため、デザインの現場では必須となっているPhotoshopやIllustratorといったAdobe社が持つ他のデザインツールとの連携が非常にスムーズです。

一方で、Figmaと同様UI/UXデザイン作業に重要な共同編集機能は備えてはいるものの、デスクトップアプリケーションであるという性質上、プロジェクトチームへの導入のしやすさという点では、Figmaに一歩譲る形になってしまいます。

Figmaはどんな人に向いているか
では、UI/UXデザインを目的としてFigmaを導入すべきはどのような人なのでしょうか。以下の特徴に当てはまる人はFigmaの導入を検討することをお勧めします。

〈これからUI/UXデザインの世界に深く踏み込みたい人〉
前項でも触れましたが、2024年3月時点でXDの将来性はやや不透明になっています。そのため、これからUI/UXデザインを始めるという方は開発が継続していて世界市場でも圧倒的なシェアを占めるFigmaを選択すると安心です。

〈独学のしやすさを重視している人〉
前述の通り、FigmaはUI/UXデザインツールの世界市場で圧倒的なシェアを占めています。つまり、学習に便利なtipsの数も圧倒的であると言えます。

〈デザイナーやエンジニア以外のポジションも含めたプロジェクトチーム関係者〉
クラウドベースのデザインツールであり、オンラインであればブラウザから簡単にアクセス可能であるため、デザイナーやエンジニア以外のポジションを含めたプロジェクトでの共同作業に最適です。

Adobe XDはどんな人に向いているか
では次に、XDを導入すべきはどのような人なのかを考えてみます。
以下の特徴に当てはまる人はXDの導入を検討することをお勧めします。

〈AdobeCCコンプリートプランに加入済みの人〉
XDは2024年3月時点で、単体販売を停止しています。そのため、XDを使いたい場合はAdobeCCコンプリートプランへの加入が必要となりますが、コスト面から考えてもXDを使う事を目的に加入することは現実的ではありません。既にAdobeCCコンプリートプランに加入済みの方は、追加料金なしで利用可能なため、導入を検討しても良いと思います。

〈PhotoshopやIllustratorの使用に慣れている人〉
前述のような前提条件(AdobeCCコンプリートプランへの加入)とは別に、既にAdobe社のデザインツールを使用している方にとっては、XD導入のメリットがあります。XDはAdobe社のエコシステム内にあるため、普段デザイン制作で使用しているPhotoshopやIllustratorとの連携がスムーズであるという点です。

〈オフライン作業の可能性がある人〉
Figmaとの大きな違いは、PCにインストールが必要なデスクトップアプリケーションであるという点です。Figmaの「作業PCを選ばずブラウザからいつでもどこでも使用出来る」という点はメリットではありますが、必ずネット接続が必要となるという壁も存在します。XDはインストールしたPC内で作業をするため、オフラインでも作業が出来るというメリットもあります。回線状況に左右されない安定した動作は、黙々と作業するデザイナーにとっては大きな魅力となるでしょう。

まとめ
UI/UXデザインツールとして「Figma」と「Adobe XD」を比較してきましたが、現時点で新たに導入を検討するなら、そのお勧め度はFigmaがやや優勢だと弊社は考えています。

その理由は、やはり「世界市場でのシェア」「将来性」の2点からです。

もちろん、既にAdobe社のPhotoshopやIllustratorといった他デザインツールを使用して日々の業務を行っている環境でしたら、その連携のしやすさからXDの導入がお勧めになります。

導入を検討している方の現在の状況に応じて、適切なデザインツールを選択いただいた方が良いのは間違いのない事実です。

UI/UXデザインツール市場はまだまだ発展途上であるとも言えます。かつて隆盛を極めたSketchがそのシェアを大きく落とし、Figmaが首位に躍り出た現状は、数年後に新たなデザインツールの誕生により変動する可能性を秘めているとも言えるでしょう。

WEBシステム・アプリシステムでのユーザーのニーズは日々変化しており、それらの要望を叶えるために最適なUI/UXデザインツールも日々進化を続けています。

ひとつのデザインツールに固執することなく、状況をしっかりと見極めながら適切な選択をし続けることが、結果として優れたUI/UXデザインの完成につながると考えます。

4
5
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?