Webデザイナーになるために必要不可欠なツール、Adobe Illustrator。しかし、初めて触る人にとっては操作が難しく、どこから始めれば良いのか分からないという方も多いかもしれません。

そこで、未経験からWebデザイナーを目指す方に向けて、「未経験からWebデザイナーになるには vol.7」では、Illustratorの基本から実践的な使い方まで、詳しく解説します。Webデザインを専門とするクリエイターであり、クリエイティブ系の専門学校で講師もやられている「内田 祐生(うちだ さちお)」先生 が、Illustratorの操作方法やデザインテクニックを惜しみなく教えてくださいます。

【ダイジェスト動画】でポイントをチェック!

  • Illustratorの基礎知識や初期操作を知ることができる
  • WebデザイナーとしてIllustratorをどのように使うかが把握できる
  • Illustratorで何ができるかを新しく身につけることができる

未経験からWebデザイナーになるには vol.7~Adobe Illustratorを理解する〜

Webデザイナーを目指す方の必携ツールとなる「Illustrator」。今回の「未経験からWebデザイナーになるには vol.7」では、Illustratorの基本知識や初期操作から実践編まで、現在デザイン(印刷/Web)のディレクションや制作、執筆活動の他、クリエイティブ系の専門学校で講師も務める「内田 祐生(うちだ さちお)」先生に、一つひとつのポイントも踏まえてお話しいただきました。

登壇者

内田 祐生(うちだ さちお)氏
design fleet inc. 代表取締役/ディレクター、デザイナー、ライター、インストラクター

デザイン(印刷/Web)のディレクションや制作、執筆活動の他、クリエイティブ系の専門学校で講師も務める。
1999年デザイン事務所開業、これまでに動画配信を主要コンテンツとする文化庁サイトのWebデザイン担当や、東京都教育庁のPRに関するデザイン制作、電鉄系建設会社のコーポレートプロフィールに関する印刷、Web両方のディレクション、デザイン制作などに携わる。また、UI/UX案件として大手メーカーのユニットバスに関するクライアント向けプレゼンシミュレータ開発を長年に渡って行っている。案件としては相談を受け、コンサルタント的な立場から始まり、開発や制作につながるパターンが多い。

design fleet inc. 代表取締役 内田 祐生氏

Adobe Illustratorってどんなツール?

IllustratorとはAdobe社が出しているイラストレーションを制作するソフトです。まっさらなところから線を組み合わせて図形を作り、色を塗ることでイラストを作り上げていきます。本物そっくりなリアルイラストレーションというものからフラットなイラストの制作も可能です。

それぞれのパーツで作られたものを配置していくことで、イラストの全体像を組み立てていきます。たとえば直線や図形を組み合わせたり、中の色をグラデーションや半透明にしたりしてイラストを作ることが基本の使い方です。

Illustratorは線や図形を組み合わせてイラストを作成するツール

IllustratorとPhotoshopとの違いは?

Illustratorと並行してよく聞くPhotoshopというツールがありますが、この二つはどのような違いがあるのでしょうか。
Illustratorはベクトル(ベクター)系ドローソフトやラスター系(ペイント系)ドローソフトと言われるものの代表的な一つで、ポイントとポイントを繋いで曲線や直線を描いたり、図形の塗りつぶしをしたり、画像をぼかしたりなどを行うことが得意です。

一方、Photoshopはピクセルと言われる正方形のちょっとずつ色が違うものが集まったデータでできています。それを引いてみると一枚絵のように見えるのですが、拡大すると方眼紙のような色を塗りつぶしたようなものになります。

ベクター系ドローソフト

Illustratorにおける画像の解像度について

ピクセルと同じように一般的に有名な言葉として「解像度」というものがあります。これはWebデザイナーが制作する際に、Web用なのか印刷用なのかで必要な解像度が異なってくるのですが、Illustratorのようなソフトは拡大縮小しても画像の線がぼやけることや荒れてしまうことがありません。

Illustratorの基本用語「パス」について

パスとは図形を構成する要素のことを言います。Illustrator内のペンツールや曲線ツールを使ってアンカーポイントと呼ばれるものを打ち込んで、図形や曲線を自由に描くことができます。
これらが自由にコントロールできるようになると、さまざまな綺麗なイラストが描けるようになるのです。

パスで描画する際のイメージ

Illustratorの画面の最初に出てくるプリセットってなに?

Illustratorを開き「新規ファイル」を選択すると、初めにプリセットを選ぶ画面が出てくると思います。プリセットとは設定値を前もって調整することで、Illustratorではどんなサイズのものを作るのかを指しています。

Illustratorはさまざまな用途で使われるためテンプレートも多く、例えば「Web」というカテゴリーを選ぶとその中にWebサイトに合わせたサイズのテンプレートが出てきます。その他にもモバイル、印刷、フィルムとビデオ、アートとイラストなど色々なジャンルのデザインに対応しており、カスタムを押して自分で設定することも可能です。

ドキュメントのプリセット

Illustratorのアートボードについて

Illustratorにはアートボードというページやシートに似たツールがあり、これを使用するとページを一枚ずつ増やしていくことができます。このアートボードは自由に再配置ができ、簡単に並び替えが可能です。

また、Illustratorではクリッピングパスと言われるものを作成して画像を切り抜くこともできます。

画像の切り抜き

Illustratorの実践法

Illustratorはプロの現場でどの様に使われているの?