アートボード_1-4

UIデザインツール今どうなっているの??参加レポート

こんにちは!CodeCamp デザイナーの加藤です。
デザイナーのみなさん、デザインツールは何を使っていますか?

Photoshop、Sketch、Figma、XDなど様々なツールがある今、「何を使うのがベストなの?」とお悩み中のデザイナーさんも多いのではないでしょうか。私もそのうちのひとりです。。

CodeCampでは Photoshopをメインツールとして使っているのですが、以下の理由からぼちぼち他ツールへの乗り換えを検討しています。

シンプルに重い
ページ数が多いプロジェクトのときにはこれが割とストレス…

データの共有・管理に困る
Photoshopはデータ自体も重くなりがち…
GoogleDriveで保管なんてやってたらあっという間に容量オーバーです。。
これからデザイナーさんが増えることもあり、データの置き場所や更新方法についても検討しないとそろそろやばい。

以上のような課題感を持ってはいるものの、乗り換え先として何を選択すべきなのか悩ましい…

ということで、「デザインツール何使おう問題」に終止符を打つため、イベント「UIデザインツール今どうなっているの??」に参加してきましたので、備忘録としてレポートにまとめてみたいと思います。


UIデザインツールとは?

現在のUIデザインツールの4強は「Sketch、Figma、Adobe XD、Studio」。
中でもSketchは老舗でコミュニティが大きいこともあり、圧倒的シェア。
最近はFigmaの盛り上がりがすごい。

私も自宅ではSketchを使っていますが、Photoshopと比べて圧倒的に軽いですよね。
アートボードを複数並べての作業も苦になりません。
多くのデザイナーさんがSketchを選択するのも頷けます!

UIデザインツールの特徴

イベントでは、ツールを選ぶ際のポイントとして以下の5項目をあげていました。

1. スクリーンデザイン(UIデザイン)
アートボード、シンボル機能、スタイル、レスポンシブデザイン など
2. コラボレーション
ハンドオフ機能、同時作業、コメント、コード書き出し など
3. プロトタイピング
トランジション、インタラクション、マイクロインタラクション など
4. コミュニティ
プラグイン、チュートリアル、UIキット&素材 など
5. その他
価格、運営会社、バグの少なさ など

これらの項目の中を、「どういう使い方をしたいか」「どのポイントは譲れないのか」、組織の状況と照らし合わせて決定することが大切になりそうです。

UIデザインツール4強の比較

もはやどのプロダクトも基本的な機能は備えており、どの部分に強み弱みがあるかの違い。
それぞれの強み・弱みを見定め、自分の組織の条件と合うツールを見つけよう。

こうして比較すると XD や Studio が少々劣っているようにも見えますが、スピーカーのハフィドさんはむしろ「今後伸びていきそうなのは XD と Studio 」という見方をされていました。

XD、Studioは運営団体(それぞれAdobe、Invision)が大きく資金もあるので、現状で劣っている機能があっても近いうちにアップデートされる可能性が高い

2018年のAdobe MAXでもXDがかなりフィーチャーされていたということなので、XDのアップデートには今後も期待できそうですね!

今後のトレンドなど

デザイン系のツールで今後のトレンドになりそうな機能は「リアルタイムコード」機能。
現在のUIデザインツールも同様の機能を搭載していく可能性が高い。

いわゆる「コーディングなしでサイト作れる」系のツールが増えそう、とのこと。
CodeCampでも、期間限定的な使い方をするページは Wix で作成するなどしていますので、該当機能の恩恵をかなり受けていると思います。

イベントまとめ

イベント参加者の中には、「SketchもFigmaもStudioも使ってる!」という猛者もいれば、「会社の決まりでAdobe製品しか使えない」「Photoshop使ってるけどSketchに変えようかと思ってる」など、様々なフェーズの方がいらっしゃいました。

それぞれ環境の違いはあれど、所属する組織形態や利用目的に応じて必要十分な機能を併せ持ったツールを選んでいくことが重要になりそうです。

まとめとして、今回のイベントで最も印象に残ったお言葉を紹介して、イベントレポートを締めくくりたいと思います。

ツールはあくまでもツール。
本当に優れたデザイナーはWordでも素晴らしいデザインをする。
優れた道具を使えば優れたデザインができるようになるわけじゃない。

はい、本当にそのとおりだと思います… 耳が痛い。
以上、イベント参加レポートでした。

結論:CodeCampでは何使うの?

結論、CodeCampでは
・メイン使いはSketch
・画像編集などはPhotoshop/Illustrator

という棲み分けが今後できたらベストかなぁと思っています。

理由としては、弊社の場合、開発メンバー間の距離が近くコミュニケーションは密にとれるほうだと思うので、コラボレーションやプロトタイプよりもUIデザイン機能に重きをおきたい。ということと、将来的にはバージョン管理に Git Sketch Plugin を使ってみたい!と思ったからです。

ひとまずSketch導入の許可は得たので、近い将来Sketchを導入してみたいと思っています!

余談ですが、今回のようなツールの導入に限らず、私がCodeCampに入社して丸2年、「これやってみたい / 使ってみたい」と手を挙げたことはことごとくやらせてもらってきたな、という実感があります。

デザイナーさんだけでなく、「チャレンジ精神をもって成長していける環境にいきたい!」という方がいたら、ぜひ一度CodeCampに遊びに来てみてくださいね。

お付き合いありがとうございました!

(※記事中の画像は、イベント主催者のハフィドさんご許可のもと掲載しています。ハフィドさんありがとうございました!)


この記事が気に入ったらサポートをしてみませんか?