READYFOR Tech Blog

READYFOR のエンジニアブログ

READYFOR Tech Blogのヘッダーをリデザインしました

こんにちは、READYFORに2020年2月から1人目のプロダクトデザイナーとして入社した今野(@kyota)といいます。 今日はこのテックブログのヘッダーのデザインを変更したお話をさせていただきます。

なぜ変更したか

僕が入社した2020年2月3日にちょうどこのテックブログは立ち上がり、「みんなでテックブログ書くぞー!!」と社内で盛り上がっておりました。

ただ、ブログの見た目が社内にあった写真素材をそのまま使っており、正直なところちょっと残念な見た目になっていました。

f:id:rfkonno:20200604175612p:plain:w480
↑変更前のブログのデザイン

そこで、READYFORらしさもありつつ、READYFORのエンジニアの色がでるような形でデザインを検討をすることにしました。

どのようなプロセスでデザインしたか

READYFORに入社したばかりだったこともあり、会社の社風を感じとりつつ「READYFORとは、、、」「READYFORとは、、、」と頭の中で連呼しながら、特徴や性格をインプットするところから始めました。

今回に限った話ではありませんが、今後 READYFORのプロダクトを作っていくにあたっても必要な考えなので、目にしたこと、聞いたこと、感じたことなど、日々 メモをしております。

インプット後、以下4つの方向性でデザイン案を作成し、社内関係者にプレゼンをしました。

f:id:rfkonno:20200604181803p:plain

A案

READYFORロゴに使われている有機体を使った案。 一番READYFORらしさが伝わる案です。 ただ、デメリットとして、READYFORのサービストップページや、コーポレートサイトでもすでにこちらの有機体を使っているため、全体的に似てしまうという懸念があります。

B案

READYFORでは、「エンジニアの乳化」という考えがあります。 こちらの意味は、以下CTOの記事を引用させていただきます。

卵を入れると水と油が混ざり合ってマヨネーズが作れるようになる、あの「乳化(にゅうか)」です。 私たちが「テックカンパニー化」というとき、それは「エンジニア/非エンジニア」と職種で線引きして単純にエンジニアの数を増やすことでは決してなく、エンジニアリングが組織全体に広がっている状態になることです。
クラウドファンディングのプラットフォームとして様々な種類のお金の流れを扱う READYFOR では、プロジェクト審査や支援金の会計処理など、多くの業務オペレーションがシステムと密接に繋がっています。それを支えるためにはエンジニアが各組織部門に乳化していくことがとても重要で、それによってオペレーションの卓越性が高まっています。

引用元:READYFOR の「テックブログ開設」までの軌跡 - READYFOR Tech Blog

この「乳化」というキーワードを元に、混ざり合い溶け込むイメージで作成したのがこちらのB案です。

C案

B案ベースに力強くロック調のフォントで作成したものがこちらのC案です。 READYFORでは、音楽好きが多く、きちんと主張してアウトプットできるロックなエンジニアが多いなーと個人的に感じたため、こちらのアイディアが生まれました。

D案

READYFORらしさから、かけ離れた案です。 「READYFOR Tech Blog」の頭文字をブロックっぽい形にし、可愛らしさと、モノづくりしているイメージを出しました。
(正直、こちらは他と比較しやすくするための捨て案かなーと思って作ったのですが、なかなか好評でした)

案を絞る

A案は、READYFORサービスと似てしまい、テックブログの独自性が無くなるため削ることに。

B案とC案は方向性が同じだったため、エンジニアの特徴が出ているC案を残しました。

D案は好評だっため、最終的にC案とD案で、エンジニアの社内投票で決めることにしました。

投票の結果...!!

11人のエンジニアの方に投票していただき、C案(下図では①)で決まりました!

f:id:rfkonno:20200611180246p:plain
自分のスタンプが含まれているため11人の投票となっています

ブラッシュアップ

案を作成した段階では、細かな調整は省いていたため、案が決定した後にブラッシュアップしていきます。 色味や、背景画像の微調整を重ねたり、ロゴタイプのカーニングの調整などしました。

f:id:rfkonno:20200612090612p:plain:w320
気になった箇所を微調整していく

リリース🎉

その後、ブログにデザインを実装し、4月にリリースをしました。

f:id:rfkonno:20200612092228p:plain

f:id:rfkonno:20200612112416p:plain

最後に

本当はヘッダー以外にブログ全体のデザインを調整したかったのですが、結構な工数がかかり断念したため、また別な機会にできればなーと思っています。

今回のデザイン変更を機に、よりREADYFORのことを知って興味を持っていただけれたら幸いです!

READYFORテックブログはまだまだ始まったばかりで、これからもどんどん発信と成長していきますのでお楽しみに!