フォトショとイラレを徹底比較!Webデザイナーなら身につけたい使い分け方法

Webデザイナーが使用しているデザインツールは、「Photoshop(フォトショップ)」がまだまだ主流と言われていますが、最近は「Illustrator(イラストレーター)」だって負けていないのはご存知ですか?

今回はデザイナーの間でたびたび話題になる、「どっちがWebデザインにピッタリなの?」という謎を探るべく、最新の情報を比較してみました。

20160616_1

目次

  1.  1. そもそも、PhotoshopとIllustratorのちがいってなに?
  2.      Photoshop(フォトショップ)=「写真や画像の加工」のためのツール
  3.      Illustrator(イラストレーター)=「製図・レイアウト」のためのツール
  4.  2. 最新バージョンCC(2015)ではこんなことができるようになった!
  5.      Photoshop CC(2015.1現在)
  6.      Illustrator CC(2015.2)
  7.  3. PhotoshopとIllustratorを上手に使い分けるポイント
  8.  4. プロアマ問わず抑えておきたいWEBデザイン用の初期設定
  9.      Photoshop
  10.      Illustrator
  11.  5. おわりに
  12.  

    そもそも、PhotoshopとIllustratorのちがいってなに?

    ■Photoshop(フォトショップ)=「写真や画像の加工」のためのツール

     

    20160616_2

    画像加工に特化したツールであるPhotoshop。基本的にピクセル単位でデータの処理ができるため、細かい画像の切り抜きや色味の調整、形の変化をつけやすいのが大きなポイントです。

    また、同様にピクセルで表現されているWebデザインとの相性が良いので、多くのWebデザイナーが一番はじめに習得するツールでもあります。

    ■Illustrator(イラストレーター)=「製図・レイアウト」のためのツール

     

    20160616_3

    主に紙媒体で使用されているのが、Illustrator。「ピクセルデータ」とはちがう、「ベクターデータ」と呼ばれる線で、拡大縮小してもぼやけることなくキレイに表現できるのがポイントです。

    また、ひとつ描いたものが”オブジェクト”とよばれるパーツとして扱われるので、整列などがとてもスマートにできるのも特徴です。(※ただし、ベクターデータは重いので、線を使い過ぎると動作が重くなる傾向があるので注意が必要です。)

    以上のことから、それぞれのツールに違った良さがあり、WEBデザインの規模にあわせて使い分けができることが望ましいとされています。

    最新バージョンCC(2015)ではこんなことができるようになった!

    パッケージ版からダウンロード版に移行したAdobeシリーズですが、アップデートの更新頻度も高く、日々使いやすいように改良されています。様々な新機能が追加されていますが、なかでもWEBデザイナー向けの機能をピックアップしてご紹介いたします。

    ■Photoshop CC(2015.1現在)

     

    ・整列がしやすくなった

    PhotoshopはIllustratorと違い、それぞれのパーツをオブジェクトとして認識する機能はなく整列に関して弱い部分がありましたが、最新版ではその問題が解決されています。

    ・アートボードの活用がしやすくなった

    ドキュメントの種類から[Web]や[モバイルアプリデザイン]を設定すると通常カンパスがアートボード機能に変わります。

    p&I1

    ・フォントの検索がしやすくなった

    WindowsやMacのテキストエディタの置換機能と同じように、Photoshopも同じ機能が使えるようになりました。〔編集〕 → 〔検索/置換〕を選択すると使えるようになります。

    20160616_6

     

    ■Illustrator CC(2015.2)

    ・16進数値のコピー&ペーストできるようになった

    以前はカラーとカラーコードのひも付け表示がされておらず、Webサイトなどで確認する作業が発生していました。しかしこの機能の追加により、コーディングに引き継ぐ際もスマートに資料を提供できるようになります。

    20160616_7

    ・バックアップ機能が追加された

    データやパソコンのパフォーマンスが悪いと起こりがちな”クラッシュ”が発生しても、作業内容が復元されるようになりました。

    以上、それぞれを使い比べてみるとわかるのですが、Photoshopはガイドをたくさん引かなくても配列しやすいようになったり、IllustratorはWEB向けのデザインがしやすいようになったりしています。

この記事を書いた人:nomal

tadano

大手印刷会社で求人広告(エディトリアルデザインやコピーライティング)を担当し、2年半働いたあとWebデザイナーに転身。 猫とお寿司には目がありません。イラストを描いてリフレッシュしながら楽しく過ごしてます。 Twitter:@nomal_f

関連する記事

facebook

案件情報や最新記事をお届けします。
ぜひチェックしてみてください。