Adobe Illustratorとは、テキストと画像を組み合わせたレイアウトの作成や、線や図形を組み合わせたイラストなどを作成するのに最適なツールです。 印刷物を作成する際に利用されることが多いIllustratorですが、印刷物以外でもPhotoshopでは苦手なロゴやアイコン、イラストの作成、図形などのデザインはIllustratorの方がスムーズに行うことができます。 エムハンドではベースをPhotoshopやXDで作成しつつ、そういった素材作成はIllustratorを活用しています。そんなIllustratorの沢山ある機能の中でWebの素材づくりに活かせる、便利なツールや時間短縮につながる機能を一部ご紹介いたします！

改めて、Adobe Illustrator（アドビイラストレーター）とは？

アイコンを複数作成した時やイラストを作成した時、このキーカラーを全部別の色に変更したいな、と感じることはありませんか？また、提出した後メインカラーの変更指示が入ってしまうこともあるかと思います…。そんな時にIllustratorなら一発で同じ色を変更することが可能です。<h3 style="text-align: start" id="h1947e89b2c">スウォッチのグローバル化</h3>最初に共通して使用する色をスウォッチ（「ウィンドウ」→「スウォッチ」）に追加します。追加した色をダブルクリックしてオプションを開き、グローバルにチェックを入れてOKを押します。 <figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/d4e80452aabb4db7a09c27e39ebbd182/blog-02-1024x512.jpg" alt="" width="1024" height="512"></figure>この後一気に色変更したい時や修正が入った時、スウォッチからグローバル化されたものをダブルクリックすると、あっという間に共通するすべての色の変更が可能です。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/febf51474f484fa09c519a20746463e0/blog-03-1024x512.jpg" alt="" width="1024" height="512"></figure><figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/39f2e7993a79405dae527e99629ffd5f/blog-04-1024x333.jpg" alt="" width="1024" height="333"></figure><h3 style="text-align: start" id="ha3dcab3772">グローバルにしていなかった時は…</h3>あ！グローバルに設定していなかったけど色の変更が入った！という場合はまとめて選択して色変更することがおすすめです。 オブジェクトを全選択（Ctrl＋A）して、コントロールパネルにあるこちらのボタンを選択。 変えたい色を選択して、変更を完了したらOKをクリック。これで一気に色が変更されます。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/952dda26c7b84ac2aaabe2068dfec051/blog-05-1024x438.jpg" alt="" width="1024" height="438"></figure>

同じ色を一気に変更

デザインを進めていく中で、図やグラフを作成してわかりやすく伝えたいときはありませんか？ しかしPhotoshopでは細かい作業に手こずったり、Illustratorでも1から作るとなれば少し時間が必要となります。こちらでご紹介するグラフツールは数値を入力するだけで簡単にグラフを作成することが可能です。<h4 style="text-align: start" id="h40be92cc27">1.作成したいグラフの種類を選択し、グラフの大きさを決める</h4>今回は棒グラフツールをご紹介しますが、どのグラフでも簡単に作成することが可能です。 サイズはあとで調整が可能なので、最初はあまりこだわらなくて大丈夫です。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/9f737e98f43a4cfbb5c2a5c744d2ed51/blog-06-1024x401.jpg" alt="" width="1024" height="401"></figure><h4 style="text-align: start" id="h39096f83c7">2.数値を入れてグラフを作成</h4>こちらも後ほど変更は可能です。 Excelのグラフを作成する際と同じ要領で表の一番左の列がグラフの横軸、表の2列目以降がグラフの値を表します。入力完了後、右上のチェックボタンを押すと指定した範囲に棒グラフが作成されます。スタンダードな形はこれで完成です！<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/0dd21dde5a2b4990b5015888be45a266/blog-07-1024x350.jpg" alt="" width="1024" height="350"></figure> 作成後グラフの形を変更したい場合はメニューから「オブジェクト」→「グラフ」→「設定」を選択し、「グラフ設定ウィンドウ」を開いて簡単に変更することができます。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/b0cfdde62aba4ef482e7100cf5fefddb/blog-07-2-1024x921.jpg" alt="" width="1024" height="921"></figure> デザインや色を変更したい場合はダイレクト選択ツール（白い矢印）で変更したい場所をクリックし、編集することが可能です。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/402897df44394d309a9fefc2ccafc70a/blog-07-3-1024x717.jpg" alt="" width="1024" height="717"></figure>こちらのツールは後日グラフの数値や種類を変更することになってもすぐに対応ができるので、とても便利です！<a href="https://m-hand.co.jp/design/4196/">グラフツールの応用編はこちら</a>

グラフツール

普段Photoshopなどを中心にデザインしている方が見落としやすい機能、Illustratorの線ツール。 図形で必要となってくる矢印や破線を作成したり、線の形を調整したりできる便利なツールです。 （「ウィンドウ」→「線」で開くことができます）<h3 style="text-align: start" id="h82f03a1389">矢印</h3>右上の「オプションを表示」を選択後、矢印の形を選ぶことができます。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/4bd7a30490a04350b8f05a1a944ac257/blog-08-1024x308.jpg" alt="" width="1024" height="308"></figure>どちら側に矢印をつけるか決めることが可能です。「倍率」で線幅とのサイズ感の比率を調整することもできます。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/ebbb1be7974b4fb080eb1e2bb1ca457c/blog-10-1024x572.jpg" alt="" width="1024" height="572"></figure><h3 style="text-align: start" id="h7f75b03af7">破線</h3>矢印と同様、右上の「オプションを表示」を選択後「破線」にチェックを入れると点線に変更ができます。 「線分」と「間隔」に数値を入力して幅を決めることができます。 <figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/3d1fbea814604a01a8c88701efed5a64/blog-11-1024x572.jpg" alt="" width="1024" height="572"></figure>下記のように線の端を丸く設定し、線分を０にすると丸い点線を作成することも可能です。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/d846710973764fca817c8314807b2424/blog-12-1024x580.jpg" alt="" width="1024" height="580"></figure><h3 style="text-align: start" id="hbf31c16d48">プロファイル</h3>線の形を選ぶことができ、ロゴやイラスト作成などの時に活かすことができます。 <figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/debe34c257d74e129536a60979836fb9/blog-13-1024x581.jpg" alt="" width="1024" height="581"></figure>また左のツールバーにある「線幅ツール」は塗りに変更しなくても線の状態のまま自由に形状を変更することができ、とても便利です。

線ツール（矢印、破線、プロファイル）

デザインを整える為に欠かせない整列機能。 PhotoshopやXDにも整列機能はありますが、Illustratorではさらに詳細に整列することが可能です。 （「ウィンドウ」→「整列」で開くことができます）Illustratorの整列は３種類の基準の設定ができます。 まず右上から「オプションを表示」を選択。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/cb4e1de1a08f4255b4d991f381aa0e65/blog-15-1024x481.jpg" alt="" width="1024" height="481"></figure> 今回はこちらの3つの四角形を元に整列してみます。 水平方向の左端の整列のみご紹介しますが、他の整列もぜひ試してみてください！<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/b7a249b3d47444e2a3f3986f0876f73e/blog-17-1024x597.jpg" alt="" width="1024" height="597"></figure><h4 style="text-align: start" id="h1c063c6355">1.アートボード内で整列する方法（アートボードに整列）</h4>右下から「アートボードに整列」を選択し、左上のマークをクリック。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/aa4646d141d946d0b11381ec3bba402f/blog-18-1024x717.jpg" alt="" width="1024" height="717"></figure><figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/a4179b2b928b45c58ee97173627aead1/blog-19-1024x598.jpg" alt="" width="1024" height="598"></figure>アートボード上の左に揃えることができました。<h4 style="text-align: start" id="h5a9cefccf8">2.選択範囲の中でオブジェクトを整列する方法（選択範囲に整列）</h4>右下から「選択範囲に整列」を選択し、左上のマークをクリック。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/aa4646d141d946d0b11381ec3bba402f/blog-18-1024x717.jpg" alt="" width="1024" height="717"></figure><figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/d344ea9738634bc784a143276229b594/blog-16-1024x598.jpg" alt="" width="1024" height="598"></figure>３つの四角形の中で一番左のものに揃えることができました。<h4 style="text-align: start" id="h4b1e53d5e1">3.自身で基準となるオブジェクトを決定し、そのオブジェクトに対して整列する方法（キーオブジェクトに整列）</h4>※整列したいオブジェクトをすべて選択した後、基準にしたいオブジェクトをもう一度クリックするとキーオブジェクトになります。 右下から「キーオブジェクトに整列」を選択し、基準にしたいオブジェクトをクリック。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/b81400721eb3493e8e39b7d6a5ab325b/blog-22-1024x727.jpg" alt="" width="1024" height="727"></figure><figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/92efcd1b11d44ab399acf2e09176a8fa/blog-21-1024x598.jpg" alt="" width="1024" height="598"></figure>左上のマークをクリックすると、キーオブジェクトを基準に整列されます。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/404ba49baf3a4db2a1ee6f87a5fa6a66/blog-23-1024x597.jpg" alt="" width="1024" height="597"></figure>今回は一番右の四角形をキーオブジェクトにしたので、右の四角形の左側を基準に揃いました。また間隔の数値も指定できるので、図版やロゴの作成などにとても便利です。 こちらのようなバラバラに並んだ図形の場合、<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/d5be2b8584ba48468e8ea2edb4f21d17/blog-24-1024x597.jpg" alt="" width="1024" height="597"></figure>整列パネルの左下の「等間隔に分布」の箇所に間隔の数字を打ち込み、隣のマークをクリック。 100pxの場合はこのような間隔に。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/a701c48c0e2b48abb089e6be3a8efc3d/blog-26-1024x595.jpg" alt="" width="1024" height="595"></figure>0pxの場合はぴったりと引っ付きます。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/d4b2c674b06c4439925e7d1c2ca8db42/blog-25-1024x593.jpg" alt="" width="1024" height="593"></figure>

整列

いかがでしょうか？ 今回作成したようなIllustratorの素材をPhotoshopで持ってくる場合は、スマートオブジェクトとして貼り付けるのがおすすめです。 （Photoshopで該当のレイヤーをダブルクリックすると再びIllustratorでの編集が可能です。）またXDに貼り付ける場合は、先にIllustratorにて「オブジェクト」→「分割・拡張」をしておくと、拡大縮小しても線が膨張せず使いやすいです。 （拡張前の元データも残しておいた方が安全です。） 今回の記事を見て少しでも作業効率が上がれば幸いです。 Illustratorは基本的にCMYKで単位はmm(ミリ)に設定されていることが多いので、Webに活用する場合はRGBへの変換とpx（ピクセル）の設定の変更をお忘れなく！

素材づくりに便利！IllustratorのWebデザイン活用術

改めて、Adobe Illustrator（アドビイラストレーター）とは？

同じ色を一気に変更

グラフツール

線ツール（矢印、破線、プロファイル）

整列

最後に

Related Blogs

【完全保存版】Web制作で役立つFigmaプラグイン10選

ストックフォトで効率的に素材を検索するコツ

今さら聞けない！ UI（ユーザーインターフェース）とは？

【Illustrator】地図の作成などに便利なアピアランス機能