ジョブメドレーの検索体験をリニューアルしました

開発部・デザイナーの波切です。
メドレーが運営する医療福祉領域の求人サービスであるジョブメドレーでは、昨年秋から年末にかけてPC/SP両方で、トップページ及び検索機能周辺におけるデザインのリニューアルを行いました。

job-medley.com

今回はリニューアルを行った背景や開発の裏側を紹介することで、メドレーでどんな開発を行われているかを知っていただければと思います。

リニューアル後のジョブメドレートップ画面

デザイン - より一貫性のあるインターフェースに

• 近しい機能に対しても微妙に異なるデザインパーツが存在していた
• 遷移ごとに異なる見た目の画面へ移動する煩わしさがあった
• 画面全体に平均して文字情報が多く、視線をコントロールする色使いや余白の使い方が出来ていなかった

以前のデザインでも大きな支障はなく利用出来てはいたものの、デザイナー視点から見て上記のような整理したい点も存在していました。 課題として喫緊の問題でもありませんが、ジョブメドレーの今後のブランドやさらなる利便性を追求していく上で新たな土台を築くべく今回のリニューアルに至りました。

主な変更点

画面・デザインパーツを整理し検索体験に一貫性を持たせる

画面毎に見た目が少しずつ異なるストレスをなくし、検索での操作領域をわかりやすくするために、画面構成とデザインパーツを見直し一貫性を重視したデザインに変更しました。

検索の体感値を最適化する

画面遷移数自体はページのインデックスを保持する観点から大幅な変更はしていませんが、

• できる限り情報を閉じずに確認出来るよう変更しタップ数を減らす
• 情報を縦に積む項目を減らすことで検索絞り込みの際にスクロールする量を減らす

これらの細かな情報整理をすることで、サクサクとタップして進められる検索体験を追求しました。

写真を用いてよりリッチに、わかりやすく

ジョブメドレーでは多様な職種を扱い、各職種毎に検索をしていくページを持っています。 しかし、どの画面も文字情報が多く直感的に職種やページの役割の違いを把握することが難しい状況でした。

• 各職種毎に写真を追加しページ毎のリッチ化・差別化を図る
• 写真へ視線が集まる習性を利用し、写真近くへ検索絞り込みボタンを配置することで直感的にメインとなるボタンへ視線を集めさせる

今回はこれらのように写真を用いることで画面の差別化・リッチ化を行いました。

デザイン×エンジニアリング - スタイルガイドを用いた意思疎通

今回、デザインが完成した段階で「デザインの意図と実装の意図を合わせる」「複数人でのソースコードの一貫性を持たせる」の理由からhologramを使用したスタイルガイドを導入してみました。実装までの流れを簡単に説明すると以下のようになります。

1. Sketchファイルからコンポーネントを洗い出してグルーピング
2. グループごとにscssファイルを作成し、cssを作成していく
3. 実際にスタイルを適用したいページに実装していく

実際に進めてみると、必要なコンポーネントの洗い出しやコンポーネント作成は大変でしたが、

• 複数人での開発作業がスムーズに進む
• 今後のページ追加開発で効率的に開発できる
• デザイナーとエンジニアの意思疎通も正確に行える

コンポーネントが揃ってくるとこういったメリットが得られるため、今回導入したスタイルガイドを元に 今後はデザインとエンジニアリングのスムーズなコミュニケーションができればと考えています。

CSSとどう向き合うか - ITCSS×BEM=BEMIT

実装期間では複数人のエンジニアにより進行したため、全員で認識を合わせながら進めました。

CSSの辛いところ

• グローバルスコープしか存在しない（どのルールセットを上書きする/されるか分からない）
• スタイルを継承していくカスケード（完全なカプセル化は不可能）
• 詳細度の高いセレクタと!important; の出現頻度に比例して修正が困難に

CSSとどう向き合うか

• 全てがグローバルであることを受け入れる
• 命名規則をチームで共有して、スタイルを意図せずに上書きする or されることを無くす
• 個人個人が自由に記述することを制限することで、CSSに一貫性を持たせる
• カスケード、詳細度に逆らわない
• 詳細度に従ってCSSを書くことで、スタイルの上書きを意図してコントロールする
• 安易に上書きするためだけの !important は許さない
• レゴブロックで考える
• 画面上のすべてのUIパーツをコンポーネントに分解して考える
• 各コンポーネントは自身のコンポーネントのスタイルに責任を持つだけ
• コンポーネントをレゴブロックのように組み立てていくのが理想的

今回の設計ではCSSの向き合い方の整理から、ITCSSとBEMを組み合わせた設計にすることにしました。

ITCSS x BEM = BEMIT

• 全体の設計はITCSS
• ITCSSは、CSS WizardryのHarry Roberts氏が提唱したCSSの方法論
• 詳細度の順に従ってCSSを記述することを強制するスタイル
• 詳細度の低いセレクタから高いセレクタを自然に書くことになるので、詳細度の戦いから解放される
• ITCSSのレイヤー順にimportすることで生成されるCSSが詳細度順になる
• 詳細はこちら https://qiita.com/makotot/items/2c3e99f15dca2789d403
• UIコンポーネントの命名規則はBEM
• コンポーネント全体を囲う要素がBlock
• コンポーネントを構成する要素をElementとして扱う
• ElementやBlockに別パターンがある場合、それはModifierで拡張する
• コンポーネントの中にコンポーネントを含む場合、内包されているコンポーネントは親となるコンポーネントと依存関係を持たないようにする
• 親コンポーネントも子コンポーネントもBlock/Element/Modifierで構成する

今回はBEMITに限らずCSSの設計自体をチーム全体で共通認識をもって取り組めたことが何より重要だったと思います。 BEMITを共通方針として長期的視点で「壊れにくく拡張しやすい」CSSを保ちながら運用することが大事なので、今後も継続的なCSSのヘルスチェックを行いより良い状態にしていきたいと考えています。

まとめ

デザインとエンジニアリングを結びつける部分ではまだまだ課題はあります。
デザイナー側ではSketchから効率よくコンポーネントを読み取れるよう整理したり、BEMITの思想を理解して直接CSSを編集する方まで踏み込みたいと思います。
そして、エンジニア側ではSketchからデザインの意図を読み取れるようデザイナーとのコミュニケーションを深めていきたいと思っています。

また、今回は比較的大きいデザインリニューアルでした。
そのため、ユーザーに近い立場である社内のカスタマーサポートの皆さんにもモックアップや実装後のテストページを操作して、懸念点や改善点をレビューしてもらい細かな調整を行っていきました。
その成果もあり、リリース後に大きな混乱や数値の悪化も見られず、KPIとなる数値も徐々に改善されてきています。

今後も開発部ではデザインやシステムの改善を重ね、ジョブメドレーをより良いサービスにしていきます。
メドレーではデザインとエンジニアリングを結びつけ、より良いサービス提供が出来るようエンジニアを積極的に募集しています。

ご興味ある方は是非覗いてみてください！ ジョブメドレーのエンジニアを束ねるリーダー・稲本のインタビューもぜひ。