3ステップで学ぶ！ロゴ、ショップカード、バナー制作テクニック【#1 ロゴ編】

こんにちは、Web/UIデザイナーの松下絵梨です。

『PsとAiを実践的に学ぶ！クリエイター直伝のテクニック集』のSeason 3を担当します。
今回から3回にわたって、ロゴの作り方、ショップカードの作り方、そしてWebバナーの作り方を解説していきます。

第1回目の今回は、Illustratorで楕円形や多角形などの基本的なシェイプを組み合わせてロゴを作成する方法について解説します。

この記事を通じて、デザイン初心者でもすぐに取り組めるステップを一緒に学んでいきましょう。サンプルファイルも用意していますので、記事を最後まで読み進めながら実際に試してみてくださいね。

こんな方におすすめ：

デザインを学び始めたばかりの方
Illustratorの基本操作を習得したい方
自分でロゴを作成したい方

完成イメージ

猫のシルエットと、コーヒーカップを上から見た図を組み合わせた、架空の猫カフェのロゴを作成します。

準備
輪郭を作成する
耳に角丸を追加する
コーヒーカップを作成する
目と鼻を作成する
仕上げ
まとめ
次回予告

準備

Illustratorの画面レイアウト

この記事では、Illustratorのワークスペースの設定を［初期設定（クラシック）］の状態で解説を進めていきます。ワークスペースとはIllustratorのパネルのレイアウトのことです。

①メニューバーの［ウィンドウ］をクリックし、②［ワークスペース］にカーソルを当てて、③［初期設定（クラシック）］をクリックします。
④メニューバーの［ウィンドウ］→［ワークスペース］→［初期設定（クラシック）をリセット］をクリックします。

単位の設定

この記事では、単位を「ミリメートル」で解説します。

⌘ + K（Windowsの場合はCtrl + K）を押して［環境設定］ダイアログボックスを表示し、［単位］を以下のように設定してください。

一般：ミリメートル
線：ミリメートル

サンプルファイルのダウンロード

サンプルファイルを使って、本記事の解説内容を実際に試せます。ダウンロードして、ぜひ一緒に試してみましょう。

サンプルファイルをダウンロードする

上記をダウンロードすると以下のファイルが入っています。

catCafeLogo_try.ai

輪郭を作成する

［シェイプ形成ツール］とは

実際の手順の前に、［シェイプ形成ツール］の使い方について確認しましょう。

［シェイプ形成ツール］は、簡単に複数のシェイプを組み合わせたり分割したりして、新しいシェイプを作るための便利なツールです。

重なったパスを選択し、ツールバーから［シェイプ形成ツール］を選択します。

結合したい領域をドラッグすると、その領域が1つの形状に統合されます。

option（Windowsの場合はAlt）を押しながらドラッグすると、選択したシェイプ内の領域を削除できます。

このように、楕円形や四角形などのシンプルなシェイプから素早く複雑な形状を作成できるため、ロゴやイラスト作成に役立ちます。

補足：［シェイプ形成ツール］のおすすめのオプション

［シェイプ形成ツール］は、デフォルトの設定のままだと、ドラッグして合体するときにスウォッチの色が反映されます。

以下の設定にすると、ドラッグ開始のオブジェクトのカラーが適用されるようになるのでおすすめです。

ツールバーの［シェイプ形成ツール］をダブルクリックします。
［シェイプ形成ツールオプション］ダイアログボックスで、［次のカラーを使用］を「オブジェクト」に変更します。

ファイルを開く

「catCafeLogo_try.ai」をダブルクリックしてIllustratorで開き、実際に作業していきましょう。

レイヤー構成を確認する

メニューバーの［ウィンドウ］→［レイヤー］をクリックして、レイヤー構成を確認しましょう。

「作業用」レイヤー：下絵に合わせて、大小様々な大きさの正円を配置しています。このレイヤーで作業します。
「下絵」レイヤー：今回作成するロゴの下絵を配置し、作業の邪魔にならないよう、レイヤーにロックをかけています。

全てのパスを選択する

⌘ + A（Windowsの場合はCtrl + A）を押して、すべてのパスを選択します。

［シェイプ形成ツール］でドラッグする

ツールバーから［シェイプ形成ツール］を選択し、下の図を参考にドラッグして、領域を1つの形状に統合しましょう。

［シェイプ形成ツール］で不要な部分を削除する

不要な部分をoption（Windowsの場合はAlt）を押しながらドラッグして削除しましょう。
一度にたくさんドラッグせず、少しずつ削除しても大丈夫です。

「下絵」レイヤーを非表示にする

［レイヤー］パネルの「下絵」レイヤーの［表示の切り替え］アイコンをクリックして、「下絵」レイヤーを非表示にします。

パスの塗りと線を入れ替える

ツールバーの［選択ツール］をクリックし、［塗りと線を入れ替え］をクリックして色を以下の状態にします。

塗り：黒
線：なし

補足：黄金比を活用しよう

今回の作例では、円のサイズを黄金比（13：21）に基づいて調整しています。
黄金比を活用することで視覚的に調和の取れたデザインが作りやすくなります。必ずしも黄金比を使うことが正解ではありませんが、デザインに迷った際には、黄金比を取り入れてバランスを調整するのも一つの手段です。

耳に角丸を追加する

柔らかい印象にするために、猫の耳の部分に丸みをつけましょう。

コーナーウィジェットをダブルクリックする

［ダイレクト選択ツール］でパスを選択すると、コーナーポイントの内側にコーナーウィジェット（蛇の目のアイコン）が表示されます。
片方の耳のコーナーウィジェットをダブルクリックします。

補足：コーナーウィジェットが表示されない場合

メニューバーの［表示］→［コーナーウィジェットを表示］をクリックします。
（［コーナーウィジェットを隠す］という表記になっている場合はすでに表示状態になっています）
選択ツールではなく、［ダイレクト選択ツール］を使用してパスを選択します。

［コーナー］ダイアログボックスを編集する

［コーナー］ダイアログボックスを以下のように設定し、［OK］をクリックします。

コーナー：角丸（外側）（デフォルトのまま）
半径：1mm
角丸：絶対値

もう片方の耳にも丸みをつける

もう片方の耳のコーナーウィジェットにも同じ操作を行い、両耳に丸みをつけます。

パスをロックする

次の作業の邪魔にならないように、パスを選択している状態でメニューバーの［オブジェクト］→［ロック］→［選択］をクリックしてロックします。

コーヒーカップを作成する

楕円形と角丸長方形を使用し、コーヒーカップを真上から見たイラストを描画しましょう。

「下絵」レイヤーを表示させる

［レイヤー］パネルの「下絵」レイヤーの［表示の切り替え］アイコンをクリックして、「下絵」レイヤーを表示させます。

楕円形を描画する

ツールバーの［楕円形ツール］を選択し、アートボード上でクリックします。

［楕円形］ダイアログボックスに以下の値を入力して［OK］をクリックします。

幅：85mm
高さ：85mm

作成した楕円形の色、線幅を以下のように設定します。

塗り：なし
線：黒
線幅：1mm

メニューバーの［ウィンドウ］→［整列］をクリックし、［整列］パネルを表示します。

このファイルでは、もともと下絵をアートボードの中央に配置してあるので、楕円形を下絵に合わせて整列させましょう。
［整列］パネル右下の整列オプションで［アートボードに整列］が自動的に選択されていることを確認し、［水平方向中央に整列］［垂直方向中央に整列］をクリックします。

補足：パネルのオプションが表示されない場合

［レイヤー］パネルの右上にあるパネルメニューアイコン→［オプションを表示］をクリックします。

角丸長方形を描画する

ツールバーの［角丸長方形ツール］を選択し、アートボード上でクリックします。

［角丸長方形］ダイアログボックスに以下の値を入力して［OK］をクリックします。

幅：30mm
高さ：16mm
角丸の半径：8mm

パスを下絵に合わせて配置します。

［整列］パネル右下の整列オプションで［アートボードに整列］が自動的に選択されていることを確認し、［垂直方向中央に整列］をクリックします。

楕円形と角丸長方形を統合させる

⌘ + A（Windowsの場合はCtrl + A）を押して、すべてのパス（楕円形と角丸長方形）を選択します。

ツールバーから［シェイプ形成ツール］を選択し、ドラッグして1つの形状に統合します。

パスをアウトライン化する

統合したパスを選択し、メニューバーの［オブジェクト］→［パス］→［パスのアウトライン］をクリックします。

補足：パスをアウトライン化する理由

パスをアウトライン化していないロゴやイラストを拡大縮小して使用する際、環境によっては線幅が変わらないため、デザインのバランスが失われることがあります。パスをアウトライン化すると、線そのものが［塗り］のみの図形になるため、拡大縮小してもバランスが崩れません。特に他の人がデータを触る可能性がある場合には、自分が作成したデザインが意図しない見た目にならないように、パスはアウトライン化して納品するようにしましょう。