exciteより、XTechへ出向している、デザイナーのニーノです。
産休明けから出向し、だいたい九ヶ月くらい経ちました。
今回は、XTechのデザイナーとしてクロスマートのリニューアルに携わることができたので、その辺りをまとめたいと思います。

はじめに

Xtechとは？
XTech(クロステック)は既存産業×テクノロジーで、多発的・非連続的にスタートアップを創出し続けるスタートアップスタジオです。

私が現在出向しているXTechは、一言で言うと新規事業をどんどん起こしているすごい集団です。ハリウッドのように様々な役職やスキルを持った人たちが、結託してヒット作を生み出す・・・ようなビジネス（？）モデル。
基本的には新規事業を創出し、それに必要な最適な人材をアサインして、ガッと作って、ふさわしい人に引き継いで、また新規事業を作るのようなサイクルです。

詳しくは【会社説明資料】をご覧ください。
https://speakerdeck.com/raimuizumi/xtechzhu-shi-hui-she-hui-she-shuo-ming-zi-liao

ですが、デザイン的な観点ではまだまだ改良の余地ありで、現状の子会社はほぼ外部委託のデザイナーに、いわゆる”なる早”で作ってもらっている状態です。スタートアップに置けるデザインは、最も犠牲にされやすい部分であり、マーケットフィットやMVPの検証と言う側面からも、まだそこまで考えられていないものがほとんどです。

クロスマート

クロスマートは、超簡単に言うと、飲食店と卸業者のマッチングを行うサービスでした。現状は、受発注サービスに注力しています。
https://xmart.co.jp/

私がジョインした時、クロスマートも外部デザイナーの方が何も考えられていない部分のタタキを作ってくださったような感じでした。

クロスマート初期のロゴ

Webサイト

いわゆる”早く作る”を優先しているため、Wordpressのテンプレートを使用したデザイン。ちょっと厳かな渋みのある雰囲気でした。
特にルールやトンマナがない状態で、まずはここから作っていかなければならないなぁと感じていました。

そして・・・とうとう作れない時が訪れる

デザインと言うのは、悪く言えば結構適当に出来てしまうもので、今あるデザインからなんとなくこんな感じかな？と言う風に作れてしまうことがほとんどです。正解もないので、そのような状態で作り続け、全体のトンマナがカオスになっているのは、あるあるかもしれません…

クロスマートで作業していたのは、主に管理ツールのUI設計と、広告出稿用のLPの作成でした。
ですが、この広告出稿のLPのトンマナが全然わからん！！！
いわゆる楽天のLPみたいに〜のオーダーも出てきていましたが、最終的にユーザーにどんな印象を与えたいのかが全然わからなくて、とても作りにくかったのを覚えていますw
楽天っぽく〜で作ったLP。いわゆる飲食っぽい、ベッタベタな感じに。

また、基本的にロゴやWebのトーンに合わせると、やや暗くなってしまうのも良いのかどうかわからず、悩みでした。

兎にも角にもヒアリングだ！

ブランディング系の本を読み漁り、この辺りの印象について、どう見せたいのか？をヒアリングすることにしました。

下記の本は特に参考になりました・・・。

「誘う」ブランド - 脳が無意識に選択する。心に入り込むブランド構築法 ダリル・ウェーバー https://www.amazon.co.jp/dp/4802510454/ref=cm_sw_r_tw_dp_U_x_IKntEbNBKGZ4T

最初は、ターゲットが”ITの分野に少々疎い現場の人”だったので、その方達に少しでも熱意が伝わるように、R25などの男性系熱血サービスみたいな見せ方の方がいいのでは・・・？とも思っていたりしましたが、実際にヒアリングを重ねていくと全然違うイメージが見えてきました。

具体的に実践したのは、下記４つ。

①立ち上げまでのヒストリーやサービス名の由来とか
②ロゴカラーがブルー→今の色に変わった経緯（最初ブルーだったらしい）
③それぞれが考えるクロスマートの理想とするイメージを回答の上深掘り
④どんな風に見られたいか、どうなっていきたいか

↓理想のイメージの主な質問内容はこんな感じでした。

・クロスマートはどんな印象を抱かせるか？
・クロスマートはどんな味か？
・クロスマートはどんな匂いがする？
・クロスマートはどんな音がする？
・クロスマートはどんな触り心地か？
・クロスマートが人間だったら男？女？年齢は？
・どんな服を着ている？
・どんな車に乗っている？
・趣味は何か？
・好きな食べ物は？
・クロスマートにふさわしい音楽は？
・クロスマートらしい有名人は？
・クロスマートを映画やテレビドラマに例えると？
・そのほかにクラスマートのメタファーはあるか？（架空の人、美術品、置き換えられるもの）

当然全て答えるのすごく難しいのですが、面白いことに「違う」ということはわかるんですよね。例えば、音楽に例えると、クラシック・・・ではない。メタル・・・でもない・・・。みたいな。
そんな感じで、深掘りして行きました。

ヒアリング結果

最初にクロスマートのデザインを起こしたデザイナーさんにも話が聞けたのがとても良かったです。最初に与えたかったイメージは

のれんや、飲食店がつけているエプロンのようなイメージで、キーワードは「伝統的」

これを聞いて、ロゴカラーが青から暗めのネイビーに代わったのも納得でした。超速理解！

ですが代表の寺田さんや、岡林さんにヒアリングしてみると、こんな結果に。

・破壊的なサービスに捉えられないようにしたい
・縁の下の力持ち。あくまでも我々はサポート役。中立であることが必要。
・冷静＋スマートさと、暖かく懐に入りたくなるような両方のバランスが良い
・頼みごとをしたくなるような、明るく人懐っこい印象。

殴り書きした、キーワードの方位↓

この辺りは、ウジトモコさんの本が参考になりました。

売れるデザインのしくみ -トーン・アンド・マナーで魅せるブランドデザイン- ウジ トモコ https://www.amazon.co.jp/dp/4861006325/ref=cm_sw_r_tw_dp_U_x_jj0tEbYZ1RTH0

それからはとにかく、モチーフやパーツなどを模索しました。この辺りで、別サービスもスタートするため、プライマリーカラーを分けたりとあれこれやりました。クロスマート=>ブルー、クロスオーダー=>オレンジのイメージで作っています。

この辺りはまだ迷いが見える・・・。クロスマートという名称なのでクロスする方がいいなぁというなんとも安直な感じでモチーフを決めています。

そこからはガッとムードボードを作って・・・。
※画面は開発中のモノです・・。

リブランディングとして全体を作りました。俯瞰一覧。

本当にタイトなスケジュールで、コーダーさん本当にデータが汚くて申し訳ないって感じですが。。。実装も大急ぎでやったため、細かいところで直したいところも結構あります。
こちらは手が空いた時にちょこちょこ改善して行きたいところですね。
イメージは暫定で出していて、果たして最初のコンセプトを体現できているのかどうかは、正直まだまだって感じです。
ロゴもコンセプトに合わせて作り変える必要もあれば、今後管理ツール周りはデザインシステムを構築していかないと・・・とやることは山積みです。
今後XTechにデザイナーがもっともっと増えてくれれば、この辺りはもっとスムーズになってくるでしょう！

そんなわけで、XTechではブランディング領域を作って行きたいビジュアルデザイナーや、サービスの上流から携わりたいUI/UXデザイナーなどを募集しています！時短ママデザイナーも大歓迎です！

詳しくはこちらから！
https://www.wantedly.com/projects/343996