こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。
アプリやWEBサイトの制作に特化したUIデザインツールは、現在様々なものが開発されています。
これからUIデザインツールを試す方にとっては、種類も多い為何を使えば良いか迷うことも多いのではないでしょうか。
今回はおすすめのツールを3点に絞り、それぞれのツールの特徴をご紹介したいと思います。
そもそもUIデザインツールとは？他のデザインツールと何が違う？
WEBデザインするためのツールと言えば、ひと昔前まで、PhotoshopやIllustratorが主流でした。
しかし、徐々にレスポンシブサイトやアプリデザインにも対応できるツールが求められるようになり、現在ではたくさんのUIデザインツールが開発されています。
UIデザインツールの大きな特徴は、まずコンポーネント機能やプロトタイプ機能があることです。
プロトタイプでは挙動や使用感を検証することができます。これらは、IllustratorやPhotoshopなど従来のデザインツールには無い便利な機能です。
また、アニメーションを作成することも可能です。
分業制やチームでサイト制作を行なっている場合、複雑な挙動を言葉で説明するのはなかなか難しいものがありますが、デザインの段階でアニメーションを確認できれば、お互いスムーズにイメージを掴むことが出来ます。
その他、便利な機能として「コメント機能」があります。
デザインのフィードバックを貰いたい場合、従来の方法であればデザインデータを共有した後にExcelなど別のファイルに修正点をまとめてもらう必要があります。「コメント機能」はURLでデザイン共有し、画面に直接コメントを書き込むことが出来ます。この機能により、フィードバックを行う側も受ける側も余計な手間が省けます。また、コメントが書き込まれると通知が届くため、やりとりもスムーズに行うことが出来ます。
UIデザインツールの難点として挙げられるのは、画像を補正したりアイコン等細かいパーツを作り込むことに関しては不得意な部分があるという事です。現状、全ての作業を１つのツールで賄うのは難しいので、アイコンの作り込みはIllustrator、画像補正はPhotoshopで行う等、分けて制作することになります。
これらの機能は、これからご紹介する3つのツールにも装備されています。今回は、共通する機能の紹介は省き、各ツールごとで特徴的な機能を紹介していきたいと思います。
1. Sketch
「Sketch」はUIデザインツールの中でも歴史が長く、その先駆けとして代表的なツールです。当初はUIデザイン用に開発されたものでは無かった様ですが、いち早くUIデザインに特化した機能を装備した事で注目を集めました。操作性の良さが人気のツールです。
sketchの特徴
Mac専用である
SketchはMac専用になります。Windowsで使用することは出来ません。
動作が軽い
アプリや大規模案件では、たくさんのアートボードを扱うことになります。
Sketchは、たくさんアートボードを作成しても重くならず、スムーズに動きます。
直感的に扱うことができる画面
何となく「こうすればこうなる」というのがイメージしやすいUIになっているので、デザイナーでなくとも簡単に扱うことができます。ただ、日本語対応しておらず全て英語になってしまうため、慣れるまでは違和感があるかもしれません。
カスタマイズ機能
ツールバーは自分流に使いやすくカスタマイズすることが出来ます。よく使う機能を表示させたり、好きなように並び替えを行うことが可能です。
プラグインが豊富
Sketchは他のUIデザインツールに比べ、機能を拡張させるためのプラグインが豊富にあります。 sketchの場合、アニメーションは標準機能では作成出来ませんが、プラグインを導入する事で可能です。
2. Adobe XD
「Adobe XD」はAdobe社が提供しているUIデザインツールです。他Adobeソフトとも連携が可能で汎用性が高く、人気があります。IllustratorやPhotoshopと比べると直感的に操作できるため、デザイン初心者でも使いやすいツールです。
Adobe XDの特徴
Mac、Windowsで使用可能。基本的に無料。
「Adobe XD」はMac・Windows両方で使用可能です。また、期間の縛り無く無料で全ての機能を利用することが出来ます。ただし、無料版の場合は共有数や書き出し回数に制限があります。
リピートグリット機能
記事一覧ページの様に、同じデザインやオブジェクトを繰り返す場合に使える機能です。通常は一つづつコピペで並べていくことになりますが、リピートグリット機能を使えば自動でリピートしてくれる為、一瞬で出来上がります。
パーツをアセットパネルで一元管理
ボタンなど共通パーツを使い回す時に便利な機能です。使い回すパーツをシンボル登録しておけば、デザイン変更した際も全てのページに反映されます。 sketchでも同じ機能がありますが、XDではアセットパネルで一元管理することができ、より使いやすい画面となっています。
レスポンシブサイズ変更
左右上下のマージンを保ったまま、素早くリサイズできる機能です。 sketchでこの様な機能はありませんが、プラグインを導入すれば可能です。
自動アニメーション、3D変形
自動でアニメーションを作成することが出来ます。また、オブジェクトに3D表現を加えることも出来るため、奥行きのあるデザイン表現が可能です。
3. Figma
「Figma」は WEB上で作業するデザインソフトである為、他ツールと違いダウンロードやインストールが不要です。アカウントを作成する必要がありますが、基本ネット環境さえあればアクセスが可能です。
Figmaの特徴
共同編集が可能
Figmaではリアルタイムで共同編集を行うことが可能です。
複数人でデザインする場合でも、１つのワークスペースで共同作業することが出来るため、効率的に作業を進めることが出来ます。
作業者の進捗状況を確認できる
ブラウザ上でデザイン作業を行っている為、誰でも作業者の進捗状況を確認することが出来ます。コロナの影響でリモートワークが当たり前となっていますが、遠く離れていても相手の状況を確認できるのは便利です。
ファイルの受け渡しが簡単
Figmaでは、編集されたものが常に最新となります。クライアントに最新データを渡す場合、XDやSketchではファイルの受け渡しが発生しますが、 Figmaの場合、URLを共有するだけなので他のツールに比べ共有が楽です。
まとめ
今回はUIデザインをする際におすすめのツール「sketch」「Adobe XD」「Figma」3点の特徴をご紹介しました。3つともUIデザインに必要な機能は装備されているので、基本どれを使っても問題ありません。ただ、デザイン環境や作業人数などにより使いやすいツールは変わりますので、今回ご紹介した特徴を参考に選んでみてはいかがでしょうか。
WEB制作でお悩みの方はファストコーディングにお任せください！
ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。
お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。
