【現場の最新事情】webデザインツールの比較！Photoshop・XD・Figmaのメリット・デメリット

こんにちは。デザイナー兼コーダーの山口です。
弊社ではwebデザインをするにあたって常に時代に沿った制作方法を心がけています。
最近のデザインツール事情でいうと、共同作業がしやすいか、コーディングが効率的にできるかなどが重要なのかなと感じます。
結論から言うと、弊社ではデザインツールにFigmaを使用しています。
ですが、個人的にはXDの触り心地が好きですし、
Photoshopは写真加工には欠かせないツールです。
ただ、コーディングする時はFigmaの開発ツールがありがたいです。
それぞれの良さを検証しつつ、メリットデメリットを挙げていきたいと思います。

Photoshop

PhotoshopはAdobeが提供する画像編集ソフトで、webデザインの分野でも長年にわたって使われてきました。
高度な画像加工やレタッチができるだけでなく、複数のレイヤーを簡単に切り替えられるレイヤーカンプや、書き出し(pngやjpgやgif)、スライスなどのwebデザイン向けの機能も備えています。

Photoshopの料金

Photoshopのみ	Photoshop+Lightroom	コンプリートプラン
2,728 円/月	2,178 円/月	6,480 円/月

Photoshopのメリット

• 写真やイラストなどの画像素材を自由に編集できる。
• レイヤーの状態を切り替えて複数のデザイン案を管理できる。
• レイヤースタイルやアクションなどで効率的にデザインできる。
• Adobe stockやIllustratorなどの製品との連携がしやすい。
• 自由度が高く、フォントに装飾ができたり、webデザイナーが表現したいデザインや加工ができる。

Photoshopのデメリット

• データが重くなりやすく、動作が遅くなることがある。(LPなどはかなりキツイです。重くなることでページを各ファイルに分ける必要もあり、figmaやXDに最も劣る点だと個人的には感じます)
• プロトタイピングやアニメーションなどの動的な表現が苦手。
• 有料ソフトであり、共有・共同編集にはメンバー全員がツールをインストールする必要がある。
• コーディング

Photoshopのおすすめの使い方

Photoshopは画像編集に特化したツールなので、写真やイラストがメインのwebサイトや、細かい加工やレタッチが必要なwebサイトに向いています。ただし、Photoshopだけでwebデザインを完結させることもできますし実際そういった会社も多く、私自身も数年前まではそうしていました。ですが、XDやfigmaなどUIUXに特化したソフトが出てきたので他のツールと併用することがおすすめです。例えば、Photoshopで画像素材を作成してからXDやfigmaに読み込んでプロトタイピングするという方法です。

figma

figmaはブラウザ上で動作するプロトタイピングツールで、近年注目されているwebデザインツールです。
UIデザインからプロトタイプまで一つのツールで完結できますし、複数人で同時に編集したりコメントしたりすることも可能です。
個人向けのStarterプランは無料で利用できます。

Photoshopの料金

スターター	Figmaプロフェッショナル	Figmaビジネス	エンタープライズ
無料	￥1,800 (年払い月額)	￥6,750 (年払い月額)	￥11,250 (年払い月額)

プロフェッショナルは学生および教育関係者は無料になっています。 スターターで十分使えるので、スターターから始めてみて、不便を感じることがあればプランを見直すという流れでいいかと思います。

figmaのメリット

• ブラウザ上で動作するので専用ソフトが不要。(アプリもある)
• 複数人でリアルタイムに共同編集やコメントができる。
• プラグインやテンプレートが豊富に用意されている。
• プロトタイピングやアニメーションなどの動的な表現が得意。
• 自動で保存される。
• フラウドで保存されるが、ローカル保存もできる。
• スタイルの登録ができるのでデザインに統一感ができる。
• デザイントークンで効率化ができる。
• 1つのファイルですべてのページをまとめられる
• オートレイアウトやコンポーネントというものがあり、修正が早い。
• コーダーが見る際には開発モードで見れば簡単に情報が得られてコーディングが効率よくできる

figmaのデメリット

• 高度な画像加工やレタッチが苦手。(レイヤー効果がない)
• 日本語表示には専用プラグインが必要。
• 有料プランを利用する場合、チーム単位でまとめて支払う必要がある。
• Adobestockを使う時にちょっと不便・・・
• カスタム好きな人ほど使いこなせるイメージ

figmaのおすすめの使い方

figmaはチームでwebデザインを共有することに優れたツールなので、デザイナー以外のメンバーも参加しやすいです。
ソフトに明るくないクライアントでもブラウザで簡単に確認していただけます。
また、チームやクライアントと共有しながら打ち合わせをするという使い方も効率的です。
その場でフィードバックを受けながら修正できるため、修正の指示や対応などの負担が軽減されます。
私は社内で打ち合わせをする際にはfigmaを同時に使って皆で書き込んでいくような使い方もします。

XD

XDはAdobeが提供するプロトタイピングツールで、figmaと同様にUIデザインからプロトタイプまで一つのツールで完結できます。 PhotoshopやIllustratorなど他のAdobe製品との連携に優れています。

Photoshopの料金

スターター	年間プラン, （月々払い）	年間プラン, （一括払い）	月々プラン、月々払い
無料	6,480 円/月	72,336 円/年	10,280 円/月（税込）

XD単体の販売はなくなっており、
Creative Cloudコンプリートプランを契約して、その中のXDを使う、という方法しかありません。

個人向けのStarterプランは無料で利用できますが、
2023年7月現在、スタータープランはadobe公式サイトで表示されておらず、スタータープランはないのか、
カスタマーセンターに問い合わせてみたところ、このような返答がありました。

なんだか裏技のような方法ですが、カスタマーセンターの方が教えてくださったので合法と言えるでしょう笑

XDのメリット

• Adobe製品(stockやIllustrator)との連携がしやすい。
• PhotoshopやIllustratorによるレイヤー、効果、マスクなどの複雑な加工情報を保持したまま読み込める。
• プロトタイピングやアニメーションなどの動的な表現が得意。
• アセット機能でカラーやフォントが保存できる。
• デザイントークンが使える
• Photoshopと比べて動作が軽い。(私はXDの軽さが一番好きです)
• urlが発行できるのでクライアントへの共有が簡単
• 1つのファイルですべてのページをまとめられる
• 初心者でも直感的に使いやすい

XDのデメリット

• 複数人でオフライン編集すると競合が起こる場合がある。
• 共同編集にはメンバー全員がツールをインストールする必要がある。(プレビューを見るだけはソフトなしでできる)
• テキストの微調整やレイヤー効果をつけるなどはできない

XDのおすすめの使い方

XDはPhotoshopやIllustratorと併用することでさらに力を発揮します。
例えば、Photoshopで制作したデザインカンプをXDで読み込めば、Photoshopによるレイヤー、効果、マスクなどの複雑な加工情報を保持したまま、軽快な動作でプロトタイプを作れます。
また、XDに配置した画像を選択すると直接Photoshopで編集することができ、編集結果はXD上ですぐに反映されます。

まとめ

webデザインツールのうち、Photoshop、figma、XDについてご紹介しました。
現在のトレンドはfigmaとXDですが、XDが単体の販売を終了したので、 今後はfigmaはトレンドの主流になっていくのではないかと思います。
PhotoshopやIllustratorで補いながら、メインのfigmaでデザインしていくのが流れかなと感じます。
figmaは無料でブラウザでも手軽に始められるので、webデザインやってみたいんだよね、という方にはfigmaをおすすめしています。
ぜひチャレンジしてみてください。