登録画面から404ページまで。転職ドラフトのUI/UXにまつわるお話

2019-04-05 08:00

https://jdraft.s3-ap-northeast-1.amazonaws.com/blog/777e2c2c-e0ed-4ca9-bf3b-afe3053e5705.png

こんにちは。転職ドラフト開発担当です。

今回は、転職ドラフトのUI/UXにまつわるお話です。

転職ドラフトでは、サービスとしてのKPIに直接つながらなくても、エンジニアに特化した転職サイトとしてのこだわりや、転職市場に対しての我々の思想を反映するような機能を積極的に実装しています。

そんなこと言われてもピンと来ないと思うので、具体例をいくつかご紹介していきますね。

エンジニアのエンジニアによるエンジニアのためのサービス

転職ドラフトは、エンジニアのためのサービスです。
だからこそ、エンジニアの使い勝手にこだわっています。

サインアップのバリデーションは正規表現で

https://jdraft.s3-ap-northeast-1.amazonaws.com/blog/3d88a372-b90e-4531-9613-83bb5f95f13f.png

ー バリデーションにひっかかるのも、山のようにある入力ルールを読むのも面倒。エンジニアなら、正規表現で書かれた方がわかりやすいでしょ、って。

登録情報打ち込み終わった後に、全角エラー…
「ちくしょう!やり直しかよ!」ってなった経験ありませんか?(私はあります)

あの地味にイラつく感じを軽減するべく、入力欄に直接バリデーションルールを書いています。
ぶっちゃけ正規表現を読めなくても登録できちゃうんですが、エンジニアなら読めるでしょって感じがして、結構お気に入りです。

ちなみに、ルール解読するのも時短できていいよねーってホクホクしていたら、社内で他部署の方に「文字化けしてますよ」って指摘されましたw

マークダウンで書ける

https://jdraft.s3-ap-northeast-1.amazonaws.com/blog/7e70f723-4abb-4c25-86c9-d1f95baf6580.png

ー 人にわかりやすく伝えるなら、文章も形式化して整理したいですよね。だったら、エンジニアならみんな書けるマークダウンが使えた方が便利だと思って。

日頃から、形式化して物事を整理する習慣のあるエンジニアは多いはず。
そうなると、エンジニアの転職に特化した我々が共通言語としてマークダウンを使わない手はないかなと。

リスト化するにもヘッドをつけるにも、ふつうに文章を書くより圧倒的にラクですよね。

そしてもちろん、企業が指名するときもマークダウンを使うことができます。

むしろ、マークダウンで要素をまとめると視認性が上がるので、企業の指名文はできるだけマークダウンで書いてほしいと思っています。

理由は、自分たちが他の転職サイトから長いスカウトメールを受け取ったときに、「なんでこんな長くて読みづらいプレーンテキストでスカウトメールを送るのだろうか?」と思ったから。

きちんと「読ませるための文章」は正義です。

Slack連携ができる

https://jdraft.s3-ap-northeast-1.amazonaws.com/blog/cd18af48-12a3-4a4a-8b19-9822ebc8a470.png

ー エンジニアなら、個人用のSlackも持ってるかなと。

Slack連携機能はもともと、企業のための機能として開発されたもの。
Slackはみんなで共有できるので、転職ドラフトと連携させることで「承諾された!」「承諾されない…。」など、採用チームの皆さんが同じタイミングで一喜一憂したり、議論をして欲しくてつけました。

とはいえ、ユーザー側からしても「Slack対応してるんだ、面白いじゃん」くらいには思ってもらえるかな、という判断です。手前味噌ですが意外に便利だと思うので、この機会に連携してみてはいかがでしょうか。

転職ドラフトの思想を伝えたい

転職ドラフトの目指す転職市場を実現するために、思想を元にした工夫もしています。

野望を聞く

https://jdraft.s3-ap-northeast-1.amazonaws.com/blog/a9a8a36c-262e-451f-ba3e-1936b87f347d.png

ー 未来のことについては、あえて「野望」という聞き方にしています。こっちのほうがワクワクするし。

「今後なにをしたいですか?」と聞いて返ってくる答えは画一的なものばかり。
「会社で○○をしていきたい」とか、「3年後は海外に行きたい」とか…

「今後」という言葉を使った質問は定義を限定的にしてしまうものらしく、その人が現在の実力以外にどういう思考をもっているかとか、どういう指向性の人なのかが分からなかったりするものです。

そこで質問を「今後の野望はなんですか?」に変えてみると、オリジナリティあふれる面白い答えがざくざく出るように。

堅苦しいありきたりな答えじゃなく、ワクワクできる未来設計が知りたい。
それが我々の思いです。

紙の履歴書無し、面接時のスーツ不要が事前に分かる

https://jdraft.s3-ap-northeast-1.amazonaws.com/blog/2cf3874b-fba2-42dd-a5a4-d81bf09174b5.png

ー エンジニアに紙の履歴書を求めるのってなんか違うし、そもそも普段はスーツで働くわけじゃないのに面接だけスーツ着用を求める会社で働きたいです?

紙の履歴書にスーツ…いやいやいや、いくらなんでも前時代的すぎるでしょ。
エンジニアにそれ要る?
ないわーーーーーーーーー(ヾノ・∀・`)

そんな訳で、転職ドラフトでは企業情報に「紙の履歴書不要」「スーツ着用不要」欄を設けて明示するようにしています。

おかん的世話焼き機能もあるよ

ほかにも、転職ドラフトには「ええいやったれい!」精神のもと、こちらのKPI無視で(勝手に)実装してみた機能もあるので、この機会にそれぞれご紹介してみたいと思います。

お問い合わせフォームでは段階的開示を採用

ー 人間はヘルプ欄を読まないという特性に合わせて、UXを変えました。

「あれ?このあとどうすりゃいいの?」と疑問が湧いた時、鬼の如く列記されたFAQやヘルプの中から、たったひとつのアンサーを探し出すのってめちゃめちゃダルくないですか?

でも、本当に困ったらお問い合わせ機能は使いますよね。

そんなとき、たとえば「プレゼント」と入力すると…

https://jdraft.s3-ap-northeast-1.amazonaws.com/blog/c066856b-efa9-43e2-9b9a-0d75803cc20a.png

ドン!!



https://jdraft.s3-ap-northeast-1.amazonaws.com/blog/4cb1e3aa-b9ba-4ab6-b090-a360119a5183.png

「プレゼント」についてよくある疑問の解決方法が出てきます!

これはいわゆる「段階的開示」というもので、「必要なときに必要な情報だけが見える」ようにしました。

これで、少しはCSからの返事を待つというストレスが軽減されるといいなと思っています!

おまけ

ー 僕の完全な趣味です。作業が辛くなった時に遊びで作りました。

転職ドラフトの404ページはちょっとしたお遊びページになっており、実は3パターンあります。

https://jdraft.s3-ap-northeast-1.amazonaws.com/blog/5c726c4a-7bdc-4c21-99d7-6c70d4009b4d.png

16進数パターン

https://jdraft.s3-ap-northeast-1.amazonaws.com/blog/a639b222-667f-46b2-a622-05eaca9349ce.png

マインスイーパーパターン

https://jdraft.s3-ap-northeast-1.amazonaws.com/blog/91c5f016-835f-42dc-bd8b-19153103a10d.png

ライフゲームパターン

出る確率は3分の1です!

おわりに

このように、一つひとつの機能にアツい思いを込めて運営しています。
他にもここに書ききれなかったこだわり機能があるので、よかったら見つけてみてください。

ENTRY
pickup
interview

タグ一覧

年収診断 登録不要!30分で結果がわかる!
SIGN UPSIGN IN


転職ドラフトを友人や同僚に薦める可能性はどのくらいありますか?