※記事内に商品プロモーションが含まれる場合があります
- 未経験からWebデザイナー、UI/UXデザイナーを目指しています
- デザインツールを使うのは知っているけど、どれから習得したらいいかわからない（Figma、Photoshop、Illustrator、Adobe XD、Sketch…）
- 結局、どのデザインツールを使うのが正解なの？
- Webデザイン、UIデザインにおける、それぞれのツールの役割がなんとなくわかるよ
- 個人的には①Photoshop ②Illustrator ③Figmaの順に習得するのがオススメ。
詳しく見ていきましょう。
はじめに
転職当時のぼく
Aさん
Bさん
Cさん
転職当時のぼく
Webデザイナー、UI/UXデザイナーになるにはIllustratorとPhotoshopのスキルは必須！とよく言われますが、
Webデザインのツールって結構たくさんあって、どれから身に付けたらいいのか迷ってしまいがちです。
（ぼくも転職当時、結構迷いました）
このページでは、Webデザイン、UIデザインでのデザインツールの使い方や、転職においてどのツールを習得しておいたらいいのかについてまとめました。
何かしら参考になれば幸いです。
Webデザイン、UIデザインはどのツールで行うのがよい？
基本的にはどのツールで行ってもOK
結論から言うと、Webデザイン、UIデザインはどのデザインツールでやっても基本的にはOKです。
要はWebサイトのデザインレイアウト（モックアップといいます）を作り、パーツ（ボタンやアイコンなど）を画像出力できればいいので、
IllustratorでもPhotoshopでも最低限の役割は担えるのです。
今はFigmaが圧倒的にメイン
とはいえ、現在ではUIデザイン専用のツールでWebデザイン、UIデザインを行うのが主流で、その中でもFigmaが圧倒的なメインストリームになっています。
Webデザイン、UIデザインはDTPデザインと違い、次のような特徴があります。
- アートボードの数がすごく多くなる
ページが多かったり、表示パターンごとにデザインを作ったりするため。
- 同じパーツを使い回す
ボタンやアイコンなど、同じデザインパーツを何度も使い回します。
- 大きさや間隔などのレギュレーションを決める
「画面端からコンテンツまでの余白は24pxにする」など、ピクセル単位でかっちりと決めます。
- ブラウザでの表現を意識する
サイト上での挙動や画面遷移、コーディングなどを意識しながらデザインします。
こうした特徴をふまえ、Webデザイン、UIデザイン向けに最適化されたデザインツールがUIデザインツールです。
パーツの使い回し（コンポーネント）や、画面遷移を再現するプロトタイプ機能があり、実際のWebサイトに近い形でモックアップを表現することができます。
Adobe XDでプロトタイプを作成した様子。実際のWebサイトのような挙動を再現できます。もちろんFigmaでもできます。
中でもFigmaが選ばれているのは、次のような理由からです。
- 無料プランから始められる
- 複数人での共同編集に強く、ツールも充実していて、操作もしやすい
- エンジニアがFigma上でサイズや色を確認でき、受け渡しがスムーズ
- AIを活用した機能も充実していて、デザイン〜実装までを簡単かつシームレスに進められる
ぼく
デザイナーだけでなく、ディレクターやエンジニアも同じFigmaファイルを見ながら仕事を進めています。
Adobe XDやSketchは一昔前のツールに
数年前までは、Adobe XDやSketchも、UIデザイン専用のツールとしてよく使われていました。
（ぼくも以前はAdobe XDをメインで使っていました）
ただ、最近はほとんど使わなくなり、昔のデザインデータを確認するときだけAdobe XDを立ち上げる、みたいな感じになっています。
特にAdobe XDは、Adobeが新機能の追加を止めていて（メンテナンスモード）、今後の進化は見込めません。
SketchもMac専用のため、WindowsユーザーやMac以外の人とのやり取りでは使いにくいです。
これからUI/UXデザインを学ぶ方は、Adobe XDとSketchはスルーしてしまって大丈夫です。
ぼく
UIデザインツールが主流になる前はIllustratorやPhotoshopでWebデザインが行われていたようです。特にPhotoshopは画像加工やピクセル単位のレイアウト調整、画像書き出しまでできるため、IllustratorよりもWebデザインに適していました（ちょっと昔のレッスン動画とかを見ると、PhotoshopでWebデザインを進める光景が散見されます）。
ただし個人的には、IllustratorやPhotoshopでWebサイトの全ページをデザインするのはオススメしません。ファイルの容量がむちゃくちゃ重くなるし、デザインの管理や共有がけっこう大変だからです。
ぼくも以前Photoshopでサイトのモックアップを作りましたが、ファイルのデータサイズが500MBくらいになってPCが動かなくなりました。
IllustratorやPhotoshopも使っている
Figmaが主流とは言いつつも、
デザインパーツを作成する時にはIllustratorやPhotoshopの力が今も必要です。
Figmaだけだと、次のようなことはまだ難しいです。
- 画像の本格的な加工（細かい切り抜き、レタッチ、合成など）
- パスやオブジェクトの細かい加工（テキストの変形、ロゴ作成など）
- ターンテーブルなどの素材展開、生成
ですので例えば、
このような場合はPhotoshopで画像の切り抜きをしなければいけないですし、
このような場合はIllustratorでオブジェクトを作成した方が圧倒的に楽です。
（Figmaでも頑張れば作れますが、かなり大変だと思います。）
ぼく
最近は、Figmaのパーツ作成の機能もかなり充実してきました。
アイコン作り、画像の簡単な色調整などはFigmaの中でできますし、AIに作らせることもできます。
以前に比べると、Figmaだけで完結することが増えた印象はありますが、
PhotoshopとIllustratorと比べると、やはりまだまだ手の届かないところがあります。
この２つのツールは、まだしばらくはお世話になると思います。
あまり頻度は多くないかもですが、ロゴの作成はIllustratorで行う必要があります。
IllustratorはFigmaよりもオブジェクトの加工に優れていて、図形の整形などを自由に行うことができます。
またロゴは印刷物などで使う場合があり、CMYKでカラー指定をしたり、入稿時に解像度の調整などを求められますが、Figmaはこうしたことに対応できません。IllustratorはもともとDTP向けのデザインツールとして使われてきており、こうした印刷向けの調整もできますし、RGBからCMYKへのカラー変換もできます。
転職ではどのツールを習得しておけばいいのか？
IllustratorとPhotoshopは絶対身に付けておく
Webデザイナー、UI/UXデザイナーへの転職に際しては、IllustratorとPhotoshopは絶対に習得しておいてください。
この２つはデザイン界では王道中の王道ツールなので、まずはこれらの使い方をマスターするのが先です。
一方、FigmaなどのUIデザインツールは後から習得するのでも大丈夫です。
UIデザインツールも操作方法はIllustratorやPhotoshopと似ているので、IllustratorとPhotoshopが扱えるようになれば習得はそんなに難しくないはずです。
ぼく
デザイナーのスキル的にも、この２つのツールは一通り使いこなせないといけません。
習得はPhotoshopから始めるのがオススメ
超個人的な意見ですが、デザインツールの習得はPhotoshopから始めるのがオススメです。
理由は、画像加工に早く慣れておいた方が色々と便利だからです。
WebデザインやUIデザインでは、メインビジュアルやバナーを制作する際、高い確率で画像の加工作業が必要となります。
先にPhotoshopで画像加工のスキルを身に付けておけば、スムーズにデザインを進められるかと思います。
画像加工はだいぶ生成AIで誰でもラクにできるようになりましたが、万能ではありません。また、ディテールを詰めようとすると限界があります。
生成AIに頼りすぎると、実務でうまく生成できなかった時に、自分でリカバリーができず詰みます。
デザイナーとしては、まずは自分である程度画像加工できるようになった上で、生成AIを扱うことをおすすめします。
どこで習得したらいいの？
Adobeには公式のチュートリアルサイトがあり、無料動画を見ながらツールの使い方を勉強することができます。
ポイントは、動画や記事を見ながら実際にツールを動かしてみることですかね。
すべてのテクニックを覚える必要はないですが、一通りやれば基本的な操作方法は身についているかと思います。
ぼく
上で挙げたAdobeのチュートリアルはDTPのグラフィックデザイナー向けの内容も入っています。Webデザイナー向けの講座としては、ユーチューブに挙がっている「独学でWebデザイン」シリーズもオススメです。
ぼくはPhotoshopの講座しか見ませんでしたが、Webデザイン向けの画像の書き出し方法など、とても参考になりました。
また、Adobeではないですが、Figmaのチュートリアルサイト（https://help.figma.com/）もあるので、よければどうぞ。
まとめ
- Webデザイン、UIデザインは基本的にどのデザインツールでやってもOK。
- 今はFigmaが圧倒的にメイン。IllustratorとPhotoshopも、画像加工やデザインパーツ作成で、今もよく使う。
- 転職に際してはIllustratorとPhotoshopは必ず身に付けておく。デザイン界の王道ツールなので。
- 特にPhotoshopは画像加工、バナー制作でよく使うので、しっかり習得しておくべし。
以上でWebデザイン、UIデザインにおけるデザインツールのお話はおしまいです！
ぼく
