READYFOR Tech Blog

READYFOR のエンジニアブログ

READYFOR Tech Visionのビジュアルデザインをした話

f:id:rfkonno:20201215163313p:plain

これはREADYFOR Advent Calendarの16日目の記事です。

こんにちは!READYFORのプロダクトデザイナー 今野(@kyota)です。

前回の記事でも触れておりましたが、READYFORでは、 「組織の中にエンジニアリングが自然に溶け込んでいる状態」 を「乳化」と呼んでおり、全社的にこの「乳化」の状態を目指しています。

この「乳化」を元にしたTech Visionである「想いをつなぎ、叶える未来を、つくる」が掲げられており、こちらを社内外により分かりやすく理解されやすいようにビジュアルデザインを作成した話を今回させていただきます。

「乳化」に対する取り組みについては、Advent Calendarの1日目のVP of Engineering いとひろさん(id:itohiro73)の記事に書かれておりますので、よければこちらもあわせてご覧ください!

tech.readyfor.jp

デザインを作るにあたって

そもそもREADYFORに入社する前まで、「乳化」という言葉から知らない状態でした。 改めて、「乳化」というのはどういう状態なのか言葉の意味から調べることに。

乳化(エマルション)とは?

エマルションまたはエマルジョン[1](英: emulsion [ɪ'mʌlʃən])とは、分散質・分散媒が共に液体である分散系溶液のこと。乳濁液(にゅうだくえき)あるいは乳剤(にゅうざい)ともいう。身近な例としてはマヨネーズ・木工用接着剤・アクリル絵具・写真フィルムの感光層・アスファルト舗装のシール剤が挙げられる。

引用元:Wikipedia

ふむ、、この説明だけでは理解できない。。 そのため、身近な例であるマヨネーズが乳化するYouTube動画など観たりして理解を深めました。

そして、改めてTech Visionの作成した背景や想いなどから、どのようにしたら理解・伝わりやすいビジュアルにできるのかを検討していきました。

デザインの作成

READYFORでは、赤のブランドカラーの他に、法人・パートナー向けブランドカラーの青もあるため、この赤・青が混ざり合って乳化していくのを表現する方向性で考えました。

円が重なり合ったり、線が結び合ったりするようなラフ案を作成。

f:id:rfkonno:20201211182826p:plain


関係者にレビューし、円と円が重なり合っていく表現が良かったため、そちらをベースに何案か作成。 こちらの円は、READYFORで働く人々が有機的に存在しており、自然と溶け込み、重なりあい、新たな価値を生み出すような意味合いがあります。

加えて、Adobe Frescoを使った油絵で重なり合わせたり、水彩のマーブリングさせたような案も作成しました。 (ただ、こちらな見た目があまり良くなかったためボツに)

f:id:rfkonno:20201211184647p:plain


さらにパターンの作成&ブラッシュアップしていきます。 グラデーションや、有機体のパスなどの細かな調整をして仕上げていきます。

f:id:rfkonno:20201211184724p:plain

2案に絞り社内で投票

上記の案から、いとひろさんに2案に絞っていただき、開発組織内で投票して決めることにしました。

結果、下図②の案が断トツで票が多かったのでそちらの案で決定しました! f:id:rfkonno:20201214110711p:plain f:id:rfkonno:20201211183958p:plain

完成版

最終的に細かな調整をして完成した画像がこちらです。

f:id:rfkonno:20201215162620p:plain

最後に

バーっと完成までの流れを書きましたが、個人的に完成まで苦戦し、途中迷走したりしました。メインのプロジェクトが忙しかったのもあったのですが、着手から完成まで数ヶ月もかかってしまった反省があります。。

(迷走中は、インスピレーションを得るために、子供の水彩用具を借りて混ぜ合わせたり、画材屋に行って色んな画材に触れたり、美術館に行ったりなどをしていましたw)

最終的には自分含めて納得できるできるものが出来て良かったと思っています。 また、改めて乳化とは何か、自分がREADYFORにおいて乳化していくためにはどうすればいいのかを考えさせられました。

今回作成したビジュアルを元に、READYFORにおける乳化の取り組みがより広がっていって欲しいなーと思っています!

明日12月17日はフロントエンドエンジニアの大房さん(@randy)の担当です。お楽しみにー!