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

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

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

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

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

目次

  1. 開発目的と用途が違うAdobe3製品
  2. Photoshop
  3. Illustrator
  4. XD
  5. サイトデザインにおける3製品の使い分け
  6. まとめ

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

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

出典:Adobe公式ホームページ

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

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製品の使い分け

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

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

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

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

  • Photoshop:写真などを加工して画像素材を用意する、グラフィック領域に特化して利用する
  • Illustrator:イラストやバナーデザイン、あるいはロゴのデザインなど。特に印刷物にも流用できる素材を用意する
  • XD:シンプルなサイトデザイン作成に向き、特にUI/UXに配慮したWEB領域に特化したレイアウトデザインに利用する

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

まとめ

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

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

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

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

筆者プロフィール

MU編集部

MU編集部

株式会社MU / 編集部
「お客様と共に前進するデジタルパートナー」をキーメッセージに掲げ日々、DX推進企業としてデジタルトランスフォーメーションを推進。
お問い合わせは下記お問い合わせボタンからお願いします。

弊社にご関心をお持ちいただき、
ありがとうございます。
DX推進をはじめ、Web制作等の
お見積り、サービスに関する
ご相談など、お気軽にお問い合わせください。
お問い合わせ内容の確認後、
担当者よりご連絡致します。

*は入力必須項目です。

    • お問い合わせ内容(選択項目)*