Webデザイナーが現場で使うソフト・ツール一覧｜現役10年が実態を正直に解説
PhotoshopとIllustrator、どっちを先に学べばいいんだろう…
Figmaって最近よく聞くけど、未経験でも使えるの？
AKI現場ではFigmaが中心になっています。PhotoshopもIllustratorも今も使いますが、使われ方が変わった。正直なところを整理しました。
Webデザイナーを目指すとき、最初に迷うのが「何のソフトを覚えればいいか」という問題です。
スクールのパンフレットにはPhotoshopやIllustratorが並んでいる。でも最近はFigmaという名前もよく出てくる。結局、現場で本当に使われているのはどれなのか。
私はWebデザイナーとして10年以上働き、採用担当として多くの卒業生の面接に立ち会ってきました。「ソフトの選択ミスで学習が遠回りになった」と感じている方を何人も見てきた経験から、現場の実態を正直にお伝えします。
全くの未経験から独学とスクールを経てWebデザイナーへ転職。その後Webデザイナー・Webディレクターとして働き、現在は本ブログの運営やWebサイト制作を通じてデザインに携わる。IT業界経験20年以上。
現場の実態：2024年以降はFigmaが中心
AKI5年前と比べると、現場の雰囲気はかなり変わりました。昔はPhotoshopでデザインを作るのが当たり前でしたが、今はFigmaに移行している会社がほとんどです。
Webデザインの現場で今もっとも使われているデザインツールは、Figmaです。これは肌感としても、面接で会ってきた現場デザイナーたちの話からも、明確にそう言えます。
以前は「Photoshopでデザインデータを作り、Illustratorでアイコンやロゴを作る」という流れが一般的でした。それが今は、Figmaだけでデザインから仕様書の作成まで完結できるようになっています。
制作会社・インハウスデザイナー問わず、新しいプロジェクトはほぼFigmaで始まる。そういう時代になったと感じます。
現場でよく使うツールの全体像
ツールはざっくり「デザイン系」「制作系」「コミュニケーション系」の3カテゴリに分けて考えると整理しやすいです。
| カテゴリ | ツール | 現場でのポジション |
|---|---|---|
| デザイン（主力） | Figma | UIデザイン・ワイヤーフレーム・開発仕様書。現在の標準ツール |
| デザイン（補助） | Photoshop | バナー・写真加工・レタッチ。今も使うが主役ではなくなった |
| デザイン（補助） | Illustrator | ロゴ・印刷物・ベクター素材。Web専業なら使用頻度は低め |
| コーディング | VS Code | HTML/CSS記述の標準エディタ。制作会社ではほぼ必須 |
| コミュニケーション | Slack / Notion | チーム連絡・ドキュメント管理。職場によって異なる |
「コーディングツールはデザイナーには不要では？」と思う方もいます。ただ実際の制作現場では、デザイナーもHTMLやCSSの基礎を理解していることが求められる場面が多い。コーディングできなくても、読んで理解できる程度は知っておくと現場で差がつきます。
PhotoshopとIllustratorは今も必要か
PhotoshopとIllustrator、覚えなくていいってこと？
AKI「まったく不要」とは言いません。ただ、未経験から学ぶなら優先度は変わります。まずFigmaを覚えておくのが現実的だと思っています。
結論から言うと、PhotoshopもIllustratorも「知っていると役立つ場面がある」ツールです。ただ、未経験から学ぶなら最初はFigmaに集中するのが正解だと感じています。
Photoshopが今も活躍する場面
バナー制作と写真加工・レタッチは今もPhotoshopが強いです。ECサイトや広告系の案件では「仕上げはPhotoshopで」という現場がまだあります。
採用面接では「Photoshopは使えますか？」という質問をよく受けます。「基本操作はできます」と答えられると印象が変わるのも事実です。ただ入社後に習得できる前提で採用されるケースも多く、即戦力のPhotoshopスキルを問われることはそう多くありません。
Illustratorが必要になる仕事
ロゴ制作・名刺・チラシなど印刷物が絡む案件ではIllustratorが必須です。印刷データはほぼIllustratorが前提になっています。
Web専業の会社に就職する場合、Illustratorをほとんど使わずに済む環境もあります。どちらを選ぶかは、自分が目指す仕事の内容によっても変わってきます。
Figmaが現場の主流になった理由
AKIFigmaが一気に広まったのは、コロナ禍のリモートワーク普及が大きかったと思います。チームでリアルタイムに作業できるのが、あの時期に本当に強かった。
なぜFigmaがこれほど短期間で現場を席巻したのか、大きな理由は4つあります。
- ブラウザで動く：インストール不要。MacでもWindowsでも同じ環境で使える
- リアルタイム共同作業：チームで同時に編集・コメントができる。リモートワークと相性が抜群
- 開発者との連携がスムーズ：CSS値やアセットを直接エクスポートできる
- 無料プランがある：個人利用なら費用なしで始められる
「デザイナーとエンジニアが同じファイルを見て作業できる」という点が、現場の効率に直結しました。以前はPhotoshopのデータを見せながら寸法や色を口頭で伝えていたやりとりが、Figmaでは自動的にコード化されています。
ただ、Figmaも万能ではありません。複雑な写真加工はPhotoshopのほうが圧倒的に強く、ベクターのロゴ制作はIllustratorが適している場面もある。ツールに優劣はなく、用途に応じて使い分けるものです。
未経験者のツール学習優先順位
全部は覚えられない。何から始めればいいんだろう…
AKI採用担当として見ていると、「Figmaが使える」だけで転職市場での印象がかなり変わります。まずここから始めるのが、一番コスパがいい選択だと思っています。
これは採用側の経験から正直に言えることですが、未経験からの学習は順番が大事です。全部を同時に覚えようとすると、どれも中途半端になりやすい。
ツール学習の優先順位
- Figma（最優先）：UIデザインの現在の標準ツール。最初に習得すべき
- HTML / CSS：コーディングの基礎。デザイナーでも理解していると現場で差がつく
- Photoshop：バナー・画像加工の場面で使う。基本操作だけ覚えておくと安心
- Illustrator：ロゴや印刷物が必要になったタイミングで学ぶ
スクールに通う娴合は、カリキュラムに沿って進めて問題ありません。ただ独学の場合は、上の順番で進めると遠回りが少ないです。
Figmaは公式の日本語チュートリアルが充実していて、無料プランで始められます。ただ「Figmaで何かを作りきった経験」がないと、面接で「使えます」と言っても説得力に欠ける。ある程度まとまった課題に取り組んだ実績を作っておくのが理想です。
📌 関連記事：Webデザインスクールの選び方 — カリキュラムにFigmaが含まれているかどうかも、スクール選びの重要な判断軸です。
よくある質問
Q：FigmaはMacとWindowsどちらでも使えますか？
A：どちらでも使えます。Figmaはブラウザベースで動くため、OSに依存しません。Mac・Windows・Linux問わず同じ環境で利用できます。これはPhotoshopやIllustratorとの大きな違いの一つです。
Q：独学でFigmaはマスターできますか？
A：基本操作は独学で十分習得できます。Figma公式が日本語の学習コンテンツを提供しており、無料で始められます。ただ「現場で通用するレベル」になるには、実際の制作課題に取り組む経験が必要です。スクールのカリキュラムにFigmaが含まれている場合は、講師にフィードバックをもらいながら学べるため効率的です。
Q：転職先の求人に「Photoshop必須」と書いてあったら不利ですか？
A：採用担当として面接してきた経験から言うと、入社後に習得できる前提で採用している企業は多いです。「Photoshopは未経験だがFigmaは使える」という方が不利になったケースはほとんど見ていません。大切なのはポートフォリオの完成度と学ぶ姿勢を伝えることです。
Q：スクールではPhotoshopとFigma、どちらを教えてもらえますか？
A：スクールによって異なります。以前はPhotoshop・Illustrator中心のカリキュラムが多かったですが、2023〜2024年以降はFigmaを中心に据えたスクールが増えています。カリキュラムにFigmaが含まれているかどうかは、スクールを選ぶ際の重要な判断軸の一つです。無料カウンセリングで確認しておくことをおすすめします。
まとめ
AKIソフトは道具です。最初から全部完璧に覚えようとしなくていい。まずFigmaで1つ作品を作りきること、それが現場への一番の近道だと思っています。
📝 要点
- 2024年以降の現場はFigmaが標準。未経験から学ぶなら最初に習得すべきツール
- PhotoshopとIllustratorは不要ではないが、優先度はFigmaより下
- Photoshopはバナー・写真加工、Illustratorは印刷・ロゴ制作で今も使われる
- FigmaはMac・Windows問わず無料で始められる。まず触ってみることが大事
- 採用面接では「Figmaが使える」だけで印象が変わる。ポートフォリオに反映を
ソフトを覚えることは目的ではなく手段です。採用担当として見ているのも「何のソフトを使っているか」ではなく「そのソフトで何を作れたか」です。
まずFigmaで何か1つ作品を作ってみる。それだけで「Figmaを使ったことがある」から「Figmaで作れる」に変わります。その積み重ねがポートフォリオになっていきます。焦らず、一歩ずつ進めてみてください。