
さらに広い領域へ加速する。TechTrainが”切り替える”ために施したリブランディング。
こんにちは!
株式会社TechBowlで最初のデザイナーとして日々奮闘しております、だいちっちです。
この度、当社プロダクト「TechTrain」は、さまざまな理由からより多くのお客様へサービスが届くようにとリブランディングを行いました。



リブランディングと聞くと、わかりやすいのはロゴやビジュアルの変更かと思います。
もちろんそれも一部なのですが、今回我々は事業を新しいフェーズへ「切り替える」ため、大きな印象の変更とそれを社内外へ浸透させるための施策としてリブランディングという手法を用いました。
この記事では、実際に行った過程をデザイナーの視点から包み隠さずお話しさせていただきたいと思います!
これからリブランディングを行う方への一つの参考事例としてお役に立てば嬉しいです!
今回このプロジェクトを主導したのは当社CPOの杉本とリードデザイナーの渡邊です。


事業は「路線」の切り替え時期だった。
その前に軽く当社ついて触れさせてください!
株式会社TechBowl(以下、当社)は、代表の通称おざまさが前職でエンジニアの採用担当責任者をしていた際、エンジニア候補者と企業の求めるエンジニア像の乖離から採用のミスマッチが多発。その原体験を元に立ち上げた企業です。

そんな当社が提供しているプロダクト「TechTrain」は、現在までエンジニアになりたい方の育成するEdTech事業と、育てたエンジニアを最適な企業へご紹介するHR事業を展開していました。
ToC向けには、70社140名以上の優秀なエンジニアメンターによる「実務レベルまでスキルアップと内定までをサポートする」環境とコーチを提供。
企業様へは、育成した優秀なエンジニア候補者を採用担当者様が「エンジニアのことが分からなかったとしても」正しく能力を翻訳し、最適なマッチングで採用してもらう、言わば「一気通貫型育成紹介サービス」という立ち位置でした。

執筆時点で会社は6期目。日々お客様のニーズに応えていく内に提供できることも増え、既にエンジニアとして活躍されている方の就職・転職や、優秀なエンジニア同士が交流できる場の提供など、「エンジニアになりたい方」だけではなく、「エンジニアとして生きている方」にとって大きな価値を提供できる様になってきました。
しかし、今まで「初学者が勉強して企業紹介してもらう」サービスとしての立ち振る舞いをしていたが故に、お客様がそれに気付けない・伝えられていないという状況が少しずつ起こり始めます。
そう、入り口がすべて育成から始まり、出口は紹介という「一気通貫型」の業態自体が、奇しくも足枷となってしまっていました…!

これを我々は、事業が大きくなってきたからこその転換期だと捉え、それぞれのニーズに応えられるよう事業を整理し、「届くべき人に価値が届く状態へ交通整理する」ことを今回のリブランディングの目標としました。
価値の「一方通行」を「環状線」に。
まずは言語化すべく、CPOと私2名で合宿をしながら今後のサービスの展望を話し合い骨子を作りました。
※後述しますが、この時点でおおよその方向性は固まったものの、提供価値やポジショニングに関してはまだ見えていない部分も多く、最後まで頭を悩ませることになりました。。。



話している中でより明確になったのは、登録したらまず勉強。の様に見える状態から、学習・就職・交流など様々な「その人の求めるフェーズ」で乗り込み、乗り換えられるような、エンジニアの人生に常に寄り添うサービスにしたい。ということ。
Tech”Train”という電車をモチーフにしたサービス名だからこそ、そんなコンセプトの種がこの時点でなんとなく見えてきました。

進むべき「路線図」になる新しいシンボルロゴのデザイン
また、サービス体制の心機一転をより多くのお客様に認知してもらいたいという想いから、この考え方を内包したサービスロゴを新たに制作することとなりました。
スケッチをしながらイメージを膨らませ、メンバーからたくさん意見をいただきながら抽象化していきます。この作業が苦しくも楽しくデザイナーとして生きている感じがして非常に好きです…!




何度も調整を繰り返し、最終的にこのように仕上がりました。
エンジニアとして生きる人の様々なフェーズに寄り添うライフラインのような存在になりたい。そして人生のどのフェーズにおいても立ち寄れて、新しいライフステージへ導けるようなサービスであり続けたい。
そんな意味をシンボルへと昇華させられたのではないかと思っています。
社員全体会議で発表させてもらい、皆様から承認をいただけた瞬間は感動が一入でした…。




開発組織の「ターミナル」となるデザインシステムの立ち上げ
ロゴが変わったことで、当然サービスのUIやグラフィックなどにも影響がでます。
フェーズごとにを複数のプラットフォームに切り分ける構想のため、分岐してもスムーズに開発できるようなデザインシステムの開発が必要だなとなりました。
チームメンバーが増え分業化が進むことを想定、またエンジニア向けのサービスということでダークモードへ切り替えられることを前提として作成することにしました。
始めにムードボードとしてPinterestで1000枚以上参考を集めながら、脳内のイメージを可視化し共有できるよう方向性を固めていきました。

今回ロゴで定めた色味とUI上で使用する色味の展開も、実際にモックを作りながら見え方を調整していきました。



仮置きで2種類のプラットフォームのUIを構築。ある程度使いそうなパーツとパレットが定まってきたら、デザインシステムにまとめていく作業を行います。
複数のプラットフォーム間で共通利用する色やコンポーネントをデザインシステム側で管理し、ユニークな要素は各UI上で独自に運用するというルールを設けました。


ここで私は、このデザインシステムを「TechTrain Terminal.」と命名。 開発する際はこのデザインシステムに集まり、各プロダクトへ出発していくような場所。そんな意味を込めたくて勝手につけました。(後悔はしていません)


MVVを定め、いよいよ「発進」準備
リブランディングがスタートして半年くらい経った頃、全社としてのMVVを合宿にて決める機会がありました。
「エンジニアリングで日本の国力を上げる。」というMissionはずっとありましたが、VisionとValueははっきりとした言葉で定義していなかったこともあり、どういった言葉が適切か、当時の社員全員でディスカッションし、丁寧に定め直しました。

最終的に決まったMVVがこちら。
Visionは今回のプロダクトの路線変更にも重なる形で定められて、大きな喜びを感じています。


「一周回って」サービス名・リーンキャンパスの再定義
最初に骨子を決めてからすでに9ヶ月ほど経っていたのですが、色々と話し合っているうちに各プロダクトの提供価値や領域が目まぐるしく変わっていました。
いざプロダクトを作り始めるとなった時に立ち戻れる指針のようなものが必要だとなり、CPO主体で定め直すことに。これも開発チームで合宿を行い、リーンキャンパスを用いて価値仮説とKPIをそれぞれ定めていきました。

方針が決まったら、それぞれのプロダクトのLPを作成。今まで一つだった入り口が複数に分けられたことで、本当に必要な人に必要な価値が届く状態を作ることができました。

今がリブランディングの「始発終着点」
足掛け1年弱ほど行ってきた我々のリブランディング。
私自身まだまだ経験が浅く行き届いていない点が多々ありますが、「切り替える」ための整理と、走り出せる土台は準備することができたのではないかと思います。
リブランディングはこれで終わりということではなく、むしろこれからたくさんの人に知ってもらうための活動を長い目で続けていく必要があります。言わばこれがスタートラインだと思っています!
おわりに
改めて当社サービス「TechTrain」は、「エンジニアリングで日本の国力を上げる」をモットーに、エンジニアとして生きる人、テクノロジーを支えるすべての方のターミナル(始発終着駅)となれるよう日々邁進しています。
育成・紹介事業だけに止まらず、”テクノロジーを支える人を支える”ための事業をもっともっと拡大していきたいと思っています。
少しでも、事業や会社に興味を持った方がいらっしゃったら、業種問わずご連絡をお待ちしています!気軽にお話ししましょう!
