Web・グラフィックデザインのツールは何から学ぶ？初心者向け優先順位

記事内に広告を含みます

Web・グラフィックデザインを始めると、Photoshop、Illustrator、Figma、Canvaなど、いろいろなツール（アプリ・ソフト）が出てきます。

でも、最初から全部のアプリを覚える必要はありません。

WebデザインならPhotoshopとFigma、グラフィックデザインならIllustratorとPhotoshopなど、作りたいものによって優先して学ぶツールは変わります。

この記事では、デザイナー歴26年の実務経験と講師として初心者を教えてきた経験から、それぞれのアプリを何に使うのか、どれから学ぶとよいのかを整理します。

りす先生

ツールは「たくさん使えること」より、まず必要なものを使って実際にデザインを作れることが大切です。最初に学ぶものを絞って、少しずつ増やしていきましょう。

Web・グラフィックデザインで使うツールを一覧で比較

デザインツールは、それぞれ得意なことが違います。すべてを最初から覚えるのではなく、自分が作りたいものに必要なアプリから優先して学ぶのがおすすめです。

まずは、Webデザインとグラフィックデザインでよく使うツールを整理してみましょう。

<<スクロールできます	主な用途	Webデザイン	グラフィックデザイン
Photoshop	画像加工・バナー・デザイン制作	最優先	最優先
Figma	Webサイト・UIデザイン	最優先	使用しない
Illustrator	ロゴ・図形・印刷物制作	必要に応じて	最優先
Canva	SNS画像・バナー・資料など	優先低め	優先低め
Adobe XD	Webサイト・UIデザイン	優先低め	使用しない

Webデザインを目指すなら「Photoshop＋Figma」、グラフィックデザインを目指すなら「Illustrator＋Photoshop」をまず軸に考えると分かりやすいです。

たとえばPhotoshopとIllustratorはどちらもAdobeのアプリですが、得意な制作物は違います。FigmaもWebデザインでは重要ですが、グラフィックデザインの実務で優先して覚えるアプリではありません。

CanvaやAdobe XDについても「使わない」という意味ではなく、目指す仕事や現場に合わせて必要になったときに取り入れるツールと考えるとよいでしょう。

りす先生

私も仕事によって複数のツールを使い分けていますが、初心者のうちから全部できる必要はありません。まずは自分が目指す分野でよく使うアプリに絞って、実際にデザインを作れるようになることを優先しましょう。

まだWebデザインとグラフィックデザインのどちらを目指すか決まっていない人は、先に仕事内容の違いを知っておくと、学ぶツールも選びやすくなります。

＼どちらを目指すか迷っている人へ／
👉 Webデザイナーとグラフィックデザイナーの違いは？どっちを目指すべき？

Webデザインで使うツールと学ぶ順番

Webデザインを学ぶなら、まず押さえておきたいのがPhotoshopとFigmaです。

現在のWeb制作ではFigmaを中心にデザインする現場も増えていますが、私は未経験からデザインを学ぶ人には、Photoshopでデザイン制作に慣れながら、早い段階でFigmaにも触れる順番をおすすめしています。

最初からPhotoshop、Figma、Illustratorまで全部覚えようとしなくて大丈夫です。まずは、それぞれ何のために使うのかを知っておきましょう。

優先.1 Photoshop｜デザイン力を身につけるなら最初に学びたいアプリ

Photoshopは、写真の加工や合成だけでなく、バナーやWebサイトで使用する画像など、さまざまなデザイン制作に使えるAdobeのアプリです。

Webデザインの制作ツールとしてはFigmaが広く使われるようになっていますが、私は未経験からデザイン力を身につけるなら、まずPhotoshopをおすすめしています。

理由は、Photoshopを使ってバナーなどの小さなデザインを作ることで、

どの情報を目立たせるか
文字をどう配置するか
写真をどう見せるか
どんな配色にするか
限られたスペースに情報をどう整理するか

といった、デザインの基本を手を動かしながら練習しやすいからです。

もちろん、Photoshopの機能をすべて覚えてからFigmaへ進む必要はありません。基本操作を覚えたら実際にバナーなどを作り、デザイン制作と並行しながら必要な機能を増やしていくくらいで十分です。

Photoshopの料金

Photoshopは有料アプリですが、Photoshop単体だけでなく、Lightroomも使える「フォトプラン」や、Illustratorなど20以上のアプリが使える「Creative Cloud Pro」から選べます。

プラン	料金（税込）	主な内容
Photoshop	3,300円／月	Photoshop＋100GBのクラウドストレージなど
フォトプラン（1TB）	2,380円／月	Photoshop＋Lightroom＋Lightroom Classic＋1TB
Creative Cloud Pro	9,080円／月	Photoshop・Illustrator・XDなど20以上のアプリ

※いずれも個人向け・年間プラン（月々払い）の2026年9月時点の料金です。最新の料金・プランは公式サイトをご確認ください。

WebデザインでIllustratorは必要？

Illustratorは、WebデザインではPhotoshopやFigmaほど最初の優先度は高くありません。

ただし、ロゴやアイコン、図形などのベクターデータを制作するときには使います。Webデザインを始める段階で無理に覚えなくても、必要になったタイミングで学べば大丈夫です。

優先.2 Figma｜Web制作のために早めに学んでおきたいアプリ

Figmaは、Webサイトやアプリの画面デザイン、ワイヤーフレーム、プロトタイプなどを制作できるデザインツールです。

ブラウザでも利用でき、デザインデータを共有しながら複数人で作業できるため、Webデザイナーだけでなく、ディレクターやエンジニアと連携しやすいのも特徴です。

私が関わるWeb制作でも、Figmaを使ってデザインから共有まで進めるケースは増えています。Web制作の仕事を目指すなら、今は早めに触れておきたいアプリです。

ただし、Figmaの操作ができることと、Webデザインができることは別です。

Figmaから学び始めること自体は問題ありませんが、ツールの操作だけを覚えるのではなく、配色や文字組み、レイアウト、情報整理といったデザインの基礎も一緒に学ぶ必要があります。

Photoshopで小さなデザインを作る → Figmaにも早めに触れる → Webサイト制作へ進む

くらいの流れを初心者にはおすすめします。

Figmaの料金

Figmaには無料のStarterプランがあるため、まず操作を試したい人は無料から始められます。仕事で使う場合や、チームで本格的に制作する場合はProfessionalプランを検討します。

プラン	料金	主な内容
Starter	無料	ドラフト数無制限、UIキット・テンプレートなど
Professional（フルシート）	16ドル／月〜	ファイル・フォルダ無制限、共有ライブラリ、高度なプロトタイプなど

※Professionalの16ドル／月は年払い時の料金です。月払いでは20ドル／月です。料金は米ドル表示で、2026年9月時点。最新の料金・プランはFigma公式サイトをご確認ください。

Adobe XDは覚えなくてもいい？

Adobe XDは現在も使用しているWeb制作会社や既存案件がありますが、Adobe公式では現在メンテナンスモードとされ、継続的な新機能開発への投資は行わないと案内されています。

これから新しくWebデザインを学ぶなら、私はFigmaを優先することをおすすめします。就職先や案件でXDが必要になった場合に、その時点で覚えればよいでしょう。

＼Figmaをスクールで学びたい人へ／
👉 Figmaが学べるデザインスクール

りす先生

「PhotoshopとFigma、結局どっち？」と迷ったら、どちらか一つを完璧にする必要はありません。デザインを作る練習はPhotoshop、Web制作の流れにはFigmaも早めに取り入れるくらいに考えてみてください。

ノーコードでWebサイトを作るならSTUDIOもあり

Webデザインの仕事には、Figmaなどでデザインを作ってエンジニアに実装してもらう案件だけでなく、ノーコードツールを使ってデザイナー自身がWebサイトを公開する仕事もあります。

STUDIOは、コードを書かずにWebサイトのデザイン・構築・公開までできるノーコードのWeb制作プラットフォームです。コーポレートサイト、LP、採用サイト、ポートフォリオなど幅広いサイトを制作でき、CMSも備えています。

ただし、Webデザインを始める人がPhotoshopやFigmaより先にSTUDIOだけを覚えればよい、という意味ではありません。まずWebデザインの基礎を身につけ、そのうえで「自分でサイト公開までできるようになりたい」という人が学ぶと、仕事の幅を広げやすいツールです。

グラフィックデザインで使うツールと学ぶ順番

グラフィックデザインを学ぶなら、まず優先したいのはIllustratorとPhotoshopです。

チラシや名刺、パンフレット、ロゴなどの制作ではIllustratorを中心に使い、写真加工や画像補正が必要なときにPhotoshopを組み合わせます。

私は未経験から学ぶなら、Illustrator → Photoshopの順番をおすすめしています。

優先.1 Illustrator｜グラフィックデザインなら最初に学びたいアプリ

Illustratorは、ロゴやアイコン、名刺、チラシ、パンフレット、ポスターなどの制作で使うAdobeのアプリです。

文字や図形を自由に配置し、拡大・縮小しても画質が劣化しにくいベクターデータを扱えるため、グラフィックデザインの実務では中心になるツールです。

私自身も、長年グラフィックデザインの仕事でIllustratorを使ってきました。印刷物を作る場合は、デザインするだけでなく、塗り足しやカラーモード、画像解像度、入稿データの作り方なども必要になります。

そのため初心者は、Illustratorの機能を順番に覚えるだけではなく、実際に名刺やチラシを作りながら操作を覚えていくのがおすすめです。

Illustratorの料金

プラン	料金（税込）	主な内容
Illustrator	3,300円／月	Illustrator＋Adobe Expressプレミアムなど
Creative Cloud Pro	9,080円／月	Illustrator・Photoshopなど20以上のアプリ

※個人向け・年間プラン（月々払い）の通常料金。2026年9月時点。Creative Cloud Proには新規契約者向けキャンペーンが表示される場合があります。最新料金はAdobe公式サイトをご確認ください。

グラフィックデザインではPhotoshopも使うため、両方を仕事で使う予定ならCreative Cloud Proが選択肢になります。

優先.2 Photoshop｜Illustratorとセットで覚えたいアプリ

グラフィックデザインでもPhotoshopはよく使います。

主な用途は、

写真の明るさや色の補正
人物や商品の切り抜き
不要なものの削除
画像合成
印刷物に使用する写真の調整

などです。

たとえばチラシを作る場合、Photoshopで写真を加工して、Illustratorで文字や写真をレイアウトするという使い分けをよくします。

そのため、「IllustratorとPhotoshopはどちらを覚えればいい？」ではなく、グラフィックデザインの仕事を目指すなら最終的には両方使えるようにすると考えた方がよいです。

ただ、初心者が同時にすべて覚える必要はありません。

まずIllustratorでレイアウトや文字組みをしながら制作に慣れ、そのあとPhotoshopで写真加工までできるようにしていくと進めやすいです。

Photoshopの料金

プラン	料金（税込）	主な内容
Photoshop	3,300円／月	Photoshop＋100GBのクラウドストレージなど
フォトプラン（1TB）	2,380円／月	Photoshop＋Lightroom＋Lightroom Classic＋1TB
Creative Cloud Pro	9,080円／月	Photoshop・Illustrator・XDなど20以上のアプリ

※いずれも個人向け・年間プラン（月々払い）の2026年9月時点の料金です。最新の料金・プランは公式サイトをご確認ください。

もっと具体的に、Illustrator・Photoshopから作品制作、印刷・入稿まで独学する流れを知りたい人はこちらです。

＼グラフィックデザインを何から学ぶか迷っている人へ／
👉 グラフィックデザインを独学する方法｜7STEPで学ぶ順番を見る

りす先生

グラフィックの仕事では「Illustratorだけ」「Photoshopだけ」で完結するとは限りません。まずIllustratorを軸にして、写真を扱うようになったらPhotoshopも覚える。この順番なら負担も減らせます。

雑誌・書籍のデザインを目指すならInDesignも覚えたい

雑誌や書籍、カタログなど、複数ページの印刷物を制作するエディトリアルデザイナーを目指す人は、Illustrator・Photoshopに加えてInDesignも覚えておきたいです。

InDesignは、ページ数の多い冊子のレイアウトや文字組み、ページ番号の管理などを効率よく行えるAdobeのアプリです。

Illustratorでも冊子を作ることはできますが、ページ数が増えるほどInDesignの方が管理しやすくなります。そのため、チラシや名刺、ロゴなどを中心に作りたい人はまずIllustratorでOKですが、雑誌・書籍・冊子のデザインを仕事にしたい人はInDesignも学習候補に入れてください。

Canvaは副業・実務の幅を広げるデザインツール

Canvaは、SNS画像やバナー、プレゼン資料、チラシなどを、テンプレートを使いながら比較的手軽に作れるデザインツールです。無料から使えて操作も分かりやすいため、デザイン初心者にも人気があります。

ただ、Webデザイナーやグラフィックデザイナーを目指す人が、最初に学ぶツールとして私はCanvaを一番にはおすすめしていません。

理由は、Canvaの操作方法を覚えることより先に、レイアウト・配色・文字組み・情報整理などのデザインの基礎を身につけてほしいからです。

デザインの考え方が身についていれば、Canva自体の操作はそれほど難しくありません。PhotoshopやIllustratorなどで制作経験がある人なら、必要になったときに触りながら覚えていくこともできます。

間違えてほしくないのは、最初に学ぶ優先度が低い＝仕事で使わない、という意味ではありません。
Canva指定の制作や、クライアントがあとから編集できるようCanvaで納品する仕事もあります。私自身も、案件によってCanvaを使って制作・納品しています。

実際に、

SNS投稿画像
Web広告やバナー
プレゼン・営業資料
チラシなどの簡単な販促物
クライアント自身が後から編集するデータ

など、「Canvaで作ってほしい」「Canvaで編集できる状態で納品してほしい」という依頼もあります。

私自身も、仕事でCanvaを使った制作やCanva形式での納品をしています。

特に副業では、SNS画像やバナーなど比較的小さな制作物から仕事につながるケースもあるため、デザインの基礎を身につけたあとに仕事の幅を広げるツールとして、Canvaは相性がいいと感じています。

Canvaの料金

Canvaは無料プランから始められます。個人向けのCanvaプロでは、背景透過やサイズ変更、プレミアム素材、ブランド機能などが利用できます。

プラン	料金	主な内容
Canva	0円	基本的な編集機能、テンプレート・素材など
Canvaプロ	11,800円／年	プレミアム素材、背景透過、サイズ変更、ブランド機能など

※2026年9月時点の個人向け料金。料金・機能は変更される場合があるため、最新情報はCanva公式サイトをご確認ください。

＼Canvaを使ったデザインや副業まで学びたい人へ／
👉 Canvaを学べるオンラインスクールはこちら

りす先生

「Canvaを使えるようになる」ことをゴールにするより、まずデザインを作れるようになる。そのうえでCanvaを使うと、テンプレートに頼るだけではなく、目的に合わせて調整できるようになります。