BLOG/サイト構築/デザイン

2021.10.28

PhotoshopとIllustrator、XDの違い

【記事の対象となる方】

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

【今回の記事の内容】

  • Photoshopとは
  • illustratorとは
  • Adobe XDとは
  • 3つのソフトの違い

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

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

<Photoshopとは>

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

また、全ての画像はビットマップ画像とベクトル画像の2つに分けられます。
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デザインに特化したソフトとなっています。

<3つのソフトの違い>

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

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

終わりに

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

    入力内容を確認して「送信」ボタンをクリックしてください。

    お問い合わせありがとうございます。
    折り返し担当よりご連絡させていただきますので、今しばらくお待ち下さいますよう、お願い申し上げます。

    は必須項目です。

    氏名(漢字)
    氏名(かな)
    貴社名
    電話番号
    メール
    ウェブサイトURL
    お問い合わせ内容

    こちらからご確認ください