目次
あらすじ
ウェブデザインをする上で欠かせないのがウェブデザイン用ツールです。
一昔前までは、ウェブデザインをする際にPhotoshopやIllustratorが主流でしたが、今では多くのウェブデザイン用ツールが世に出てきました。
今回はそんなウェブデザイン用ツールの中でも人気の高いツールである
- Adobe XD
- Sketch
- Figma
の３つをそれぞれ比較していき、それぞれにどのようなメリット・デメリットがあるのかをご紹介していきたいと思います。
ウェブデザイン用ツール
ウェブデザイン用ツールとはウェブデザインに特化したソフトウェアのことを指します。
例えばPhotoshopやIndesignなどは画像加工だったり、紙媒体に特化したソフトウェアです。
今回はそんなウェブデザイン用ツールの中でも特に人気が高く、多くのユーザーに利用されている
- Adobe XD
- Sketch
- Figma
をピックアップしてご紹介していきたいと思います。
それぞれどのような機能があり、どんなメリット・デメリットがあるのかなどを徹底比較していきます。
Adobe XD(アドビ・エックスディー)
AdobeXD(アドビ・エックスディー)とはAdobe(アドビ)が提供しているウェブサイトやアプリのUI/UXのためのデザインツールです。
Adobe XD(アドビ・エックスディー)では大まかに分けて
- デザイン作成
- プロトタイプ作成
- コメント・共有
の3つのことができるデザインツールです。
デザイン作成
１番の目的であるデザイン作成ですが、Adobe XD(アドビ・エックスディー)ではいくつか便利な機能があります。
まずはグリッドの反復です。
こちらはボタン一つをクリックするだけで、一つの要素を繰り返し使用できるようになります。
そしてレスポンシブ対応です。
ウェブデザインは基本的にデスクトップサイズを意識して作成し、スマホバージョンは別で作成するのが主流でした。
しかし、Adobe XD(アドビ・エックスディー)では、こちらもボタン一つで、デスクトップ用に作成したデザインをレスポンシブに変更することができます。
プロトタイプ作成
プロトタイプ作成では、実際のウェブサイトのように動作を加えることができます。
例えば、トップメニューのボタンをクリックするとページ下のリンク先に飛んでくれるといったように、ボタンにリンクを貼ることができます。
また、ページ遷移時にアニメーションを加えることもできます。
コメント・共有
コメント・共有ではクラウドに保存したドキュメントを制作チームや職場の人たちと共有したり、コメントしあうことが可能です。
自分のデザインを共有した人が編集することもできます。
Adobe XD(アドビ・エックスディー)ではGoogleシートを同期させることができ、テキストをそのままデザインに反映させることができます。
Adobe XD(アドビ・エックスディー)のメリット・デメリット
メリット
- Adobe Creative Cloud に登録していれば、いくらでも使うことができる。
- プラグインの種類が豊富にある
- 日本語対応している
デメリット
- Adobe XD単独で購入するとなると、月額約1300円かかってしまう
Adobe Creative Cloudをまだお持ちでない方はこちらから加入いただけます。fa-arrow-circle-down
Sketch(スケッチ)
Sketch(スケッチ)とはオランダのBohemian Codingによって開発された、デザインツールです。
Sketch(スケッチ)は他のツールとは異なり、MacOS用のみに開発されました。
Sketch(スケッチ)では、基本的にAdobe XD(アドビ・エックスディー)同様にデザイン作成、プロトタイプ作成、コメント・共有の3つが可能となっています。
デザイン作成
基本的にはAdobe XD(アドビ・エックスディー)と同じ機能が使えますが、Sketch(スケッチ)の方が機能の数が多く、UIに至ってはSketch(スケッチ)の方が使いやすい印象があります。
トップメニューバーはカスタマイズできるので、自分の好きな機能を表示させることができます。
残念ながら日本語対応はしていませんが、操作自体に慣れてしまえば問題なく使えるかと思います。
プロトタイプ作成
Sketch(スケッチ)最大の特徴に、Sketch Mirror(スケッチ・ミラー)というものがあります。
Sketch Mirror(スケッチ・ミラー)とはSketchで作成したデザインを実際のiPhone上で操作できる機能のことを指します。
デザインを実際のスマホで見れることはかなり大きなポイントで、いくらスマホ用のデザインをスマホサイズで作ったからといって、実際のスマホで見てみると多少のズレがあったりします。
そういったことをクライアントに納品する前にチェックしておくことは重要ですので、このSketch Mirror(スケッチ・ミラー)は非常に便利な機能と言えるでしょう。
コメント・共有
クラウド上でデザインの共有が可能で、Zeplinなどのデザイナー用のサイトとの連携もできます。
Sketch(スケッチ)のメリット・デメリット
メリット
- 30日間は無料で使うことができる
- プラグインの種類が豊富にある
- PhotoshopやIllustratorでSketchファイルを開くこともできる
- 実際のiPhoneでデザインを確認できる
- 機能が豊富
デメリット
- MacOSのみでしか使えない
- 年間99ドル(約12,000円)のライセンス料を支払わなければいけない
- 日本語対応が完全でない
Figma(フィグマ)
Figma(フィグマ)とは2016年に株式会社Figma(フィグマ)によって作成されたウェブブラウザベースのデザインツールです。
ウェブブラウザベースのツールなので、Sketch(スケッチ)やAdobe XD(アドビ・エックスディー)とは異なり、どのOSでも使え、自分のパソコンじゃなくても使えるのが魅力です。
公式には日本語バージョンはありませんが、Google ChromeでFigma(フィグマ)を使う際，日本語化の拡張子があるのでそちらを使用することをお勧めします。
日本語化拡張子のリンクはこちらfa-arrow-circle-down
Figma(フィグマ)日本語化拡張子
デザイン作成
UIはシンプルで使いやすく、初心者の方でも慣れるまで時間はかからないはずです。
基本的な操作はSketch(スケッチ)やAdobe XD(アドビ・エックスディー)と同じで、最低限の機能は備わっています。
プロトタイプ作成
こちらはブラウザベースにもかかわらず、プロトタイプの作成が可能です。
他のデザインツール同様ページ遷移が可能で、アニメーションの実装もできます。
コメント・共有
デザイナーの間で最も有名なチャットツール、Slack(スラック)との互換性は抜群で、デザインの共有や編集をSlack(スラック)上で行うことができます。
また、サイトのURLを相手方に送るだけでデザインの共有ができ、設定次第では編集してもらうことも可能です。
Figma(フィグマ)のメリット・デメリット
メリット
- ウェブブラウザ上で動かすことができるので、OSを気にする必要がない
- 個人での利用のみなら無料で利用できる
- 有料プランではチームでデザインをシェアすることができる
- 自分のパソコンじゃなくても使える。
- シンプルな作りなので、初心者はとっつきやすい。
デメリット
- Organizationプランが高額
- 機能が他のデザインツールに比べて少ない
結局どのデザインツールがベストか
結論どのデザインツールがベストなのでしょうか。
私の意見では正直これが一番いい！っていうものはありません。というのもどれをとっても良いところがあるからです。
ただ、会社の規模だったり、金額、個人での利用など、用途によってはベストなものは変わってきます。
すでにAdobe Creative Cloudに加入している方は、絶対Adobe XD(アドビ・エックスディー)を使った方がいいです。
他のAdobe製品とも相性がいいですし、Adobe Creative Cloudに加入さえしていれば、実質無料で利用できます。
Adobe Creative Cloudをまだお持ちでない方はこちらから加入いただけます。fa-arrow-circle-down
デザインにこだわりたい、機能が多い方がいいといった方はSketch(スケッチ)がベストです。
お金をかけず個人のみで利用したい場合は、Figma(フィグマ)が断然おすすめです。なぜなら個人での利用は無料だからです。
しかし、Figma(フィグマ)はデザインのシェアがしやすく、チャットツールSlack(スラック)との互換性も良いので、大規模な会社やチームで使う場合にもおすすめできます。
まとめ
いかがだったでしょうか。
これら3つのデザインツールは今現在世界で最も使われているデザインツールです。
それぞれのメリット・デメリットを考慮して自分にあったデザインツールを見つけてみましょう。
