PhotoshopとIllustrator、XDの違い

本記事を閲覧頂きありがとうございます。
我々はECにおける総合的な売上向上サービスを展開しています。
楽天、Amazon、Yahoo!ショッピングの大手ECモールや自社サイトのご支援実績のもと、EC売上向上のノウハウをお届けします。

【記事の対象となる方】

• これからwebデザインを学ぼうとしている方

下記の記事にて「Webデザインに必要なソフトとは？」で、
webデザインに必要なソフトを明記させていただきました。

今回はデザインに必要なソフトの中から
Photoshop(フォトショップ)、Illustrator(イラストレーター)、AdobeXD(アドビエックスディー)
の３つをご紹介させていただきます。
そして、この３つのソフトの違いをご説明させていただきます。

＜Photoshopとは＞

Photoshopは、Adobe(アドビ)から購入して使用する事ができる画像合成が得意なソフトです。
Photoshopでは「JPEG」や「PNG」など様々な画像データを開き、編集することが可能です。
そしてレイヤーを組み合わせることで画像を作成します。

また、全ての画像はビットマップ画像とベクトル画像の２つに分けられます。
Photoshopは「ビットマップ画像」を取り扱うのが得意なソフトです。
ビットマップ画像とは無数の点の集まりで作られた画像のことです。
一方でビットマップ画像で作られたロゴの場合、拡大するとぼやけてしまいます。
その為、Photoshopでロゴを作成することには向いていないといえます。

そしてPhotoshopで出来ることは
・写真やイラストの編集、合成
細かい写真の編集やバナーなどのグラフィックの作成。
・バナーの作成
・Webサイトのデザイン
ワイヤーフレーム(webページのレイアウトを定める設計図)、デザインカンプ(デザインの完成見本)の作成が可能です。

＜Illustratorとは＞

Adobe(アドビ)から購入して使用する事ができるグラフィックデザインツールです。
主にペンツールを使用して、様々な形(多角形など）や自由に形状を作成し、編集ができるソフトです。
また、作成した図形、画像やテキストなどを自由にレイアウト出来ます。
Illustratorは、ベクトル画像を取り扱うのが得意なソフトです。
ベクトル画像は縮小と拡大を繰り返しても画質が落ちないという特徴があります。
ベクトル画像はどれだけ拡大縮小してもぼやけません。
そのためくっきりと表示とさせたいロゴやレイアウトにあっています。

そしてIllustratorで出来る得意なことは
・ロゴ、アイコンのデザイン
・レイアウトを組む
Illustratorはレイアウトに関する機能や使いやすさに長けています。
そのため、レイアウト技術が重要視されるDTPデザインを得意としています。
・名刺、チラシ、ポスターなどの印刷物
上の文章で説明した、レイアウトを組むという点でIllustratorは名刺やチラシ、ポスターなどの印刷物を作成するのに得意です。

＜Adobe XDとは＞

XD(エックスディー)と呼ばれています。
XDには「Design at the speed of thought.（思考と同じ速さでデザインする）」という理念があり、これまでPhotoshopでのwebデザインが中心でしたが、効率的にワイヤーフレームやデザインが制作出来る機能が数多くあります。
また、動的なプロトタイプやアニメーションを作成できるという機能があります。
そして動作が軽いというのも特徴です。

XDの得意なことは
・デザイン作成
コンポーネントやリピートグリッドなどの素早く自分の意図したデザインを作成出来るという点が優れています。
・プロトタイプ
実際に出来上がったデザインをイメージ通りに再現出来ているかを確認する事が出来ます。
また、ふわっと文字が浮き上がったり、下層ページに遷移するなどのアニメーション動作やページ移動のイメージを確認する事が可能です。
・コメント機能によりコミニュケーションを取ることができる
プロトタイプを複数人に共有する事が可能です。
そのため、コメント機能を使用したコミュニケーションをする事ができ、制作をスムーズに行う事が出来ます。
Webデザインに特化したソフトとなっています。

＜３つのソフトの違い＞

PhotoshopとIllustratorはロゴやイラスト、画像の加工などの素材作成や見た目の綺麗な複雑なデザイン制作やレイアウトを得意としています。
また、Photoshopはビットマップ画像などの画像加工、Illustratorはベクトル画像でのロゴの作成を得意としています。
XDは複雑なデザイン作成は難しいですが、コンポーネントなどの効率的なデザイン作成が可能です。
また動的なアニメーションを実際のブラウザ上で確認する事が可能です。
まとめると、PhotoshopとIllustratorで素材を作成して、XDでレイアウトをおこないプロトタイプを作成する事が個人的には良いのではないかと思います。

いかがでしたか？
今回は「PhotoshopとIllustrator、XDの違い」と題して、
３つのソフトをご紹介させていただきました。

終わりに

弊社はECの制作代行を実施しております。
弊社へのご依頼などは、以下フォームにご入力いただき、ご連絡いただけますと幸いです。

Writer米沢　洋平

株式会社Proteinum　代表取締役

大学卒業後、楽天株式会社に入社。 初期配属は東北エリアグループにて、牛タンやりんごなどの東北の名産品の販売支援に従事。 その他、アパレル業界を専門として、大手企業を中心に各種ECコンサルティング活動に従事 （のべ担当店舗数700以上）。楽天を卒業後、経営コンサルタントの道へ進み、小売企業を中心に様々な業界において経営コンサルティング業務に従事（事業戦略策定、実行支援、EC戦略策定等）その後、株式会社Proteinumを創業。”EC業界にとってなくてはならない存在に”をミッションに、現在は自社ブランドの立ち上げとクライアントのEC事業の支援に従事。