AI時代のIllustrator入門講座 - ゼロからのWebデザイン【図解アニメたっぷり】

「このまま受託制作を続けて、3年後も生き残れるだろうか？」
AIの進化により、単なる制作業務の価値は暴落しつつあり悩んでいる。そんな人は多いと思います。しかし、悲観する必要はありません。 今こそ「作る側」から「教える側」へ回るチャンスです。

THE REAL STORY

億を稼ぐ
スクールの
『裏側』

※ 期間限定公開
ビジネスの設計図を
全て見せます。

Skillhub代表
吉田 光利

「実はこのSkillhubも、
僕１人で作りました。 0から作り上げて、生徒6万人まで育てたノウハウ公開します。 」

裏側を無料で覗く

AI時代を勝ち抜くための「億を稼ぐスクールビジネス」を、期間限定で公開しています。無料ですのでチェックしましょう。

（無料公開、限定100名、9月13日まで）

今すぐ受け取る（無料）

「Webデザインを勉強したい、でも何から手をつけたらいいのか分からない…」
そんな方のための、AIも活用しながらWeb制作の基礎を学べる入門シリーズです。

今回のテーマはIllustrator（イラストレーター）。
絵心がなくても大丈夫、AIの力も借りながら基本操作を身につけていきます。

この記事では、実際に「製品紹介バナー」を1つ作りながら、Illustratorの基本操作を覚えていきます。

• Adobe Illustratorとは
• Illustratorを開いてみよう（画面の見かた）
• ホーム画面から新規作成する
• ワークスペースの5つのパーツ
• コントロールパネル・パネルについて
• 基本操作で製品紹介バナーを作ってみよう
• STEP1. 3つの基本操作を把握する
• STEP2. 背景の図形を描く（正方形の土台）
• STEP3. 画像を配置する（クリッピングマスクで背景にする）
• STEP4. 文字を置く
• STEP5. 文字を読みやすくする（画像の調整）
• STEP6. 文字を目立たせる（色帯・枠線を足す）
• STEP7. 複製してレイアウトを整える（もう1つ分を作る）
• AIで「特徴3つ」のアイコンを作ろう
• 絵が描けなくても大丈夫
• まずはアートボードを広げよう
• テキストからベクター生成でアイコンを作る（3つ分）
• オブジェクトを再配色で3つの色を統一する
• アイコンをカードに仕上げてみよう
• Edbase社のトップページにチャレンジしよう
• 完成イメージとワイヤーフレームを確認する
• 使える素材をおさらいする
• 新しく使うテクニック：線を付ける方法
• チャレンジしてみよう
• おわりに

Adobe Illustratorとは

Illustrator（イラストレーター）は、Adobe社が出しているデザインツールの1つです。
ロゴやアイコン、イラストなど、線と面でできたデザインを作るのが得意です。

画像元：ベクターグラフィックアプリ | Adobe Illustrator

写真を加工するPhotoshop（フォトショップ）とはちがい、Illustratorで作った図形や文字は「ベクター」というデータで管理されています。ざっくり言うと、どれだけ拡大しても輪郭がガタガタにならない、というデータ形式です。

この記事では、Illustratorを使ってWebサイトのパーツ（バナーやアイコンなど）を作っていきます。

Illustratorを開いてみよう（画面の見かた）

ホーム画面から新規作成する

Illustratorを開くと、まずホーム画面が表示されます。
ここは「どのファイルで作業するか」を選ぶ場所です。

新規作成をクリックすると、ファイルの種類を選ぶウィンドウが出てきます。

今回はWebデザイン用に、「Web」の中から好きなサイズのアートボードを選んでみてください。
サイズはあとからいくらでも変更できるので、細かく悩まなくて大丈夫です。

作成ボタンを押すと、白紙の画面に切り替わります。
この画面がワークスペースと呼ばれる、実際に作業をする場所です。

ワークスペースの5つのパーツ

ワークスペースには、大きく分けて5つのパーツがあります。
それぞれ何ができるのか、ざっくり見ていきましょう。

①メニューバー

画面の一番上にあるメニューです。
ファイルの保存や、パネルの表示切り替えなど、基本的な操作はここから行えます。

②コントロールパネル

メニューバーのすぐ下に表示される部分です。今選んでいるツールに合わせて、よく使う設定がピックアップして表示されます。パネルをいちいち探さなくても、大抵の操作はここでできてしまいます。

③ツールバー

画面の左側にある、道具箱のような部分です。
図形を描いたり、文字を入力したりするときに使うツールがまとまっています。

なお、使用できるツール一覧は、ツールバー下部にあるツールバーを編集（...）から見ることができます。
Tipsなどを見ていて「そんなツールはない」と思ったときは、ここから探してみましょう。

④パネル

画面の右側にある、細かい設定をする場所です。
「カラー」や「プロパティ」のようにそれぞれ見出しがあり、各項目ごとが独立したパネルです。

⑤コンテキストタスクバー

アートボード付近にふわっと表示される小さいツールバーです。
選択した図形やテキストなどのアイテムに応じて「次にやりそうなこと」がボタンになって出てきます。

後ほど紹介するAI機能を使う時にも、このコンテキストタスクバーを使用します。

コントロールパネル・パネルについて

操作画面上部に②コントロールパネルが無い、もしくは「見本の画像と④パネルの表示が違う」と不安になった方もいらっしゃるかもしれません。
Illustratorでは、パネルなど「よく使うもの」を使う人が自由に選択・配置できるようになっています。

これらは上部メニューの「ウィンドウ」から表示・非表示を切り替えることができます。
例えば、上部のコントロールパネルなら、「コントロール」のチェックでON/OFFを切り替えます。

その他に、よく使うパネルを常駐表示させることもできます。
表示させたいパネルをクリックして、チェックを付けると表示できます。ドラッグして動かし、自分が使いやすい位置に配置・ドッキングさせることが可能です。

基本操作で製品紹介バナーを作ってみよう

ここからは、実際に「製品紹介バナー」を1つ完成させながら、Illustratorの基本操作を覚えていきます。
今回作るのは、自社の2つのサービスを紹介する正方形のバナーです。1つ分をしっかり作り込んでから、あとで複製してもう1つ分に仕上げます。

操作に使用する画像は、以下よりダウンロードいただけます。

素材ダウンロード

STEP1. 3つの基本操作を把握する

1. 保存する

最初に保存の操作を覚えましょう。
頻繁に使うので、ショートカットを覚えてしまいましょう。

【上書き保存のショートカットキー】

• Mac：［command］+［S］
• Windows：［Ctrl］+［S］

保存したい場所を選択し、わかりやすい名前を付けて保存してください。

新規作成したファイルの場合、続けて以下のような保存オプションのウィンドウが出ます。
こちらは、そのまま右下の「OK」をクリックでOKです。

このショートカットキーを使うと、二回目からは上書き保存されます。
作業中にIllustratorが固まってしまうこともあるので、こまめに上書き保存する癖をつけておくと安心です。

2. デフォルトは「選択ツール」

Illustratorを開いた時、最初に選択されている（持っている状態）のが選択ツールです。
ツールバーでは一番上にある、黒い矢印のアイコンです。
オブジェクトをクリックして選ぶ、ドラッグして動かす、角をドラッグして大きさを変える…といった「触る」操作は、基本的にこの選択ツールで行います。

ショートカットは［V］。
他のツールを使ったあとも、［V］を押せばすぐ選択ツールに戻れるので、覚えておくと迷いにくくなります。

3. 表示の拡大縮小とハンドツール

これからIllustratorで制作をしていくと、細部を見たいとき・全体像を見たいときが出てきます。
ワークスペース上でも変更できる箇所はあるのですが、都度、ポチポチ切り替えていると結構手間がかかります。

ですので、ショートカットキーを覚えるようにするのがおすすめです。

【ショートカットキー】

• Mac：［command］+［ + ］もしくは［ - ］キー
• Windows：［Ctrl］+［ + ］もしくは［ - ］キー

また、拡大したときに「見たかったものが表示領域にない」ということが起こります。
そんな時に使うのが、ハンドツール。
オブジェクトではなく「画面の表示位置」を動かすためのツールです。

ショートカットは［スペースキー］。
キーを押している間だけ一時的にハンドツール、手のマークのアイコンに切り替わります。

スペースキーを押しながらドラッグすると画面を動かすことができ、スペースキーから指を離せば元のツールに戻れます。

STEP2. 背景の図形を描く（正方形の土台）

まずはバナーの土台になる正方形を描きます。

ツールバーから長方形ツールを選びます。ショートカットキー［M］を使っても良いです。
塗りの色はなんでもOKです。このあと写真を重ねて隠れてしまうので、今は「四角がある」ことが分かれば十分です。

この状態で、［shift］キーを押しながらドラッグしてください。
縦横比1：1の正方形が描けます。

書けたら選択ツールに持ち直しておきましょう。

STEP3. 画像を配置する（クリッピングマスクで背景にする）

次に、正方形の中に写真をはめ込みます。

1. 画像を配置

素材の中にある Edbase.png を、アートボード上にドラッグして配置します。

ドラッグをして配置しただけだと、画像はかなり大きいですね。
選択ツールを選んでいる状態で、マウスカーソルを画像に近付けてください。
場所によってカーソルの形が変わります。それぞれ、下図のような操作ができます。

カーソルを画像のフチにある白い四角形（アンカーポイントと呼びます）に近付けて、拡大縮小モード（↔ の形）になったところでドラッグ。正方形より少し大きめのサイズまで縮小します。
カーソルを画像と重ねるようにすると移動モードになりますので、正方形を覆う位置に重ねましょう。

2. クリッピングマスクを使う

ここで「クリッピングマスク」という機能を使うと、正方形の形に写真を切り抜くことができます。
ただ、条件を揃えてあげる必要があります。

まず、写真を選択した状態で右クリックしてください。
表示されるメニューの中から「重ね順」を探し、その中にある「背面へ」を選びます。

下図のように、正方形が画像の前面（手前）に置かれた形に変わります。

［shift］キーを押しながらクリックすると、写真と正方形の両方を選択できます。
コンテキストタスクバーに「クリッピングマスク」が表示された方は、そこをクリック。
表示されていない方は右クリックして、「クリッピングマスクを作成」を選びましょう。

正方形の外にはみ出ていた部分が隠れて、写真がきれいに正方形の中に収まりました。

これで「写真を背景にした正方形」の完成です。
写真の位置が考えていたところと違う…という方も、今はそのままにしておいてください。後ほど、位置調整の方法についても紹介します。

STEP4. 文字を置く

画像の上に、banner-text.txtに掲載されている文字を入れてみましょう。
使用するのはサービス名とコピーのみです。

サービス名：Edbase
コピー　：ビジネスができる教育プラットフォーム

まずは、コピーの文字を追加してみます。

文字ツール（Tのアイコン）を選んで、アートボード上をクリック。
文字入力のカーソルが表示されますので、コピーを入力します。
テキスト入力が完了したら、以下のキーでテキストを確定します。

【ショートカットキー】

• Mac：［command］+［Enter］キー
• Windows：［Ctrl］+［Enter］キー

確定すると、ツールが選択ツールに切り替わります。
画像の上に追加した文字を重ねてみましょう。

文字の色、サイズ、フォントの種類や太さを調整します。
コントロールパネル、もしくはコンテキストタスクバーから調整ができます。

文字色は白にしておいてください。
フォントサイズ、フォントの種類はお好みで設定してください。

続けて、バナーの右下あたりにサービス名の文字も入れておきます。
太めのフォントで、少し大きめのサイズにすると目立ちます。

Edbase

見本として、以下ではコントロールパネル側でテキストの設定をしています。
皆さんは、ご自身が使いやすい方で設定してください。

STEP5. 文字を読みやすくする（画像の調整）

現状、テキストがとても見にくいですよね。
文字色を変えたとしても見にくいので、文字が読みやすくなるよう画像に少し色を載せます。

1. 画像に被せる「色味」を作る

長方形ツールを選択して、画像全体を覆う長方形を一つ追加します。
下図のように何も見えなくなってOKです。

グラデーションパネルを開きます。
見つからない場合は、ウィンドウメニューからグラデーションにチェックが付いているか確認しましょう。

1. 長方形を選択した状態で、グラデーションのスウォッチ（見本の小さい四角形）をクリック。
2. グラデーションを適用してから、アピアランスパネルを開きます。
3. 「塗り」の下にある不透明度の設定を変えます。
   
   • 描画モードを通常から「乗算」にする。
   • 不透明度を下げる（お好みで）。

グラデーションはグラデーションパネルから直接編集することができます。

また、プリセットというプルダウンから、別のグラデーションパターンも選択できます。
プリセットでイメージに近いグラデーションを探して、調整をすると便利です。


次の作業でも変更・調整できるので、ここできっちり作り込まなくて良いです。

2. 画像に乗せる

作成した長方形のグラデーションを、画像にだけ重なるようにします。

Illustratorのレイヤーパネルを見てみてください。
レイヤーパネルでは、ここまでに追加したアイテムがそれぞれ表示されています。

1. <クリップグループ>となっている部分を展開します。
2. クリップグループの中、<リンクファイル>の上にグラデーションの長方形を移動させます。

文字がグラデーションの前面（上）になります。

<クリップグループ>の中に入れたグラデーションの長方形を選択し、色味が強すぎない・文字が読みやすいバランスを探しましょう。
下にある画像（<リンクファイル>）を選択すると、画像の位置も調整できます。

STEP6. 文字を目立たせる（色帯・枠線を足す）

ここまでで、土台となる画像は出来ました。
テキストの位置を整えて、より文字を目立たせる装飾を入れましょう。

1. 枠線を足す

まず、バナー全体の縁取りになる枠線を作ります。

1. 長方形ツールで土台の正方形よりも少し小さい正方形を作ります。
2. 塗り色をなしに、線をありにします。
3. 線の色を選びます。デモではやや明るめの青色にしました。

色は後からすぐ変えられるので、あまり悩まず決めてOKです。

次に、追加した枠線と土台の四角形を揃えます。

1. 枠線を選択（選択済の方はそのまま）
2. ［shift］キーを押しながら土台をクリックして選択
   → 枠線と土台の両方を選択した状態になります
3. ［shift］キーを離して、もう一度土台をクリック
   → 土台の選択枠が濃くなります
4. コントロールパネルにある水平・垂直方向中央に整列をクリック

アイコンが表示されない…という方は「整列」という文字があれば、そこをクリックしてください。もしくは、下図のようにコンテキストタスクバーの整列アイコンからも選択肢を表示できます。

太い枠で囲われたほう（今回の場合は土台部分）を「キーオブジェクト」と言います。
今回のようにキーオブジェクトを選択して整列を使うと、キーオブジェクトを基準に、選択しているほかの要素が整列されます。

2. 文字の位置を整える

復習を兼ねて、もう一度キーオブジェクトを使った整列をやってみましょう。

1. 枠線を選択する
2. ［shift］キーを押しながら「Edbase」の文字を選択
3. ［shift］キーを離して、枠線をクリック（キーオブジェクトにする）
4. 整列のメニューから水平方向中央に整列をクリック

3. 文字の背景（色帯）を入れる

強調したい文字の背景になる帯を作ります。

長方形ツールで細長い四角を描き、強調したい文字の上に重ねます。
位置や大きさは大体で構いません。
塗りの色は、枠線の色と同じ色にしておきましょう。

それぞれ、枠線をキーオブジェクトにして整列を使うと位置が整います。

• コピーの背景：水平方向 左 に整列
• タイトルの背景：水平方向 中央 に整列

文字の背景用長方形を2つ選択して、背面に移動させます。

• Mac：［command］+［[］キー
• Windows：［Ctrl］+［[］キー

あとは、最終調整です。
全体を見ながら、各パーツの色味・位置を整えてみてください。

見本は全体的にワントーン明るく変えてみました。

• 乗算で乗せた長方形の不透明度：40％
• 文字背景と枠線の色：#3399cc

全く同じ要素と配置でも、色味で印象は変わります。
絶対的な正解は無いので、練習も兼ねて調整してみてください。

STEP7. 複製してレイアウトを整える（もう1つ分を作る）

最後に、今作った正方形バナーをまるごと複製して、2つ目の製品紹介バナーを作ります。

1. できたバナーを複製する

まず、正方形・写真・色帯・枠線・文字など、バナーを構成しているオブジェクトをすべて選択します。
こういう場合は、ドラッグでまとめて囲むと選びやすいです。

選択できたら「複製しながら移動」を行います。

• Mac：［Option］キーを押しながらドラッグ（［Option］+［shift］キーにするとズレない）
• Windows：［Alt］キーを押しながらドラッグ（［Alt］+［shift］キーにするとズレない）

あとは、複製したバナーの中身を2つ目の製品用に差し替えていきます。

2. 背景の写真を差し替える

差し替えたい方の画像が入っている正方形をダブルクリックします。
レイヤーパネルを見ると「編集モード」という表示になり、選択した<クリップグループ>の中身だけが表示された状態に変わっています。

差し替えたい画像である<リンクファイル>をクリックして選択してください。
上部に「リンクファイル」という表示が出ます。
そこをクリックして開き、リンクファイルを再設定から差し替えたい画像を選びます。

アートボードの外など、何もないところをクリックすると「編集モード」は解除できます。

3. 文字を打ち換え、枠などの色を変える

文字は、選択ツールもしくは文字ツールでダブルクリックして選択し、そのまま打ち替えるだけでOKです。
必要に応じて、整列を使って整えてください。

枠線の色、文字背景の色を変えたら完成です。

これで、2つの製品紹介バナーが完成しました。
1つ「元」になるものがあると、バリエーションを作るのは結構楽ですよね。

AIで「特徴3つ」のアイコンを作ろう

ここからは、Illustratorの目玉機能でもある「AI機能」を使っていきます。

絵が描けなくても大丈夫

Illustratorには、文章から図形を作ってくれるAI機能があります。
描く代わりに、欲しいものを言葉で伝えるだけでアイコンが完成します。

今回は、この機能を使って次の3つのアイコンを作っていきます。
題材は、これから作る会社サイトに載せる「特徴3つ」のアイコンです。

• かんたんに始められる（ロケットのアイコン）
• 学びから分析まで幅広く対応（本と虫眼鏡のアイコン）
• データに基づく改善（右肩上がりの棒グラフのアイコン）

サービスの特徴を伝えるとき、アイコンが3つ並んでいるだけで一気に分かりやすくなります。

まずはアートボードを広げよう

今のアートボードは、バナー2つで少し手狭です。
アイコンを作る前に、アートボードを広げておきましょう。

ツールバーからアートボードツールを選びます。
見当たらない方は、以前紹介した「ツールバーを編集（...）」から追加してみてください。

アートボードを選択すると、白い＋の表示（ハンドル）が現れます。
このハンドルをドラッグすると、好きな方向にアートボードを広げられます。

作業スペースを確保できたら、選択ツール（［V］キー）に戻しておきましょう。

テキストからベクター生成でアイコンを作る（3つ分）

1. 「ベクターを生成」を開く

ツールバー下部にある生成のアイコンをクリックしてメニューを開いてください。
「主題、シーン、またはアイコンを作成」を選択します。

「ベクターを生成」というパネルが開きます。

2. 内容と効果を設定する

まずは、パネル上部にある2つの項目を設定しておきましょう。

• モデル：Fireflyにしてください
  （※パートナーモデルはクレジット消費が大きいので、お試しにはFireflyがおすすめです）
• コンテンツの種類：アイコン

次に、下部にあるスタイルというグループを見ていきます。

• スタイル参照：自動のスイッチをOFFにします。
  （※自動ONにすると周辺のオブジェクトに合わせてくれますが、今回はバナーしかないため初回はOFFにしたほうが良いです）
• 効果：コミック
  → シンプルなアイコンの場合はコミックもしくはフラットがおすすめです
• カラーとトーン：指定なし

3. プロンプトを入力して生成する

続けて、下部のテキスト欄にプロンプト（AIへの指示文）を入力します。
生成される時点の色はバラバラで構いません。あとの手順で色をまとめて揃えるので、今は形だけ見ておけばOKです。

まずは1つ目、「かんたんに始められる」のアイコンから作ってみましょう。
以下のプロンプトをそのままコピーして貼り付けてください。

打ち上がるロケットのアイコン。フラットでシンプルなミニマルスタイル、背景なし。

入力できたら、生成ボタンをクリックします。

プロパティパネルを見ると、以下のように生成オブジェクトの詳細・バリエーション等が確認できます。


生成を行うたびに生成物は変わりますので、バリエーションの中にも良い候補が無い…という時は再生成を行ってみてください。

同じように、残り2つのアイコンも作っていきます。
下記のプロンプトを入力してください。

これで、3つのアイコンが完成しました。
色はまだバラバラですが、次の手順でまとめて統一します。

オブジェクトを再配色で3つの色を統一する

1. 3つのアイコンを選択する

選択ツールに持ち替えて、3つのアイコンをまとめて選択します。
［shift］キーを押しながらクリックすると、複数選択ができましたね。

2. 「オブジェクトを再配色」を開く

3つとも選択できると、コンテキストタスクバーに「オブジェクトを再配色」のボタンが表示されます。
これをクリックしましょう。
（表示されていない方は、ツールバー下の「生成」からも選択できます。）

「オブジェクトを再配色」パネルが開きます。
最上部には「再配色」と「生成再配色」があります。

• 再配色：下部にあるカラーホイール等を使って手動で調整する。
• 生成再配色：AIへのプロンプトを入力し、再配色を行ってもらう。

今回はAIにお任せしたいので、生成再配色を開いてください。
「気に入った色を自分で選びたい」というときは下部のカラーホイールを使っても大丈夫です。

3. プロンプトで色を統一する

生成再配色では、自分でプロンプトを入力するか、下部にあるサンプルプロンプトを使います。
プレビューで良さそうな見た目のものがあれば、それを使ってOK。

デモでは手打ちで、以下の指示を入れました。

彩度の高い紺色（ネイビーブルー）をアクセント色として使用し、5色構成にする。

生成すると、4パターンの候補が表示されます。
一番しっくりくるものを選んでください。

一発でイメージ通りの色に決まらなくても大丈夫です。
気に入るまで何度か「生成」ボタンを押して生成し直してみましょう。

これで、色の揃った3つのアイコンが完成しました。
「絵が描けない」「素材探しに時間がかかる」という問題を、Illustratorが解決してくれました。

アイコンをカードに仕上げてみよう

Webデザインでは、アイコンは単体ではなく、カードやボタンなどの一部として使うことがほとんどです。

今回の題材サイトでは、このアイコンを白に近い明るいカードに乗せて使います。
ここでは1つ目のアイコンを例に、カードへの仕上げ方を練習しておきましょう。

1. 角丸の四角を作る

ツールバーの長方形ツールを長押しすると、角丸長方形ツールが出てきます。
これに切り替えて、アイコンより一回り大きい四角を描きます。

角丸長方形ツールを選択している状態で、アートボードをクリック。
作りたいサイズを指定して作成できます（長方形ツール等も同じ）。
感覚的に描画したいか、決まった幅のものを作りたいかで使い分けてみてください。

塗りの色は、明るめのグレーにします。
見にくくて作業しにくい、という方は、扱いやすい色にしても構いません。

2. アイコンを中央に置く

四角の中にアイコンを重ねて、ちょうど良いサイズに縮小します。

• アイコンの方が背面にあるので、前面に移動します。
• 整列パネルを使うと、これまでと同じ要領で位置を綺麗に揃えられます。

3. 文字を置く

アイコンの下に、文字ツールでカードの見出しと概要を加えます。
まず見出し。

かんたんに始められる

1. テキストを中央揃えにする
2. カードをキーオブジェクトにして、水平方向中央に整列

と、2段階で設定すると、綺麗にカードの水平方向（横方向）中央に配置できます。

次に、概要のテキストを入れます。

専門知識がなくても、その日からすぐに始められます。

文字サイズは14ptくらいにすれば入ります…が、ちょっと狭くて不安があります。
もう少し長いテキストだと、はみ出してしまいそうですよね。

こんな時は、「エリア内文字」に切り替えると便利です。
エリア内文字にすると「この幅に文字を入れる」という長方形を作れます。
その長方形の幅を超えると自動で改行し、はみ出す部分は見えなくなります。
Webデザインの場合、限られたスペースに文字を配置することが多いので、よく使います。

残り2つのカード作りと、ページへの組み込みは、このあとのチャレンジで挑戦してみましょう。
ここで作ったアイコンとカードは、そのまま使っていくので忘れずに保存しておいてください。

Edbase社のトップページにチャレンジしよう

ここまでで作ったバナーとアイコンを使って、いよいよEdbase社のトップページを組み立てていきます。
ここから先は、手順は教えません。
これまでに覚えた操作を活かして、自分の力で挑戦してみましょう。

完成イメージとワイヤーフレームを確認する

まずは、これから作るページの完成イメージと大まかな構成を確認しておきましょう。

ページの構成は、次のようになっています。

ヘッダー（社名／ナビゲーション：ホーム・会社概要・お問い合わせ）
────────────────────────
ファーストビュー（写真＋キャッチコピー）
────────────────────────
特徴3つ（アイコン×3＋短い説明文）
────────────────────────
お知らせ3件（左）／製品紹介バナー（右）
────────────────────────
フッター

使える素材をおさらいする

ここまでで、次の素材がすでに完成しています。

• 製品紹介バナー（基本操作のパートで作成）
• アイコン3つ（AI機能のパートで作成）
• カード1つ分の見本（AI機能のパートで作成）

残りの2つのカードや、お知らせ3件のカードなど、足りないパーツは自分で作りながら進めましょう。

新しく使うテクニック：線を付ける方法

お知らせの部分では、線を引きたい場面が出てきます。
四角形の線（ストローク）を使うと、四辺すべてに一括で入ってしまいます。
一辺だけ線を引きたいときは、直線ツールで線を足すのがおすすめです。

【長方形に線を付ける場合の手順】

1. 直線ツールを選び、線を引きたい辺の上で［shift］キーを押しながらドラッグします。
   ［shift］キーを押すと、まっすぐな水平・垂直の線が引けます。
2. コントロールパネルから、線の色・太さを設定します。
3. 整列パネルを使って、四角形の辺にぴったり重なるよう位置を揃えます。
   

これで、必要な操作は一通り揃いました。

チャレンジしてみよう

新しいプロジェクトを作成し、見本を参考にページを組み立ててみましょう。

• アートボードが足りなくなったら、アートボードツールで広げてください
• 整列や重ね順に迷ったら、バナー制作のときの手順を思い出してみてください
• うまくいかない部分があっても大丈夫です。まずは自分なりに手を動かしてみてください
• 見本はかなりシンプルなので、自分好みにアレンジしてもOKです

おわりに

お疲れさまでした。
基本操作からAI機能まで、Illustratorの一通りの使い方に触れてきました。

はじめは思うように動かせなくても、触っているうちに手が慣れていきます。
まずは「作ってみる」を積み重ねていきましょう。

吉田 光利

Skillhub代表 & Edbase代表

教育者&起業家です。今は教育テック系のSkillhubとEdbase（エドベース）という会社をやっています。強みはビジネス構築からデザイン、プログラミング、サーバー構築までひと通できることです。著書に「起業のWeb技術」日本実業出版社があります。