Flatt Security Blog

株式会社Flatt SecurityのBlogです。

Flatt Securityのロゴをリニューアル。創業3周年に合わせたプロジェクトのプロセスをまとめます。

こんにちは。元・株式会社Flatt Security デザイナーの北川レオです(業務は4月末まででした)。 ​ 今回Flatt Securityのロゴをリニューアルし、本日プレスリリースにて公開させていただきました。 ​ f:id:flattsecurity:20200520151201p:plain ​ 2020年1月から4月までの約4ヶ月間のプロジェクトでしたが、創業3周年のこのタイミングでロゴを一新できて良い区切りになりました。 ​ 本記事では、今回のロゴリニューアルプロセスを紹介していければと思います。 ​

背景

まずは、ロゴをリニューアルすることになった経緯について。 ​ ロゴをリニューアルすることになった1番のきっかけは、約1年前の事業転換です。 ​ Flatt Securityは元々、PinQulというtoCのライブコマースサービスを提供していたので、サービスが会社の顔であり企業ロゴに関して特に大きな課題はありませんでした。昨年社名がFlattからFlatt Securityに変わった後も既存のロゴの後ろに「SECURITY」 をつけるという最低限の対応で使い続けていました。 ​ しかし、toB事業に変わったことで、企業ロゴが会社の顔として機能するようになった結果、以下のような課題が浮き彫りになってきました。そこで、ロゴリニューアルプロジェクトが立ち上がることになりました。 ​

現状ロゴの課題

  • Flatt という風に読めない人が一定数いる。ロゴの文字としての可読性が低い。
  • アスペクト比が極端な横組みロゴしか存在しないために、スポンサーロゴなどで掲載される際に存在感がかなり低くなる。
  • 汎用性の高いシンボルマークが存在しない(これに関しては優先度はあまり高くありませんでしたが)

toB企業の性質上、スポンサーロゴ掲載や展示会の出展時に様々な媒体で企業ロゴが使用されますが、現状の付け焼き刃のロゴでは、その機能を十分に果たせていませんでした。 ​ この課題感はずいぶんと前から話に上がっていたものの、リソースの関係でなかなか着手できず、創業3周年を控えた2020年の年始についにプロジェクトがスタートします。 ​

状況の整理

​ 現状のロゴに対する課題観は先述の通りですが、プロジェクトのキックオフとして改めて現状のロゴの分析と新しいロゴに求める要件を整理し、手戻りがないように共通認識を合わせました。 ​

現状ロゴの継承したい点

  • 文字が太く、図形としての可読性はバッチリ。
  • 目指すべきトンマナも体現している。(ITスタートアップらしく先進的なイメージを与えつつも、カジュアルすぎない)
  • 赤のコーポレートカラーは被りづらく、上手くアイデンティティとして機能している。

新ロゴに求める要件

  • Flatt Security という社名がきちんと判読できるロゴタイプを作成する。
  • スポンサー掲載の時になるべく面積を占有できるようアスペクト比に配慮する(縦・横組み両方あると理想)。
  • 将来の事業展開・採用を見据えて適切なブランディングにする。
  • ブランド的な課題が存在するわけではないのでリブランディングではなくロゴリニューアルに留める。

本プロジェクトは、2人のデザイナーで進めることになりました。メインで手を動かすのは僕で、CCOの豊田がサポートと壁打ち担当です。 ​ 常にメインの業務もあるので、週に5時間ほどの作業時間を取りながら、3~4ヶ月ほどでの各種媒体への展開までも含めたリニューアル完了を目指すことになります。 ​ ざっくりとしたロードマップも決まりました。 ​

ロードマップ

1月上旬 ~ 1月下旬

要求整理・コンセプト策定・ベンチマークリサーチ

2月上旬 ~ 3月上旬

ロゴ案出し

3月中旬 ~ 3月下旬

ロゴ案Fix・ブラッシュアップ

4月上旬 ~ 4月下旬

名刺・Webなど各媒体への展開

5月の然るべきタイミング

リリース ​

リサーチ

Flatt Securityにとって、初めてのロゴリニューアルプロジェクトということもあり、まずは下調べをして目指すべきロゴの方向性を議論するための材料を揃えました。リサーチした項目は以下の3つです。 ​

  • ロゴリニューアルの事例
  • 社内のイメージ調査
  • 他社のベンチマーク調査

ロゴリニューアルの事例

​ ロゴリニューアルやリブランディングのための事例を調べて参考になる情報を集めました。 ​ 今回は、リブランディングではなく、あくまでもロゴリニューアルなので、タップルさんの事例記事などが参考になりました。 ​

現在は、noteを中心に様々な事例記事が読めますよね。参考にした記事をリスト化したNotionも公開しているので、気になる方はチェックしてみてください。

事例リスト

社内のイメージ調査

​ 次に現状の自分たちについて知るために、社内のメンバーを対象に現状のロゴに対する意識調査を実施しました。 ​ 事業が変わってからメンバー構成も大きく変わっている中で、創業当初からあるロゴに対するイメージと現在の会社に対するイメージにどれほどの差があるのか確認することが目的です。 ​ ロゴに関する意識調査アンケートの結果 ​ ↑の表は、ロゴに対するイメージと会社自体に対するイメージを5段階で示してもらったものを集計した結果です。 ​ アンケートの結果から、ロゴイメージと企業イメージで大きな印象の違いがないことが確認できました。この集計結果も確かに大事なのですが、そもそもFlatt Securityとはどういう企業なのかを言語化する機会として、とても意味のある工程だったと思います。 ​

アンケートの結果を元に、改めてFlatt Securityロゴが持たれるべきイメージについて考えていきます。新ロゴが持たれるべきイメージを、Bad、Not Bad、Goodの三段階で分類して視覚化しました。

f:id:flattsecurity:20200520194841p:plain ​ そして、その項目の中から特に意識したいと思うものを3つ抽出し、これだけは守りたいという基準を作成しました。 ​

  • Goodの中でも特に意識したいもの
  • Badの中でも特に意識したいもの
    • キュート
    • ありふれた
    • 無機質すぎる

新ロゴ完成後、この項目が満たされているものになるよう、立ち返る一つの指標としてこの項目を印刷し、いつも見えるところに貼ることにしました。 ​

こういった前提条件を言語化して決めておくと、議論が行き詰まった時に役に立ちます。 ​

他社のベンチマーク調査

​ 次は、会社の外のことについてです。 ​ 自分たちのポジションとベンチマークを確かめるために、同じ業界のロゴを以下の2つのグループで集めてざっくりマッピングしました。

  • 世界のセキュリティ企業(色と太さ別)
  • 国内のtoB企業(印象別)

​ どの視点でグルーピングされるかによって、比較される企業は変わってくる場合があるので、複数ドメインでの比較はおすすめです。 ​ 例えば、Flatt Securityの場合は、セキュリティドメインに分類されますが、別の視点で見れば、国内のtoB向け企業という分類分けもできます。 ​ 実際に企業に導入されるサービスとして後者の企業と並べられることもあるので、今回は双方を踏まえた議論が必要でした。 ​ f:id:flattsecurity:20200520152351p:plain f:id:flattsecurity:20200520152433p:plain ​ 僕が作った、原案をもとに「このロゴはもっとキュート寄りだと思う」「これがここにあるのはおかしくない?」のようなざっくばらんな議論で、世にあるtoBロゴに対する共通認識をすり合わせます。 ​

そして、理想のロゴのイメージを共有するために、こういうロゴがいいよねと思う項目を各自3つ選びその理由を言語化して共有しました。 ​ 具体例を見ながら、お互いがどのようなロゴを目指しているのか、各々の価値観をすり合わせていくことで、さらに新ロゴへの解像度をあげることができました。 ​

コンセプト策定

これまで話し合いの中で生まれた共通認識を前提に、いよいよロゴ案作りのフェーズに入りますが、ここで少し悩むことになります。 ​ 今までのロゴには、具体的なロゴモチーフやコンセプトが存在しておらず、ただシェイプや色を洗練するだけでは、Flatt Securityらしいロゴを作ることはできないということに気づいたからです。 ​ 新ロゴを作るには、「Flatt Security」は一体どういう会社なのかを表すような、筋の通った具体的なコンセプトを作り出す必要がありました。 ​ そこで役に立ったのが、社名変更以降に策定された弊社のVisionとMissionです。 こちらも本日のプレスリリースで公開させて頂きました。 ​

Vision

テクノロジーを最大化することに向き合い、世界で愛される企業になる。

Mission

セキュリティの力で信頼をつなげ、クリエイティブな社会を実現する。

社にとってブレない軸であるVision・Missionをもとに、Flatt Securityの目指すカタチをロゴコンセプトとして具体化し、その中からロゴモチーフを探り出す、という手法を採用しました。 ​

同時に、ロゴに使えそうな具体的なモチーフをつけるために、Pinterestでそれぞれのコンセプトに当てはまるビジュアルをコンセプトボードとしてまとめていきます。 ​ 以下、作られた4つのコンセプトです。 ​

Vision, Missionから考えるFlatt Securityの目指すカタチ

①インターネット社会においての見えない基盤になる

f:id:flattsecurity:20200520153352p:plain Pinterstで作成したコンセプトボード

インターネット社会において、縁の下の力持ち的な存在を目指す。人々が安心して生活ができるようにするための土台・インフラ的立場になるのがFlatt Security。

使えそうなモチーフ:土台、舞台、根っこ、大地、縁の下、足、靴、電子回路基板 ​

②疑念、恐怖、不安から人々を自由にする

f:id:flattsecurity:20200520153634p:plainPinterstで作成したコンセプトボード

これから先、今まで以上に多くのものがインターネットに繋がるが、便利になる分脆弱性も高まりさらなる不信感が人々を襲う。インターネットやテクノロジーに対する、不安や恐怖心から人々を解放する存在がFlatt Security。

使えそうなモチーフ:万歳、ジャンプ、爆破、羽、鳥、旗、平野、聖火、風船 ​

③テクノロジーが最大化される環境を提供し人々の生活をアップデートし続ける

f:id:flattsecurity:20200520153708p:plainPinterstで作成したコンセプトボード

発明がされるたびに、悪意のあるハッカーが攻撃するための隙が増えてしまっている現代。それを恐れてしまっては、技術発展にブレーキがかかってしまう。テクノロジーが最大化される環境を生み出し、人々の生活をアップデートし続ける存在がFlatt Security。

使えそうなモチーフ:矢印、指数関数、サイクル、振り子、無限、永久機関、 ​

④テクノロジーと人間社会の橋渡しをする、繋ぎ合わせる

f:id:flattsecurity:20200520153727p:plainPinterstで作成したコンセプトボード

技術が発展するにしたがって、リテラシー問題・セキュリティ問題など人間とテクノロジー間のギャップは大きくなってしまう。その間を埋め合わせ、人間が誰でもテクノロジーにアクセスできる社会を実現する存在がFlatt Security。

使えそうなモチーフ:橋、大陸間、接着剤、ボルト、バンド、ロープ、鎖、握手、バトン ​

目指す先は同じですが、ニュアンスや視点を変えることで、軸の違う様々なコンセプト案を出すことができました。 ​ これらを共有しつつ、豊田と代表の井手に相談します。 ​ 議論の結果、ありがたいことにどれも会社のありたい姿を体現できているとのことだったので、無理に絞り込むことはせず、4つのコンセプトを土台にロゴ案を出していくことになりました。 ​

紙で案出し

いよいよ、具体的なロゴ案をひたすら作っていくフェーズです。こんな感じで紙ベースにたくさんの案を出していきます。 ​ f:id:flattsecurity:20200520154049p:plain ​ 今回、案出しの期間が一番長く一番苦しみました。個人的に難しかった点は以下2つです。 ​

  • 社名が長い
  • 具体的なモチーフが使いづらい ​

モチーフの選びにくさに関しては特に悩みました。「Flatt 」+「Security」の言葉の組み合わせにさらにモチーフを重ねることになるので、モチーフが具体的なものになってしまうと、どうしてもアンバランスになってしまうからです。 ​ かつ、可読性とインパクトを担保し、ありきたりすぎないものにしなくてはなりません。 ​ 1ヶ月ほど唸った末、以下の4つの案が残りました。 ​

案① インターネット社会の根(root)

f:id:flattsecurity:20200520154115p:plain

  • 元のコンセプトは①インターネット社会においての見えない基盤になる
  • インターネット社会において、生態系を支える根のような存在になる
  • √(root)とFlattのFを組み合わせたモチーフ
  • √がシンボルとして使えるのでブランド展開も幅が広がる ​

案② 人間とテクノロジーの境界線、しめ縄

f:id:flattsecurity:20200520154129p:plain

  • 元のコンセプトは④テクノロジーと人間社会の橋渡しをする、繋ぎ合わせる
  • 人間とテクノロジーの境界線として、安心してテクノロジーを活用できる環境を作る
  • しめ縄や紙垂がモチーフ、しめ縄は元来、神域と現世を隔てる結界のような存在
  • 奇抜感、日本企業感は出せそう ​

案③ 最大化されたテクノロジーを誰でも利用できるフラットな社会

f:id:flattsecurity:20200520154244p:plainf:id:flattsecurity:20200520154255p:plainf:id:flattsecurity:20200520154303p:plain

  • 元のコンセプトは②疑念と不安から人々を解放する
  • 私たちはだれでも平等にテクノロジーの恩恵を享受できる世の中をつくる、平らな大地のようにどこを照らしても翳りが生まれない公平な社会を目指す
  • どこまでも平ら(flat)な地平線がモチーフ
  • 社名の伏線回収 ​

案④ 人とテクノロジーを繋ぐ接点

f:id:flattsecurity:20200520154313p:plain

  • 元のコンセプトは③テクノロジーが最大化される環境を提供し人々の生活をアップデートし続ける
  • 人類は新しいテクノロジーに触れて使って理解することで進歩してきた、セキュリティリスクによって人とテクノロジーの接点が減少してはならない、人類を前に進める接点を常に作り続ける存在を目指す
  • 接線と円を組み合わせたモチーフ
  • 太いロゴタイプにシャープな直線入れるの良さそうだなあって気がした ​

議論を重ねた結果、案①の√をモチーフにした案で進めることになりました。 ​ シェイプ的にインパクトがあり展開もしやすく、コンセプトとしてもユニークで一番完成度が高くなりそうという理由からです。

​ 実は、案①のアイデアは案出し初日に出てきていたものでした。同じ案でも、案出しを限界までしたうえでの選択か、妥協の上での選択では全く意味合いが変わってきますね。 ​ ここから先はIllustratorを使ってロゴのシェイプを作っていきます。 ​

イラレで案出し・ブラッシュアップ

​ 紙のものを参考にひたすら形を出していきます。 ​ いろんなFを試してみたり、 ​ f:id:flattsecurity:20200520154329p:plain ​ いろんなaを試してみたり、 ​ f:id:flattsecurity:20200520154346p:plain

ある程度形が決まってきたら、豊田も交えて細かい調整を行っていきます。 ​ f:id:flattsecurity:20200520154358p:plain

結局フォントは左上のAvenir Nextを採用し、ウエイトを調整したり、小さくても読みやすいようにアウトライン化後にシェイプを調整したりしました。San Franciscoも好きだったんですが、Apple製品のインターフェイスに関わる部分以外での使用は認められていないようですね(オオカワラさん教えて頂きありがとうございました)。

モノトーンで形が決まったあとは、カラーバリエーションの確認、最小ロゴサイズの確認も兼ねてキンコーズで印刷をし、最終確認をします。

f:id:flattsecurity:20200520154416p:plain

縦組のパターン、横組みのパターン双方の調整も完了し、新ロゴがついに完成しました。 ​ f:id:flattsecurity:20200520154443p:plain

展開・反映

​ 新ロゴ完成後は、ノベルティへの展開に想いを馳せつつ、営業資料やコーポレートサイトへの地道な反映をコツコツと行っていきました。 ​

f:id:flattsecurity:20200520154528p:plainf:id:flattsecurity:20200520154541p:plainf:id:flattsecurity:20200520154556p:plain ​ 今回は、時間が足りず使用にあたってのガイドラインやメディアキットは用意できなかったので、今後の整備がまだまだ必要ですが、最低限のラインまで作りきることが本当によかったです。 ​

これが僕にとってのFlatt Securityでの最後のお仕事だったので、ご協力いただいた社内のメンバーの方々には頭が上がりません。 ​ この新しいロゴと一緒に、これからもますますFlatt Securityが成長していくことを願っています。 ​ 最後までご覧いただきありがとうございました。

終わりに

Flatt Securityではデザイナーを募集しています!WebのUI/UXデザインと実装・広報/マーケティング連携が主な業務になります。ご応募の際はお問い合わせまでご連絡ください。

デザインの力をテックな領域で生かしたい方のご応募をお待ちしております!