デザインツールにはいくつか種類があり、それぞれのツールには得意な分野があるため目的に応じて使い分ける必要があります。
またクライアントから納品形式を指定される場合もあるため、どのツールでデザインを作るかクライアントに確認したり事前に共有したりする必要があります。
Figma
Figmaは、Webブラウザ上で使えるデザインツールです。
アプリのUIデザインやWebサイトのデザインを作成することができ、2人以上で同時に編集を行ったりコメントを行ったりすることができるのが最大の特徴です。
無料で始められかつ直感的に操作できるため、デザインの学習を始めたばかりの方にもおすすめのツールです。
ブラウザ上にファイルを保存することもでき、「.fig」という形式で保存されます。
主な特徴
クラウドベース
インターネット上にデータが保存されるため、パソコンが変わっても同じデータにアクセスできます。
ソフトのインストールも不要ですが、使用する頻度が高い場合はデスクトップアプリの使用がおすすめです。
リアルタイムコラボレーション
複数の人が同時に1つのデザインファイルで作業できます。まるでGoogleドキュメントのように、チームメンバーとリアルタイムで共同作業が可能です。
プロトタイプ機能
画面と画面をつなげて、実際のアプリやウェブサイトのような動きを作ることが可能です。
ボタンを押したら次の画面に移動する、といった動作を確認することもできます。
保存が自動
保存をするショートカットキーがなく、上書き保存が自動で行われます
無料プランが充実
無料でもデザイン制作ができるほど、無料でできる範囲が広いことが特徴です。
使用する場面
- コーポレートサイト、LP、ECサイトといったウェブサイトのデザイン制作
- スマートフォンアプリのデザイン制作
- ワイヤーフレーム(サイトのざっくりとした設計図のこと)制作
- チームでのデザイン共同作業
- バナー、リッチメニューの制作
Adobe Photoshop(フォトショップ)
Photoshopは画像加工を得意としているデザインツールです。
写真や画像の編集や色・明るさの調整はもちろんですが、バナーやLPの制作にも使われています。
「フォトショ」、「PS」と略して呼ばれることもあります。
フォトショップのファイル形式は「.psd」です。
主な特徴
ピクセルで編集ができる
フォトショップではピクセルと呼ばれる小さな四角形を編集してデザインを制作していきます。
写真ははピクセル(小さな点)の集まりで構成されているため、Photoshopはこのピクセル一つ一つを編集できるため、写真の細かな修正が得意です。
写真の補正機能が充実している
明るさ、色味、コントラストなど、写真の調整をしやすいことがポイントです。
写真の中に写っている不要な物を除去したりぼかしをかけたりすることも可能です。
レイヤー機能
レイヤーと呼ばれる透明なシートに画像やテキストを載せてデザインを制作することができます。
文字や図形の加工がしやすい
他のツールと比較すると、簡単に文字に影をつけたり文字を立体感のある見た目にしたりすることができます。
使用する場面
- 写真の色補正やレタッチ(修正)
- 合成写真の作成
- バナーのデザイン制作
- ウェブサイト用の画像編集
- LP制作
機能が豊富な分使いこなそうと思うと覚えることが多いですが、写真編集を学びたいな場合は必須のツールです。
また、LPの中でも美容系LPはPhotoshopを使って制作することが多いので、美容系LP案件に対応できるようになりたい場合はPhotoshopは使いこなせることが理想です。
注意点
- 無料では使用できない(月額サブスクリプション制)
- パソコンのスペックがある程度必要（8GBの場合、動作が重たくなることがあります）
- 突然動かなくなったりアプリが終了してしまったりすることがある（こまめな保存が必要です！）
Adobe Illustrator(イラストレーター)
Illustratorはロゴやイラストを作成するためのグラフィックデザインツールです。
Photoshopが写真といった既存の画像を編集することを得意としているのに対し、Illustratorはロゴやイラスト制作と言ったゼロから図形を制作することを得意としています。
Illustratorは、「イラレ」「AI」と略されることが多く、ファイル形式は「.ai」です。
主な特徴
ベクターベースの描画
Illustratorは「ベクター」という数式で図形を表現します。
どれほど拡大しても画像が劣化しないという特徴があります。
パスの編集
「パス」と呼ばれる線や図形を、点と線で自由に編集できます。
滑らかな曲線や複雑な形状も制作しやすいことが特徴です。
使用する場面
- ロゴデザインの制作
- アイコンの制作
- イラスト制作
- ポスターやフライヤーのデザイン制作
独特の操作方法に慣れるまで時間がかかりますが、ロゴやイラストを描きたい場合は習得する価値があります。
注意点
- 無料では使用できない(月額サブスクリプション制)
- パソコンのスペックがある程度必要（8GBでは動作が重たくなることが非常に多く、16GBあることが理想です）
- 突然動かなくなったりアプリが終了してしまったりすることがある（Photoshop同様に、こまめな保存が必要です！）
Adobe XD
Adobe XDは、主にウェブサイトやアプリのUI/UXデザインを制作するツールです。
XDは「Experience Design(体験のデザイン)」の略です。
主な特徴
動作が軽い
ウェブサイトやアプリの画面設計に必要な機能が厳選されており、PhotoshopやIllustratorよりもシンプルで軽快に動作します。
プロトタイプ作成
画面同士をリンクでつなぎ、ボタンをクリックしたら次の画面に移動する、といった動きを簡単に作れます。
コメント機能がある
デザインをURLで共有し、クライアントやチームメンバー内でコメントのやり取りが可能です
使用する場面
- ウェブサイトのデザイン制作
- スマートフォンアプリの画面設計
- ワイヤーフレームの制作
直感的に操作でき、複雑ではないため習得しやすいです。
Canva
Canvaは、デザイン初心者でもプロのようなビジュアルを簡単に作ることができるオンラインデザインツールです。
テンプレートが豊富で、テンプレートをもとにデザインを制作することができます。
非常に簡単に操作できるツールなので、他のツールと比較すると操作感に慣れるまでそれほど時間がかかりません。
有料プランと無料プランがあり、無料でも使用できる素材やフォントが多いことが特徴です。
主な特徴
テンプレートが豊富
Instagram投稿、プレゼンテーション、ポスター、名刺、YouTubeサムネイルなど、60万点以上のテンプレートが用意されています。
好きなテンプレートを選んで、文字や画像を入れ替えてデザインを制作することも可能です。
使用できる素材も豊富
写真、イラスト、アイコン、フォントなど、数百万点の素材がCanva内で利用できます。
わざわざ外部から素材を探してダウンロードしなくてもデザイン制作することが可能です。
クラウドベース
ブラウザで動作するため、アプリのインストールが不要です。
リンクでの共有が可能
作成したデザインをチームメンバーと共有し、一緒に編集することができます。
コメント機能もあり、リンク一つで簡単に共有可能です。
出力形式が多様
PNG、JPG、PDF、MP4(動画)など、様々な形式でダウンロードすることができます。
SNS投稿、プレゼンテーションなど、用途に合わせて最適な形式を選ぶことができます。
使用する場面
- SNS投稿用の画像作成(Instagram、Facebook、Xなど)
- プレゼンテーション資料の作成
- チラシ、ポスター、名刺のデザイン
- YouTubeサムネイル、バナー制作
- 招待状、グリーティングカード
- インフォグラフィック制作(情報を視覚化した図)
注意点
- 細かいデザインの調整がしにくい
- テンプレートを使う場合、オリジナリティが出しにくい
- UI/UXデザインの専門的な機能はない
- 作業スペースが小さく、複数ページが必要となるサイトのデザイン制作には向いていない
Canvaは直感的な操作で誰でも簡単にデザインを制作できるツールですが、WEBデザイナーとして活動していくにはCanva一つでは限界があります。
Canvaはテンプレートベースのデザインに強みがある一方で、細かなピクセル調整や高度な画像加工、複雑なレイアウト設計といった専門的な機能が不足しています。
クライアントワークではブランドに合わせた細部へのこだわりや他にはないオリジナリティが求められるため、より多機能なツールの習得が不可欠です。
そこでおすすめなのが、FigmaとPhotoshopの学習です。
FigmaはWEBデザイン業界で標準的に使用されているツールです。
コンポーネント機能やプロトタイピング、チームでのリアルタイム共同編集など、実務で必要な機能が充実しています。デザインからコーディングへの橋渡しもスムーズで、開発者との連携にも欠かせません。
Photoshopは、プロレベルの画像編集・加工が可能なツールです。
写真のレタッチ、合成、高度なグラフィック制作など、Canvaではできない表現の幅が大きく広がります。
WEBデザイナーとして活動する場合は、FigmaやPhotoshopを優先的に学んでいくのがおすすめです。