Tab Bar のデザインをリニューアルしました

こんにちは。ビズリーチ・キャンパスデザイナーの川上です。11月30日に「ビズリーチ・キャンパス for Student 1.5」が公開されました。このアップデートでは、Tab Bar のデザインを変更しました。

今回はこのTab Barを例として、デザイン変更のプロセスをご紹介します。

デザインガイドラインの策定

これまでは新しいデザインを作る際に基準が存在せず、議論に時間がかかってしまうことが多くありました。そこでTab Bar をリデザインするにあたって、ビズリーチ・キャンパス全体のデザインガイドラインを策定することにしました。

まず、ビズリーチ・キャンパスに関わるデザイナー全員で「イメージボード」を作ることにしました。イメージボードとは、完成形のイメージを一致させるために作られるスクラップブックのようなもので、ムードボードとも呼ばれます。今回は「Milanote」というサービスを利用して、Webから画像を集めることにしました。

著作権の関係でここではボードをお見せできないのが残念なのですが、驚くべきことに各ボードにはかなりの共通点がありました。私たちデザイナーにはなんとなく「ビズリーチ・キャンパスのデザインはこうあるべき」という共通認識があったのです。あとは資料に落とし込むだけです！

デザインガイドラインの完成

ガイドラインからアイコンを作成

ガイドラインを元に、Tab Barをデザインしていきます。以下はデザイナーが作業に使った実際のファイルです。特に「OB/OG」のアイコンは難航しました。

完成

無数のデザイン案から、ガイドラインにふさわしいアイコンになるよう調整していきます。ポイントは、形状を認識できるかどうかのギリギリまで要素を減らしてシンプルにすること。最終的に、シャープで未来的ですがどこか可愛げもあるようなアイコンに仕上がりました。

まとめ