BiZMiL SURVEY デザインの裏側

はじめに

みなさんこんにちは。制作部でWebを中心としたデザインをしているニシと申します。デザイナー・エンジニアグループのマネジメントと、デジタルまわりのデザインディレクションやデザインを行っています。

 

採用市場が大きく変化をしている現在、学生や社員から見た自社の採用ブランドイメージも捉えにくくなっています。そんななか採用広報の改善に役立つツールとして、新サービスを株式会社揚羽が開発しました。その名も「BiZMiL SURVEY（ビズミルサーベイ）」。

 

この新サービスをデザインするにあたって、揚羽のデザインチームがブランディングをどのようにビジュアルに落としこんでいくのか？約半年にわたったビジュアル策定プロジェクトを記していきます。デザイナーの頭の中を覗く機会にもなれれば…：）

 

 

BiZMiL SURVEYとは？

BiZMiL SURVEYは、「働きがい」と「採用」の関係性から学生・社員・人事の会社像を一致させて“働きがい”を改善させるために活用できるサービスです。さまざまな企業の採用におけるギャップなどの課題を調査・分析しビジュアル化、改善のための施策を提案できるサーベイとして考えられました。

 

 

採用において必要なのは学生・社員・人事の会社像がブレないこと。お互いがお互いを魅力として伝えられる会社の力が求められます。働きがいが向上すれば採用力も上がっていくのです。誰だって、リクルーターが自社の課題点ばかり述べていると、その会社に入りたい、、、なんて思いにくいですもんね；；

 

クリエイティブの方向性を探る

BiZMiL SURVEYは、さまざまな企業に使っていただくようなサービスです。また、サーベイとして企業へのアンケートを行い情報を保持するという機能は、通常よりもさらに信頼されるものでなくてはならず、かつ分析によってわかりやすく見える化できる知的さやスマートさが必要となってきます。

 

それだけでなく、信頼をベースに置いた上で次のアクションをとりたくなる、少しだけ前向きになれるソフトな印象もほんのり感じさせ、改善アクションの提案に前向きになってもらう必要があります。これらを総括してクリエイティブの方向性を確定すると以下のようになります。

 

社員や学生が感じている企業イメージを改めて客観視でき、知る“きっかけ”や、より良い方向へ向かっていく“期待感”を醸成させてくれるデザインコミュニケーションを目指す。

 

これをメインのクリエイティブコンセプトとして策定し、全てのクリエイティブの骨子としました。またこのコンセプトを具現化するためにもう少し細かいデザインに振り分けます。

 

ですので、掲げるキーワードとしては…
「知的な」「スマートな」「クリアな」「軽快な」「素直さ」「のびのびした」
を設定しました。また、キーワードをそれぞれ、ベース、一次的要素、二次的要素にゾーニング。根底にある基本の方向性＝ベースと、最初に感じてもらいたい印象＝一次的要素、また次点で感じてもらう空気感＝二次的要素と、3つのカテゴリとして振り分けます。

 

 

ベース、一次的要素、二次的要素でそれぞれゾーニングする

 

 

ベース、一次的要素、二次的要素でゾーニングしたものを色の印象で比較検討する

 

コンセプトを具現化するために・・・

 

誰が見ても、見やすい”クリア”で”すっきり”としたトーンをベースにして、サーベイとしての「信頼感」を与えるために”知的”で”洗練された”印象を。
→白をベースに色数を絞ることで、余計な装飾でごちゃごちゃさせない、スッキリとしたイメージ

 

サーベイを通じて、”発見する喜び”や”ワクワク感”を二次的要素として、ソフトな印象で加える。
→サイト全体がクールな印象になりすぎないために、あくまで二次的要素として、あしらいや色合いでちょっぴり元気さを伝えるイメージ

 

こういった言葉を決めていくことで、途中でデザインがブレていくことを防ぎ、UIの妥当性やデザインの「らしさ」が狙った通りになるような指針とするのです。

 

VI（ビジュアル・アイデンティティ）を考える

策定したコンセプトから導き出せるロゴをデザインしていきます。いくつかに絞った時点で以下のような案が出ました。

 

 

二軸に落とすと以下のようにマッピングされます。

 

 

また、それぞれのロゴにあったムードビジュアルも作成していきます。

 

 

複数のロゴとビジュアルの候補から選ばれたのは、プレーンかつ未来感をほんのり感じられるこちらとなります。

 

 

 

そしてブラッシュアップを繰り返し、最終的に落とし込んだビジュアルイメージを以下として設定しました。見えないものをはっきりとさせていく、その過程に我々のサービスが介在していく様を、グラデーションと「SURVEY」の「R」にもモチーフとして使っている虫眼鏡で表現しています。

 

 

UIのスタイルをデザインする

UIのスタイルに関しても、これまでの考え方を踏襲します。まずは「社員や学生が感じている企業イメージを改めて客観視できる」ことが第一条件なので、サーベイするにあたって公正であることが伝わるように、ベースはクリアでシンプルにし、特定の考え方によらないように注意したデザインのスタイルを目指します。

 

UIデザインにおいて使いやすいインターフェースをデザインするためには、「インタラクションコスト」を最も小さくすることが重要になります。インタラクションコストとは、ユーザーが目標を達成するために必要なアタマとカラダにかかる負担の総量のこと。

 

「見て意味がすぐに理解できるかどうか＝アタマの負担」と「操作をするのにストレスがどれだけ少ないか＝カラダの負担」を、どちらもできるだけ下げてあげることが「使いやすい」ということになり、UIデザインの目的とする一つになります。

 

何も考えずに直感で全てを理解して、制作者の意図通りに操作をしてもらうことが、究極のUIデザインであり、この場合インタラクションコストが「０」ということになります。ただ実際には使われるシチュエーション（年齢差やそれぞれのこれまで生きてきた環境）などによって異なりますので、インタラクションコストをどう下げて良いデザインとするかは、人の認知特性に基づいたデザイン的なアプローチを考える必要があります。

 

アプローチの一つとして、一貫性を持たせることがあります。UIデザインに⼀貫性が⽋けていると、アプリやサイトのデザインが混沌として⾒え、ユーザーを混乱させてしまうのです。ビジュアルの⼀貫性を保つことができれば、ユーザーはシステムを使いやすくなります。

 

ビズミルサーベイでも、UIデザインにおいて、ブランドイメージの明確化からロゴの策定、UIデザインに落ちてくるまでのイメージの一貫性を大事にデザインを行なっています。カラーの統一はもちろんのこと、ブランドのもつ明快さを余白や文字の選び方で担保しつつ、角を丸くして印象を柔らかくして操作のしやすさを醸し出したり、ところどころエモーショナルなイラストを配置することで、ただ情報が並ぶだけのダッシュボードのような、見ていて難しく障壁を感じることがないような配慮をしています。使われる方が人事の方々なので、Webの難しそうなデータを見ているという心理的障壁を下げるための工夫をUIとしても考えてデザインしています。

 

 

サーベイの核となるアンケートのデザイン

 

また、ボタン類はなるべく押せる範囲をわかりやすく大きめにし、一方で大きさによるデザイン的な圧を感じないように色の濃度にも気を使っています。

 

アンケート画面ではなるべくデザインの意味を排除し、使う側のデザインには「知る“きっかけ”や、より良い方向へ向かっていく“期待感”を醸成」してもらうべく、サーベイの信頼感は保ちつつデザイン的に柔らかで親しみやすい印象やほんのりと前向きになれるような調整を行っています。

 

 

点数が平均より良ければ明るい色で円グラフが表示され、平均より値が低いと寒色で値が低いことを表現しています。また、全体的にカーブを多用して尖っている部分を少なくしたデザインとしており、数値の事実はプラスマイナスがあるものの、どちらにしても全体の印象としてはやわらかく攻撃的にならないような配慮を行っています。

 

 

また、選択されたタブのデザインなども大きく丸みを帯びたデザインとしており、サーベイではあるが人的な温もりや親しみやすさをほのかに感じられるように配慮しています。

 

また、イラスト部分ではAirBnBの開発したlottieという技術を使ったアニメーションやCSS3等でさまざまな部分にマイクロアニメーションを使用する予定です。これによりちょっとした気持ちの後押しであったりエモーショナルな部分を付与させており、UXの全体的な向上に寄与できるでしょう。

 

総評

自社サービスを通してではありますが、WebサービスやWebアプリケーションのクリエイティブに関わる全体設計から細部へのクリエイティブへの落とし込みまでを一気にお話しさせていただきました。

 

クリエイティブがどういう考え方で見た目に作用しているのか、また、課題に対してデザインがどうアプローチできるのかを紐解いていくのもデザイナーの大切な仕事です。デザインという非言語なコミュニケーションだからこそ、できることがあります。

 

デザインの力でUI/UXを改善したい、既存のアプリケーションをよりよくしたい、新規サービスをどう設計していいかわからない、そもそも課題の解決のためにどうアプローチしていいかわからない等、クリエイティブに関することはぜひお気軽にご相談ください；）

 

CONTACT無料相談はこちら