とある求人サイトをデザインリニューアルした話

副業で「コデアル」という求人サイトのデザインリニューアルをしました。このリニューアルでは、何をやったのかを振り返ってみようと思います。

1. プロジェクト概要

コデアルはリモートワークで副業をしたい方向けの求人サービスです。主にエンジニアやデザイナーに手伝って欲しいIT系スタートアップの求人案件を紹介しています。

※リニューアル前のデザイン

ミッション

このプロジェクトで自分自身に課していたミッションは3つ。

1. 情報設計の見直し
ユーザーが求人を探しやすい＆応募しやすいように情報整理する。

2. 汎用性のあるUIを提案
エンジニア特化ではなく、デザイナーやディレクターにも使いやすいUIに改修する。

3. デザインシステムの構築
ブランド / カラー刷新に伴うスタイル変更、一貫性のあるUI設計ができるようデザインガイドラインを作成する。

主な担当範囲

情報設計、UIデザイン、デザインガイドライン、実装レビュー
※ロゴリニューアルやブランディングは坪田さん（@tsubotax）が主担当。

進め方

・期間：2017年11月〜2018年5月（約7ヶ月）
・チーム構成：Product Owner （CEO）1名、CS 1名、エンジニア 3名（CTO、3月からJoinした方、副業メンバー）、デザイナー 2名（どちらも副業でのコミット）

リニューアル後のデザイン

結果的にデザインはこんな感じに変わりました。

…変わりすぎて面影がない笑

ということで、このデザインリニューアル、どう進めていったのかを紹介していきます。

2. まずは下調べ

制作作業に取りかかる前に、サービス内容やサイトの現状などを調べてみました。

サービス理解

サービス内容に関しては、一通り口頭で説明してもらってはいましたが、自分なりに要約して、理解度を深めていきました。その内容をチームメンバーに再確認しながら、徐々にコミュニケーションを慣らしていきました。

サイトマップ（サイトの全体構造）

UIフロー（機能と行動のつながり）

Use Case（よくありそうな利用手順）

3. 主要画面のデザイン

サイト上に何があるのか、ユーザーはどんな行動をしうるかのキャッチアップができたら、コアである求人一覧や求人詳細画面のデザイン作りに着手。

各情報の優先度を確認したり、

各方面のフィードバックを聞きつつ、ブラッシュアップしていきました。

新しいロゴ次第で、カラーやコンポーネントは変わりそうだったので、細かい仕様や整合性などは、デザインガイドラインができてから考えるつもりで程々に動いていました。

4. デザインガイドライン

ロゴリニューアルに伴い、そのトンマナにあうデザインガイドラインを作りました。

ガイドラインを作成した目的は、一貫性のあるデザインと効率的な開発を両立するためでした。そして「リモートワーク × 副業」という制約された労働環境だからこそ、限られた作業時間やコミュニケーションで、UIを設計するために作りました。

※デザインガイドライン作りについて詳しく知りたい方はこちら

5. 機能単位のデザイン

デザインガイドラインが出来あがってきたら、粛々と他画面を作成。プロフィール / 会員登録 / メッセージといった感じで、機能単位でタスクを振り分けて進めていきました。

プロフィール

元々コデアルでは企業側が採用を検討する際に、各応募者のプロフィールを閲覧できる画面が存在していました。

上記のような履歴書っぽい画面を作るには、その登録情報を入力できる場所が必要でした。

職種ごとで出し分けたいもの、カテゴリ、入力頻度を考慮して、各登録情報をどこで入力すれば良いかを再設計しました。

会員登録

Facebook / Githubボタンは「会員登録でアカウント連携できる」「ボタンを押せば登録手続きのページに遷移する」が認知できれば良いと思ったので、誘導文言＆ボタンサイズを調整してみました。

ユーザ名と表示名に関しては、「そもそも役割や違いは一体何なのか」「初見ユーザーは果たして何を入力すべきか理解できるのか」といった懸念がありました。それぞれエンジニアやCSメンバーに相談しながら、デザインを練り直しました。

メッセージ

メッセージ機能は、既存システムやスケジュールなどの兼ね合いで、今回のリリースでは可能な範囲内でスタイルを整える程度に収めました。

6. コミュニケーションルール

ツールを目的に応じてよしなに使い分けていました。

・Slack：議題共有 for All　→メンバー周知
・Zeplin：仕様説明 for Developer & Business、相談したい＆Fixしたものをアップしてコメント　→仕様議論
・InVision：セルフレビュー、プロトタイプ作成用 for Designer　→自己管理用

コミュニケーションはSlackでのテキストチャットがメインでした。「#design_message」「#design_rebrand」といった機能やテーマごとのチャンネルがあり、それぞれのチャンネルで会話するようにしていました。

UIデザインはSketchで作り、Zeplin上で共有しました。

Zeplinでは、各パーツをクリックすると、簡単にサイズやカラーが分かるので、エンジニアとの実装・修正周りのコミュニケーションがスムーズにできます。仕様について細かく話したいことがあれば、コメント機能を使いました。

共有や相談をしたいときは、Zeplinリンク貼り付けて「どの画面のどの部分か」を具体的に分かりやすいようにしていました。

あとビジネスサイドやエンジニアと「何をどこまでやるのか / できるのか」を話しやすいように、差分を把握しやすい資料を作ったりしました。

ちなみにこの比較資料は元データはAdobeXDで作って、Zeplinにアップしました。画像をたくさん貼っても超軽いので、こうした調べものや説明したい情報をまとめたいときはXDを使うことが多かったです。

7. 実装レビュー

UIの修正タスクは基本Googleシートに集約し、質問や補足あればSlackでやり取りしました。

「優先度」はデザイナー観点で、

3: 優先度高。これがなければリリース不可判断。
2: 優先度中。可能な限り対応してほしい。
1: 優先度低。時間があれば対応してほしい。完成度の高さに関係する。

「修正難易度」はエンジニア観点で、

3: 難易度高。ライブラリ選定の見直しなど仕切り直しが必要な可能性あり。
2: 難易度中。時間かければできる。〜1日
1: 難易度低。すぐ出来る。 〜1時間

といった感じでそれぞれの温度感や負担が共有できるようにしていました（この項目はCTO氏が作ってくれました。すんごい助かりました。多謝。）

8. このプロジェクトでの学び

このプロジェクトを通して、視野を広げたり、コミュニケーションの引き出しを増やすことができて良かったなぁとしみじみ実感しています。

翻訳能力と客観的思考

副業という複数の組織への関わりで、デザインを説明する際の言葉遣いを意識するようになりました。どの組織のメンバーにも通じるような言い回しを心がけたり、物事を俯瞰したり、比較しながら考える機会が増えたかな。個人的になんとかしたいビジネス受けはまだまだなんだろうなぁ。

一貫したサービスデザイン

ロゴ〜ガイドライン〜UIデザイン作りに携われたことで、一気通貫したサービス設計を経験できました。コンポーネント思考、ブランディングなど色んな視点でプロダクトを捉えられるようになった気がします。

想像しやすいユーザー像

本業では学校の先生や生徒、外国人向けにデザインを作っているので、自分自身がターゲットユーザーに含まれている感覚は久々で新鮮でした。副業したい人向けのサービスを、いままさに副業している自分が作っていて、なんだか面白かったです。

一方あまり主観的になりすぎるのも良くないなと思い、周囲のエンジニアやデザイナーをユーザーに見立てて、リアルな妄想をしながら作っていました。妄想や観察しているときに感じていたことは、サービスの体験設計をする上で大事な感覚だったなと思ってたり。

アウトプットの伝え方

デザインの共有は目的に応じて、テキスト / 画像 / 遷移図 / プロトタイプ / 動画を使い分けて伝えるようにしました。プロトタイプは操作している様子を録画し、その動画を共有することで、どの部分を具体的にどうしたいのかを伝わりやすいようにしました。

感情描写やストーリー展開を説明したいときは、イラスト描いてニュアンスを表現してみました。Apple pencilありがとう。

※会員登録するまでの流れを描いたやつ

フルリモートワークでのコミュニケーションだからこそ、スピードや柔軟な伝え方を鍛えられたと思っています。

あと改めて振り返ってみると、自分は情報整理したり、色んな視点で考えるのが結構好きなんでしょうね。定性&定量データ両方をうまくまとめて、サービスに落とし込めたら、もっと面白いことができるかもしれないなぁ。

9. 最後に

今回のリニューアルプロジェクトは、「副業・フリーランス」という限定的な関わり方でした。

個人で仕事するのは初めてで、どこまでできるのか、求められているのかが掴めず、最初は戸惑いだらけでしたが、「やれる範囲で大丈夫ですよ」とみんなが口にしてくれる雰囲気だったため、働きやすかったです。

いちデザイナーの声を大切にしてくれたコデアルの方々、穏やかに見守ってくれた関係者のみなさま、本当にありがとうございました。

それでは〜