FORCASのロゴができるまで

（お断り）
この記事は、2017年8月に別のサイトで公開した記事を転載したものです。

＿＿＿＿＿＿＿＿＿

こんにちは。ユーザベースのデザイナー、廣田です。
SPEEDAをはじめとしたユーザベースのB2BサービスのUI/UXデザインを担当しています。
FORCASについても、サービスの立ち上げ時から参画し、ブランディングからUI/UXまで、さまざまな仮説を立てながら、日々、最適なデザインを模索しています。

こちらのブログでも、デザイナーならではの視点で、FORCASのデザインにまつわる、あんなことやこんなことを、できる限り発信していきたいと思います。

さて、初回は、やっぱりFORCASの生い立ち、そのネーミングやロゴについて書いてみようと思います。まだ生まれたばかりのサービスなので、気持ちもホットなうちに。

FORCASの名前はどこから？

まずはネーミングから。
名前の由来については、2017年5月29日付のニュースリリースでも紹介している通り、「集中する」のFOCUSと「予測する」のFORECASTとを合わせた造語です。

つまり、こういうことですね。

データに基づいて契約確度の高いアカウントを予測（forecast）し、
マーケティング・営業のリソースをターゲットアカウントに集中（focus）する。
データに基づいてアプローチすべきターゲット（focus）を定義し、
マーケティング・営業の次の行動計画を立てる（forecast）。

Account Based MarketingとPredictive Marketingの本質を突いた、良い名前だと思いませんか？

そして、読み方は、「フォーカス」です。「フォーキャス」ではありません。
ユーザベース社内でも、最初は「フォーキャス」と呼ぶ人が何人かいましたが、今は誰も間違いません！ …のはず。

実は、昨年末の時点では、別の名前が付いていました。
マーケティング用語に多い、アルファベット3文字の名前が。。。
ですが、海外メンバーも参加する年に一度の全体会議で発せられた代表の新野の一言。

「なんか、ださくない？」

・・・で、もう一度ゼロから考え直し。
そして、今のFORCASが生まれたというわけです。
確か、、、今年の2月か3月ぐらいのことだったと思います。

ロゴを作るとは

ロゴを作るって、そう簡単じゃありませんよね。
デザイン系の書籍コーナーを覗いてもわかるように、本当に多くのロゴ作成やブランディングに関する書籍が並んでいます。デザインの学校に通っていた時代に購入したものも含めて、私もいろいろ買っちゃったなあ、、、という写真がこちら。

左上から：『新しい価値を生み出すためのブランディングプロセス』パイインターナショナル / 『Los Logos 6』 / 『ロゴ・ライフ 有名ロゴ100の変遷』グラフィック社/ 『ロゴをデザインするということ。成功と失敗から伝える、君へのアドバイス-ロゴデザイン・ラブ！ 』ビー・エヌ・エヌ新社 / 『たのしいロゴづくり -文字の形からの着想と展開』ビー・エヌ・エヌ新社　/ 『思わず話したくなる ロゴの秘密』高橋書店 / 『ブランドのそだてかた』日経BP社 / 『問題解決のあたらしい武器になる視覚マーケティング戦略』クロスメディア・パブリッシング / 『DRAFT宮田識 仕事の流儀』日経BP社 / 『センスは知識からはじまる』朝日新聞出版

今回、私は、新しいサービスの設計・開発に、デザイナーとして携われるという幸運に恵まれました。なので、UI/UXデザインはもちろんのこと、ブランドの立ち上げやロゴデザインについても、俄然やる気です。

し・か・し、、、やっぱり、そう簡単じゃない。
ワクワクする一方、うぅーん、どこから考えようか、、、と悩む毎日でした。

この頃は、ABMに関する書籍やホワイトペーパーを読んだり、マーケティングの分野の海外プレイヤーのサイトとそのロゴを研究したり、、、と、思いつく限りの情報収集に時間を費やしていました。

そして、知識がついてきたなと感じたら、今度は感性にまかせてみよう、、、と、自分の中から出てくるキーワードに耳を傾ける時間を作りました。

まずは、出し切ってしまう。発散してしまっても、なんだか変な方向に行きそうになっても、それを否定しない！と決めて、とにかく思いつくキーワードを思い付いだ順番に、でも関連性のあるものは線で繋いで、、、、ってな感じで、書き出していきました。ワードマップ的な手法で。

ワードマップを作ってみる

それがこの写真です。
これは、英語を勉強していたときに、カナダ人の先生がボキャブラリーを増やすために教えてくれた手法です。それを応用して、デザインのイメージを膨らませるときにもよく使っています。私の中では、マインドマップとはちょっと違うんですよね。うまく説明できないけど。。。

ちなみに、私はエトランジェ ディ コスタリカの方眼ノート愛好家です。紙の薄さといい、方眼の線のインクの乗り方といい、最高に私好みです。

おっと、話を戻して、ワードマップの話。
この時点では、名前は決まっているものの、その表記が「FORCAS」なのか、「forcas」なのか、「Forcas」なのかは決まっていません。。。が、とりあえず、大文字の「FORCAS」でスタートしました。この時はただの直感ですが、すべて大文字の方が良い気がしていました。

途中途中、そのキーワードから連想される単純な図形（キーオブジェクトとでも呼べばいいかな？）なども書き込んでいきながら。

そうやって、いくつもの枝葉に分かれてキーワードを書き込んでいくと、不思議なもので、別の枝葉として展開していったキーワードどうしが、なんとなく繋がっていることに気付くんですよね。それはキーワードだけでなく、キーオブジェクトにおいても。

そうやって、メビウスの輪的に結びついたキーワード（キーオブジェクト）こそ、FORCASの本質、そう、シンボルなんじゃない？？？って勝手に盛り上がって、抜き出したのが三角形です。←結局、三角かよ、、、って、ツッコミがありそうですが。。。

この三角形には、下の図の通り、

・ターゲティングの矢
・将来を見通す望遠鏡
・限られたリソースで最大限の成果を得るテコの支点

以上3つの意味を込めています。もちろん、ABMではよく出てくる「Filip My funnel」を象徴する三角形でもあります。

ちなみに、この図はチームへのプレゼン用に用意した図で、ロゴ完成までのプロセスとしては、この部分もまだ手描きで考えています。

forcas？ Forcas？ FORCAS？

先ほどのキーワードの書き出しとほぼ同時ぐらいのタイミングで、Illustratorを使って、大文字、小文字、その混合をさまざまなフォントで試してみました。
その過程で、FORCASのAを@に置き換えてみたりもしました。「@ = at」つまり「target at（〜をターゲットとする）」という発想で。

先にも書きましたが、FORCASはfocusとforecastを組み合わせた造語です。
これら2つの単語にあるアルファベットを組み合わせたわけなので、どのアルファベットも等しく大事。優劣があるわけではありません。
ということもあり、先頭だけを大文字にするっていうのはないかなあ、、、と思って、すべて大文字、すべて小文字のどちらかにすることに決めました。

・・・で、大文字か、小文字か。

それは、大文字の「A」が、「あっ、これ、三角形だ！」と気づいた瞬間に決まりました。
そう、大文字がいい！

そうやって、FORCASの「A」が三角形に見えてくると、その位置が中心からずれていることから、今度はテコの原理の支点（三角形）に見てくる。そして、今度は「O」が的（ターゲット）に見えてくる。その的に矢（三角形）を放ってみたらどうだろう？？？

そうして、FORCASのロゴの骨格ができあがりました。
Aが三角形だと気付いたところから、このロゴの形ができるまでは、あっという間でした。

ちなみに、フォントはGill SansとFuturaをベースに、少し手を入れています。

さて、色はどうしよう

ロゴを作るときのファーストステージ、「モノクロで考える、色は乗せない」を通過したところで、今度は色選びです。これも、いろいろな色を試してみました。

ターゲットの中心を意味する「赤」をイメージして、さまざまな赤を試してみましたが、なんかしっくりこない。
明るい「黄色」がいいんじゃ？という他のメンバーからの意見もあって、さまざまな黄を試してみましたが、やっぱりしっくりこない。

そこで、FORCASを実際に使う人たちってどんな色が似合うだろう？どんな色を好むだろう？を想像してみる。
データ分析でマーケティングを考える人たちって、ベテランというよりも、20代ぐらいの若い世代？
男性か、女性か？　うぅーん、何か違う気がする。どちらかに区別されるというより、どちらとも言えない、どこか中性的な雰囲気の人たち？

・・・と、一人妄想してたどり着いたのが、今の青緑。青とも緑とも言えない青緑。そして、どこか若さとクリエイティビティを感じる色。

そういえば、信号機の青って、こういう色だよね？
つまり、「進んでよし！」だよね？

信号機の色と同じだと気付いたら、この色に「進んでよし！」と言われたみたいで、自分の選択に自信が持てました。それに、FORCASの分析結果が、ユーザーの「前に進む」をサポートできるような気がして。

少し、こじつけのような気もしますが、とにもかくにも、ブランドカラーを青緑に決定。
色番号も、覚えやすく、かつ、リズムを感じる「#00BFBF」です。

ブランドカラーが決まれば、次はベースカラーとアクセントカラー。
ベースカラーは純粋なダークグレーではなく、青緑と組み合わせた時に青緑が映えて見えた青みがかったダークグレーを選択。そして、使い勝手のよい青色と赤色を決めました。これも、ブランドカラーとの組み合わせでトーンが合うように。

画面に組み込んでみる

続いて検証したのは、サービスの中でのロゴの見え方。
まずは、Sketchで作成した画面モックアップの中に、このロゴを組み込んでみます。そこで、縦横のサイズ感とか、ブランドカラーをプロダクトでどう生かしていくか、、、などを検証していきます。

FORCASのこのブランドカラー、多用しすぎると、落ち着きのない画面になってしまいます。なので、リンク色などで利用するのはNG、ボタンやタグの色として使う場合も、本当に重要な箇所に限定したほうがよさそうだなあ、、、ということが見えてきます。それ以外は、アクセントカラーの青を使うとよさそう、、、といったことを、Sketch上で試行錯誤しながら方針を決めていきました。

こうやって、ロゴを単独で見たとき、画面に組み込んだとき、、、など、いろいろな角度から検証して、懸念点をひとつひとつ潰していき、今のロゴにたどり着きました。

プレゼンシートは語る

あとは、これをどうやって関係者に伝えていくか。
そのために用意したのがこちらのプレゼンシート。（当時作成したプレゼンシートの一部です。）

さすがに、このブログ掲載用に少し体裁は整えましたが、ほぼ当時のままです。これを使って、ビジネス開発メンバーの佐久間と土屋に、「どうしてこのロゴなのか？」を熱く（？）語りました。

このプレゼンシートを作ったおかげで、すんなりロゴを受け入れてもらえ、さらに深く共感してもらえました。佐久間からは、「FORCASの目指す未来が視えた」とフィードバックをもらえて、本当にうれしかったですね

こういったプレゼンシートは、クライアントワークとしてブランディングを提案するときは、当然準備するものですが、こと、ベンチャー企業においては、さまざまなシーンでスピード感が求められるため、こういうプロセスはスキップされがちです。（もちろん、すべてのベンチャー企業がそうであるとは思いませんが。。。）

これを、きちんとブランドガイドラインとしてまとめるのが、目下の目標です。

最後に

以上が、FORCASロゴができるまでのストーリーです。

FORCASはサービスとしてはまだまだ未熟ですが、このロゴに込めた想い、そして目指している未来を、みなさまにお伝えしたいと思って、この記事を書きました。少しでも、私たち開発メンバーの想いが伝わっているとうれしいです。

最後まで読んでいただき、ありがとうございました。