WEBデザイン

PhotoshopとIllustratorの違いとは?WEBデザインでどちらを使うべきか解説

WEBデザイン

「WEBデザインはPhotoshopとIllustratorどっちを使うべき?」

「Photoshopを使うメリットは?」

という疑問がある方向けに、この記事ではWEBデザインでPhotoshopとIllustratorどちらを使うべきか、Photoshopを利用するメリットや注意点を解説します。

WEBデザイン初心者の方にとって、最初に学習するデザインツール選びは非常に大切です。

使用するデザインツールによって、制作できるデザイン幅が異なり、実際の制作現場で使用される頻度も異なります。

この記事を参考にして、仕事に繋がりやすいデザインツールを使用してみてください。

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

WEBデザインを始めたばかりの方は、PhotoshopとIllustratorどちらを使えば良いか分からないという方も多いでしょう。

結論、これからWEBデザインで使用するツールを選ぶ場合は、Photoshopをメインに学習することをおすすめします。

Photoshopを使う理由は以下の通りです。

  • Photoshopだけでデザイン制作を完結できる
  • 料金が安い
  • Webサイトとの相性が良い
  • 制作会社でも使用されている

Photoshopだけでデザイン制作を完結できる

Photoshopを使う理由は、デザイン制作を全て完結できることです。

写真や画像の加工を得意とするツールにはなりますが、Illustratorのように図形やイラストを描く機能もあり、簡単なロゴやイラストであればPhotoshopだけで制作できます。

Photoshopの機能は全て使いこなせないと言われるほど、あらゆる機能が搭載されているので、Photoshopを極めておけば制作できるデザインの幅を広げることができます。

Illustratorはロゴやイラストの制作に特化しているツールなので、Photoshopと比べると、Illustratorだけでデザイン制作を完結することは難しいです。

料金が安い

PhotoshopはIllustratorと比べて使用料金が安いです。

  • Photoshop:980円(月額)
  • Illustrator:2480円(月額)

Photoshopの料金はLightroomという写真編集ソフトも使用できるフォトプランを利用した場合の価格です。

フォトプランは1年契約の年間プランしか選択できないデメリットはありますが、Illustratorの料金と比べて半額以下の料金で利用できるので、なるべくコストを抑えたい方はPhotoshopがおすすめです。

Webサイトとの相性が良い

PhotoshopはWebサイトとの相性が良い「ラスタ形式」という手法でデザインを作成することができ、アニメーションに対応したデザインも作成可能です。

Illustratorは「ベクタ形式」といって解像度を劣化させずに扱えるメリットがあるので、ロゴやイラスト制作に最適です。

しかし、WEBデザイン制作を行う場合は、写真などを使用することになり、膨大な数式が必要になるためベクタ形式は向いていません。

制作会社でも使用されている

PhotoshopはWEB制作会社でも使用されていることが多く、最初からPhotoshopでデザイン制作を学習している方は、新しく別のツールを学ぶことなく、実務環境に適応できます。

WEBデザイナーがWEB制作を行う場合は、制作会社に指定されたデザインツールを使用するので、多くの会社で使用されているPhotoshopの使い方をマスターしておきましょう。

WEBデザイナーに必要な3つのスキルについてはこちらの記事をご覧ください。

WEBデザインにおけるPhotoshopのメリット

WEBデザインでPhotoshopを利用するメリットは以下の通りです。

  • レイヤー階層に用途名を付けれる
  • レイヤーカンプ機能により管理しやすい
  • 必要な部分だけWeb用画像として書き出せる
  • PC環境に大きく左右されない

レイヤー階層に用途名を付けれる

Photoshopはレイヤーを使用して複雑なデザインを作ることができるツールです。

レイヤー階層には用途名を自由に付けることができ、誰が見ても分かりやすい状態で管理できます。

複数人で共同で作業する場合は、レイヤー階層の明記ルールを指定しておくことで、作業の移行が行いやすくなります。

また、レイヤー階層を見やすく整理整頓しておけば、作業を快適に進めることができ、ミスを減らすことができます。

レイヤーカンプ機能により管理しやすい

レイヤーカンプ機能は、複数のデザインパターンを簡単に切り替えられる機能です。

WEBデザイナーは提案を行う際に、複数のデザインパターンを使用して、クライアントと認識のすり合わせを行うことが多いです。

そのため、デザインを何パターンも登録しておくことができ、修正も自由に行えるレイヤーカンプ機能は非常に便利です。

また、レイヤー階層が明確にされていると、後から部分的に修正を行う場合でも、指定のレイヤーだけを選択して、修正を行えるので、他のデザインに影響を及ぼすこともありません。

必要な部分だけWeb用画像として書き出せる

Photoshopでは必要な部分だけをWEB用画像として書き出すことができます。

レイヤーごとに書き出すこともできますし、スライス機能といって、1つのデザインデータをパーツごとに切り分け、それぞれ別のファイルとして保存することが可能です。

スライス機能は、定規やガイドを使用して行うか、レイヤー単体で行います。

部分的に必要な箇所だけを書き出せることによって、柔軟にWEB制作を進めていくことが可能です。

PC環境に大きく左右されない

Photoshopは使用している方のPC環境に大きく左右されずに動作するメリットがあります。

WEB制作ではWEBデザイナーやコーディングを行うコーダー、作業進行を管理するWEBディレクター、納品先のクライアントなど、様々な人物にプロジェクトデータを共有することになります。

例え共同作業者のPC環境が異なっていても、強制的にフォントやデザイン変換が行われずに、見た目のスタイルを保持しながら作業することができます。

MacやWindows問わず使用できるソフトなので、実際にWEB制作の現場においても最も使用頻度が高いです。

WEBデザインにおけるPhotoshopのデメリット

WEBデザインでPhotoshopを利用するデメリットは以下の通りです。

  • 後からデザイン変更に手間がかかる

後からデザイン変更に手間がかかる

基本的なデザイン変更は、レイヤー階層ごとに行えるので手間はかかりませんが、後から高解像度PCやRetinaディスプレイに対応した高解像度WEBページへの修正を求められた場合に手間がかかります

高解像度に修正するには、拡大したサイズに変更して作り直す必要があるので大変です。

WEBデザイン用のPhotoshop基本設定

Photoshopの基本設定をWEBデザイン用に行う際は、以下の項目を設定します。

  • カラーモード
  • 単位・定規
  • ガイド・グリッド・スライス
  • レイヤーパネルオプション
  • メモリの使用状況

カラーモード

WEBデザイン制作において、カラーマネージメントは非常に大切です。

カラーによってユーザーに与える印象や、サイトの見やすさが大きく変わるので、指定されたカラー通りに制作することが重要です。

カラー設定は画面上部のメニューから「編集」→「カラー設定」をクリックし、RGBの項目を「RGBモニター」に変更します。

単位・定規

単位・定規の初期設定は「mm」になっているので、WEBデザインに使用する場合は単位を「pixel」に変更します。

「pixel」に変更することでコーダーがデザイン通りにズレることなく制作しやすくなります。

画面上部のメニューから「Photoshop」→「環境設定」→「単位・定規」を選択して、定規と文字の項目を両方とも「pixel」に変更します。

ガイド・グリッド・スライス

次に、ガイド・グリッド・スライスを表示して、デザインをズレることなく制作しやすい作業環境を整えます。

ガイドラインは、印刷や画像データとして保存したとしても表示されません。

デフォルトの設定で表示させても活用できますが、WEBデザイン制作を行いやすいように数値の設定を変更しておきましょう。

画面上部のメニューから「Photoshop」→「環境設定」→「ガイド・グリッド・スライス」を選択して、グリッド項目のグリッド線を分割線「10pixel」分割数「10」に変更します。

レイヤーパネルオプション

WEBデザイン制作ではレイヤーを複製しながら作業する場面が多いのですが、デフォルトの設定ではレイヤーをコピーした際に、レイヤー名が自動的に「〜のコピー」として表示されます。

レイヤー名は長くなると前半部分しか表示されずに「〜のコピー」部分が見えずに間違って編集してしまうことがあるので、設定を変更しておきましょう。

レイヤーパネル右上のメニューを選択して「パネルオプション」をクリックします。

そして最下部に表示されている「コピーしたレイヤーとグループに「コピー」を追加」のチェックを外します。

これで自動で「〜のコピー」と付かなくなります。

メモリの使用状況

WEBデザイン制作ではPhotoshopだけでなくIllustratorなど複数ツールを同時に起動することが多いので、メモリの使用状況を調節して、快適に作業できるようにしておきましょう。

デフォルトでは「70%」のメモリ使用が設定されているので、他のツールの並行して使用することが多い場合は「60%」や「50%」など使用量を下げておきます。

直接数値を入力しても良いですし、スライドを左右に動かしても調節できます。

Photoshopでデザイン制作する際の注意点

最後にPhotoshopでデザイン制作を行う際の注意点は以下の通りです。

  • 誰が見ても分かりやすいデータ作り
  • 要素をはみ出さない・重ねない
  • 背景パターンはリピートできる作りに
  • 動的な部分は慎重に決定し、正確に伝える
  • HTMLテキストの最小フォントサイズは11pxに
  • 透過画像に対して描画モードを設定しない

誰が見ても分かりやすいデータ作り

解説した通り、WEBデザインデータはコーディングを行うコーダーやWEBディレクターの方など、複数人で管理して作業するので、誰が見ても分かりやすいデータ作りが大切です。

分かりやすいデータを作るポイントは「レイヤーを整理する」ことです。

まず、レイヤーには分かりやすい名前を付けます。ファイル名ではないので日本語を使用することも可能ですが、一般的には英単語を使用することが多いです。

そして、レイヤーはオブジェクトごとにグループ化しておき、レイヤー階層を明確にしてまとめておきます。

グループ化しておくことで、編集したいレイヤーを見つけやすく、間違って編集してしまうことを避けられます。

そして、表示・非表示レイヤーも明確にしておき、不要なレイヤーは削除して見やすく管理しておきましょう。

要素をはみ出さない・重ねない

指定したコンテンツ幅から要素がはみ出たり、重ならないことが大切です。

paddingの設定を間違えていたり、複数のコンテンツが干渉して重なっているパターンが多いので、最終的なデザインチェックの段階で注意して確認してください。

背景パターンはリピートできる作りに

背景パターンはリピートできる作りにしておくことも大切です。

背景デザイン要素のサイズや間隔は統一させておき、背景領域を広げることになった場合でも対応できるようにしておきましょう。

動的な部分は慎重に決定し、正確に伝える

パララックスアニメーションを適用させたデザインなど、動的な部分があるデザインは慎重に決定し、コーダーに正確に伝えるようにしましょう。

大切なことは、必ず実装できることを確認した上でデザインを作成することです。

アニメーションを考えてデザインを作成しても、コーダーが実現できなければ意味がありません。

要素を動かすアニメーションがある場合は、待機時間やアニメーションスピード、イージングの指定などを話し合ってからデザイン制作に入るようにしましょう。

HTMLテキストの最小フォントサイズは11pxに

Googleクロームはデフォルトの設定により、10px以下のフォントサイズを繰り上げて11pxで表示しています。

なので、HTMLテキストの最小フォントサイズは11pxに設定しておき、11pxよりも小さいサイズのフォントはあまり使用しないようにしましょう。

透過画像に対して描画モードを設定しない

透過画像に対して描画モードを設定する表現では、文字部分だけに背景を透過させた画像を切り出すことができないので、新規レイヤーで図形にしてマスクをかける必要があります。

まとめ

今回はWEBデザイン制作にはIllustratorよりもPhotoshopをメインに使用することがおすすめと解説しました。

Illustratorはロゴやイラスト制作に特化しているツールなので、写真や画像を編集したデザインを制作する場合は、Photoshopを利用しましょう。

WEBデザイン制作を行う場合のPhotoshop基本設定も紹介したので、この記事を参考にデザイン制作を行ってみてください。

ABOUT ME
小山温
「未経験から2週間でWEBデザイナーへ」 がモットーの“週末WEBデザイナー”。 未経験からフリーランスのデザイナーになり、 現在も現役のデザイナーとして 企業や本著者、投資家、士業、スクール、 有名Youtuber関連のWEB、紙のデザインに携わる。 デザイナーとして活動を始めて7年、 クライアントからのリピート率は高く、 5年ほど新規集客なし、 紹介とリピートだけでビジネスを成立。 また、自由を確保するために効率化しつつも、 社員ゼロで毎年8桁の売上を作っている。
【無料LINE講座】週末WEBデザイナー