Good Morning Patchのロゴを作ったよって話
Goodpatchでは先日、はじめてGood Morning Patchというイベントを開催しました！
デザイナーを招待して、朝早い時間帯にコーヒーを楽しみつつデザインについて語るという少人数のイベントです。今までにはない対話型の新しいイベントということもあり、僕もとても楽しみにしていました。
当日は朝早くからデザイナーがGoodpatchオフィスに集まり、みんなでコーヒーを飲みながらカジュアルに意見交換を行いました。ご参加いただいたみなさん、朝早くからお越しいただきありがとうございました。
この新たな試みを始めるにあたり、広報から「イベントのロゴを作って欲しい」という提案がありました。そこで学生の頃からグラフィックデザイナーとして活動していたUIデザイナーの僕がデザインすることになりました。今回の記事では、どういうプロセスでロゴを制作したかをご紹介します。
1. イメージを言語化する
まず、どういうイメージのロゴを作りたいかをミーティングの中で徹底的に洗い出します。ほとんどの場合、依頼する側は明確なアイデアを持っていません。この段階では細部まで説明する必要はなく、単語だけで会話を進めてもよいでしょう。
会話の中で出てきたフレーズは以下の通りです。
- 朝感（大人の朝）
- コーヒー
- おしゃれ感
- ターゲットは30代の大人なデザイナー
- 今までのGoodpatchには無いビジュアル
もちろんGood Morning Patch自体、今までのイベントとは少し毛色が異なるものだったので、上記の単語が出てくるということは予想していました。出てきたアイデアの中でも、最後の「今までのGoodpatchには無いビジュアル」というフレーズが一番重要でした。
Goodpatchのキーカラーはサンフランシスコの空からインスピレーションを受けた青。ブランディング面でも非常にクールな印象がありました。今までに無いビジュアルと依頼されたので、この時点で「Goodpatchのロゴは使わない」「大人な印象を与えるセリフ体のフォントは使わない」「寒色は使わない」という3つの制約が課されたことになります。
2. ムードボードを作成する
イメージの共有を受けた後は、キーフレーズを基に参考になるような画像を集めましょう。ちなみにそれらを1つに集約すると「ムードボード」というものになり、クライアントに提示すればプロジェクトのビジョンがぐんと明確になります。
GoogleでMoodboardと画像検索すると、上のような画像が出てきます。今回は社内のプロジェクトだったのでムードボードは用意しませんでしたが、以下のような画像がイメージとして湧き上がりました。
いかにも30代よりも上の方が利用しているローカルのコーヒーショップという感じでしょうか。実際に提示した画像とは違いますが、広報が予想していたビジュアルと大きな相違はありませんでした。
集めたイメージや情報を基にスケッチをしました。絶対実現しなさそうなアイデアでもいいので、とにかく数を増やすことだけを考えました。そして最終的に出来上がったスケッチがこちらです（途中経過を残していなくて申し訳ないです）。
最終アイデアと書きましたが、この後もスケッチと全く同じビジュアルに固執する必要はありません。元々工数を考えた時に既存のタイプフェースを使うつもりでしたし、個人的には作っている最中に新しいアイデアが思い浮かぶことも多々あるので、少し余裕を持たせた状態でスケッチを終わらせました。
3. 全体に合ったフォントを探し出す
出来上がったスケッチをパソコンに取り込んで、実際にロゴにしていきましょう。特にスキャナーなどを使う必要はありません。スマートフォンの写真で十分です。
僕の場合はAdobe Illustratorでロゴを作成します。もちろんPhotoshopでも問題ないとは思いますが、個人的にはIllustratorの方がシェイプを形成するスピードがPhotoshopと比べて速いというのが、Illustratorを積極的に使う理由になります。
まずはスケッチに合いそうなタイプフェースを見つけましょう。今回はAdobe Typekitから探しました。TypekitはAdobe Cloud Suiteを契約していれば、プランによっては多くの有料タイプフェースをパソコンに同期することが出来るので、是非有効活用してみましょう。今回は筆記体なので、右側の検索バーの「スクリプト」を選択しました。
冒頭でも書いた通り、全く同じ外観にこだわる必要はありません。今回は、見た目が近くカスタマイズ性の高そうな「Shelby」というタイプフェースを使うことにしました。
まずは普通に文字を書き出してみましょう。
残念ながらあまり完成イメージには近くありません。ですが、角度を変えたりエンベロープ機能を使ったりして、徐々にイメージへと近づけていきましょう。
視線の流れを揃えてあげることでより統一感が出ると思います。
分かりやすいようにピンク色のガイドをつけましたが、ただ歪ませただけなので細かいところではまだ統一感は出ていません。例えば「Morning」の2つ目の「n」の角度が基準線と比べて少し左に傾いています。
また、エンベロープで無理やり歪ませたため、各文字の先の幅がちぐはぐになっています。このような際には、ペンツールで整えてあげましょう。
どうでしょうか？「Morning」が少し他の単語と比べて小さいですが、全体のバランスを俯瞰した時にまとまりがあるように見えます。
4. 詳細を詰める
ベースが出来たところで、ここからは周りのパーツを作っていきましょう。冒頭のラフスケッチにはコーヒーや太陽がありますが、まだ少し「気持ちいい朝感」を表現するには要素が足りません。マフィンやスプーンなど、実際のイベントで登場しそうな物をアイコンとして入れてみましょう。
最終成果物では使用しなかったアイコンもありますが、上図のようにいくつかアイコンを作成しました。これらを予め作ったタイポグラフィーに当てはめていきましょう。
他にも吹き出しや星などを追加し、上図のように仕上がりました。下の「Powered by Goodpatch」はAmerican Typewriterというタイプフェースを使っています。このタイプフェースも今までのGoodpatchのロゴやバナーには使われていなかったものなので冒頭の制約にも反していません。
実際に外部の会社に依頼されてロゴを作る際には、こういったモックアップも一緒に提示するとノベルティなどのビジョンも明確になります。今のところ、このTシャツを作る予定はありませんが、Good Morning Patchに2回目があれば作る可能性も上がると思うので是非お越し下さい（笑）
おまけ
というわけで無事ロゴは完成したのですが、GoodpatchはInstagramアカウントも運営しているのでロゴのアニメーションも作ってみました。
まとめ
いかがでしたでしょうか？今回は社内のプロジェクトだったため、プロセス自体かなり流動的で実働時間も12時間ほどしかかかっていません。実際のロゴデザインのプロセスを少しでも理解していただけたら幸いです。完成したロゴの中にGoodpatchのロゴを見つけられた人は素晴らしいですね。
今後も何度かGood Morning Patchを主催しますので、ご興味のある方はぜひお越しください！
