marquee023.png

連載  /  

Illustratorで調整に強いアイコン、ロゴ、UIづくり 第2回:ロゴデザインのワークフロー

BY 公開

Illustrator CC (2014年06月公開) 対応

Illustrator CC の体験版をダウンロード

ロゴのデザイン作業は、まず始めにデザイン(ロゴマークとロゴタイプ)を複数案用意し、その後、さらにデザインを追加・変更したり、組み合わせのバリエーションを増やすという進め方になることが多いかと思います。

ボツになってしまった案を含めて、最終的に数十案つくることもありますよね。

ロゴデザインの作業フロー例

このようにいくつもデザイン案をつくったり、組み合わせのバリエーションを用意する場合には、ひとつのIllustratorファイルで作業しましょう。それによって、複数のデザイン案やバージョン管理も一元化し、作業フローの効率化を図ることが可能です。

ひとつのファイルでバージョン管理

アートボード

ひとつのファイルでデザイン案やバージョン管理するために使うのは「アートボード」です。Illustratorでは複数のアートボードを並べて作業できます。

アートボードを追加にはいくつか方法がありますが、「オブジェクト」→「アートボードに変換」の使用をオススメします。

選択したオブジェクトサイズのアートボードを作成してくれる機能です。アートボードを追加したい座標にアートボードサイズの矩形を描き、それを「アートボードに変換」を適用しましょう。作成したアートボードの並び順はアートボードパレットで自由に変更できます。

では、ひとつのファイルを使ったロゴデザインのワークフローを説明します。今回は「IdeaGrid」というアプリのロゴデザインを作成した際の、実際の作業フローを例として紹介します。

事前準備

まず作業に入る前に、アートボードを準備します。一番目のアートボードに表紙を用意。次に、右隣に同じサイズのアートボードをデザイン案を作る量に応じて、2,3個作成します。

表紙には案件名や作成日時、バージョンなどを記述します。提出時の資料の表紙としても使うので丁寧にレイアウトしましょう。

事前準備

下準備が整いましたので、表紙横のアートボードでロゴのデザイン案をつくっていきましょう。

最初のデザイン案をつくる

今回つくるロゴデザインのキーワードはアイデア、グリッド、メモ。

最初にシンプルなデザインから始めて、「Illustratorで調整に強いアイコン、ロゴ、UIづくり 第1回」で紹介した複合シェイプや効果を使用し、細かなバリエーションを増やしていきます。

作業中

作ったデザイン案の中から、クライアントに提案するものをチョイスし、アートボードにみやすいように並べます。ボツ案は削除せず、右にアートボードを追加して避難しておきましょう。

今回はアートボードが4つになりました。表紙と中の2枚のデザイン案が提出用アートボードです。

作業が終わったら整理

貼り付けたデザイン案ひとつひとつに英数字などを割り振っておくと、後で管理が楽になります。今回の例ではA案、B案…と呼ぶことにしました。

以上で、提出する最初のロゴデザイン案ができあがりました。横一行のアートボード群 (ボツ案を除く) が、今回のデザイン案一式となります。

最初の提出

表紙の左側に、提出するアートボードの番号やアートボードのタイトルを大きな文字で追加します。

該当アートボード番号と列のタイトル

表紙の左上に「1-3」という数字がありますが、これはアートボードの1番から3番を意味しています。
ファイルを書き出す際に必要となる「書き出しダイアログ」の「該当アートボード番号」用として使えるので、書き出す前にこのテキストをコピーしペーストしておけば、後からアートボード番号いくつだったっけ?と悩まずに済みます。

その下にタイトルも大きく記しておけば、縮小表示でも把握しやすくなります。

デザイン案の書き出し

PNGやPDFで書き出し、クライアントにロゴデザイン案を提出します。それぞれのフォーマットごとの書き出す手順は以下の通りです

PNG形式の場合

  • 書き出し → ファイル形式:PNGを選択、アートボードごとに作成:チェック、範囲:該当アートボード番号

PDF形式の場合

  • 複製保存  → ファイル形式:PDFを選択、アートボードごとに作成:チェック、範囲:該当アートボード番号
書き出し:PNGの場合(上)とPDFの場合(下)

2度目以降のロゴデザイン作業

一度の提案で決定することはほぼありません(笑)。というわけで、2度目の提出用アートボード群を「下」に追加します。

クライアントから戻ってきた「G案が一番イメージに近い、ノートらしさを出すために鉛筆をうまく入れられないか?」といった意見や要望を元に、修正したり、新たにデザイン案を加えたりします。今回はG案を元にブラッシュアップしていくことになりました。

G案の展開案ということで、「G-1」「G-2」という風に連番を割り振ってあります。

2度目の提出

このように、提出する都度、下にアートボードを増やしていきます。表紙に日時を記載しておけば、いつ提出したデザインなのかも把握しやすくなります。

左端の数字とテキストも忘れずに書き足しましょう。

今回は3度目の提出で、左から3番目のデザイン案から、ロゴマークのみが決定しました。

3度目の提出

ロゴタイプのデザインに向けて、決定したロゴマークはシンボル化してしまいましょう。

ここでシンボル化しておけば、もし後からロゴマークの修正が入っても、まとめて一気に変更することができます。

ロゴマークをシンボル化

ロゴタイプの作成

4度目の提出ではロゴタイプの展開を行いました。

先ほどシンボル化したロゴマークの横に、テキストでIdeaGridと書き、いくつかフォントを選んでテイスト違いのものを作成しました。

ロゴタイプを提案

提出したデザイン案に対し、「Avenir Nextっぽい形がいいけど、Iやdの縦棒が長過ぎる」という要望をいただきました。

既存のフォントに適当なものが無かったため、一からロゴタイプを作成することにし、最終的にそのロゴタイプで決定しました。

決定したロゴタイプ

一般的なロゴデザインでは、サイズ毎に微調整を行いません。今回のロゴは主にアプリケーションのUI で使用するものなので、小さいサイズでも視認性が落ちないように、無駄なアンチエイリアスを極力抑える微調整を行いました。

下が完成したロゴデザインです。

完成したロゴデザイン

完成したロゴデザインは念のためクライアントに提出します。

最後に、確定したロゴマークを元にiOS用とOS X用に必要な大きさのアイコンを作って、このIllustratorファイルでの作業は完了です。

アイコンの作成

最終的なデザインファイルを縮小表示するとこんな感じです。

この「IdeaGrid」はクライアントに明確なイメージがあったので、比較的少ない工数で完成することができましたが、大抵こんなスムーズに進むことはありません(笑)

すべてのアートボードを全体表示したところ

おわりに

ひとつのファイルでバージョン管理する作業フローのイメージは掴めたでしょうか?

デザイン案の追加や変更を行う度にIllustratorファイルを増やしていくと、前にボツになったデザイン案が復活したり、一つのデザイン案でバリエーションを増やす際に、元のデータを探す手間が発生します。

そんなとき、1つのIllustratorファイルで管理しておけば、過去のデータを見つけるのも簡単です。デザインの流れや作業量も一覧できるので、予算やスケジュールの見直しの検討にも役立ちます。

また、すべてのアートボードを一気に書き出せば、途中経過も含んだポートフォリオがあっという間にできあがります。作品として提示したり、別案件で参考にするのにも使えます。

ロゴのようなシンプルなデータの場合、ファイルサイズを気にする必要がないので、ぜひお試しください!

以上、第2回: ロゴデザインのワークフロー でした。

なお、この「IdeaGrid」というアプリは近日公開される予定です。

  TAGS

  AUTHOR

3flab

株式会社三階ラボ / 代表取締役デザイナーと取締役デザイナー / 作業環境・効率・キーボードショートカットオタクの2人組。グラフィックデザイン、ユーザーインターフェイスデザイン、キャラクターデザイン、CI/VI、パッケージデザイン、モーショングラフィックデザイン、ウェブデザイン、アートディレクション等の業務を行っている。