【架空の採用サイト】LPデザイン＆コーディング（PC/SP）

🔷作品URL

TSUTSUMU株式会社（架空）採用サイト（閉鎖中）

🔷概要

【クライアント】
ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業や家族みんなが幸せになるフォトブック事業などを展開している。軸はベビー用品だが、今後パパ、ママ、家族向けのサービスも展開していく予定をしている。

【ターゲット】
・新卒＆転職希望の方
・報酬面よりも会社が作っていきたい世界に強く共感してくださる方
・各職種において全くの未経験よりは経験を重視したいが、それよりもカルチャーフィットしている人がターゲット

【目的】
LPを通してエントリーをしてもらうこと

🔷制作のポイント

はじめはキャッチコピーである「世界をやさしさでつつむ」をベースに優しい雰囲気のデザインを思い浮かべました。

しかし「赤ちゃん」「優しい」などをキーワードにすると女性らしいかわいいデザインを考えてしまうため、多くの方に見ていただく機会が減るのではと考えました。

新卒や既卒関係なく募集していたり、男性比率の高いエンジニア職を募集していたり、子育て中の父親や母親も働きやすい環境が整っていたりと、ターゲットを広く見ていると考えたことから、

・きちんと情報整理を行い、動線を意識した動きのあるデザインでしっかりとエントリーボタンへ誘導
・優しい色味を使用しつつ配色を抑えてスッキリとシンプルに
・要所であしらいを足すことにより、親しみを出す

以上を意識して多くの方に見ていただける採用サイトになるようデザインしました。

また、その中でもカルチャーフィットする方にエントリーしていただけるように、要所に会社のカルチャーを意識したコピーを追加しました。

以下、各ポイントの説明です。

🔷写真選びのポイント

キャッチコピーに「世界を〜」というワードが入っているので、グローバルな世界観を表すためメインビジュアルは外国人の家族を起用しました。

サイト全体のイメージを統一させるため、色味を揃えてふんわりとしたレタッチを行いました。

エントリーのカテゴリーでは、入社後をイメージしやすいように社内の写真（仮）を起用。

🔷あしらいのポイント

・事業で色分けを行い、メンバー紹介や募集内容でも情報が入りやすいようにしました。

・ボタンの形やホバーのバリエーションを多くし、思わず押したくなるようなデザインにしました。

メインビジュアルが雲の形をしているので、それに合わせて写真の切り抜きを柔らかい形にしたり、to TOPボタンを飛行機のアイコンにしたりというちょっとした遊び心を入れました。

🔷コーディングのポイント

PCのメニューバーとSNSリンクはそれぞれアクセスしやすいよう固定しました。

また、メニューにはJQueryでsmooth scrollを実装しました。さらにscroll revealを実装し、スクロール時に各セクションがふわっと表示されるようにしました。

メンバー紹介はスマートフォンでは縦積みが長くなるため、slickを使用しスライダーを追加しました。

スマートフォンのハンバーガーメニューはCSSで実装しました。

🔷全体を通して学んだこと

今回は採用サイトということだったので、会社のもつ雰囲気を表現しつつ多くの人に見ていただくにはどういうデザインがよいかを常に考えながら、時間をかけて事前の情報設計をしました。そのおかげでブレることなくデザインを終えることができたので、デザイン前の情報設計はとても大事だと気付きました。また、コーディング部分ではスケジュール感がつかめず後半は睡眠時間を削ることになってしまったので、自身に合った大まかなスケジュールを組み立てておくことが大切だと改めて感じました。既存サイトを見本にする際は、なぜそういう実装をしているのか、CSSがもつ意味などをきちんと調べながら理解することで自身にも知識が身につきました。