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

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

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

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

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

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

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

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

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

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

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

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デザインの現場で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の違いについて、ここでは解説していきます。

作成できる画像の形式

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

Photoshopはラスター形式

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

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

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

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

Illustratorはベクター形式

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

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

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

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

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

できること／得意なこと

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

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

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

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

Illustratorは図形の描写が得意

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

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

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

Photoshop／Illustratorの料金事情

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

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

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

Photoshopの料金プラン

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

引用：Adobe Photoshop 公式サイト

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

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

Illustratorの料金プラン

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

引用：Adobe Illustrator 公式サイト

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

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

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

無料体験期間がある

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

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

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

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

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

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

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

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

あなたがもし学生や教職員なら、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デザインの独学ロードマップ】最速で習得できる方法を解説 結論、独学でWEBデザインのスキルを身につけることは可能です。 ただし、誤った手順で勉強してしまったり、モチベーションが続かなかったりすると、途中で勉強を投げ出してしまうかもしれません。 この記事では、未経験の方でも独学でWEBデザイナーになれるように、勉強のポイントや方法を詳しく解説していきます。

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

あわせて読みたい

【保存版】WEBデザインスクールの選び方｜4のチェックポイント 「スクールの選び方がわからない…」「WEBデザインスクールが多すぎて選べない…」「そもそもWEBデザインスクールって通う意味あるの？」 この記事はそんな悩みや疑問を持…

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

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

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

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

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

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

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

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

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

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

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

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

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

▼Adobe公式サイト

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

あわせて読みたい

【超簡単】Photoshopのインストール方法とよくある質問まとめ 広告バナーやホームページ、SNSの投稿を作るときに使用するPhotoshop（フォトショップ）。 今回は、Photoshop使用開始までの方法を詳しくまとめました。 記事の後半では…

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

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

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

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

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

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

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

あわせて読みたい

Photoshopを学ぶのにおすすめの本18冊を初心者向けに紹介 Photoshopは、WEBデザインやグラフィックデザインなど、さまざまな分野で活躍するクリエイティブツールです。 幅広い使い方ができるというメリットがある一方で、初心者…

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

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

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

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

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

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

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

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

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