デザイナーデビューまで デザイン

IllustratorとPhotoshopって何が違う?デザイン必須ツールの役割を解説

あなた

デザイナーさんがデザインに使っているIllustratorとかPhotoshopって、名前はよく聞くけど、それぞれ違うものなんですか?

どっちかだけ使えれば良いんですか?それとも両方使えないとダメですか?

イマイチ分かりづらいので、それぞれの役割をことを教えてほしいです。

実は、IllustratorとPhotoshopは役割が異なります。

ですので、どちらかだけをマスターすれば良い、ということではなく、効率よく両方のアプリケーションを使って一つのデザイン制作物を仕上げていくため、両方マスターした方が良いです。

この記事を書いた人

【取り組み】
複数企業の外部デザイナーとして活躍しつつ、未経験者のデザイナー育成事業を展開。

【主なWebメディアの実績は以下です】
>HOUSTO-おウチの収納.com
>売場の安全.net

そして私はデザイン学校に通わずに、営業マンから独学でデザインを習得して、独立しました。

この記事では、IllustratorとPhotoshopの役割を知りたいあなたに向けて、簡単に分かりやすくお伝えします。

この記事を読むと、IllustratorとPhotoshopの役割が分かり、かつどのようにそれぞれのアプリケーションを使っていけばいいか分かるようになります。

IllustratorとPhotoshopのデザイン役割

Adobe Illustrator(通称:イラレ)はデザインレイアウトを組み立てる、デザインパーツを作る、イラストを描く、といったことをするために必要なアプリケーションです。

簡単に言うとIllustratorは以下の作業をします。

役割的には以下のようになります。

Illustratorの役割

  • 紙のデザイン(チラシや少数ページのパンフレットなど)の制作と入稿データ制作
  • Webデザイン(Webサイトのデザインイメージまで)
  • Webバナーデザイン
  • ロゴデザイン
  • 他、デザインパーツなど

そしてAdobe Photoshop(通称:フォトショ)は、写真を補正・合成する、画像を加工する、精密なペイントをする、デザインレイアウトを組み立てる、デザインパーツを作る、といったことをするために必要なアプリケーションです。

Photoshopは簡単に言うと、以下の作業をします。

Photoshopの役割

  • 写真の明るさやゆがみなどの補正・加工
  • 人物や被写体の切り抜き
  • Webデザイン(Webサイトのデザインイメージまで)
  • Webバナーデザイン
  • イラスト(特に手描きされたもの)への詳細なペインティング
あなた

うーん、あまり違いがわからない。。。

それぞれ似たようなことができたりするので分かりづらいです。

そこで、混同されがちなIllustratorとPhotoshopの役割をかんたんに表にしました。

以下のような感じになります。

作業内容IllustratorPhotoshop
全体のレイアウトを組む◯(特に紙モノ)◯(特にWebモノ)
イラストを描く◎(ベクターイラスト)◎(ベクター・ラスター)
デザインパーツを作る
文字を打つ
写真や画像の補正×
写真や画像の切り抜き
写真や画像の合成△(不自然な仕上がり)
精細なペイント×
あなた

なるほど。でも、これならPhotoshop1つあればOKでは?

この表を見ると分かる通り、Photoshop1つあればOKと言えばOKですが、2つのアプリケーションをきちんと習得する方が良いです。

なぜなら、

ポイント

  • 今後デザイナーとして活躍するのであれば、Illustratorは避けて通れないアプリケーション
  • それぞれの◎の部分だけを、それぞれのアプリケーションで行なう方が効率が良い

という2点があるからです。

それに、デザイナー=Illustratorが使えて当然みたいな暗黙の了解がありますので、2つ同時に習得しましょう。

IllustratorとPhotoshopを効率よく使い分けてデザインを仕上げる

Illustratorで行なうこと⇔Photoshopで行なうこと、を分けて考え、お互いに補完しながら使います。

なぜこのようなことをするかと言うと、

お互いの得意分野だけに作業を特化した方が、制作全体のスピードが上がるため

です。

例えば、以下のような場面では2つのアプリケーションを使うことになります。

使い分け

  • 得意分野であるレイアウトを組む=Illustrator
  • 苦手な写真補正や切り抜き=Photoshop

写真の切り抜き作業はIllustratorでも行えますが、Photoshopで作業をした方が早くきれいに切り抜くことができます。

それそれ得意分野だけ、作業担当をするイメージです。

「何を担当させるか」は以下の図のように考えるとわかりやすいと思います。

IllustratorとPhotoshopは兄弟みたいな関係のアプリケーションで、メニューや操作が似ているので同時習得でも苦ではありません。

作業内容に応じてIllustratorとPhotoshopそれぞれの得意・不得意をカバーしながら使いましょう。そして、Photoshopだけでなく、Illustratorと並行して習得しましょう。

Illustrator とPhotoshop、どっちで作ればいいの?

あなた

得意・不得意は分かったけど、どっちのアプリケーションで作って行けばいいの?

結論としては、どちらでもOKです。

あなたが扱いやすい方のアプリケーションを制作母体として、全体のデザインを作ってOKです。

制作フォーマット基準IllustratorPhotoshop
バナーデザイン制作
ロゴデザイン制作
LP(ランディングページ)デザイン制作
Webデザイン制作
チラシ・ポスター制作×
パンフレット・カタログ制作×
YouTubeサムネイル画像制作

ポスターやチラシなど紙モノのデザインを行なうのであれば、断然Illustrator の方が作業効率が良いです。

逆に、Webデザインのレイアウトであれば、Photoshopで作業を行なう方が、アト工程のWebコーディング作業を考えた時に効率が良いです。

ただし、一つだけ注意があります。

印刷物(チラシ・ポスター・パンフレット・カタログ)はPhotoshopを母体にしない

印刷物の制作は、Illustrator を制作母体にしてください。

理由は、印刷の入稿データはIllustrator形式(ai形式)での受け付けがほとんどだからです。

例えば、チラシをPhotoshopでデザインして、Photoshop形式(psd形式)でデータを入稿しようとしたところ、Illustrator のai形式のデータしか受け付けていません、みたいなことになると大変です。こうなると、Illustratorでほぼ作り直しです。。。

Photoshopで作ってしまってもPDF形式で保存すれば印刷入稿できることもありますが、印刷物はIllustrator(ai形式)を基本としているので、Illustratorで制作した方が安全です。

IllustratorやPhotoshopじゃないとダメ?代替アプリケーションについて

あなた

Adobeのアプリケーションって高いんでしょ?何か他に無料で使えるものはないの?

IllustratorやPhotoshopに変わるアプリケーションはあります。

しかしですが、これらをデザイン業務として行なうのはオススメはしません。

なぜなら、デザインアプリケーション=Adobeとなっており、業界標準となっているなので、デザインする側もデザインを受け取る側も、Adobeで制作されたデータでやり取りをします。

他にある代替のアプリケーションで制作したデータですと、互換性の問題で受け取り側が困ってしまう場合があるため、どうしてもこのAdobeアプリケーションの使用は避けて通れません。

しかし、代替アプリケーションは無料で使えるため、Adobeアプリケーション購入前の練習用としてはもってこいです。

代替アプリケーションで行なう練習

  • Illustratorで使う「ベジェ曲線」(ペンツール)の描画練習、レイアウトの組み立ての練習
  • Photoshop機能の切り抜きや写真補正の練習

Illustrator代替アプリケーション

Illustratorの代替アプリケーションの代表的なものでインクスケープというものがあります。

インクスケープは無料で使えますし、Illustratorでも使えるような保存形式(eps形式)でデータを作れますが、受け取り側がIllustratorで開いた時の、レイアウトずれや文字の崩れなどの保証ができません。

Photoshopの代替アプリケーション

Photoshopの代替アプリケーションの代表的なものでGIMP(ギンプ)というものがあります。

無料なのに、本家Photoshopに勝るとも劣らない優秀さだと言われており、画像を加工したりするだけならGIMPで問題ありません。

Photoshopの保存形式(psd形式)で保存もできますが、Adobeアプリケーションとの互換性は保証できない点と、印刷用のカラーモード(CMYK)への変換に少々難アリです。

インクスケープやGIMPはデザイン業務の本番で使うと、クライアントとのデータのやり取りやAdobeアプリケーションとの互換性の問題があるので、Adobeアプリケーションを買う前の練習用として考えて使いましょう。

こちらでIllustratorやPhotoshopも入った「Adobe全部入り」を安く買うことができます。

AdobeCCライセンス1年付

デジハリ
  • 通学不要で社会人も利用OK
  • 繰り返し何度も確認できる
  • 翌年以降も継続可能
  • 初心者にやさしい動画教材
  • プロによる添削付き

\ AdobeCCが1年間¥39,980(税込)で利用できるデジタルハリウッド /

▽詳しく見てみよう▽

Adobeマスター講座 公式サイトへ

まとめ

IllustratorとPhotoshopはやれることが似ていますが役割が異なります。

ですので、どちらかだけをマスターすれば良い、ということではなく、効率よく両方のアプリケーションを使って一つのデザイン制作物を仕上げていくため、両方マスターした方が良いです。

IllustratorとPhotoshopのデザイン役割

  • Adobe Illustrator(通称:イラレ)はデザインレイアウトを組み立てる、デザインパーツを作る、イラストを描く、といったことをするために必要なアプリケーション
  • そしてAdobe Photoshop(通称:フォトショ)は、写真を補正・合成する、画像を加工する、精密なペイントをする、デザインレイアウトを組み立てる、デザインパーツを作る、といったことをするために必要なアプリケーション

作業内容の得意・不得意は以下の通りです。

作業内容IllustratorPhotoshop
全体のレイアウトを組む◯(特に紙モノ)◯(特にWebモノ)
イラストを描く◎(ベクターイラスト)◎(ベクター・ラスター)
デザインパーツを作る
文字を打つ
写真や画像の補正×
写真や画像の切り抜き
写真や画像の合成△(不自然な仕上がり)
精細なペイント×

一見するとPhotoshopだけでOKですが、今後デザイナーとして活躍するのであれば、Illustratorは避けて通れないアプリケーションであることと、それぞれの◎の部分だけを、それぞれのアプリケーションで行なう方が効率が良いです。

IllustratorとPhotoshopを効率よく使い分ける

  • Illustratorで行なうこと⇔Photoshopで行なうこと、を分けて考え、お互いに補完しながら使う

→お互いの得意分野だけに作業を特化した方が制作全体のスピードが上がるため、作業内容に応じてIllustratorとPhotoshopそれぞれの得意・不得意をカバーしながら使いましょう。

そして、Photoshopだけでなく、Illustratorと並行して習得しましょう。

Illustrator とPhotoshop、どっちで作ればいいの?

結論としては、どちらでもOK。

制作フォーマット基準IllustratorPhotoshop
バナーデザイン制作
ロゴデザイン制作
LP(ランディングページ)デザイン制作
Webデザイン制作
チラシ・ポスター制作×
パンフレット・カタログ制作×
YouTubeサムネイル画像制作

ただし、印刷物(チラシ・ポスター・パンフレット・カタログ)はIllustrator形式(ai形式)で印刷データの入稿を求められる場合が多いため、Photoshopを母体にしない方が安全です。

IllustratorやPhotoshopじゃないとダメ?代替アプリケーションについて

結論としては、デザイン業務の本番データとして使うのはAdobeアプリケーションデータとの互換性の問題でオススメしません。

Adobeアプリケーションを買う前の練習用としてはOK。

→Adobeアプリケーションを安く買う方法はこちら

AdobeCCはここで安く買おう!デジタルハリウッドAdobeマスター講座

続きを見る

以上になります。

やれることが似ていますが、効率よく使い分けた方が良いことがお分かりいただけましたか?

実際にデザイン制作をしていけば、どちらをどのように使えば効率が良いかは自然と身につきます。

ぜひどちらかだけに偏った習得をせず、IllustratorとPhotoshopを同時進行で覚えていきましょう。

最後までお読みいただきましてありがとうございました。

  • この記事を書いた人

ハタケイスケ

【経歴】大学卒業 ▶営業マン ▶広報マン(Webデザイナー・DTPデザイナー・メディアプランナー兼務)▶メディアサイト12万PV/月実績 ●東京都在住、パンクロッカーです。ヘタなドラムを叩いてます

-デザイナーデビューまで, デザイン
-