ここまで、デザインの基礎を体系的にまとめて来ましたが、そもそもUIデザイナーが身につけておきたいスキルとは？ということで今回はまとめてみました。
以前、デザイナーという職種についてとかWebデザイナーとUIデザイナーの違いについてといった記事を書いているため、おおまかな概要は書いてきたつもりですが、もう少し細かくスキルという点に着目して書いてみたいと思います。
※Adobe XDに関しては、2023年1月に単体プランの販売を終了すると発表されたため、今回の説明からは割愛します
グラフィックデザインツールとUIデザインツール
様々な言い方があるのですがここでは、画像の作成や加工、アイコンやロゴ作成などをするツールをグラフィックデザインツール（Adobe PhotoshopやAdobe Illustratorなど）とし、UIデザインやワイヤーフレーム作成に特化したツールをUIデザインツール（Sketch、Figmaなど）と呼んでいます。
必ずしも上記のツールを使用して作成しないといけないということではなく、Adobeアカウントを持っていない方であれば、他のグラフィックデザインツール（KritaやGIMPなど無料のものもある）を利用することもできます。Sketchは英語版のみなので少し難易度が高いかもしれませんが、Figmaに関しては無料で始められるので、「独学で勉強するUIデザイナー」が何のツールから学ぶべきか悩まれているようであれば、全て無料で試してみて必要に応じながら課金すると言うことも検討したらいいのではないかなと思います。
Adobe Photoshopをスキルとして身につける
Photoshopは画像や写真の加工だったり、画像同士の組み合わせでまったく別の画像に仕上げたりと、リッチな加工〜ビットマップの書き出しに特化したグラフィックデザインツールですが、アセットとよばれるデザインに繰り返し使えるようなスタイルやコンポーネントをCCライブラリに保存することで、Adobe系の他のツール（Adobe IllustratorやAdobe XDなど）で流用することができるのが特徴です。
写真加工では色の調整や、写真から背景を切り抜いたり、不必要な要素を削除したり、画像のサイズをトリミング（切り抜き）したりします。また、画像と画像を組み合わせて新しい画像を生成したり、文字や図形を組み合わせることで新たな画像や装飾などを作ることもできます。
Adobe Illustratorをスキルとして身につける
Illustratorは、Photoshop同様グラフィックデザインツールと呼ばれるものですが、ロゴやアイコン、イラストを作って印刷のもとになる版下まで作成できるベクターベースでデータを作成できるデザインツールです。
ベクターベースのため、Illustratorでサイトデザインをすることも出来るようですが、PhotoshopもIllustratorもどちらかというとサイトで使用する素材やパーツ作りに特化させ、サイトデザイン自体は後発であるSketchやFigmaなどのUIデザインツールで仕上げるのが一般的です。
Sketchをスキルとして身につける
SketchはUIデザインやワイヤーフレーム制作に特化したUIデザインツールとして2010年から普及してきました。主にWEBサイトやモバイルアプリなどのデザインを作成しますが、プラグインやUIキットが豊富で、ベクターベースのためデータの軽さがポイントです。
Sketch内でデザインパーツをそれぞれシンボル化したり、共通のスタイルガイドを外部ファイルから読み込むことで、複数人と作業を分担していても一気に修正対応ができるなど、便利な機能があります。
Macでしか使えない点やAdobe系列でのアセットなどの互換性がないことがデメリットとしてはありますが、2018年からプロトタイプ機能も単体で使えるようになっており、画面遷移時の画面が切り替わる際のアニメーションやヘッダーやフッターを固定させるなど、簡易的な動きまで見せることが出来るので、複雑なインタラクションを見せることにこだわらなければSketchでも十分使いやすいと思います。
Sketchで作ったデータを他のコーダーやエンジニアなどに引き渡す際、ZeplinというUIの仕様をブラウザ上などでも確認出来るツールと併用するのが一般的です。SketchのデータをZeplinにアップロードするにはプラグインを使ってアップしますが、ここ数年社内でSketchを使ってみて、Figmaなどのほうがいちいちプラグインを通してアップロードする必要がなく、複数人でデータを同時編集が出来る点、プロトタイピングツールとしての機能面の高さから、徐々にFigmaに移行しようという結論になっています笑
Figmaをスキルとして身につける
UIデザインツールとしては、私はSketchをこの3年半くらい使ってきましたが、その前はAdobe XDを使っていました。XDは前述した通り2023年1月に単体プランの販売を終了すると発表されており、Adobeは昨年Figmaを買収しているため、今後Adobe XDはFigmaに統合されるものとみられます。そのため、今回の説明からは割愛しようと思います。
Figmaも基本的にはSketchと変わらず、UI/UXデザイン制作に特化したデザインツールとしてワイヤーフレームやWEBサイトデザイン、モバイルアプリなどのデザインを作成するものですが、デザインファイルをリアルタイムで同時編集・同時閲覧することができる点が便利です。また、SketchのようにZeplinにいちいちアップする手間がなく、コーダーにviewerとしてアクセスしてもらうだけでよいため、効率化もはかれます。
無料で1アカウント（3プロジェクト）まで作成でき、ブラウザ上で簡単にデザイン作成を始められますが、ブラウザ上ではGoogleフォントがベースのため、ローカルのフォント（例えば自分のPC環境だけにいれている、Webサイトで表示させたいフォントセット）を使うためにはプラグインを導入する必要があります。その手間を省くためには、FigmaのデスクトップアプリをDLさせて使用することもできますが、ローカルフォントを他の作業者（デザイナーやコーダー）とも共通で使用する必要があります。
日本語フォントのテキストボックスの余白がちょっとおかしいなどのデメリットはありますが、Adobe XDの機能（アセットの互換性とか）もゆくゆくはFigmaで使っていけるようになるでしょうし（？）、ここ何年も繰り返されてきたUIデザインツール何がいいのか問題は、一旦Figmaに軍配が上がった、とみてもいいのかなと思っています。
結論：Figmaしか勝たん
なぜ以前はAdobe XDを使っていたのに、ここ数年Skechを使っていたのか、という点ですが、転職したら社内で使っていたツールがそれだったということだけですね・・
正直Adobe XDで共通アセットを使ったりコーダーへのやり取りが楽だったこともあり、Sketchを学び直す点には当初葛藤がありましたが、時代によってUIデザインツールを使い分けていく必要性はあるなと思っているのでわりとライトに乗り換えていました。が、Adobeが推し始めた以上はFigmaしか勝たん、といった流れでしょうかね 笑（今年の後半くらいになったら全然違う状況になっている可能性は全然）
コメント