ビズリーチ・キャンパスは2021年12月にInternet Explorerのサポートを終了します。別ブラウザでのご利用をお願いいたします。

詳細を確認

BizReach Campus

App Storeから無料ダウンロード

ダウンロード
close
お知らせ

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

11月30日にiOSアプリをアップデートし、Tab Barのデザインを変更しました。今回はビズリーチ・キャンパスのデザインプロセスをご紹介します。

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

新旧タブバーの比較

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

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

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

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

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

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

デザインガイドライン

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

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

アイコンデザイン案

完成

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

まとめ

ビズリーチ・キャンパスでは、「OB/OG訪問が当たり前になった社会」を目指し、今後もユーザーの皆様が快適にOB/OG訪問を実施できるようサービス改善を継続していきます。新しいタブバーへのフィードバックやその他ご要望などはsupport@br-campus.jpまでご連絡ください。App Storeでのレビューもお待ちしております!