出典：Unsplash https://unsplash.com/photos/ARW7Ic7MSAM

Webデザインツールは日々アップデートされていて、新しいツールや機能のリリースが注目されています。

以前はWebデザインツールといえばPhotoshopとIllustratorといったAdobeのツールが大きなシェアを占めていました。

特にPhotoshopは高機能で、今でも「Photoshopでなければ出来ないデザイン」が存在します。

一方で、2016年にFigma、2017年にAdobe XDがプロトタイピングツールとして登場。

Webデザインツールの選択肢が増えました。

現在のWebデザインツールの主流はFigmaとXDに移りつつあります。

PhotoshopとXD、Figmaにはどのような違いがあるのでしょうか？

Webデザインツールとしての特徴やメリット・デメリットを比較しながらご紹介します。

出典：Unsplash https://unsplash.com/photos/clN6N30q3sw

Photoshop

PhotoshopはAdobeが提供する高機能な画像編集ソフトです。

レイヤーの状態をボタン一つで簡単に切り替えられ、複数のデザイン案を管理できる「レイヤーカンプ機能」、画像を複数に分割する「スライス機能」など、Webデザイン向けの機能が備わっています。

WebデザインでPhotoshopを使用するメリット

Photoshopは、高度な画像編集を必要とする写真がメインのWebサイトの制作に適しています。

Photoshopで編集した画像を利用して他のツールでWebデザインを制作する場合、画像の修正・加工をするたびにツール間を往復しなければなりません。

PhotoshopでWebデザインを制作すると、デザインの中に配置した画像を直接編集できるため効率的に作業を進められるのがメリットです。

WebデザインでPhotoshopを使用するデメリット

PhotoshopのみでWebデザインを作成することは可能ですが、複雑な加工やページ数の増加によってデータが重くなってしまいます。

ヘッダーの追従、ホバーの動き、画面遷移など動的なデザインを表現するのが難しいという問題もあります。

また、有料ソフトであり、共有・共同編集にはメンバー全員がツールをインストールする必要があるのも環境によってはデメリットといえます。

おすすめの使い方

現代のWebデザインにおいては、Photoshopは画像編集に特化して使われることが多くなりました。

その場合、Photoshopで編集した画像を使って別のツールでデザインを作成します。

次にご紹介するXDと連携すると、Adobeソフト同士なので作業をスムーズに進められます。

出典：Unsplash https://unsplash.com/photos/x-HpilsdKEk

XD

XDは、Adobeが提供するUIデザインに特化したプロトタイピングツールです。

Webデザインに必要なワイヤーフレームからプロトタイプまで一連の作業が可能です。

複数メンバーによる共同編集にも対応しています。

WebデザインでXDを使用するメリット

XDは、他のAdobeソフトと共通の機能も多いため、他のソフトを使い慣れていれば直感的に操作できます。ショートカットキーなどの学習コストが少なく済むのは大きなメリットです。

また、PhotoshopやIllustratorなど他のAdobeソフトとの連携に優れています。

たとえば、XDに配置した画像を選択すると直接Photoshopで編集することができ、編集結果はXD上ですぐに反映されます。

Photoshopと比べて動作が軽いのも特徴です。

WebデザインでXDを使用するデメリット

XDで作成するデザインは、オンラインで共同編集できます。

オフラインでも利用できますが、複数のメンバーでオフライン編集すると競合が起こる場合があるため注意が必要です。

また、Photoshopと同様に有料ソフトであり、共有・共同編集にはメンバー全員がツールをインストールする必要があります。

おすすめの使い方

単独でもWebデザインに活躍するXDですが、PhotoshopやIllustratorとの連携によってさらに力を発揮します。

たとえばPhotoshopで制作したデザインカンプをXDで読み込めば、Photoshopによるレイヤー、効果、マスクなどの複雑な加工情報を保持したまま、軽快な動作でプロトタイプを作れます。

出典：Unsplash https://unsplash.com/photos/4tXfdctTcWs

Figma

Figmaは、ブラウザ上で簡単にデザインを作成できるアメリカ発のプロトタイピングツールです。

XDと同様、ワイヤーフレームからプロトタイプまで一つのツールでWebデザインを完結でき、複数メンバーによる共同編集にも対応しています。

無料から利用できて専用ソフトが不要なため、デザイナー以外のメンバーも参加しやすいのが特徴です。

WebデザインでFigmaを使用するメリット

Figmaは、個人向けのStarterプランであれば無料で利用できます。

ブラウザ上で動作するのでソフトのインストールが必要なく、作業環境に左右されません。

プラグインやテンプレートが多数用意されているため、デザイナーではなくてもある程度のデザインを効率よく作成することができます。

また、URLを共有することで共同編集やコメントができ、コミュニケーションコストを最小限に抑えたスピーディーなデザイン制作が可能です。

WebデザインでFigmaを使用するデメリット

Figmaは初心者でも簡単な操作でデザインを作成できますが、Photoshopほどの高度なデザインを作るのは困難です。

デザイン制作のメインはFigmaで行う場合でも、部分的に凝ったパーツだけPhotoshopで作るなどの工夫が必要です。

Figmaは現在日本語表示には非対応なので、日本語で使いたい場合は専用プラグインを使用する必要があります。（2022年3月にFigma日本法人が設立され、今後日本語対応などのローカライズが行われる予定。）

また、有料プランを利用する場合、支払いは個人ではなくチームごとに自分を含めた編集者の人数分だけ発生し、チーム単位でまとめて支払う必要があります。

余分な出費が生じないよう、プロジェクトを整理して使用する必要があります。

おすすめの使い方

Figmaによってチームでデザインを共有することで、デザインの初期段階から非デザイナーのメンバーも携わることができ、意識や方向性を統一できます。

チームやクライアントと共有しながら打ち合わせをするという使い方も効率的です。

その場でフィードバックを受けながら修正できるため、修正の指示や対応などの負担が軽減されます。

出典：Unsplash https://unsplash.com/photos/7uSKXpksCKg

まとめ

Webデザインツールのうち、Photoshop、XD、Figmaについてご紹介しました。

現在のトレンドはXDとFigmaですが、それぞれに特徴があるため、デザインのジャンルや制作環境、チームの体制などに合ったツール選びが必要です。

foriioではサービス開発をメインに行なっているため、開発者などデザイナー以外のスタッフとの連携がとりやすいFigmaを利用しています。

これまでにFigmaを活用したことがない方でも大丈夫。Figmaを活用したWebデザインやUIデザインに興味をお持ちの方は、ぜひforiioに応募してみませんか？

みなさんからのお問い合わせをお待ちしています。