Sun*採用サイトアップデートの裏側
みなさんこんにちは、Sun*でデザイナーをしているアイノヤと申します。趣味はルアーフィッシングで、暇さえあれば釣りに出かけている釣りキチです。広告代理店やコンテンツ制作会社を経て、2022年からデザイナーとして働いています。入社してからSun*の採用サイトをアップデートする機会があったので、その裏側をお話させていただきます。
この記事はSun* Advent Calendar 2023 21日目の記事です。
アップデート前の課題
アップデート前の採用サイトは、以下のような課題がありました。
退職者の写真及びインタビューや旧オフィスの写真等の掲載が続いたままである。
社内制度やデータなどの情報がアップデートされていないため、情報に乖離がある。
noteを活用しコンテンツ発信をしているが、導線設計がされてない。
事業についての紹介が採用サイト内に設けられておらず、採用候補者が回遊しにくい。
この課題解決に向けてチームで議論を重ね、方針を決めていきました。
コンテンツをアップデート・拡充
まず中身のコンテンツを現状の内容にアップデートしていきました。どういう構成で訴求すれば採用ターゲットに響くのか他社サイトもリサーチしながらワイヤーフレームに落とし込んでいきました。
「メインビジュアルは動画でリアルなSun*を感じ取ってもらいたいな」、「Sun*のリアルなイメージを伝えたいから、テキストで説明的にはせず、写真が映える構成にしよう」といった感じでワイヤーフレームを詰めていきます。ワイヤーフレームの段階で要件を詰めておけるかで、その後のクオリティに差が出るので、しっかり決めておきます。
そして、外部コンテンツの導線設計もしていきます。Sun*では主にnoteを活用してコンテンツを発信していますが、肝心の導線が採用サイトにないのが課題でした。どこに導線を置けば採用ターゲットに見てもらえるかを考えて組み込んでいきました。
デザインコンセプトを決める
構成が固まってきた段階でデザインのトーン&マナーも検討します。
現状の採用サイトは、どちらかというと若年層向けのデザインになっていますが、今回の主要ターゲットは中途採用のプロジェクトマネージャー。
チーム内でデザインのキーワードを策定したところ、「落ち着いた」「安心感のある」「チーム感」「プロフェッショナル」「親しみやすい」「洗練された」「明るい」「笑顔」が、中途採用のプロジェクトマネージャーで重要視している「堅実な感じ、地に足がついている人が集まっている」といった要素と合致するという結論になりました。
そして、このキーワードをデザインコンセプト（デザインのトーン&マナーを想起できる文章）に落とし込みます。デザインコンセプトは【採用ターゲットに向けた「大人なSun*」を表現した採用サイトデザイン】に設定し、落ち着いた大人な印象がありつつ、Sun*が元々持っている洗練されていたイメージや明るさを表現していこうということになりました。
いざデザイン作業！
デザイン制作がスタートし、改めてタスクを洗い出したりWBSを引き直してみると、やることが山のようにあります。ミーティングを重ねながら、スピーディーに決めていきました。サイト内ではイラストやアイコンも多用しており、イラストレーター兼デザイナーのメンバーと連携して進めていきました。
デザインも彼女と手分けしてスピーディーに進めていきます。私はトップページをメインに担当しながら、サイト全体のレイアウト、カラー、中身のビジュアル、アニメーションを決めていきました。試行錯誤を繰り返すフェーズはデザイナーとして辛くも楽しいところです（笑）
撮影はやっぱり楽しい
デザインがある程度固まってきた段階で撮影要件も決めていきます。カメラマンはチームメンバーにお願いしました。こういったケースだと通常はカメラマンを外注するケースが多いですが、Sun*は社内でサクッと対応できてしまうのも魅力だと思います。外注すると細かく要件を決めてお伝えしないといけないですが、社内だと色々融通が効くのでとてもやりやすかったです。
撮影で大事なことはズバリ、事前準備です。
写真のトーンを決め、香盤表を作り、撮影当日にどんな段取りを組めばスムーズに行くのかシミュレーションをします。ここさえクリアできていれば8割は成功しているようなものです。
撮影当日は屋上の撮影からスタート。気温は既に30度超え...朝からカンカン照りで少し歩いただけで汗ダラダラです...
カメラマンやモデルと試行錯誤ながらビジュアルを作る作業はやはり楽しいなぁと感じました。前職では撮影する機会がけっこうありましたが、コロナの影響で撮影自体なくなることが多かったため、久々の撮影でした。
ベトナムの開発チームと連携
デザインも固まったので、ベトナムのエンジニアチームに実装をお願いしました。Sun*はベトナムに優秀なエンジニアがたくさんおり、多種多様な開発案件に対応可能です。やりとりをする時には、日本とベトナムのコミュニケーションの懸け橋になってくれるBridge SEに入っていただき、実装開始です。
今回、採用サイトのイメージをより魅力的に伝えるために、随所にアニメーションを使用してします。
デザイナーであればエンジニアサイドにアニメーションの要件を伝えることが多々あると思いますが、大事なことは言葉だけで伝えないことです。
私がアニメーションのイメージを伝えるときに行っていることとして、言葉に加えて参考サイトなどで近しいイメージを見つけて一緒に共有したり、アフターエフェクトでサンプルを作って共有したりします。
また、ミーティングを設定してお互いに納得してから実装を進めてもらうようにしています。こうすることで、無駄な修正のやりとりなどが激減します。
短期間の実装でしたが、エンジニアのスキルが高く、スピードもめちゃくちゃ早かったので大変助かりました。
ちょっとした遊び？！
実装がある程度進んだところで、弊社代表小林とゼネラルマネージャーに共有。デザインについて意見を伺います。
お2人から出てきたのは、
コンセプトを表現できているが、ちょっと整いすぎた印象。Sun*らしいちょっとした遊びがほしい。Sun*だけに3%の遊びがほしい。
Sun*らしい真面目できっちりしてるけど、それだけじゃないちょっとした遊びについて考えました。
単純にレイアウトを崩してみたり、モチーフをはみ出してみたり...中途半端に崩すと、レイアウトが破綻しているように見えてしっくりきません。
そこで、デザイン自体は崩さず、アニメーションで遊びを出すことにしてみました。WEBだとグラフィック部分以外にも色々なデザインの可能性があるのがいいところです。当初予定していたアニメーションに加え、注目させたい記事にクルクル回るマーキーっぽいアニメーションを加えてみたり、コンバージョンエリアであるEntryに印象的なアニメーションを加えることでわくわく感を演出し、ちょっとした遊びを出しました。
そして、このデザインでOKをいただき、無事に公開することができました。
まとめ
採用サイトは奥が深く、採用ターゲットに響くデザインにするためにどうすればいいのか悩みどころですよね。
どんな採用サイトであれば課題解決できるのかチーム一丸となって議論を重ねれば、答えは必ず出てくると思いますので、みなさん頑張りましょう！
関わってくれたメンバー、ありがとうございました！！
明日は渡邊さんの【前編】生成AI時代のアイデア選定術： 無限の事業アイデアからダイヤモンドを見極める3つの検証ポイントの記事です！
お楽しみに！！