WEBデザインにPhotoshopとIllustratorは必要か？
WEBデザイン業界に転職するときに、必須のスキルになっているAdobe Photoshop（フォトショップ）とAdobe Illustrator（イラストレーター）という2つのグラフィック系ソフト。WEBデザインを学ぶスクールでも、必ずといっていいほどカリキュラムに含まれています。この2つのソフト、現在WEBデザインの現場でどのくらい使われていて、どのくらいまで使いこなさないといけないのでしょうか？ そもそも、この2つのソフトを使わないとWEBデザインができないのでしょうか？
目次
PhotoshopとIllustratorのそれぞれの役割
Adobe社が提供しているPhotoshopとIllustratorは、デザイン業界で何十年も前から使われている、歴史の長いソフトです。街中で目にするポスターやチラシ、パンフレットのなかで、このソフトを使って作られたものは、数えきれないほどあります。WEBデザインに使われているケースも、かなり多いです。
この2つは、どちらもデザイン目的で使われますが、できることはまったく変わります。作りたいものや使う用途にあわせて、どちらかのソフトをつかって、または組み合わせてデザインを作っていきます。
Adobe Photoshop
フォトショの名前で呼ばれるこのソフト。Photoshopは、主に写真の加工や画像の編集で使われます。写真のサイズや明るさを調整したり、写真の不要な部分を削除したり、パーツやエフェクトを追加したり。特にここ数年は、AIの発達によって写真の編集が以前より格段に簡単にできるようになりました。
Adobe Illustrator
こちらは、イラレと呼ばれます。Illustratorは主にイラストの作成やレイアウト目的で使用されます。配置したパーツを移動・変形させたり、色を変更したりなどが、とても簡単にできます。ロゴやアイコンを作成するのにもよく使われます。
得意なところを組み合わせた使い方
それぞれの特長と得意分野をもつ2つのソフト。単独で使われることもありますが、例えばチラシのデザインをする場合、全体のレイアウトをIllustratorで作って、そこにPhotoshopで編集した画像を埋め込んでいく、という使い方をします。紙媒体のデザイン会社では、現在でもメインで使用されていますし、それぞれのソフトを高いレベルで習得することが求められます。
ですが、WEBデザインに限っていうと、この数年でかなり状況は変わってきました。
WEBデザインの現場では使うシーンが減っている？
WEBサイトを作るとき、以前はこのどちらかのソフトを使ってデザインをしていました。制作会社やデザイナーによって変わりますが、PhotoshopでWEBデザインをしていた方が多かったように思います（私自身はIllustrator派でした）。
時代とともにインターネットの技術やデバイスも進化して、WEBサイトに求められることがどんどん変わってきました。そのなかで特に大きく変わったのが、スマートフォンの登場でした。
スマホの登場で大きく変わったWEBデザイン
それまでは、WEBサイトはパソコンで閲覧されることがほとんどで、パソコンの画面の大きさにあわせたデザインだけ作れば、ほとんどの人が問題なく表示されていました。しかし、スマホの登場によって、パソコンだけでなく、スマートフォンやタブレットでもデザインが崩れず、内容も伝わるようにレイアウトする必要がでてきました。いわゆるレスポンシブデザインです。
さらに、スマホやタブレットの場合は、画面が小さくなるため、レイアウト上の制約もたくさんでてきます。これまではヘッダーに表示させていたサイトのメニューを一時的に隠したり、サイドバーに表示させていた内容を別な場所に移動させたり、画面タップに応じて表示を変えるなどの、これまでになかった動きを踏まえたデザインをする必要がでてきました。
WEBデザインのトレンドの変化
また、WEBデザインのトレンドも時代に応じて変化していきました。以前は、リッチデザインという考え方で、現実にあるパーツを意識して、立体感や装飾を施していくデザインが主流でした。キラッと光沢のあるボタンや、素材感のある背景、透明感や影のあるパーツを多用したデザインです。この手のデザインをする際には、Photoshopの機能がかなり役に立ちました。
しかし時代を追うごとに、フラットデザインやマテリアルデザインという考え方が主流になっていきます。このデザインの考え方では、過度な装飾は行わず、シンプルに機能性や可視性が重視されます。さらにレスポンシブデザインをしていく際にも、デバイスごとの調整がしやすく、制作者側にもメリットが大きい考え方です。
PhotoshopとIllustratorはとにかく多機能、でもWEBデザインでは使わない機能も多い
PhotoshopとIllustratorはとにかく多機能で、この2つのソフトをある程度使いこなせるようになれば、WEBサイトだけでなく、紙のデザインを含めた、本当にいろいろなものを作ることができます。ですが、WEBデザインに限れば、時代の変化とともに、このソフトでしかできなかったことは確実に減ってきています。使わなくてもWEBデザインはできるし、簡単な写真加工やパーツ制作なら、無料の代替ソフトやCanvaなどのサービスを利用する選択肢もあります。
WEBデザインの主流はFigmaやXDなどのデザインツールに
こうした状況を踏まえ登場したのが、WEBサイトなどのデザインに特化したFigma（フィグマ）やAdobe XDというデザインツールです。これらのツールは、PhotoshopやIllustratorのような平面的なデザインだけでなく、WEBサイトのような複数ページに渡るレイアウトや画面遷移の動きを再現することもできます。また、レスポンシブデザインに対応させたり、実際のブラウザでどうやって表示されるかプレビューする機能などもあります。
さらにこのツールは、コーディングやクライアントの確認など制作フローも考慮されていて、これまで煩雑だった原稿やデータのやりとり、チェックのフローなどもスムーズにしてくれます。より現実のWEBサイトに近い形でデザインができて、より円滑にWEBサイト制作の進行をすることが可能になりました。
FigmaやXDだけでも十分WEBデザインはできる！
私自身は、現在WEBサイト制作の仕事をしているなかで、PhotoshopやIllustratorでデザインデータをもらうことは、ほとんどなくなりました。8～9割方は、XDがFigmaでデータのやりとりをしています。
デザインの方向性にもよりますが、FigmaやXDを使えば、PhotoshopやIllustratorを使わなくても、十分に高いクオリティのWEBサイトをデザインすることは可能、というのが実情です。
最も困るのは「一人でつくっているわけではない」ということ
では、PhotoshopとIllustratorがまったく使えなくてもよいか、となると、また話が変わってきます。特に問題になるのが、データのやりとりの際です。
必ずしも、WEBデザイナーだけで完結するわけではない
WEBサイト制作が一人で完結することもありますが、大抵の場合はそうはいきません。
WEBサイトと同時に紙のパンフレットの制作が進んでいて、そこからデータを使用しないとならないケース、会社のロゴをIllustratorなどのデータで送られてくるケース、Photoshopで制作をされているデザイナーからデータが送られてくるケース。
そうした際に、PhotoshopとIllustratorがまったく使えないとなると、必ず仕事に支障をきたします。場合によっては、クライアントやチームの方に迷惑がかかることもあります。
結論：使わなくてもWEBデザインはできるが、使えないと困ることが多い
WEBデザインをするために、PhotoshopとIllustratorを使いこなす必要は、まったくありません。私自身も、この2つをほとんど使用しないこともありますし、最近は使わずに完結してしまうことも、少なくありません。ただ、データのやり取りの際には必要になりますし、この2つのソフトが使えることで、デザインの幅は確実に広がります。
写真を合成したり不要な部分を削除したり、色や明るさを調整するには、やはりPhotoshopの機能は強力です。数年前のバージョンからは、AIが搭載され、写真加工が本当に簡単にできるようになりました。ロゴやアイコンを制作するには、Illustratorが役に立ちます。Figmaや他のツールでもできますが、細かい調整や変更をしていくには、Illustratorが圧倒的に便利です。
すべての機能を使いこなす必要はありません。教本にある操作をすべて覚える必要もありません。ただ、それぞれのソフトの基本の操作方法と、最低限の機能だけは使いこなせるよう、しっかりと身につけていきましょう。
おまけ：個人的に覚えておいたほうがよいと思うこと
＜Photoshop＞
- 画像の解像度やサイズの変更方法
- 写真のトリミングの仕方
- レイヤーと調整レイヤーの理解
- スマートオブジェクトの特性
- レベル補正、トーンカーブ、自然な彩度の調整
- 生成塗りつぶし（これができれば、たいていの画像加工はできる）
- スポット修復ブラシ、コンテンツに応じた塗りつぶし
- ニューラルフィルタ（写真加工にはこれも便利）
＜Illustrator＞
- パスやアンカーの操作
- レイヤーとアートボードの理解
- 塗りや線の基本的な考え方
- パスの合成や切り抜き、アウトライン化などの操作
- オブジェクトの整列
- 文字の入力やアウトライン化
- クリッピングマスク
- Photoshopなど外部ソフトのデータの読み込み方
- アセットの書き出し方法