「渋谷でデザインエンジニアリング」のロゴができるまで

こんにちは、渋谷の某IT企業でデザイナーをしていますカワムラです。

社内で部活動的に行なっているデザインエンジニアリングの活動に、昨年末からデザイナーもジョインしました。当初はエンジニアだけで行なっていた活動にデザイナーも参加したことで、より2つの領域の試行錯誤を行うことができるようになった…と思いたいです。

活動については下記記事より概要をご覧ください。

渋谷でデザインエンジニアリング

せっかくデザイナーもジョインしたので、ロゴマークを作ろう！ってことでコンペをしまして、最終的にこちらのデザインを採用していただきました。（わいわい）

最終決定したロゴ

最終決定したロゴ。横バージョン

今回の記事ではロゴ決定までのプロセスをご紹介したいと思います。

どんなロゴにする？

今回のロゴのイメージはこんなかんじでスタートしました。

• デザインだけでもなく、エンジニアリングだけでもない雰囲気
• Design ⇔ Enginnering のような相互関係のある見せ方ができると良さそう？
• デザイン思考を元にものづくりを進めていることが伝わる
• 渋谷感？最先端感？
• ギルド？ラボ？っぽさ

イメージを膨らませよう！

いざコンペ！

せっかくの部活動なのでみんなで案を持ち寄って、貼り出して投票する形式になりました。ロゴの制作過程も楽しもう！！

①デザイン出し

5分のデザイン案出し時間を設け、全員でデザインを考え、できたデザインを壁に貼っていきます。（事前に作ったデザイン含め）

ちなみにコンペの日までにデザインつくってくるものだと思って、ちゃんとロゴをつくってしまったのは私です（＾v＾）（空気読めない）

デザイナー、エンジニア関係なくロゴデザイン考えるのは新鮮でした。

②ヒートマッピング

壁に張り出したものに、自分がいいと思ったデザインに事前情報なしに最大2つまでシールを貼っていきます。（いいと思った箇所に貼ってもよい）

ロゴが出揃った！個性が出ますね

③各自ロゴの説明

投票率が高かったものから、製作者がデザインの説明をします。

「お〜」なんて声が上がることも。

Mediumのサムネの丸になったときのおさまりが気になるらしい

④再投票

一票だけ気に入ったデザインに投票します

⑤スーパー投票

スーパー決定者が最終的にいいと思ったデザインに決定！

（例え他の人の投票がスーパー決定者が選んだものではないものが多くても、スーパー決定者の選択が優先されます）

悩んでいる様子…

投票結果は…！？

最終結果、ロゴを選んでいただけました〜！（何気に嬉しい）

最初のロゴ案

ちなみにこんなコンセプトで最初のロゴを制作しました！

• Design とEnginnering吹き出しになっていて、お互いの理解を深めようという意思をイメージしました。
• またDと Eが絡み合い抽象化していく = デザインもエンジニアリングも垣根がなくなっていく
• 渋谷っぽい（と思っている）明るめのグラデーションカラーを採用

グラデーションをつかった今っぽいロゴ、印刷よりも画面で見たときに映えることを意識しました。

ここからみなさんのフィードバックをうけてさらにブラッシュアップしていきます！！

ちなみに最初のロゴをつくったときのベースはこちらでした。

ロゴをブラッシュアップしよう！

受けた指摘をベースに修正していきました。

もらった修正ポイントとしては

• 吹き出し感がもっとほしい
• 吹き出し白い方がわかりやすい

上記をベースに修正していきます。

レッツブラッシュアップ！

ブラッシュアップ①吹き出しのパターン試してみる

• とりあえず吹き出しパターンだしをしよう
• 丸にすると文字とあわなさそうなので、角丸四角形ベースで吹き出しの角度などを調整する
• 下から出ているとちょっと間延びする、斜めだと角度つけたときに微妙なので横吹き出しで詰める

吹き出しのパターン出し①先をどこに出そうかな…

ブラッシュアップ②吹き出しのパターン試してみる2

• 横吹き出しが良さそうなのでこれで微調整して見る
• 吹き出しでているところにも丸みつけてみたり。
• 文字との角度を試して見る、吹き出しと文字が立体感あるように見せたかったけど微妙かもしれない。

吹き出しのパターン出し②斜めにすると間延びする

ブラッシュアップ③吹き出しの形を調整

• 吹き出しやや縦長だったがもっと丸みをだすためにほぼ正方形にしてみる
• 角度つけた時のバランス悪くなさそうなのでこれで吹き出しの角丸ありなしとかでためしてみた

吹き出しの形を微調整、角丸や先の長さなど…

ブラッシュアップ④文字の形を調整＆サブテキスト考え始めてみる

• 重なった時の文字のバランスをみて、つなげるところを追加
• 文字を繋げてみて、Eの棒のばしたり、つながったところをすこーし長めにしてみたり。勢いがあるかんじに。
• ついでにつける文字も考え始めてみる。最初のデザインのだとちょっとイケイケすぎるので、もうちょっとシンプルなものに変えて。（Mediumっぽいシンプルな感じにしたかったやつ）

文字の隙間をつくってみたり。サブテキストを置いてみたり。

ブラッシュアップ⑤色合いについて検討

• 白い吹き出しがいい？って意見もあったので試してみたり。
• 個人的にはグラデ推しだけど、なしパターンなども作ってみたり。
• そもそも一個の吹き出しっぽいほうが綺麗な説（左中央）

吹き出しの色合いを調整。左中央の方が一体感ある気がする

ブラッシュアップ⑥サブテキストの調整

• フォントは決めたけど、ちょっと硬いので少し角丸をつける調整。角丸つけて細くしたり。。。

文字間を整えたり、フォントに丸みをたしたり細さを調整しています。

ロゴ完成！

とうわけでロゴが完成しました〜！

吹き出しグラデーションカラーパターンと、背景ある場合には白い吹き出しとどちらも残すことになりました。

使い分けも含めて白吹き出しもグラデも残りました！

ちなみにbefore・afterこんなかんじ。

比較するとこんなかんじ。だいぶ整った気がします。

形状を整えたことでよりスマートなものになった気がします。アイコンになったときも収まりいいはず！

ロゴがあることで、部活動のチームに一体感が生み出せたらと思います。

デザインエンジニアリングの活動が楽しみになるようなロゴになっていれば幸いです。

今後の活動もお楽しみに〜！！よろしくお願いいたします