ツール

【Web制作にIllustratorは必要?】できることや注意点、使うべき人を紹介

Web制作を行うと、Illustratorというソフトを耳にすることが多くなるでしょう。クライアント様から「イラレ使える?」なんて聞かれるかもしれません。

それゆえ最近は、

悩んでいる人

Illustratorって何ができるんだろう?

悩んでいる人

Illustratorを使えるようになった方がいいかな?

この記事ではこのようなお悩みを解決します。

Illustratorのできること【向き不向き】

この章ではIllustratorでできることの向き不向きをお伝えします。

Illustratorが向いていること2選

向いていること①:アイコン・ロゴ作成

アイコンやロゴの作成はIllustratorの得意分野です。

写真を使わず、線や円などを使ってオブジェクトを作成されるとき、ほぼIllustratorが使われると考えて問題ないでしょう。

それくらいIllustratorの作成力が強いということです。

下のアイコンたちもIllustratorで作成されていると思いますよ!

向いていること②:レイアウトデザイン

レイアウトデザインも得意分野です。レイアウトデザインとは、画像やテキストなどのレイアウトを行って作るデザインのことです。※僕しかこの言葉を使わないかもしれませんが、伝わればOKです。笑

下は僕が実際にIllustratorで作成したレイアウトデザインです。Twitterのヘッダーを自分で作成しました。

↑僕のTwitterのヘッダー

このヘッダーのように、線やテキストなどをキレイにレイアウトして、ひとつの画像をつくるのも、Illustratorの得意分野です。

もしアイコン・ロゴやレイアウトデザインにご興味がある場合には、Illustratorを試してもよいでしょう。下のボタンより、Illustratorのお試しができるので、よければご覧ください。

Illustratorが不向きなこと2選

不向きなこと①:画像加工

背景画像を切り取ったり、画像にハイライトなどの効果を付け加えたりは、Illustratorは不向きです。

そういったことは、Photoshopの得意分野です。画像加工をしたい場合にはPhotoshopを検討するとよいでしょう。

https://kaki-lab.org/webproduction-photoshop/

不向きなこと②:サイトデザイン

サイトデザインは不向きです。サイトデザインに向かない理由は下記の通りです。

サイトデザインに向かない理由
  • オブジェクトのサイズが測りにくい
  • コメント機能がない
  • ウェブ上での共有がやりにくい

サイトデザインを行って共有するのはXDの得意分野です。XDにご興味がある方は下の記事がおすすめです。

https://kaki-lab.org/webproduction-xd/

Illustratorがおすすめの人3選

おすすめの人①:バナーやロゴの制作にも手を広げたいWebデザイナー

Webデザイナーをする人/したい人にはIllustratorの使用がおすすめです。ロゴやバナーなどを仕事の幅が広がるからです。

おすすめの人②:デザインをいじることのあるコーダー・ディレクター

コーダーやディレクターであっても、デザインを多少いじることはあるでしょう。僕も、コーダーとして営業して業務提携に至ったクライアント様から、Illustrator業務を依頼されたことがあります。

抜群にできる必要はないので、少しだけできるようになっておくと、仕事の幅が広がるのでおすすめです。

おすすめの人③:情報発信をしたい人

Web制作やWebライティングなど、IT関係の仕事をしている人で、情報発信している人は少なくありません。

情報発信の際は、Twitterのヘッダーやブログのバナーを作ったりすることはよくあります。そういったとき、Illustrator早くに立ちます。

もちろん、IllustratorではなくパワポとかでもOKなのですが、個人的にはレイヤー機能やロック機能、各種エフェクトを考えると、Illustratorに圧倒的軍配が上がります。

Illustratorの費用【お得に使用する方法も】

Illustratorを使用するために必要な費用についてお伝えします。

Illustrator単品の料金

まず、一般にIllustratorの費用は下の通りです。

プラン料金
年間プラン(月々払い)2,728円/月
年間プラン(一括払い)28,776円/年
月々プラン3,828円/月

料金は安いとは言えませんが、とても有用なツールなので、使い方次第ではあっという間に、元を取れてしまうでしょう。

ちなみに僕は、案件や図解作成、情報発信でフル活用しているため、お値段以上の恩恵は受けていると考えています。感謝です。

お得に使用する方法2選

Illustratorを安く使用する方法をお伝えします。

方法①:コンプリートプランを利用する

1つ目がコンプリートプランを利用する方法です。年間プランでも月額6,248円(税込)となり、高くなってしまいますが、XDやPhotoshopも一緒に使えるお得なプランです。

加えて、Premire ProやAfter Effectなどの動画編集ソフトなども使用できます。

コンプリートプランの料金の詳細は下の通りです。

プラン料金
年間プラン(月々払い)6,248円/月
年間プラン(一括払い)72,336円/年
月々プラン9,878円/月

方法②:学割を利用する

2つ目が学割を使用する方法です。この方法は学生しか使えませんが、学割もお得です。

コンプリートプランを月額2,178円(年間プラン)で使用することができます。僕は学生ですが、このプランを利用しています。

Illustratorだけでなく、XDやPhotoshopも使っています。たまにPremire Proなども使用します。

まずは無料体験を試すのがおすすめ

もしIllustratorにご興味があれば、一度試してみることを推奨します。Illustratorは非常に便利ですが、使用頻度が低くかったり、ご自身に合わなかったりすれば、お金の無駄になってしまうからです。

Adobeは無料体験を行っています。簡単に始められますので、その使用感で継続するかを検討してみてはいかがでしょうか。

Illustrator使用時の注意点

Illustratorを使用する際、注意したいことについてお伝えしています。

注意点①:Webデザイン時にはカラーをRGBに設定する

カラー設定は、RGBとCMYKのに種類がありますが、RGBに設定してください。主にWebデザインの場合はRGBを、印刷物の場合にはCMYKを使用します。

注意点②:単位をピクセルにする

単位はmmなどではなくピクセル表示にしてください。Web上で表示するため、単位をピクセルとしたいからです。

注意点③:解像度は72pxで行う

Illustratorは粗くならず、なおかつ、データ容量が大きくなりすぎないように72ppiにするのがおすすめです。

注意点④:ピクセルプレビューで作業する

ピクセルプレビューとは、作業中も「ビットマップ画像」で表示され続ける状態のことをさします。

下の画像をご覧ください。色の境界を見るとわかりやすいのですが、左は滑らかですが、右はガビガビしていますよね。

引用:LIG

左は滑らかに表示される「ベクトル画像」で、右がドットで構成される「ビットマップ画像」だからです。

初期設定のままだとIllustratorは、作業の表示は“なめからか”なベクトル画像となります。しかし、画像で出力された時にはドットで構成される「ビットマップ画像」なんですよね。

こうすると、作成中見ているものと、制作物には違いが生まれてしまいます。

そのため、設定はピクセルプレビュー画面にしましょう、ということです。

注意点⑤:オブジェクトごとにアートボードをわける

オブジェクトごとにアートボードもわけましょう。アートボードとは画像として書き出すキャンバスのようなものです。

アートボードをわけると、のちのち整理しやすいです。

Illustratorと他Adobe製品と併せてうまく使う方法

方法①:IllustratorとPhotoshop

撮影した写真をPhotoshopでトリミングしたり、エフェクトをかけたりし、Illustratorでバナーや背景画像なのでのレイアウトを行うなどの連携技がメインです。

方法②:IllustratorとXD

Illustratorでバナーやロゴ、レイアウトデザインなどを作成して、サイトデザインでXDを利用するのが、メインの連携技です。

まとめ

この記事では下の5点についてお伝えしました。

  • Adobe Illustratorのできること【向き不向き】
  • Illustratorがおすすめの人3選
  • Illustratorの費用
  • Illustrator使用時の注意点
  • Illustratorと他Adobe製品と併せてうまく使う方法

Adobe製品の全体像についてざくっと知りたい方には下の記事もおすすめなので、ご興味があればご覧ください。

https://kaki-lab.org/webproduction-adobe/