【Webデザイン添削】メンターにオンラインで相談できるサービスはこちらから

WebデザインでIllustratorとPhotoshopの使い分けする決め方を紹介

記事内に商品プロモーションを含む場合があります
Webデザインのフォトショ・イラレの使い分けアイキャッチ画像

Webデザインを勉強中で「ホームページのTOPページにチャンレンジしよう!」と思っている方で、Webデザインをする時に、PhotoshopとIllustratorを使い分けしたらいいのか、どちらを使ったらいいのか、悩んでいませんか?

WebデザイナーはPhotoshopとIllustratorは必須スキルと言われていますよね、どう使い分けたらいいのかお伝えしていきます。

PhotoshopとIllustratorの違いについては、こちらの記事もあわせて読んでください。

目次

PhotoshopとIllustratorの使い分けは機能の特性を活かすこと

Webデザインは、PhotoshopもIllustratorもどちらのアプリも使用します。実務では両方を組み合わせて使うことが多くなります。それぞれ特性があるので、機能を知り使い分けると効率よくWebデザインができます。

PhotoshopとIllustratorの違いを簡単にまとめると、Webデザインで画像の扱いが必要なデザインにはPhotoshopを使い、イラストやアイコンの作成、デザイン化した文字の配置が中心となる場合はIllustratorが向いています。

Illustratorを使う場面

「線を書く」ようなオブジェクトが複雑になるほど作業や、後に拡大縮小して使うことが考えられるデータはIllustratorが得意とする分野です。イラストをメインにしたWebサイトのデザインをする場合は、Illustratorを使ってデザインをするほうが向いています。
Webデザインをする前の、デザインに進む前にラフ以上デザインデータ未満の「カンプを作る」時にもIllustratorでの作業が早いです。

Photoshopを使う場面

Webデザインを制作していく中で、写真を使うことが多くあります。
2つの写真を1つに合成したり、トリミングしてサイズを変えたり、もらった写真が暗かった場合は明るくしたりなど、これらはPhotoshopでしかできないことです。

Webデザインの仕上げとしてコーディング用に画像の書き出しをします。この時もPhotoshopで画像の画質や形式を選択できるので、Photoshopが活躍します。

うまくPhotoshopとIllustratorの使い分けをしてデザインを進めよう

実際のところカンプ作成やデザインは、フォトショ・イラレの両方でできるので「作業がしやすい方を使うのが良い」と思います。
私の周りでも、IllustratorのみでWebデザインをする方もいます。使っていく中でやりやすい方で作れば良いと思います。

もし使い分けに迷ったら、どちらのアプリを使えば表現したいことが達成できるかな?という視点で決めてみましょう。それぞれのアプリの機能特性を考えて必要に応じて使い分けるといいかと思います。

  • URLをコピーしました!

この記事を書いた人

安藤ほなみのアバター 安藤ほなみ グラフィック・Webデザイナー

デザイン業界経験20年。Mac使用歴も20年。グラフィックデザイン・Webデザイン両方経験したからこそ、どんなデザインでも使える基礎から、グラフィック・Webの違いや気をつけること、Macの使い方から知っておくと良いことをお伝えします。

目次