2020年版 Webデザインのツール比較

最初からHTML&CSSを書いて「Webサイト」を作成することはできますが、自分の中にあるイメージを形にしたり、アウトプットをクライアントと共有したりすることは、プロジェクトにおいて必須の工程です。

その工程で必要になってくるデザインツールを比較してみたいと思います。昨今のデザインツールは進化が激しく、実現できることが増えて嬉しい反面、移り変わりのスピードも速くなっています。2020年現在の現場で良く使われる代表的なWebデザインツールを挙げてみました。

Adobe XD

クリエイティブといえばこの会社、というくらい業界のデファクトスタンダードになっているAdobeという会社があります。 Web制作だけでなく、グラフィックデザイン、エディトリアルデザイン、映像編集、写真レタッチ等、クリエイティブを広範囲でサポートしているのが特徴で、それぞれに特化したアプリケーションが用意されています。

その中でも、Web制作やアプリ制作の分野で注目されているのが Adobe XD というアプリケーション。 広く使用されるようになったのは、他の比較対象より遅かった印象がありますが、最近はかなり洗練されてきたと感じています。 シンプルなUIで、使用感は Sketch や Figma と似ていますが、強力なプロトタイピングツールが特徴的です。

• $10 / month
• Mac / Win 対応

1プロジェクトだけであれば無料で使用できます。

Adobe Illustrator & Photoshop

同じAdobeですが、イラストを描いたり写真を加工したりするための高機能なソフトウェアです。 どちらもWebサイト専用というわけではなく、組み合わせてデザインを作成していきます。

グラフィックデザインの世界では長い歴史を持つソフトウェアですので、紙媒体から入ったデザイナーは使うケースが多いのではないでしょうか。非常に高機能 & 多機能なため高価であるのと、学習コストも高い傾向があります。

• $599.88 / year
• Mac / Win 対応

価格は高いですが、こちらの価格にはAdobeのすべてのアプリケーションが含まれています。 プロ用の映像編集ソフトウェアや雑誌媒体に特化したデザインツールも使うことができますので、考え方次第ではお買い得かもしれません。もちろん先述の Adobe XD の利用料金も含まれています。

Sketch

Sketch はシンプルで価格も高くなく、制作の現場でよく使われています。 デザイナーが使用するプロフェッショナルなツールであるのにも関わらず操作が難しくないため、プロダクトマネージャーやエンジニア等も基本的な機能を利用することができます。

サードパーティが提供するプラグインを柔軟に取り入れることができます。予め用意されたプロトタイピングツールもありますが、プラグインによって他社が提供するツールを使用することも可能になっています。

価格と機能のバランスの良いソフトウェアなのですが、Mac 専用であることに注意してください。

• $99 / year
• $79 / year（更新時）

また、30日間の無料トライアルがあるので気軽に始められます。

Figma

Figma の最大の特徴は、共同作業が可能ということです。 チームメンバーがそれぞれ自分のPCでプロジェクトを参照しながら同時に編集することができます。 また、Web上でもファイルを編集することができるので、本当に誰でも好きな時に変更を加えることができます。

使用感は Sketch や XD と似ていてシンプルで直感的です。 プロトタイピングツールは XD ほど強力ではありませんが、十分に業務に使用できるレベルかと思います。

• $12 per / month
• Mac / Win 対応

3プロジェクトまでは無料で使用可能です。無料の場合は編集者が2人に制限されます。

どのツールが良いのか

プロジェクトやチームの状況によりますので、どれが最適なのかはケースバイケースですが、以下は私がそれぞれのツールについて思うことです。

• Adobe XD
  • プロトタイピングツールの進化が凄い。これだけでも使う理由になりそう。
  • $10 / month は Adobe の中では安価で採用しやすい。
• Adobe Illustrator & Photoshop
  • Webデザイン制作だけであれば多機能過ぎる。
  • チームメンバー全員のライセンス購入は負担が大きく、デザイナー専用になりそう。
• Sketch
  • $99 ($79) / year はチームでも採用しやすい。
  • Mac 専用なのが残念。
• Figma
  • 無料で使用できる枠が多いのが嬉しい。
  • 共同作業機能は便利そうだが、実際はあまり使わなそう。

選択は悩むところですが、アニメーションやリアルなプロトタイピングが必要であれば XD、Sketch と Figma はチームメンバーが慣れている方を使うというのが現実的かもしれません。

私個人としては Sketch を使用することが多いですが、プロジェクトによって XD も Figma も使っています。どのツールも基本的な使い方は似ていますので、3つとも使用してみた上で、メインとなるツールを選択すると良いかと思います。