【徹底解説!】Illustrator(イラストレーター)を使ったロゴの作り方

ロゴはどのように作られているのか?
構想段階からIllustrator(イラストレーター)での制作手順、ブラッシュアップの様子まで、KROWL MAGAZINEのロゴを例にして制作過程を公開します。

サービスのコンセプト

ロゴ制作においてサービスの目的やコンセプトは重要ですので、まずはKROWL MAGAZINE立ち上げの経緯を簡単に振り返ります。

KROWL MAGAZINEは2018年6月にスタートしたWebメディアです。立ち上げのきっかけは「もっと多くの人にWeb業界への転職に役立つ情報を届けていきたい!」という思いからです。
それまでは、KROWLという転職支援サービスのなかで、勉強会やインターンシップを中心に、実務未経験の方がWeb業界へ転職する際に知っておくと役立つ知識・オススメの勉強方法などを共有できる場を設けていました。
しかし、もっと多くの人に届けたい、転職に必要な情報を誰もが気軽に得られる状態にしたいと考えていました。
そしてWebメディアという形をとることでその思いを実現しようと考え、KROWL MAGAZINE立ち上げに至ります。

ロゴの変遷

1.仮置き段階

Webメディアの構成やデザインを考える段階で、一旦仮置き用に作ったものです。
この時点で決まっていたのは下記の内容です。

  • Webメディアの名前は「KROWL MAGAZINE(クロール マガジン)」
  • 既存の「KROWL」ロゴは使用する
  • KROWL派生メディアとして違和感のないデザインにしたい(サイト・ロゴともに)

まだまだふわっとしてますね。
メディア自体の方向性やコンセプトについてチーム内で何度も話し合い、原点に立ち返りながら並行して開発を進めていきました。その過程で、ロゴもブラッシュアップを重ねています。

2.初期のロゴ

仮置きではただテキストを並べただけでしたが、ぐっとロゴらしくなりました。

  • コピーやイラストの追加
  • テキストの調整
  • 色の変更

を行いました。
既存のサービスである「KROWL」( https://krowl.jp/ )との違いを明確にするため、「KROWL MAGAZINE」のメインカラーには青を採用しました。
この色を選んだ理由としては、「KROWL」はキャリアパートナー制度やインターンシップなど、人と人とのリアルな繋がりに強みを持ったサービスであり、自分の思い描くキャリアに向かってどんどん前に進んでいく、「動」のイメージを感じさせる暖色系のピンクをメインカラーに据えています。
一方の「KROWL MAGAZINE」は、Webコンテンツを通してノウハウや知識が得られるサービスであり、コツコツとマイペースに準備をしていける「静」のイメージを持たせたかったため、KROWLと対になるような寒色系のカラーを選びました。

また、ロゴの詳しい作り方は後ほど記載しますが、この段階での制作風景はこんな感じです。

様々なパターンを出して検討していました。
Illustratorで制作しているのですが、パターン出しのコツは「ボツ案を消さない」ということです。
これは無いな、と思っても残しておきます。
なぜなら、ボツ案同士の良いとこどりをしたら意外としっくりきた!みたいなこともあるからです。

3.現在のロゴ

初期のロゴとの主な変更点はこんな感じです。

  • コピーの変更
  • 「MAGAZINE」を大文字に統一
  • イラストの変更

特に大きな変更があったイラストに関しては、

  • 転職を考えている多くの人に開かれたメディアでありたい
  • Web業界未経験の方にも、雑誌(マガジン)を読むように構えず気軽に読んでもらいたい

というKROWL MAGAZINEが、Webメディアとして実現したい在り方を表現しています。
そのため、やや厚みのある本が閉じられた状態のイラストから、大きく開かれた雑誌をイメージさせるイラストに変更しました。

ロゴの作り方

ロゴができるまでの具体的な手順を、構想〜Illustratorを使用した制作まで、順を追って解説していきます。

1.情報収集

まず、他社様が運営されているメディアやコンセプトが近しいサービスのサイトをチェックし、どのようなトンマナなのか、どのようにロゴが使われているのか調べました。このとき、特に下記のポイントを意識していました。

  • Webメディアらしさ、そのサービスらしさ、などをどのように表現しているのか
  • たくさんの魅力的なメディアがあるなかで、KROWL MAGAZINEらしさはどのように表現できそうか

情報収集がロゴのクオリティの半分を決定していると言っても過言ではないぐらい重要です。
また、Pinterest( https://www.pinterest.jp/ )にて、ロゴ以外にも参考になりそうなデザイン、イラスト、タイポグラフィなどを集めて構想を膨らませました。

2.ロゴの大まかな方向性を決める

ロゴには大きく分けて3つのパターンがあります。いずれか一種類のみが設定されている場合もあれば、数種類のバリエーションを持っている場合もあります。

  1. シンボルマークのみ
    例:Apple、スターバックス、Twitter
    特徴:ミニマルで力強い図案はインパクトが強く、記憶に残りやすいです。すでに社名やブランド名が広く浸透している場合に採用されることが多いようです。スタイリッシュで先進的な印象です。
  2. ロゴタイプのみ
    例:Google、ユニクロ、ZARA、Uber
    特徴:社名やサービス名などの文字をベースにデザインしたロゴなので、名前を覚えてもらいやすいです。わかりやすく、安心感が感じられます。利用シーンの汎用性も高いです。
  3. シンボルマーク+ロゴタイプの組み合わせ
    例:Slack、Microsoft、Evernote、mercari
    特徴:1,2両方の良さを兼ね備えています。名前を覚えてもらいやすく、企業やサービスのイメージも伝えやすいです。ロゴが持つ情報量が多い分、利用する際には周囲の要素とのバランスを考慮する必要があります。(うまく整理できていないとゴチャゴチャしやすい)

さまざまなタイプがありますが、事業の拡大や時代の変化に合わせてロゴが変更されることも珍しくありません。
具体的な事例として、スターバックスはかつてシンボルマーク+ロゴタイプの組み合わせでしたが、2011年にシンボルマークのみのロゴに変更されました。また、Twitterのロゴもシンボルマークのみになりましたね。
サービスの現状や今後の方向性、利用シーンを想定してロゴの種類を決定することが重要です。

KROWL MAGAZINEの場合は新規メディアのため、名前を覚えてもらえるようにロゴタイプにしました。
さらに、ロゴの利用シーンとしては、Webサイトでの使用のほかパンフレット等の紙媒体への掲載も想定していたので、シンボルマークとも組み合わせました。そうすることで、ロゴ単体で見た際にも何のサービスか想起しやすくなります。

3.ロゴの案を出す

手書きでラフを描きます。方眼紙などを使用してかなり細かく詰めていくデザイナーさんもいらっしゃるのですが、私の場合は忘れないようにメモに残しておく、程度のラフです。Illustratorで作業する時間の方が長いです。

ラフでなんとなくの雰囲気をつかんだら、Illustratorでの作業に移ります。
作り方としては、まずIllustratorで必要なパーツを作ります(KROWL MAGAZINEの場合は、ロゴタイプ、シンボルマーク、コピーの3つ)。パーツの出来栄えとしては6~7割程度にして、あまり詰め過ぎません。
そしてロゴらしくなるようにざっくり配置してみます。
さらに、それを何個もコピーしながら配置や組み合わせの様々なパターンを試していきます。この過程で、パーツ自体の修正や作りなおしもします。

ポイントは、ボツ案を消さないこと、ずっと同じ案の微調整をしつづけないことです。なんかしっくりいかないな?と思ったら、そのロゴのコピーを作成してからレイアウト変更をしてみたり別案との折衝案を作ってみたりします。とにかく量を優先し、迷った案も残しておきます
案出しの段階で質にこだわって細部まで詰め過ぎてしまうと、何が正解なのかだんだんわからなくなってきてしまったり、せっかくここまで作業したのだからボツにするのはもったいない…と冷静な判断がしづらくなったりします。
この段階での各ロゴ案の完成度は30~60%ぐらいです。

4.ロゴの候補を絞る

良さそうな案を2~3つほどに絞り、完成度を上げてどれが良いか検証します。チームメンバーに、客観的な意見をもらったりします。
この段階だと完成度は70~90%ぐらいです。
ただし、完成度を上げてみたけれどもやっぱりしっくりこなかった…という場合もあるので、その際には「3.ロゴの案を出す」に戻ります。

この画像は、作業中のIllustratorのキャプチャ画面です。アートボードからはみ出してますね…!でも自分が作業しやすければ良いんです。私は白バックで確認したい時にはアートボード内に置いたり、濃色が背景になったときの見え方を確認したい時はアートボードの外にロゴを移動させてみたりしていました。

5.ロゴの仕上げ

これだ!と決めた案の最終仕上げをします。
この時に意識しているのが徹底的に「なんとなく」を無くしデザインを言語化することです。

存在理由のない要素、意味のない表現はノイズでしかないため、美しくありません。
また、言語化してロジカルにデザインを語ることができれば、なんとなくの印象や好みに左右されてFIXしない(クライアントワークの場合はクライアントOKがなかなか出ないという状況)…ということも防げます。

例1)なんとなく余白はこのぐらいが良さそう

要素A・Bの左右の余白を均等にして重心を中央に持ってこよう

例2)なんとなく線の太さはこのぐらいが良さそう

Webサイトでロゴを使用する時の大きさや場所を考慮すると、この太さが最も視認性が良くコンテンツの邪魔もしない

このような感じで、「なぜこの幅なのか?」「なぜこの太さなのか?」という自問自答を繰り返してデザインの隙をつぶしていくイメージで調整しています。
要素間の余白、線の太さ、カーブの角度、エッジの処理、などロゴを形づくるあらゆる部分を観察しながら、全体のバランスを整えます。
ロゴやグラフィック制作に強みを持つデザイナーの方は、きっとこの観察眼がものすごく鋭いのだろうなぁと思います。

6.ロゴの完成

KROWL MAGAZINEのロゴで、仕上げ段階で特にこまかく調整した箇所はここです。

  1. 軸が中央に通っているように見えるように調整
    「MAGAZINE」は、文字数的には「A」と「Z」の間が中心です。ですが、「I」の横幅は極端に狭く、全ての文字を均等に配置したのではバランスが悪くなってしまいます。そこで「A」を中央にしてカーニングを調整しました。「A」は左右対象で力強さのある形であり、「マガジン」という読み方としてもアクセントがくる部分なので、中央に持って来たかった、という意図もあります。
  2. パーツ間のアキや幅をそろえる
    雑誌を広げた形をイメージした図形ですが、きっちりページの角を出してしまうと隙のない堅い印象になってしまいました。そこで、ラフなスケッチ風のテイストを意識して隙間をあけています。ただし、そのアキ具合や線幅は統一し、安定感のあるリズムを演出しています。そうすることで、転職やキャリアに関する情報を掲載するメディアにふさわしい安心感を持たせています。
  3. シンボルマークとロゴタイプをなじませる
    ロゴタイプが直線的なゴシック体なので、シンボルマークも直線的なパーツで構成しています。直線の角度が急すぎると文字が窮屈に見えてしまったり、逆に緩やかすぎるとまとまりが無くなってしまったりしました。
    文字が引き立つバランスを探りながら角度を決定しています。
    また、文字の後ろに隠れて見えない本の形もイメージしてみて、違和感がなく、安定した平面が感じられるポジションを探しました。

このような調整を経てKROWL MAGAZINEのロゴは完成しました。

ロゴ制作に必要なスキルとは

ロゴは単純に見た目の格好良さやインパクトを追求して作るのではなく、
そのロゴを使用する企業やサービスが目指している姿、アイデンティティ、取り巻く市場など、あらゆる角度から考えて作るべきものです。

ですので、ロゴ制作スキルとしては、ビジュアル制作スキルに加え、ブランディング、マーケティング、ストーリーテリングなど総合的な力が求められます。
ロゴ制作をふくめ、企業やサービスの基礎となる理念やビジョンをデザインし伝えることを、CIデザインと呼んだりしますね。ロゴ制作の奥は深いです。

おわりに

私自身、今回KROWL MAGAZINEのロゴ制作をしましたが、ロゴを作った経験が少ないこともあり、かなり手探りでした。
ただ実際に自分も制作してみて、この4つのポイントをしっかり押さえれば初心者の方でもロゴが作りやすくなるのではないかなと思いました。

  1. サービスの目的やコンセプトを理解する
  2. 情報収集する
  3. ボツ案を消さない
  4. 徹底的に「なんとなく」を無くす

また、サービスにおいてロゴはあくまで脇役です。主役であるユーザーを支える存在、目印となる存在であるべきだと考えています。
なので、ユーザーが受け取りやすいメッセージの届け方ができるロゴが素敵だなと思います。

初めてのロゴ制作で困っている、これからロゴを作ってみたいと思っていた、という方にとって、少しでも役立つ記事になりましたら嬉しいです!

Webデザインの学習をしている方に向けて無料のデザイン課題をKROWLサイトで公開中!
AdobeのIllustratorやPhotoshop、XDの操作を学びながら難易度別に用意してあるデザイン課題に取り組もう!

関連記事