【2022年版】何使ってる？Webデザイン作成ツールおすすめ4選の特徴をご紹介！
Webデザインを制作する時どのツールが一番いいでしょうか？
制作ツールとしてよく挙げられるのはPhotoshop、XD、SketchそしてFigmaです。
私がWebデザインをする時使ったあることがあるツールはIllustrator、PhotoshopそしてXDです。
Photoshopでデータ納品が必要などの特殊な状況ではない限り最近はXDだけを使っていますが、他のデザイナーの方々はどうでしょう。
今回はそれぞれのツールの長所短所そして世界のデザイナーに人気があるツールについて紹介させていただきます！
世界各国のデザイナーが多く使っているデザインツール
世界各国のデザイナーに一番人気のあるツールはなんでしょう？
uxtools.coは毎年世界各国のデザイナーを対象にアンケートを実施していますが、去年約3,100名のデザイナーを対象に行った2021デザインツール調査によると、UIデザインツールの中で1位はなんとFigmaでした！Figma他の項目においてもいい評価をされていますね。
2021 Design Tools Survey | UX Tools
- 1位 Figma
- 2位 Sketch
- 3位 Adobe XD
- 4位 Adobe Illustrator
- 5位 Adobe Photoshop
WindowsよりMacユーザーの割合が多いことからSketchの順位が高いのは理解できますが、わずかな差とはいえIllustratorがPhotoshopと同じくらいに使われていることに驚きました！
2021 Design Tools Survey | UX Tools
macユーザーとWindowsユーザーそれぞれの人気ツールの順位を見ても両方Figmaが1位を占めていますね。
周りからもFigmaについて結構便利だと聞きますが、この結果を見て改めてFigma使ってみようと思いました！
デザイン制作ツールの長所・短所
Photoshop、XD、SketchそしてFigmaの中で一番馴染みがあるツールはおそらくPhotoshopだと思います。
主にPCのWebサイトだけを制作していた時代にはPhotoshopとIllustratorがメインツールでしたが、モバイル用サイト、アプリ、タブレットなど多様なサイズのデザイン制作が必要になってからはそれに適したベクター基盤のXD、SketchなどのUI制作ツールが登場しました。
Photoshop (Adobe)
UI制作ツールが登場してから、PhotoshopでWebデザインを制作する割合は減ったのでしょうか。
私の周りではPhotoshopを使い続けているところとXDなどのツールに変えているところなど様々です。
歴が長い会社は、今まで制作してきたデザインデータがPhotoshopなので他のツールに変えることに躊躇するかもしれませんね。
長所
- 多様な編集が可能で、特に画像の編集が手軽にできる。
- テキスト行間のパーセント指定ができる。
- IllustratorなどAdobeソフトと連携ができる。
短所
- コンポーネント機能がないので、共通箇所を修正する時には全てのレイヤーに修正作業が必要。
- UIデザイン用には機能が多すぎるので他のソフトに比べて重い。
- モバイルデザインは2倍3倍などの倍数で作業をするので、数字の選択に制限がある。
XD (Adobe)
XDは一番遅れて登場したUIツールですが、Adobe製品なのでもしPhotoshopからの乗り換えを考えているなら一番接近性がいいツールではないかと思います。
前までは無料で使えましたが、残念ながら現在は有料になっています。しかし、XDユーザーとして有料になった分どんどんいい機能が追加されるのではないかと楽しみにしています。
長所
- 軽い！（PhotoshopでWebデザインを制作していた方ならXDの軽さに驚くはずです！）
- Adobeソフトとの互換性がよく、連携ができる。
- コンポーネント機能で共通箇所の管理が便利。
- プロトタイプが作れる。
- 共同作業ができて、リンク共有機能でコメントのやり取りができる。
- Adobeの「コンプリートプラン」の利用者なら追加決済なしで使える。
短所
- 画像編集ができないので、Photoshopなどの編集ツールと連携が必要。
- 他のUIツールに比べて機能が少ない。
料金 （XDの料金ページはこちら）
- XDだけのプラン：1,298円/月
- コンプリートプラン：6,480円/月
Sketch
Sketchはオランダの Bohemian Coding社によって開発されたUIツールです。
XDとFigmaより一番最初(2010年)に登場したUIツールで、「ベクター基盤」「複数のアートボードを並べられる」などUI制作に必要とされる要素を最初に提示した革新的なツールです。
SketchはmacOS専用なので、macユーザーに愛用されていますね。
長所
- 軽くて、ツールの容量が少ない
- iOSのデザインテンプレートを提供しているので、参考にできる
- コンポーネント機能で共通箇所の管理が便利。
短所
- macOSしか対応していないので、Windowsなどでは使えない。
- 単純なプロトタイプの作成しかできない（プラグインを使わないといけない）
- コンポーネントの管理がアードボード単位なので他のツールより少し手間がかかる
- Photoshopのように細かい画像編集ができない。
- Standardプラン：9ドル/月
Figma
Figmaは現在一番使用率が高いUI制作ツールになります。その理由として挙げられるのが「共同作業に最適したツール」ということです。
コロナ禍の中、リモートワークが増えるなど働き方が大きく変わってしまいました。Figmaは1つのデータの同時作業はもちろんリアルタイムで意見交換ができるので同じオフィスで働いていなくても業務に支障がないらしいです。
長所
- Web基盤ツールなのでソフトの設置が不要。ネットに繋がっていればどのパソコンでも作業ができる。
- Web上に保存ができるなど容量の負担が少ない。（アプリもある）
- 共同作業ができて、リアルタイムでコメントのやり取りができる。
- 無料プランがある。（制限はある）
- Hi-Fiクオリティーのプロトタイプの作成が可能。
短所
- Web基盤ツールなので、Figmaのサーバーが落ちたら使えない。
- ショートカットや機能がAdobeとは違うので、慣れるまで時間がかかる。
料金 （Figmaの料金ページはこちら）
- Starterプラン：無料（制限あり）
- Figma Professionalプラン：12ドル/月
- Figma Organizationプラン：45ドル/月
まとめ
Webデザインツールについてそれぞれの長所と短所をまとめてみました！
求めているツールの機能や、勤めている会社のルールや状況によって使っているツールはそれぞれだと思います。
これからツールを変えようと考えている方に役になれたらと思います。
この記事の執筆者
TANE-be Designer
大阪・京都にあるWebサイト制作の株式会社TANE-beのデザイナーが日々の業務で使っている知識や技術を紹介します。