WEBデザイナーになるまでのロードマップ無料配布中 >受け取りはこちら

WEBデザインにはPhotoshop/Illustratorどっち?制作現場のリアル

WEBデザインにはPhotoshop/Illustratorどっち?制作現場のリアル

デザインツールとしてメジャーなPhotoshopとIllustrator。
どちらもデザイン制作に欠かせないツールですが、

WEBデザインにはどっちを使うのか知りたい

という声をよく耳にします。

どちらもAdobe社のツールですので、その2つを混同している人は少なくありません。

これからWEBデザインを学ぶとなると、

「PhotoshopとIllustratorって何が違うの?」
「どちらから先に学ぶべき?」
「両方勉強すべき?」

などの疑問が湧いてくるのではないでしょうか。

結論、これからWEBデザインを始める方がまず学ぶべきなのはPhotoshopです。

制作会社として10年を超える実績と、2,000人以上のWEBデザイナーを育成してきた経験からはっきりとお伝えできます。この記事では

この記事でわかること
  • WEBデザインの現場でPhotoshopが使用される理由
  • PhotoshopとIllustratorの違い
  • Photoshop/Illustratorの料金事情
  • Photoshop、Illustratorの学び方
  • PhotoshopやIllustratorについてよくある質問

など、WEBデザインとツールについて制作現場のリアルな情報をお伝えしていきますので、WEBデザインを始める準備にぜひお役立てくださいね。

▼ ▼ 期間限定で無料プレゼント ▼ ▼

WEBデザインを勉強したいけど、やり方がイマイチわからない、、、。そんな方のためにプロがおすすめする7つの最強勉強法をまとめました。ぜひ手に取って勉強をするときの参考にしてくださいね。

目次

WEBデザインにはPhotoshop/Illustratorどっちを使う?

冒頭では結論だけを伝えてしまったので、もう一度WEBデザインにPhotoshopとIllustratorのどちらを使うかについて丁寧にお伝えします。

現場で使用するのは概ねPhotoshop

WEBデザインに向いているのはPhotoshop。

WEB制作現場で標準的に使われているのはPhotoshopです。

豊富な機能を持つので、WEBデザインに関しては万能なツール。
Photoshopの機能だけでバナーやWEBサイトのデザインができてしまいます。

WEBデザイナーとして仕事をするならPhotoshopのスキルは必ず問われるはず。

これからWEBデザインの勉強をするのにどちらを学ぶべきか迷っている人は迷わずPhotoshopを選びましょう。

優良な無料素材があるからIllustratorはほとんど使用しない

IllustratorがWEBデザインに使われることがあるとしても、素材となる細かいパーツの作成といった部分的な活用に留まります。

しかし、その素材も、Illustratorでわざわざ自作するよりも商用可能なフリー素材を利用したほうが遥かに効率的。

無料でもクオリティの高い素材が簡単に入手できるため、WEB制作現場でIllustratorが使われることはほとんどありません。

なお、弊社日本デザインでは寄り道せずに最短でWEBデザイナーになる方法が知れる、無料のオンラインセミナーを開催しています。

無駄な勉強をしたくない、寄り道をせずWEBデザイナーになりたいという方はセミナーに参加してみてください。

WEBデザインの現場でPhotoshopが使用される理由

ここでは、「WEBデザインにはPhotoshopが最適」という理由について具体的に解説していきます。

WEBデザインの現場でPhotoshopが使用される理由
  • 画像形式がWEBサイトと相性が良い
  • レイヤーカンプ機能で複数のデザインを同時に作れる
  • スライス機能が優れており素材の分解や修正が簡単
  • フォント変換が強制的にされず共有しやすい
  • Photoshopを使っている人が多く互換性が高い

画像形式がWEBサイトと相性が良い

WEBサイトのデザインには「PXピクセル」という単位を用います。
ピクセルとはデジタル画像の最小単位(画素)のことです。

私達が日頃WEBサイトで目にしている画像は、このピクセルという小さな点の集合体から成っています。

Photoshopで制作されるデザインも同じくピクセルを単位とする画像形式。
ラスター形式と呼ばれるこの画像形式は、WEBサイトと相性がとてもいいのです。

Photoshopの編集画面で見るイメージと、実際にWEBブラウザ上に表示されるデザインにブレが生じないというのは大きなメリット。

制作過程で仕上がりを確認しやすいので作業がスムーズです。

レイヤーカンプ機能で複数のデザインを同時に作れる

Photoshopでは「レイヤー」と呼ばれる1枚の層(透明のフィルムのようなもの)を複数重ね合わせて1つの画像を作成します。

具体的には、画像のレイヤー、テキストのレイヤー、背景は背景レイヤー、その他オブジェクトのレイヤーといった具合です。

レイヤーカンプとは、各レイヤーの状態を記録しておく機能。
複数のデザイン案(カンプ)を作成・管理・表示することができます。

クリックするだけでデザインパターンを簡単に切り替えられるので非常に便利です。

スライス機能が優れており素材の分解や修正が簡単

スライス機能を使えば、1つの画像を複数に切り分けることができます。

分割したパーツはそれぞれ個別の画像ファイルとして保存が可能。
保存画面で画像形式や画質などの調整もできます。

WEBデザインにはたくさんのパーツを使うため、作業工程を短縮するためにもこのスライス機能は欠かせません。

フォント変換が強制的にされず共有しやすい

WEBサイト制作は、デザイナーやコーダーなど複数の担当者が制作に携わることが多く、作業者のフォント環境がそれぞれに異なることがあります。

そういった環境の違いに左右されないのもPhotoshopのメリット。
強制的なフォント変換を避け、見た目のスタイルを保持したままデザインを共有できます。

Photoshopを使っている人が多く互換性が高い

WEB業界ではPhotoshopがデザインの標準ソフトとして浸透しているため、WEBデザイナーのほとんどがPhotoshopを使っているといっても過言ではありません。

WEBデザインはチームで作業をすることも多く、共通のソフトを使用することで連携がスムーズになります。

また、Photoshopのファイル形式であるPSD(Photoshop Document/「.psd」拡張子のファイル)は、Illustratorを始めとする他のAdobe製品での読み込みも簡単。

その他、JPEGやPNG、GIF、PDFなどさまざまなファイル形式に書き出して保存することが可能という利便性の高さも魅力です。

デザイナーとして知っておきたいPhotoshopとIllustratorの違い

WEBデザイナーが制作現場で使うのは主にPhotoshopですが、「Illustratorは無関係」というわけではありません。

デザイナーの常識として知っておきたいPhotoshopとIllustratorの違いについて、ここでは解説していきます。

作成できる画像の形式

Photoshop ⇒ラスター形式(点の集合体)

Illustrator ⇒ベクター形式(点と線を数値化して表現)

デジタル画像には主にラスターベクターの2種類のファイル形式が使われます。
ビジュアルコンテンツで使用される最も一般的なファイル形式ですが、この2つの決定的な違いは画像の表現方法です。

Photoshopはラスター形式

Photoshopで作成する画像はラスター形式。
ラスター画像は、色の付いた小さな点(ピクセル)の集まりでできた画像データです。

写真などの高精細な画像を形成することができ、ピクセル(画素)数が多いほど高画質になります。

表現できる色数が多く、大幅な色の変更も可能。
光や影を細かく表現することもできますが、拡大すると画質が落ちて画像がぼやけてしまうという特性もあります。

ラスター形式のメリット・デメリット

メリット
・繊細な色彩表現が可能
・写真の細部を精巧に表現できる
デメリット
・拡大/縮小に弱い
・データ量が膨大になる可能性がある

Illustratorはベクター形式

一方、Illustratorで作成する画像はベクター形式
ベクター画像は、数式直線曲線(グリッド上に固定された点を使用)で構成された画像です。

図形の表現に向いている画像形式で、ピクセルという要素がなく「点と線」から成っているからこそ拡大・縮小に強く、サイズ変更しても画像が荒くなりません。

ただ、写真のような複雑な色の表現には不向きです。

ベクター形式のメリット・デメリット

メリット
・拡大/縮小しても画質が落ちない
・ファイルサイズが軽量
デメリット
・複雑な色彩表現には向かない
・写実的なものの表現は難しい

このようにPhotoshopとIllustratorは画像形式が違うため、活用される場面が異なります。

できること/得意なこと

Photoshop ⇒ 写真画像の加工・WEBデザイン

Illustrator ⇒ 図形の描画・印刷物のデザイン

Photoshop、Illustratorそれぞれの「できること/得意なこと」に注目していきましょう。

Photoshopは写真画像の加工が得意

Photoshopはラスター画像を扱うという特性上、複雑な画像処理や写真の補正が得意です。

具体的な例
  • 写真のレタッチ(明度や色味の調整が細かくできる)
  • 合成(素材を消したり増やしたりすることが自在にできる)
  • 文字の加工(写真や画像への文字入れも得意)
  • 手書き風のイラスト(水彩画や油絵のようなタッチにも彩色できる)

これらは高性能なPhotoshopのごく基本的な機能に過ぎません。
WEB用のデザイン制作に関しては万能なツール。
まさにWEBデザイナーにとってのマストアイテムといえます。

Illustratorは図形の描写が得意

Illustratorはデジタルイラスト、複雑なグラフィック制作に向いています。

具体的な例
  • ロゴのデザイン(図形を描いたり文字を変形させたりすることが自在にできる)
  • イラストの作成(境界線のはっきりしたイラスト/ムラのないベタ塗りが特徴)
  • 印刷物のレイアウト(拡大や縮小が必要なデザインの作成は得意)

Illustratorで作ったデータは印刷業界での標準形式(ベクター形式)のため、印刷用のデザインに最適なツールです。

名刺、チラシ、ポスター、冊子など、サイズを問わずきれいに印刷できます。
紙だけでなく生地や衣類への印刷も可能。Tシャツのロゴデザインなどにも用いられます。

Photoshop/Illustratorの料金事情

PhotoshopもIllustratorも有料のデザインソフトです。

買い切り型ではありませんので、自分に合った料金プランを選択する必要があります
(2013年までは買い取り型でしたが現在はサブスクリプションのみ)

料金プランの種類や、割安で利用する方法について詳しく見ていきましょう。

Photoshopの料金プラン

Photoshopが使える料金プランは3種類です。

  • Photoshop単体プラン
  • フォトプラン
  • Creative Cloudコンプリートプラン
引用:Adobe Photoshop 公式サイト
値段の詳細
  • 単体プラン
    *3,280 円/月(税込)年間プラン、月々払い
    *4,980 円/月(税込)月々プラン、月々払い
    *34,680 円/年(税込)年間プラン、一括払い
  • フォトプラン
    クラウドストレージの使用制限20G
    *1,180 円/月(税込)年間プラン、月々払い
    *14,080 円/年(税込)年間プラン、一括払い
  • Creative Cloudコンプリートプラン
    Photoshop、Illustratorを含むAdobe全てのアプリが使えるプラン
    *7,780 円/月(税込)年間プラン、月々払い
    *86,880 円/年(税込)年間プラン、一括払い

フォトプランは機能面では単体プランと変わりません
年間契約のため、途中でサブスクリプションをやめる場合は解約金(契約残存期間の料金の50%)が発生するものの、他のプランと比べて割安なプラン。

今後Photoshopを継続的に使っていくのであればフォトプランがおすすめです

Illustratorの料金プラン

Illustratorが使える料金プランは次の2つです。

  • Illustrator単体プラン
  • Creative Cloudコンプリートプラン
引用:Adobe Illustrator 公式サイト

単体プランの料金はPhotoshopと同じですが、Illustratorにはフォトプランのような割安なプランがありません。

IllustratorとPhotoshopを両方使いたい場合は、「Illustrator単体プラン」に「フォトプラン」を組み合わせるのが最もリーズナブル。

PhotoshopとIllustrator以外のソフトも使う予定があればCreative Cloudコンプリートプランが便利です。

無料体験期間がある

どのプランも7日間の無料お試し期間が設けられています。
(解約しなければ8日目から料金が発生するので注意しましょう)

体験版とはいえ機能制限はなく、製品の全機能とサービスを試用できます。

プランはいつでも変更またはキャンセルが可能。

7日間はコンプリートプランでいろいろなソフトを触ってみて、8日目までに希望するプランに契約しなおすのもひとつです。

アドビ製品の無料体験とダウンロード

ソフトをダウンロードする前に、パソコンが必要なスペックを満たしているか確認しておきましょう。

Photoshopをストレスなくスムーズに使うためにおすすめのスペックは次のとおりです。

CPUメモリストレージ
Corei716GB256GB

▼WEBデザイナーに必要なパソコンのスペックについてはこちらの動画でも紹介しています。「WEBデザイナーがおすすめする!パソコンの選び方| 未経験からWEBデザイナーへ

定価よりも安く利用する方法もある

  • 学生・教職員なら学割が利用できる
  • Adobeの公式セールで購入する
  • 裏技を使う

あなたがもし学生教職員なら、Photoshopを含む全てのクリエイティブアプリが使えるコンプリートプランが最大66%OFFで利用できます。

Adobe社の認定パートナー校に入学してコンプリートプランを割引価格で購入するという方法もありますが、「Photoshopだけ使いたい」というのであれば通常のフォトプランのほうがずっとお得です。

Adobe社が期間限定セールを実施していることもありますので、公式サイトをこまめにチェックするのもいいでしょう。

格安でPhotoshopを使い続ける方法としてよく知られている裏技もあります。

「①コンプリート版の無料体験版を入手→ ② 無料期間終了後に解約画面で解約を選択→  ③Adobe社が勧める割引プランを選択→ ④ 再度解約画面を表示→ ⑤ Adobe社が解約防止策としてコンプリートプランの60日間の無料特典を提示してくる→ ⑥特典を受け取る→ ⑦その無料期間が終了する前に再度解約手続きを進めると、再び無料特典が表示される」

これを繰り返すというもの。
(注意:②の時点で課金が開始される可能性があります)

ただ、この方法がいつまでも使えるとは限りませんし、今後規制がかかる可能性もありますので積極的にはおすすめしません。

参考:Adobe公式サイト「学生・教職員の購入資格」

独学できる?Photoshop/Illustratorの学び方

独学は不可能ではありませんが、実務レベルのスキルを身に付けるなら、WEBデザインスクールでまずはしっかりPhotoshopの基本デザインの基礎を学ぶことをおすすめします。

PhotoshopもIllustratorも高度なテクニックを実現できる優れたツールだけに、完璧に使いこなそうとすれば膨大な時間がかります。

とはいえ、制作現場で使われるのはある程度限られた機能。
目的に合わせて必要な機能を学習することがWEBデザイナーになる近道なのです。

必要のない機能まで極めようとしてしまう“学びすぎ”に注意しましょう。
Photoshopの基本操作を学び、制作する過程で新たに必要なことが出てきたらその都度学ぶというのが効率的です。

プロとしてデザイン制作に携わりながら徐々にIllustratorを学ぶというのでも遅くはありません。

すでにPhotoshopが扱えれば、操作方法などに共通点があるためIllustratorの学習が楽になります。Adobeの公式チュートリアルや学習サイト、動画で独学することも可能です。

忘れてならないのは、「WEBデザイナーを目指すなら、デザインツールの操作を習得しただけでは不十分」という点。

スクールを選ぶときは、プロに必要なデザインスキルを学べるところを選びましょう。

▼簡単ではありませんが、どうしても独学で挑戦してみたいという人はこちらの記事を参考にしてみてください。

▼WEBデザインスクールの選び方を知りたいという人にはこちらの記事がおすすめです。

PhotoshopやIllustratorについてよくある質問

最後に、PhotoshopやIllustratorについてよくいただく質問にお答えしていきます。

PhotoshopやIllustratorについてよくある質問
  • 無料ツールで代替することについて
  • インストール方法について
  • Photoshopの勉強におすすめの本

無料ツールで代替することは可能ですか?

PhotoshopやIllustratorの代替ツールとしてよく名前が挙がるのは、CanvaGIMPPIXLRなど。

いずれも無料で簡単にデザイン作成ができるという点は魅力ですが、機能面ではPhotoshopやIllustratorに遠く及びません。

有料のPhotoshopやIllustratorが選ばれるのには理由があります。

PhotoshopやIllustratorが選ばれる理由
  • プロ仕様として機能性に優れている
  • Adobe製品を使っているクリエイターが多い
  • サポート体制が整っている

無料の代替ツールでは、できることは限られるためプロ向きではありません。

また、制作現場ではAdobe製品が一般的に使われているため、扱いに慣れておく必要があります。

Adobeソフトはユーザーが多く、サポート体制が整っているのもメリット。

Adobeサポートコミュニティ」というコミュニティスペースでは、クリエイター同士がAdobeソフトの使い方やトラブルの問題解決など活発に情報交換がなされています。

どのようにインストールすればいいですか?

Asobeのクリエイティブアプリは「Adobe公式サイト」からインストールします。
(AppStoreやGooglePlayなどのアプリケーションストアからダウンロードすることはできません)

インストールの手順は次の7ステップです。

Photoshop/Illustratorのインストール手順
  1. 公式サイトにアクセス
  2. プランを選択
  3. メールアドレスを登録
  4. 支払いプランを選択
  5. パスワードを設定
  6. Adobeサイトにログイン
  7. インストールボタンをクリック

Adobe公式サイト

▼こちらの記事でPhotoshopのインストール手順を丁寧に解説しています。
インストール前に一読しておくと安心です。

Photoshopの勉強におすすめの本はなんですか?

Photoshopに関する書籍は数えきれないほどありますので、コレという1冊を探し出すのはなかなか大変ですよね。

選び方のポイントは「自分に合った難易度のものを選ぶ」ということ。
出版されている本は、初心者から上級者向けのものまでかなり幅があるので注意が必要です。

初心者であれば、Photoshopの基本的な機能と操作方法が体系的に学べるものを選びましょう。

「おすすめを教えてほしい」という声をよくいただきますので、初心者向けの本をいくつかご紹介したいと思います。

  • 世界一わかりやすいPhotoshop 操作とデザインの教科書』出版社:技術評論社
    基本操作を15回のレッスンで順序立てて学べます。最初の学習書として最適な一冊。
  • Photoshop よくばり入門』出版社‏ :‎ インプレス
    基本からプロが実際に使うテクニックまで学べます。練習用ファイル、解説動画、電子書籍(PDF)が特典として付いてくる人気シリーズ。
  • すいすいPhotoshopレッスン』出版社‏ :‎ マイナビ出版
    Photoshopの機能と特徴を学んだあとに、1日10分からできる課題に挑戦。実践的にデザイン制作をマスターできる仕組みになっています。

▼こちらの記事ではレベル別に「おすすめの本」をさらに詳しく紹介しています。
迷ったときの参考にしてください。

WEBデザイナーを目指すなら、まずPhotoshopを学ぼう!

「PhotoshopとIllustrator、WEBデザインにはどちらが使われるのか」という疑問にお答えしてきました。

WEB制作会社ではPhotoshopが一般的に使われています。

ここまでの内容を振り返りながら、PhotoshopとIllustratorの違いをおさらいしておきましょう。

適した媒体画像形式できること/得意なこと具体的な制作物
PhotoshopWEB媒体ラスター形式・写真画像の加工
・WEBデザイン
・バナー
・WEBサイト
・SNS画像 など
Illustrator紙媒体ベクター形式・図形の描画
・印刷物のデザイン
・ロゴデザイン
・名刺
・チラシ/ポスター
・冊子 など

Photoshopは複雑な画像処理や写真の補正が得意。
Illustratorは、デジタルイラスト・複雑なグラフィック制作に適したデザインツールです。

それぞれの特性を理解して使い分けることがデザイン制作の現場では求められます。

WEBデザイナーを目指すなら、まずはPhotoshopの勉強を始めましょう。
必要な機能に絞って基本を学ぶのが上達のコツです。

スタートに最適な「Photoshop無料レッスン動画」をプレゼントしていますので、これを機にぜひご活用くださいね。

Photoshopが使えるようになれば、あなたの可能性が一気に広がること間違いなし。さっそくWEBデザインを始めてみませんか?

WEBデザインに興味を持っているあなたへ

あなたも、デザインを仕事にしてみませんか?

家事や趣味のスキマ時間にデザインを作るだけで、副業で月に3~5万安定して稼げるようになります。

「私なんかにできるの?」
「もうデザイナーは飽和してるんじゃないの?」

という心配がある方は、ぜひ一度「WEBデザイナーという働き方セミナー」にご参加ください。

デザインを学べば安定した副収入が狙える理由
今からでも副業デザイナーを目指せる理由
正しいデザインの学び方と失敗事例
センスも経験も不要な理由

などをお話ししていて、このページからのお申し込みいただけたら、今だけ無料で参加できます。

「デザインを仕事にするのも悪くないかも」と思っている方は絶対に参加して損のない内容になっているので、ぜひ下のボタンをクリックして詳細をご覧ください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

質問や感想があればご記入ください

コメントする

目次