PhotoshopよりIllustratorでWebデザインをした方が捗る4つの秘密

PhotoshopよりIllustratorでWebデザインをした方が捗る4つの秘密

こんにちは、外国人のWebデザイナーのShowDDDD(略称SD)です。今回は、なぜIllustratorでWebデザインを作った方がいいということをご紹介したいと思います。なぜかと言いますと、その理由は4つあります。

1. 新しいWebデザインツールより、圧倒的な導入のしやすさ

新しく開発されたツールを学習するのにだるい

日本では、今までのWebデザイン制作ツールはPhotoshopの一択でしたが、近年は、sketchやfigmaのようなWeb・UIデザイン専用ツールが続々登場してきましたが、そのようなツールのUIや操作性を学習するのに、面倒くさいと思われる人は少なくないと思います。ただし、Adobeのツールなら、UIも操作方法も速く慣れてしまうので、学習コストがあまりかからなくてもすぐに使えるようになります。

お勤めの会社の都合で、新しいツールの導入は難しいこともある

新しいツールを制作フローに導入するのに、個人のフリーランスの方であれば、作業は自分だけの場合が多いので、割と簡単に出来ます。しかし、Web制作会社の場合は、デザイナーの全員に使用させるのに、学習コストが大きかったり、ツールの利用料金だったり、クライアントへの納品もPSDの指定があったりするので、まだ簡単に導入出来ないのは現状です。

疑う・迷う・考えるよりも、まずはやってみれば好きになる(実体験)

Photoshopが大好きなSDは、これまでもずっとPhotoshopでWebデザインを作ってきましたが、最近はIllustratorで作るようになった結果、Photoshopで作るよりは、ずっと幸せな気分です!

あっ、違います!気分だけではなくて、実際に効率も良く、デザイン修正にも強く、操作性も文句なしというメリットがあります。

2.IllustratorはPhotoshopよりレスポンシブWebデザインがしやすい

1つのデータに各ページのPC・SPのアートボードを多数作っても問題ない

もちろん今のPhotoshopも複数のアートボードを作成できますが、ピクセルデータがベースなので、アートボードの数が増えてこればくるほど、パソコンが重たくなってしまい、固まることはよくあります、最悪な場合はPhotoshop自体が落ちって、デザインデータが自動保存のバージョンにしか保てません。

SDにとっては、これは一番大きなダメージで、もう一回作業しなきゃいけない上に、やる気がとことん凹むのです。

シンボルの9スライスの活用で、パーツの使い回し・一括修正が楽

9スライスの拡大・縮小機能を使うことによって、まるでCSSのようにパーツの色や大きさなどをコントロールすることが出来ます。また、修正が必要な場合に、シンボルを変更することだけで、各アートボードに配置しているパーツの見た目も変わってくれます。これはデザイナーにとって、まさに捗る一歩ではないでしょうか。

スマホデザインはあえて1xで作れるから、様々な換算は不要!(実験中)

SDも最近から、スマホデザインを1xで実験的に作っています。なぜ1xでつくかというと、Photoshopで通常のスマホデザインを2xで作るより、下記のようなことができるからです。

  • コーディングするときに、文字サイズ・横幅などをいちいち2を割る手間は省けるから
  • 画像はリンク配置にしているので、それ自体の拡大や縮小によるぼやけることはない
  • アイコンやイラストなどはベクターデータなので、1xで作ればそのまま調整することなく使える(もちろん場合によって微調整は発生する)

3. シンボルや○○スタイルの設定で修正に強く、素早く対応できるから、作業が捗る!

シンボルの活用で一括変更が楽!

シンボルの活用で、あらかじめ様々なUIパーツのデザインを定義していろんなページに適用出来て、修正が入った時に、一括変更が出来て楽!

各文字段落毎にデザインしなくて済む

段落スタイルもCSSの考え方に似っています。フォントサイズ・行間・文字色などは一括で設定し、変更出来ます。必要に応じて個別に文字サイズや文字色を設定することも可能。

グラッフィックスタイルは品質を保てる量産してくれる

グラッフィックスタイルを使うことによって、ボタンデザインなどの量産が効率的です。何より、1つのサイトのデザインガイドがしっかり守られているのは大きいです。

4. 操作性もデータもとにかく軽い

Photoshopより、操作画面が軽くてストレスにならない

デザイン作業をする時に、それと同時にブラウザーやPPTなどのソフトを立ち上がることがほどんどです。Illustratorでは、ピクセル画像・PSDを外部からリンク配置にしておけば、デザイン画面にそのデータのサムネイルだけが表示されるので、他のソフトと同時に立ち上がっても、動作が軽くてストレスにならないです。

出来たデータの容量が小さい

Illustratorで作成したデータはとにかく小さいです。それは、ベクターデータと画像(もしくはPSD)データを分けているからです。

別にそうしなくていいと思われるかもしれないですが、画像データを外部ファイルにすることで、差し替えの時に一括出来て、複数のデータに反映できるから、かなりオススメです。

Photoshopより複数のオプジェクトを操作することが優れています

Photoshopは基本的に1つのオプジェクトを1つのレイヤーを使いますが、Illustratorは複数のオプジェクトを1つのレイヤーを使う仕組みです。

複数のオプジェクトを同時に移動・複製&移動などの操作がドラグ操作で選択できるので、Photoshopのように関連レイヤーを1つずつ選択する手間は省けて、面倒な作業は発生しないから、サクサクで進められます。

まとめ

PhotoshopもIllustratorも大好きなSDは、Webデザインにおいて、この2つのツールを目的に合わせて一緒に使うことをオススメします。

Photoshop

  • バナーの作成
  • 写真画像の合成・レッタチ
  • クライアントさんからの指定でPSD納品が必要な時

Illustrator

  • Web・アプリのUIデザイン
  • アイコンやイラストをSVGで書き出す(アニメーションを加えるためなど)
  • 紙媒体の仕事

ではでは、またIllustratorでWebデザインを作成のTipsを別の記事にまとめておきたいと思います、ぜひお楽しみに!