サイトデザインの必需品｜Adobe Photoshop、Illustrator、XDの違いと使い方

プロのデザイン現場ではWEBサイトをデザインする際、Adobe社のPhotoshopやIllustratorが使われていました。

しかし、2017年にXDがリリースされて以来、「XDだけでサイトデザインができる」といわれることもありますが、プロのクオリティを考えた場合、それは正しいとはいえません。

そこで今回は、デザインソフトとして名高いAdobe社の3製品の違いを説明しつつ、サイトデザインをする際の使い分けについて、プロのWEBデザイナーの視点でご紹介します。

開発目的と用途が違うAdobe3製品

今やサイトデザインには必須のAdobe3製品ですが、そもそもその開発目的と用途が違います。

まずはその違いを理解することで、どのように使い分ければ良いかがわかります。

Photoshop

その名の通り、写真などの画像（フォト／Photo）データを加工するために作られたソフトがPhotoshopです。

プロのWEBデザイナーがサイトデザインを行う際に必要不可欠である画像データを、よりハイクオリティに加工することを考えたら、現状Photoshop以上にすぐれたソフトはありません。

など。他社製品、あるいは同じAdobe製品であるIllustratorやXDと比べても、はるかに効率的かつ高品質に行うことができるのがPhotoshopです。

古くからPhotoshopに慣れ親しんだデザイナーであれば、画像の加工からデザイン制作まで、すべてを完結される人も少なくないはずです。

Illustrator

Illustrator（イラストレーター）、通称「イラレ」は、イラストを描くことに特化したソフトです。

サイトデザインで使用されるイラストや図解画像などを作成する際にも利用されますが、IllustratorはもともとWEBデザイン用に開発されたソフトではありません。

画質の劣化が起こらず、CADのように点と線で構成される「ベクター」ファイルを利用するIllustratorは、ドットで表現されるWEBサイトよりもポスターやチラシなどの印刷物をデザインするのにすぐれています。

ただし、充実したレイアウト機能が備えられているため、かつてはIllustratorをWEBサイトのデザインに利用することもよくありました。

現在のサイトデザインにおけるIllustratorの利用方法としては、そのまま印刷物にも流用できるロゴのデザインや、バナーなどのデザインに利用することが主流です。

XD

3ソフトの中でももっとも新しく2017年にリリースされたXDは、ホームページなどのサイトデザインを行うことに特化して開発されたソフトです。

XDでは画像の加工やビジュアル的に凝ったデザインを作成することはできませんが、UI／UXにすぐれたデザインを作成するには非常にすぐれています。

ボタンやリンクの配置などの工夫でUIやUXは大きく変わりますが、PhotoshopやIllustratorでは見た目の良いボタンやバナーを作成することはできても、各パーツのレイアウトなど細かい調整には向いていません。

しかし、XDはそうしたUIやUXに配慮したサイト内パーツの設置や、画像やテキストをサイトにレイアウトすることに特化しているため、比較的簡単にサイトデザインを行うことができます。

ただし、XDは本来システム領域としてのプロトタイピングソフトに過ぎないため、基本的にはシンプルなWEBサイトのデザインに使用されることがほとんどです。

サイトデザインにおける3製品の使い分け

Photoshop、Illustrator、XDの3製品は、それぞれ単体でもWEBサイトを作成することはできます。

しかし、既出の通りそれぞれの開発目的と用途が違うため得意な分野が大きく異なり、うまく組み合わせて使わない限り、プロのデザイナーに求められる高品質なサイトデザインはできません。

それぞれの特徴を活かした3製品の一般的な使い分けとしては、おおむね次のような形が考えられます。

もちろんどのようなサイトをデザインしたいかによって、使うべきソフトも変わってくるのは間違いありませんが、多くの場合はプロのデザイン現場でもこのような使い分けがされていると考えて問題ありません。

まとめ

WEBデザイナーがサイトデザインをする際に利用される、Adobe社の代表的3製品Photoshop、Illustrator、XDそれぞれの特徴と使い分け方に関して解説しました。

基本的なサイトデザインであれば、PhotoshopやIllustratorで用意した素材を、XDでサイトにレイアウトするといった使い方をすれば、多くの場合間違いはないでしょう。

しかし、サイトデザインの方向性や自身の得意なデザインパターンによって使い分ける必要があります。

いずれにしてもプロのデザイナーであれば、高品質なサイトデザインを作成するためには「これだけできればOK」というようなソフトはなく、複数のソフトを併用して扱えることができなければ、クライアントの要望に高レベルで応えることはできないのです。