Webデザイナーになるために必要不可欠なツール、Adobe Illustrator。しかし、初めて触る人にとっては操作が難しく、どこから始めれば良いのか分からないという方も多いかもしれません。
そこで、未経験からWebデザイナーを目指す方に向けて、「未経験からWebデザイナーになるには vol.7」では、Illustratorの基本から実践的な使い方まで、詳しく解説します。Webデザインを専門とするクリエイターであり、クリエイティブ系の専門学校で講師もやられている「内田 祐生（うちだ さちお）」先生 が、Illustratorの操作方法やデザインテクニックを惜しみなく教えてくださいます。
【ダイジェスト動画】でポイントをチェック!
- Illustratorの基礎知識や初期操作を知ることができる
- WebデザイナーとしてIllustratorをどのように使うかが把握できる
- Illustratorで何ができるかを新しく身につけることができる
- 未経験からWebデザイナーになるには vol.7～Adobe Illustratorを理解する～
- 登壇者紹介
- Adobe Illustratorの基本知識と初期操作について
- Illustratorの実践法
- Illustratorで上手く活用したいツールや特徴
- Ｑ＆Ａ
- まとめ
未経験からWebデザイナーになるには vol.7～Adobe Illustratorを理解する〜
Webデザイナーを目指す方の必携ツールとなる「Illustrator」。今回の「未経験からWebデザイナーになるには vol.7」では、Illustratorの基本知識や初期操作から実践編まで、現在デザイン（印刷／Web）のディレクションや制作、執筆活動の他、クリエイティブ系の専門学校で講師も務める「内田 祐生（うちだ さちお）」先生に、一つひとつのポイントも踏まえてお話しいただきました。
登壇者
内田 祐生（うちだ さちお）氏
design fleet inc. 代表取締役/ディレクター、デザイナー、ライター、インストラクター
デザイン（印刷／Web）のディレクションや制作、執筆活動の他、クリエイティブ系の専門学校で講師も務める。
1999年デザイン事務所開業、これまでに動画配信を主要コンテンツとする文化庁サイトのWebデザイン担当や、東京都教育庁のPRに関するデザイン制作、電鉄系建設会社のコーポレートプロフィールに関する印刷、Web両方のディレクション、デザイン制作などに携わる。また、UI/UX案件として大手メーカーのユニットバスに関するクライアント向けプレゼンシミュレータ開発を長年に渡って行っている。案件としては相談を受け、コンサルタント的な立場から始まり、開発や制作につながるパターンが多い。
Adobe Illustratorってどんなツール？
IllustratorとはAdobe社が出しているイラストレーションを制作するソフトです。まっさらなところから線を組み合わせて図形を作り、色を塗ることでイラストを作り上げていきます。本物そっくりなリアルイラストレーションというものからフラットなイラストの制作も可能です。
それぞれのパーツで作られたものを配置していくことで、イラストの全体像を組み立てていきます。たとえば直線や図形を組み合わせたり、中の色をグラデーションや半透明にしたりしてイラストを作ることが基本の使い方です。
IllustratorとPhotoshopとの違いは？
Illustratorと並行してよく聞くPhotoshopというツールがありますが、この二つはどのような違いがあるのでしょうか。
Illustratorはベクトル（ベクター）系ドローソフトやラスター系（ペイント系）ドローソフトと言われるものの代表的な一つで、ポイントとポイントを繋いで曲線や直線を描いたり、図形の塗りつぶしをしたり、画像をぼかしたりなどを行うことが得意です。
一方、Photoshopはピクセルと言われる正方形のちょっとずつ色が違うものが集まったデータでできています。それを引いてみると一枚絵のように見えるのですが、拡大すると方眼紙のような色を塗りつぶしたようなものになります。
Illustratorにおける画像の解像度について
ピクセルと同じように一般的に有名な言葉として「解像度」というものがあります。これはWebデザイナーが制作する際に、Web用なのか印刷用なのかで必要な解像度が異なってくるのですが、Illustratorのようなソフトは拡大縮小しても画像の線がぼやけることや荒れてしまうことがありません。
Illustratorの基本用語「パス」について
パスとは図形を構成する要素のことを言います。Illustrator内のペンツールや曲線ツールを使ってアンカーポイントと呼ばれるものを打ち込んで、図形や曲線を自由に描くことができます。
これらが自由にコントロールできるようになると、さまざまな綺麗なイラストが描けるようになるのです。
Illustratorの画面の最初に出てくるプリセットってなに？
Illustratorを開き「新規ファイル」を選択すると、初めにプリセットを選ぶ画面が出てくると思います。プリセットとは設定値を前もって調整することで、Illustratorではどんなサイズのものを作るのかを指しています。
Illustratorはさまざまな用途で使われるためテンプレートも多く、例えば「Web」というカテゴリーを選ぶとその中にWebサイトに合わせたサイズのテンプレートが出てきます。その他にもモバイル、印刷、フィルムとビデオ、アートとイラストなど色々なジャンルのデザインに対応しており、カスタムを押して自分で設定することも可能です。
Illustratorのアートボードについて
Illustratorにはアートボードというページやシートに似たツールがあり、これを使用するとページを一枚ずつ増やしていくことができます。このアートボードは自由に再配置ができ、簡単に並び替えが可能です。
また、Illustratorではクリッピングパスと言われるものを作成して画像を切り抜くこともできます。
Illustratorの実践法
Illustratorはプロの現場でどの様に使われているの？
Illustratorがプロの現場でよく使われるのは、アイコンやボタン、ピクトグラムの制作をする時です。こういったシンプルな形のものはIllustratorが得意とするものの一つです。
またアイコンやボタンピクドグラムよりももう少し凝ったグラデーションや透明度などを加えて立体感を出すこともあります。中には、取り扱い説明書の図もIllustratorで作っている方もいらっしゃり、できることの幅はかなり広いです。
ロゴやシンボルマークにも使われる
更にIllustratorはログやシンボルマークの作成にも多く使用されます。
Illustratorでは文字をアウトライン化（文字情報を図形に変換すること）して編集することができます。それによって、文字の形の好きな部分を伸ばしたり縮めたりができるようになり、クライアントの趣向に合わせたデザインが制作できるのです。
また最近のものでいうとインフォグラフィックと呼ばれるインフォメーションとグラフィックを組み合わせたものも作成可能です。図や表、文字などで説明するのではなく、視覚的なアイコンやイラストで置き換えてわかりやすく表現したい時に使います。
Webデザインに直結する使用方法
ここまでお伝えしたものとはまるっきり別の使い方をご紹介したいと思います。Webデザインを行う際に重要になる「ワイヤーフレーム」というWebページの骨組みに値するレイアウトの大まかな構成を作成するときにもIllustratorを使用します。
また同じAdobe社が出しているAdobe XDというツールでもワイヤーフレームを作ることがありますが、こちらはデザイナー職だけではなくディレクターやマーケターなど他の職種の方も使いやすいのが特徴です。
その他にもパワーポイントで作るようなスライドや、ポートフォリオを作成することもできます。紙で提出してくださいと言われた時のためにPDFで保存することが可能です。
Illustratorで上手く活用したいツールや特徴
Illustratorの色彩設計
またIllustratorの印象的な特徴の一つとして、色彩計画・色彩設計ができるのが挙げられます。イラストを構成している図形ごとに色を変えたり、彩度と明度を調整したりできます。
その他にもユニークな機能があり、例えばカラーバリエーションを見てみるとか、オブジェクトの再配色というツールで色相環またはカラーホイールと言われるものが一つの円の中に配置されたものをいじることができます。
図形の描画ツール
シンプルなアイコンやピクトグラムを制作する際によく使用する図形の描画ツールについて、知っておいて欲しいのでご紹介していきたいと思います。
図形の描画ツールはドラッグするだけでその形ができるので、そこから色や線の太さを変えることでアイコンやピクトグラムを作っていくことが可能です。ぜひ触ってみてください。
ペンツールが苦手な方に
中にはペンツールを使うのが苦手な方もいらっしゃるのではないでしょうか。簡単にお伝えすると、ペンツールはクリックの繰り返しで直線を作っていき、ドラッグで曲線を作っていくツールになります。この直線と曲線の組み合わせで図形を作成していくのですが、最初は上手く描けなくても問題ありません。
線を描いた際に表示されるハンドルを動かすことで調整したり、アンカーポイントを動かして形を変えたりなど、上手く描くことよりどうやって修正していくかの方を重要視してみてください。
また、フリーハンドで描くことも可能で、その時はブラシツールというものを使用します。ブラシの種類もさまざまあるため、カリグラフィー風にすることや線の太さや描き方の種類まで細かくこだわることができます。
Illustratorは数値で操作するのが得意
またIllustratorは数値で操作するのも得意です。正確に何度回転させる、それを繰り返すとか、細かく何ミリ足すことや何ピクセル足すこと、文字をウェーブさせるなどレイアウトの指示に沿って文字の配置を変えることができるのも特徴です。
更に左右対称のものは半分だけ描いてそれを鏡に映した様なコピーを作成した後に、組み合わせることで作成できます。これもまた、正確に半分に折り返すか正確に回転させるというIllustratorが得意なことの一つです。
Ｑ＆Ａ
最後に、参加者の方からの質問に答えていただきました。
Photoshopでパスが編集できるようになりましたが、わざわざIllustratorでイラストを描く、デザインするのは無駄なのでしょうか。
決してそんなことはありません。イラストレーターの職業としてプロの方もIllustratorを使っている方は沢山いますし、無駄なことではないと思います。また冒頭でお伝えした解像度の件のメリットもあるため、PhotoshopとIllustratorの両方が使えるようになっておくとこれからのキャリアに直結すると思います。
Illustratorのバージョンによって気をつけることなど、もしあったら伺いたいです。
最近ではあんまりバージョンという感じが以前より意識されなくなってきたように思えるため、アップデートがあったらアップデートをするという形が良いかと思います。
また、気をつけなければいけない点としては、PCの性能がIllustratorのソフトに追いついていないことです。PCのスペックはシビアにチェックして、それからIllustratorのバージョンに気を向けることをおすすめしています。
Illustratorを動画で学ぼう！【C&R社会員専用】
素材づくりから学ぶIllustrator基礎講座 Eラーニング
素材作成を通して、ペンツールの使い方から、図形や文字の取り扱いといったIllustratorの基礎を学びます。最終目標は簡単なチラシづくり。Webサイトにも活用できるようなデザインのポイントもお伝えしていきます。
お申し込みはこちら>
Illustratorのベクター素材作りから学ぶ デザインカンプ制作講座 Eラーニング
ロゴやアイコン、MAP、背景パターンなど、デザインを決定づけるための重要な素材はIllustratorで作成し、Photoshopでデザインカンプにする一連の流れを学びます。
お申し込みはこちら>
※Eラーニング動画の購入には「C&R社会員登録」(無料)が必要です。会員登録はこちら>
