猫でも分かるロゴ制作の流れ

以前学習した「ロゴ作成」の復習を兼ねて、架空のお店（ジェラテリア＝カフェ＆ジェラート屋）のロゴを制作しました。

もとは学校でその店（架空のだけど）のサイトデザインをするという課題があったのですが、ロゴがなかったため少し寂しいなと思ったので作り始めたのでした。

実は、最終課題まで時間が余ってしまってやることがなくなってしまったからという理由もあるのですけど…💦

それはおいといて。

まずはクライアントやターゲット（今回はペルソナあり）の情報を確認しましょう。

なお、本来の業務なら100％あるはずの「クライアントに話を聞く」「クライアントにロゴ案や成果物を確認してフィードバックをしてもらう」という過程がありません。

クライアントについて

ここからコンセプト決定までの過程は、コンセプトについて書いた過去記事も合わせて読んでいただけるとわかりやすいです。

※先程書いたとおり「架空の店舗」です。ご注意を。

• 新宿駅のNEWoManに新規開店するジェラート店「Gelateria MAKO」
• ジェラートの本場イタリアで10年間修行した店主が作る本格ジェラート
• オーガニックな素材を利用し、身体にも優しい
• ジェラート職人修業のきっかけは、イタリアの片田舎で食べたジェラートに魅せられたから
• イタリアの伝統的な製法を元に、日本人の味覚に合うようアレンジした
• なめらかな舌触りにこだわった上質のジェラートを提供する

そんなクライアントが新規開店とともに、Webサイトやロゴ制作を依頼した、とします。

今回のケースでは直接的にわかっていませんが（サイト制作時の情報で予想は可能でした）、実際のロゴ制作依頼ではクライアントの理念やビジョンは絶対に確認しましょう。

なぜなら、今回制作するのはロゴなので、企業（この場合は商店だけど）のイメージをロゴを用いてひと目で伝えることが目的になるからです。

ターゲットについて

先に書いたとおり、今回、想定ターゲットについてはペルソナとしての情報があります。

なお、ペルソナ設定についての細かいお話は割愛します。
調べてみた限り、かな～り奥が深い分野です。
なので、これを書いてる本人も全然詳しくないです🤯

参考資料だけあげておきます。

＜簡単に説明されているもの＞
ペルソナ設定について教えてください（chot.designのQ&Aフォーラムより）

＜↑より踏み込んだ説明＞
今さら聞けない「ペルソナとは」。意味や活用方法について（ferretの記事より）

以上の参考先からわかることは次のとおりです。

思い込みで適当にペルソナを作るのだけは絶対に駄目です。

では実際にどうすればいいのかと言うと…。

＊理想のターゲットに近い実在の人物から話を聞く
＊SNSで理想のターゲットに近い人達が話している内容を元にする

例えば上記の方法で扱う商品やサービスに対してターゲットが思っていることについてのデータを集めて、デザインやマーケティングの目的を達成できる程度にペルソナを設定します。

さて、今回のペルソナは以下のとおりです。

• 東京都在住・28歳の女性で1LDKマンションに一人暮らし。
• 職業は会社員、年収600万
• 平日はほぼ仕事で一日が終わり、休日はしばしばカフェ巡りをする。
• 社交的で友人が多い一方で、自分の時間も大切にしたい。
• シンプルでセンスの良いものを追求。服も同様で、派手なものはめったに着ない。
• 個性的でこだわりがあり、特にInstagramは写真の色味など自分なりの世界観を持っている。
• 装飾より機能を重視。
• よく使うSNSはLINE、Instagram、Twitter（見るだけ）

以上の情報から「どんなときに、どういう感情で、ペルソナはクライアントの店に行くか」というストーリーを考えておくと、後々デザインしやすくなるかもしれません。

例えば、

カフェ店内の写真をInstagramで見かけて、いい感じだと思って気になったからネットで店の情報を検索してみた。
美味しそうなジェラートで、しかもオーガニック素材を使い、こだわった製法で作っているようだ。すっごく気になる。行ってみよう！

…とかそんな感じで考えてみます。

少なくとも、ターゲットやクライアントから連想されるキーワード達をマインドマップか何かに書き出しておくと良いです。
後々、コンセプト決定やデザインに至るまでのアイディア書き出しで役に立ちます。

↑はWebサイトデザインのために書き出した、ターゲットに関するマインドマップ

コンセプトを決める

さて、サイトコンセプトが「上質なジェラートでくつろげる店」のWebサイトと決まりました。

ロゴコンセプトも一見同じでいいような気がするかもしれませんが、ロゴは「Webサイト」ではなく「店のブランドそれ自体」を示すものとなります。

よって、コンセプトはロゴのために改めて決めたほうがいいです。

（本場仕込の口溶けがなめらかで美味しい）
「上質なジェラートで（顧客に）幸せと安らぎを提供するジェラテリア」のロゴとしました。

Conceptsに殴り書きをしたコンセプトメモがこちらになります。
字が下手すぎて読めない可能性が高いため、キーワードはこちらにも書いておきました。

「上質」「自然」「安らぎ」「出会い・合わさる・融合」「喜び・幸せ」「癒やし」「根源」「与える・提供する」

コンセプトから更に、キーワードを10前後書き出し、そこからアイディアスケッチをだいたい100くらい書いていきます。

なお、先にも書いたとおり、コンセプトについて書いた過去記事も参考にしていただければ幸いです。

アイディアスケッチ（ラフ案）作成

キーワードごとに諸々のアイディアを書き出していきます。
大体100くらい書ければ、ロゴのイメージが湧いてくるはずです。

この辺りから

＊イタリアと日本、2つの国の文化が融合（1つはイタリア北部のアルプスで見られるような山、もう1つは対を成すように丸みのある山＝確か日本にそういう山あったよね？）
＊山＆ジェラートをイメージした形状が重なって一つになっていく
＊それらが根源であるクライアントをイメージしたロゴタイプにつながる
＊つながっていく線は川をイメージ

というイメージが固まってきました。

そこから3案くらい作り上げます。
実際の業務での制作ならば、3案くらい上がったところでクライアントにチェックしてもらい、1案に決めてもらいます。

今回はそれができなかったので、脳内クライアントチェックで暫定3案前後から1案に決めました。

最終仕上げ

この段階からIllustratorで形を作っていきます。

元のアイディアスケッチをトレースしていきますが、だいたい線や形状が汚いため様々な調整をしなければなりません。

ここではまだ色を使わないで配置や形状を仕上げていきます。
今回はこの段階でフォントを決定しました。

フォントはRelation Two Regular（Adobe Fontsで入手可能）を使用。

最初はSerif体にすることを考えていたものの、途中から流れるような曲線のおしゃれな筆記体の方がカフェにふさわしくて、クライアントが提供するジェラートのなめらかな食感を連想しやすいのではと思えてきて、こういう結論になりました。

↑のあと、いろいろな調整が必要です。
細い位置のズレだとか、修正箇所がいくつもありました💦

そして、色を決めます。

配色がなかなか決まらなかったのがよく分かる画像。

しかし、1色だと何かが変。物足らないな。

というわけで、カラーの方は上質さのアイディアで出していたゴールドを加えて2色となりました。

おまけ：シンボルだけのパターン。

ロゴ制作時の注意点

ロゴはこんな感じで、白黒で使うこともあります。

favicon.icoのように、ものすごく縮小されて使われることもありえます。
※下の画像は16x16pixelのpng形式です。本来はico形式にして使います。

Photoshopの画面で48x48pixelのを100％表示してキャプチャしたけど、あまりに小さすぎた🤣

また、クライアントに提案書の形でロゴの提案をプレゼンテーションの形で行うこともあります。

その際、ロゴの使用例として、何らかのモックアップ（注）を作る必要があります。

（注）モックアップ：
もともとの意味は「模型」。デザインにおいては、クライアントなどに完成品のイメージをわかりやすく伝えるため作成した「完成品をイメージした画像」のこと。
この記事のヘッダーにある「ロゴの付いたグラス」もモックアップの一つ。

まとめると、以下の状況でロゴだと識別できるかどうかを考えてデザインする必要があるということです。

＊ロゴを白黒2色にした
＊ロゴと同系色の背景
＊白背景
＊黒背景
＊ロゴをものすご～く小さくした（前述のfavicon.icoみたいに）
＊Tシャツ等布地にロゴを印刷した（＝細かい部分が潰れやすくなる）

ロゴデザインの基本的な方向性は「優れたロゴを構成する5つの要素」という記事を読むのが一番わかり易いです。

あともう一つ、デザインの意図をしっかりと他の人に説明できるようにしておきましょう。

今まで説明したような流れで制作していれば、問題なくできるはずですけど…ね☺

P.S. 今回のモックアップ画像で使った素材と参考ページ：
Thank you so much 😄

モックアップテンプレート→Freebie! New Glass Mug Animated Mockup
by Alexandr Bognat（該当ページ内からリンクでダウンロード）

参考記事→デザイン披露に役立つ！置き換えるだけのお手軽な無料モックアップ素材コレクション（PhotoshopVIP）