PhotoshopとIllustratorの違いは？Webデザインはどちらを使う？

2021年10月6日

PhotoshopとIllustratorの違い

はじめに、PhotoshopとIllustratorの違いはAdobeの公式サイトでこのように言われています。

Illustratorは、線や色のはっきりとしたイラストを描いたり、細かい文字設定やレイアウトを行ったりするのに最適なアプリです。一方のPhotoshopは、主に写真を補正・加工するためのアプリで、画像の微妙な色味や質感の調整を得意とします。
引用：https://helpx.adobe.com/jp/illustrator/how-to/create-flyer-with-illustrator-photoshop.html

Photoshopは画像データとして写真加工や合成、手描きのイラストにグラデーションなどで色をつけたりするのに利用します。
Illustratorは主に文字や図形のデータを扱い、ロゴやレイアウト、イラストなどに利用します。

具体的な異なる点をあげると、文字や図形のデータと画像データでは、データ形式が大きく異なります。デジタルデータは「ベクトルデータ」と「ビットマップデータ」という２つの形式に分けられます。

Illustratorは「ベクトルデータ」を取り扱い、Photoshopは「ビットマップデータ」を取り扱うことなります。

Photoshopの特徴

画像の加工を得意なのがPhotoshop。

Photoshopは写真の加工や写真同士の合成、写真の詳細な色調整など、画像を扱ったデザインを得意とするソフトで「ビットマップデータ」を取り扱います。

ビットマップデータとは格子状に配置しされた細かいドット（画素）の集まりで作られた画像のことです。よく使うgif・jpg・png形式の画像をよく見ると細かいドット絵の集まりになっています。

拡大や縮小を繰り返すと画質が荒くなってしまいます。なので例えば、ビットマップ画像で作られたロゴの場合、拡大するとぼやけてしまいます。

Illustratorの特徴

文字組みやレイアウトを得意なのがIllustrator。

Illustratorは図形やイラストをつくることに特化したソフトで、「ベクトルデータ」を取り扱います。
「ベクトルデータ」は「点」「線」「多角形」などの情報を座標値と属性情報で保持し表現するデータのことです。

ベクトルデータは縮小と拡大を繰り返しても輪郭のシャープさは失われないという特徴があります。なのでどれだけ拡大してもぼやけません。くっきりと表示とさせたいロゴやレイアウトに向いています。

WebデザインではPhotoshopとIllustratorは実際どう使い分けるの？

WebデザインのレイアウトはPhotoshopで

Webデザインはブラウザを通して閲覧します。ブラウザはピクセル、ビットマットデータで表現されています。
ビットマップで表示するPhotoshopはWebデザインを制作するのに使いやすいアプリになります。

PhotoshopでWebサイトのTOPページなどのデザインをつくっていきます。
「レイヤー」と呼ばれる一枚の層ごとに編集できるため、画像加工や編集の操作が簡単になり、手直しをする際は必要なレイヤーのみを編集して修正を済ませることができます。

画像を複数に分割する「スライス」という機能も備えているため、画像書き出しをしたいところをスライスしてWeb用のjpgやpngへカンタンにできるため、Photoshopで作成することが多くなります。

Webデザインのパーツ制作はIllustratorで

Webデザインでロゴやイラストなどをを使ったりするときのパーツ制作にIllustratorを使います。
Illustratorで作成したり編集したりしてから、Photoshopで作成するデザインデータに落とし込む使い方をします。

Webデザイン独学はPhotoshop、Illustratorのどちらを選ぶべき？

Photoshop、Illustratorのどちらがおススメかという点では、これからWebサイトを自分で作ってみたいと考えている方は、先にPhotoshopの使い方を学ぶことをおすすめします。

ですが、実際にPhotoshop、Illustratorを触ってみて、操作しやすくて自分らしいデザインを表現できるアプリを選んだ方が効率的にデザインを進められるのでご自分にあったほうから学ぶのが先を考えると早いです。

どちらにしても、この先Webサイトの制作会社に転職をして働こうと考えている方、プロのWebデザイナーとして活躍したい場合は、PhotoshopとIllustratorの両方を扱えるようにしておきましょう。