CREATOR BLOG

自社サービス「CONNECTALL」のロゴができるまでの話

2014/07/22
てっちゃん
  • このエントリーをはてなブックマークに追加

  img_01

こんにちは、デザイナーのてっちゃんです。
上期も終わり今年も残すところ半年です。半年を振り返ってみてどんなことやったかな?っと思いだせないでいたら、
去年サービスのロゴを作ったことを思い出したのでその時のロゴ制作の流れを書いていきます。

まずはこちらのサービスの概要です。

オウンドメディアに訪れ購買活動などを行っている既存のお客様とFacebookで繋がることができるサービスです。「いいね」を押してもらった際にお客様へ特典を付与することでファンになる動機を醸成し、Facebook上の活動を通してオウンドメディアへの再訪問、再購入を促進した後は、コネクトル内の管理画面で購買活動を計測することができます。

詳しい内容はCONNECTALL (コネクトル)のLPをご覧ください。

このプロジェクトは事業オーナーな2人とマネージャー1人とデザイナーの4人で進めていきました。

要件の確認

事業オーナーの2人からサービス概要の説明をうけました。
この段階では出来る限りロゴに反映できるようにヒアリングをしてより多くの情報を引き出しました。

  • ITっぽさ
  • ソーシャルでつながる
  • ビジネス/コンシューマ共に有益なつながり

概要を聞いた上で4人で名前を決めていきました。

名前の決定

上記のキーワードから名前をまず考えました。
「繋がる」を一番のキーワードに名前を出していきました。

  • コネクト
  • ファン
  • ソーシャル
  • ウィジェット
  • コネクション
  • ジョイン

これら以外にも多数だしましたが、なかなか決められずにいました。
この段階でかなり時間を掛けてミーティングを行ないましたが、ひとつの最良な名前を考える難しさを痛感していました。
しかし基本的にはキーワードから外れる事なく進めましたので、最終的には語感や覚えやすさで判断していきました。

最終的には
connect+all=CONNECTALL

というビジネス/コンシューマのすべてをつなげる役割を体現できる名前になりました。

色の決定

弊社では様々なサービスを展開していて、サービスは色ごとにわかれています。

logo-all

既存サービスとの差別化をはかりながら今後展開されるサービスにも気を使い、他サービスの色とかぶらないところを狙おうという話をしました。
B向けには使われにくい色ですが、その分アピールできる「紫」に決まりました。
ただし、紫と言っても濃淡は結構な種類があるので「puple logo」のキーワードで画像検索を行ないました。

img_02

色々見ましたが、日本より海外のほうがロゴで紫を使用している率は多かったです。
明るめの紫ですとかなりポップ感が出てしまいビジネス向けの信頼感とか安心感が薄れるので、比較的暗めの落ち着いてた色がよいかなっというあたりをつけて、デザインを行うことにしました。

ここまでを4人で進めていき、ここから先の作業はデザインを見せながらの調整ということで、デザインを行っていきました。

ロゴの制作過程

今回は、

  • 英語表記
  • ロゴマーク
  • 日本語表記

でロゴを作ることを決めていたのでフォントを選びつつ、ロゴマークを考えてバランスをみて色を決めるという流れでした。日本語表記は一番最後にして、テイストをあわせました。

まずはフォント選び

フォントに関しては、IT系のサービスと分かった上で、ビジネス向けに対する信頼感があるフォントを選ぶために比べていきました。最初は、ITっぽさを強めるためにサイバーなフォントを選び出しましたが、いまいち信頼感に掛けてうまくいきませんでした。あと、ミーティング中にはPinterestのようなスクリプトのフォントでも見たいというリクエストがあったので、テイストが全然違うものとして選んでみました。こちらで選定し並べてみることで各フォントの違いをはっきりわかるようにしてオーナーに判断しやすいように心がけました。

02

だいたいのフォントの方向性が決まった段階で幾つかの組み合わせの候補を出し、ロゴマークと日本語表記と合わせるようにリストアップしておきます。この段階ではまだ色をつけづにモノクロで作業を進めていきます。webデザインのときでも同じような手法をとっていますが、色に引っ張られないようにモノクロで作業します。個人的にはこの方が形・レイアウトを考えてバランスに集中できます。

ロゴマークの制作

「繋がる」とCONNECTALL(コネクトル)の由来であるconnect+allの「c」と「a」を使いロゴマークを考えていきました。「繋がる」を意識するために、繋がっている状態よりもこれから繋がる状態を表したほうがよいと思い、そちらを多くだしました。これから繋がる状態を表すのに、斜めにすることでよりその印象が強くして、この考え方のバリエーションを出していきました。

まとめるとさらりとしていますが、ここでも時間がかかりました。案出しには最初手書きで感じを掴み、ロゴの本をみたり、ネットで検索、建物を参考にしました。なんとなく決まったら後はイラレで形を作っていきました。具体的な物をモチーフにしていなかったのでこの辺の案出しには苦労しました。

バリエーションの制作

一度オーナーに確認を出したあとに更にロゴマークのバリエーションを見たいとリクエストがあったのでさらに案をだしました。「c」と「a」を丸だけでなく、三角・四角、それ以外、さらに向きなども変えていきました。
バリーションはだしましたが、結局最初に提出した案から決まりました。一見無駄にも思える作業ですが、ロゴを決める上で判断材料になったので良かったです。

03

カラーリングを決める

大枠の「紫」は決まっていたのでビジネス向けの信頼感を損なわないカラーをデザイナーの方で決めました。
ここまでくると、オーナーとの信頼関係ができているので任せてもらえました。

まとめ

img_01

こうしてロゴが決まりましたが、2週間くらいはかかりました。
やはり案出しの部分は時間がかかるうえに、産みの苦しみを一番感じる部分でした。
オーナーの思いとサービスの特性を表す大事なロゴなので、 気に入って使ってもらえることが何よりも嬉しかったです。なんだかんだうまく進めることが出来たの良い経験になりました。

一点だけ心のこりになっているのが、他のロゴと比べた時の形の優位性です。
色だけで言えば紫はかなり特徴的ですが、形としては線で構成されている分、関係ないロゴと並べた時に弱いかなと後から感じました。
ロゴをごちゃごちゃしたところに置くことはあまりないのですが、そいうことも考慮するのがデザイナーなのかなと勉強になりました。

Recent Entry

CSSの単位まとめ pxからvm/vh/vmin/vmaxまで

レスポンシブHTMLメールを作ってみての感想

CSSのリファクタリングでした5つのこと

大人が読んでも頭を使う絵本の紹介

サイト内にうまくInstagramを取り入れてるサイト11選

Category

Archive