EUSTYLE CAREER

EUSTYLE CAREER（ユースタイルキャリア）は看護・薬剤・介護・保育に特化した医療・福祉業界向け求人紹介サービス。
ターゲットは主に転職や第二新卒を希望する現職者であり、同じくEUSTYLEブランドの転職エージェントサービスである EUSTYLE AGENT（ユースタイルエージェント）にて転職のサポートも行なっている。
サービスをオープンして3年経ち、ようやく運営体制が整ってきたところで、 ここからユーザー数や転職決定数を増やすためにもサービス自体の機能強化や、 より魅力的で使いやすいUIが求められる状況である。

このプロジェクトで私はEUSTYLE CAREERというサービスをより多くの人に使ってもらうため、
ビジュアル面で他サービスとの差別化と、ユーザーがしっかりと自分にあった求人を見つけ、このサービスを利用する目的をしっかりと果たせるようUIをデザインしました。

競合のリサーチ・現在の仕様把握

求人検索サービスを作成するのは初めてのことだったのでサービス責任者にビジネスの仕組みやサービスの内容についてのプレゼンを受けました。
その内容からまずは実際に求人の原稿を作成する原稿チームへのヒアリング、営業チームへのヒアリング、競合のサービスのリサーチを行うことに決めました。

追加機能の検討

競合リサーチの結果をもとに、ユースタイルキャリアに欠けている機能がわかったので新たな新機能の候補をまとめ、
どの機能を実際に実装するかの検討を進めました。

開発環境の検討

現状のサービスはPHPで開発されていました。PHPをそのまま利用するには様々なデメリットもあったので、今回フロントに関してはNext.jsを利用することとなりました。
サーバー再度に関してはNodeJSを使用したかったのですが、他社から購入した求人情報の管理システムが入っていたため、NodeJsで新しく作り直すのが難しかったのでそのまま利用することにしました。
実際に開発を進めていくにあたっては、エンジニアよりも私の方がHTMLやCSSに関するスキルが高かったため、私がコーディングしたものをエンジニアがNext.jsとして実装していくという開発手順をとることになりました。

• EJSの採用

  これまでのWeb制作は基本的にHTMLとSCSSでのコーディングで対応してきたが、求人サービスのコーディングまで自身で対応するにはHTMLとSCSSのみでは難しいのと、フロントの開発がNext.jsで行われるのが確定していたため、新たにEJSを検討。Next.jsで書くことも検討したが、エンジニアもNext.jsで開発するのが初めてだったこともあり断念。コンポーネントへの切り分けや再利用が可能になるのと学習コストが低そうだったのでEJSを採用しました。

• デザインツールの変更

  現状のXDではコンポーネントやスタイルの管理がかなり手間がかかってしまっていたので、今回新たにFigmaを検討しました。実際に調べながらFigmaを触り、同一プロジェクト内での複数ページ作成や、Variable機能、AutoLayoutの使い勝手の良さ、アートボードの概念、デザイナー以外の人へのデータの共有のしやすさなどからFigmaへデザインツールを変更することを決めました。

• デザインシステムの作成

  コンポーネント単位での開発、Figmaの採用により、デザインシステムを作りやすい環境が整ったのと、別サービスを運営している他チームから、会社全体でのUIやスタイルの統一の要望が私自身に来ていたこともあり、デザインシステムの作成に取り組みました。簡易的ではあるものの取り組んだことでデザイン作成の上での新たな発送や気付き。作業の効率化などのメリットを感じることができました。

  

デザイン作成

求人検索サービスのデザインは初めてだったので、奇をてらったデザインや手数を増やすデザインよりもシンプルにわかりやすく作ることを意識して作成していきました。
また、私一人で作成していたので視野が狭くならないよう、常に他社のデザインと比較し客観視することを強く意識しながら作業を進めていくよう心がけました。

現状ではデザインの結果の検証や調査、テストを行っていく体制が整っていないこともあり、これからどんどんサービスを改善して良くしていくためのベースを作り上げていく気持ちでデザインをしました。

• サービスを通してのイメージ刷新

  キーカラーを彩度の高いマゼンタと黒に変更し、コントラストを上げてフレッシュなイメージになるようリブランディングしました。

  • Before

    

  • After

    

• 求人詳細画面の再設計

  旧デザインでは情報のメリハリが弱く、見せたいところがしっかりと目に留まりづらいところがあったので、情報の強弱をつけるよう意識しました。
  また、PCに関しては画面の広さを利用し、サイドナビゲーションのエリアを新たに作成し、求人のサマリー情報や応募ボタン、キープボタンが常に画面の横に追従するように新たに設計しました。

  • Before

    

  • After

    

• 求人へのアクセスを改善

  現在のサイト流入元はアグリゲートサイトからの流入が多数を占めているため、求人詳細へ訪問されてもすぐにサイトを離脱し、元のアグリゲートサイトへ戻ってしまう。
  求人詳細からできる限り他の求人へのアクセスを良くし、サイト内の回遊を増やすよう改善した。
  
  具体的な改善としては求人詳細の下部にレコメンドの求人をしっかりと掲載するようにした。 また、PCの場合はヘッダー、SPの場合にはハンバーガーメニューの中に職種毎の求人一覧にすぐにアクセスできるように変更した。

  • ヘッダーに職種ごとのメニューを用意

    

  • レコメンドを設置

    

• 求人の検索項目を増設

  検索機能として新たに地図検索とAI検索を実装予定でしたが、今回のリニューアルではそれらの機能の実装が見直されたため、検索項目の追加で検索機能の充実に対応した。
  旧デザインでは求人検索の項目が
  ・フリーワード
  ・勤務地
  ・雇用形態
  ・職種
  ・給与
  だったが
  新たにこだわり条件を追加した。

フロント実装

EJSを使用したコーディングは初めてだったので、機能をある程度使いこなせるようになるまで時間がかかってしまいましたが、できる限りコンポーネントを使いまわせるように意識してコーデんングをしていきました。
また、コンポーネント管理のためのディレクトリ校正はBEMをベースに構築していき、なるべくエンジニアが迷わないようファイル名やクラス名も丁寧につけるよう心がけました。
まだまだ課題が多く残りましたが、この経験をベースにより効率的にコーディングができるようになるきっかけになったと思います。