BIZREACH DESIGNER BLOG


こんにちは、コミュニケーションデザイングループの浅野です。若手のための転職サイト「キャリトレ(旧:キャリアトレック)」のマーケティングに関わるデザインを担当しています。

キャリトレのトップページをリニューアルいたしました


リニューアル前のページ

 

リニューアル後のページ

施策の結果がリアルタイムに反映されるWebの世界では、ページのデザインを変更するときに、例えばCTR(クリック率)やCVR(コンバージョンに至ったユーザーの割合)など、数値的目標を掲げることが多いと思います。しかし、今回のリニューアルでは「デザインの力」を信じて、あえて数値的目標を設定せずにプロジェクトを始めました。

ここでの「デザインの力」とは、「何となくこの世界観が好き」や「このテイストが好き」といった、デザインで作り出すユーザーのモチベーションとします。

今回は、デザインドリブンで進めたリニューアルプロジェクトについてお伝えします。Webページのリニューアルや、デザインフローのひとつの例として、参考になれば幸いです。

キャリトレとは?

キャリトレは、若手のためのレコメンド型転職サイトです。表示される求人を自分の興味のある・なしに振り分けていくと、キャリトレがそのデータを学習し、ユーザーの志向性にあった求人がおすすめされます。若手のためのサイトということもあり、スマートフォンサイトのUIに力を入れており、2013年にローンチしてから現在まで、お陰様で39万人以上の方にご利用いただいています。

リニューアルの経緯とゴール設定

冒頭でも述べたように、ページをリニューアルする際によくゴールとして挙げられるのが、CTRやCVRの向上などです。

ですが、以前から私たちには明確な課題感がありました。それは、現状のトップページが直感的に「すき!」「いいね!」「使ってみたい!」と思ってもらえるデザインになっていないということでした。トップページを訪れたユーザーがワクワクし、思わず登録したいと思うようなモチベーションを作れていないのではないか、という仮説があったのです。

また、プロダクトの機能開発を優先していたため、トップページのデザインが2年間変わっておらず、グラフィック的にも少し古くなっていました。

そんな中でリニューアルをするという判断を後押ししたのが、ユーザーインタビューです。キャリトレでは、サービス改善のためにご利用いただいているユーザーの方と直接お会いし、ご意見をいただくユーザーインタビューを毎月行なっています。

ユーザーインタビューで明らかになったことは、「すき!」「いいね!」云々の前に、そもそもサービスのコンセプトが伝わっていないということでした。「転職サイトかな?とりあえず登録してみよう」とサービスについてよく理解しないまま登録している方が多かったのです。「どのようなサイトなのか知らないまま登録したので、最初の使い方がよく分からなかった。」という声もいただきました。

ということで、今回のリニューアルにおいては、コンバージョンを上げることでもクリック率を上げることでもなく、下記にフォーカスを当ててゴールとしました。

✓直感的に「すき!」「いいね!」と思える世界観にし、ページを訪れた時に、ユーザーが思わずワクワクするようなモチベーションを作る
✓ユーザーにコンセプトが明確に伝わり、登録後もスムーズにご利用いただける流れを作る

コンセプトワーク

まず最初に、全体の世界観を大きく左右するメインビジュアルを作り上げました。何パターンも作るうちに、段々とデザインが洗練され、方向性の認識が合ってきたように感じます。

次に、ページ内の構成を決めました。サービスのコンセプト・VP(提供価値)を整理し、訴求すべき点を決めていきます。紙とペンを用意し、チームで話し合いながらワイヤーを完成させました。

役割分担を明確にし短期間でリリース

全体のコンセプトや設計が定まったら、残るは制作です。今回は短納期でリリースするために、役割を下記の8つに分けました。役割と担当を明確に分け、背中を預け合った結果、コンセプトワークからデザイン・実装までを、比較的短期間でリリースすることができたように感じます。

8つの役割
・UIデザイン
・コーディング
・イラスト/グラフィック
・アートディレクション
・アニメーション/インタラクション
・ライティング/訴求開発
・ロゴ収集
・数値計測、タグ整備

ゴール達成のための工夫

ここからは、実際に制作したデザイナーのコメントとともに、ゴールを達成するためにこだわったポイントをご紹介します。

飛行機のアニメーションでワクワク感を演出

キャリトレのユーザーは初めて転職をする方も多く、転職に対して堅苦しく不安なイメージを抱いているように感じました。これから起こる新しい未来を予感させ、転職のもつ堅苦しいイメージを払拭するために、飛行機のアニメーションを使用しました。(李:インタラクション担当)

 


Isometricなイラスト

メインのグラフィックには、Isometricと呼ばれる表現方法を用いています。広く大きい世界を、遠くからの視点で全体俯瞰できるという技法です。トレンドの技法を取り入れることで、最先端のサービスであることが伝わるようにしました。(殷:グラフィック担当)



Perspectiveなイラスト

「求人を振り分ける」というコンセプトが伝わるように、UI上の「ハート」「バツ印」が目立つように工夫しました。サービスの機能を、ユーザーに身近に感じてもらうことを目指しました。(殷:グラフィック担当)

 

CSS3でこだわったアニメーション

楽しんでトップページを見てもらえるように、車が木の後ろを走ったり気球がゆっくりと前後したりなど、アニメーションを細かく工夫しています。動画やGIFアニメではなく、すべてCSS3で再現しました。(李:インタラクション担当)


 

Type.jsで複数コピーを一行で実現

サービスのメリットをより多く伝えるため、コピーを1つに絞らず、javascriptを使って複数のコピーを表示できるようにしました。(李:インタラクション担当)

リニューアルの成果

今回、冒頭にお話ししたとおり、「ユーザーが直感的に『すき!』『いいね!』と思える世界観を作る」という想いを実現するべく、世界観やデザインドリブンでリニューアルを進めた為、数値的ゴールはあえて設定しませんでした。しかし結果として、驚くべきことに、全デバイス経由の会員登録率を数倍あげることができました。

ユーザーの声に耳を傾け、さらに私たちにとっても納得のいくものを届けることで、ユーザーが直感的に「すき!」「いいね!」と思える世界観、コンセプトが明確に伝わるページを作ることができたのだと思います。

まとめ

Webデザインにおいて、数値的ゴールを設定しないのは勇気がいることでした。しかし、変化が激しい競合ひしめく現代においては、ユーザーの心を掴むこともひとつの生存戦略だと私たちは考えています。

ブランドを作ることは単発の施策では難しく、ブランドが作れたことを示せる定量的な指標があるわけでもありません。しかし、今回の取り組みを通じて強く感じたのは、「デザインは、人々の『すき!』を作れるんだ」ということです。

デザインドリブンだとなかなか理解を得るのが難しい時もありますし、企画やアイディアを通す際に目的を伝えないと周りを説得できないこともあります。ですが、私たちデザイナーが作るデザインで、ファンになってくださる方を増やせると信じ、これからも取り組んでいきたいと思います。

今回ご紹介したキャリトレのトップページはこちらです。ぜひ、実際にご覧ください。
https://www.careertrek.com