【課題】ベビー用品会社 LP制作(情報設計からコーディングまで)

OVERVIEW

SHElikes MULTI CREATOR COURSE Designerの課題で、仮想クライアントからの依頼をもとに、ベビー用品会社の採用ページ制作に取り組みました。情報設計からコーディングまで行いました。(制作期間:1ヶ月)

YEAR 2024

*制作要件

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

●目的
LPを通してエントリーをしてもらうこと。(採用強化のためできるだけたくさんの応募がきてほしいが、エントリーがあればだれでもいい訳ではなくカルチャーフィットする方にきてもらいたい。)

●ターゲット
・転職希望の方
・報酬面よりもTSUTSUMUがつくってきた世界観に共感する方
・各職種において全くの未経験社より経験を重視したいがそれよりもカルチャーフィットしている方


*制作物

コーディングを行ったサイトはこちら

*デザインで工夫したところ

●採用サイトであることがわかるヘッダー
「RECRUIT SITE」と明記することで採用サイトであることがわかります。


●MENUページにENTRYボタン
ヘッダーのハンバーガーメニューから遷移するMENUページにENTRYボタンを設置し、すぐにENTRYできるようにしました。


●キャッチコピーの入ったキービジュアル
キービジュアルにキャッチコピーを入れ、キャッチコピーがすぐに目に入るようにしました。


●Project
Projectの部分は1から3の事業が丸で繋げることで、それぞれの事業の繋がりを表現しています。応募者への狙いとしてはどの部門に携わることになったとしても、Visionに書いてある通り目的は1つで、それぞれの事業は関連しあっているということをイメージしています。

写真の角をとり、柔らかい雰囲気にしています。


●最後のENTRYボタン

最後にENTRYボタンがあることで、最後まで内容を確認したカルチャーフィットした人材が応募することに繋がります。


*コーディングで工夫したところ


●MENUページのタイトルのマウスホバー
マウスを当てると色が変わり、クリックすると該当の部分に遷移します。

●MENUページのENTRYボタンのマウスホバー
マウスを当てると色が変わります。

●READ MOREのマウスホバー
マウスを当てると、浮き上がってくるような動きになります。

●SP Memberのメンバー紹介
スライダーにすることでスクロールすることなく、メンバー紹介を見ることができます。

●ENTRYボタンのマウスホバー
マウスを当てると色が変わります。

*この課題に取り組んで学んだこと

・LPをデザインするにあたり、余白や画像サイズなど、全ての部分を大きさを数字で決める必要があること。

・LPに動きをつける部分は、LPを見る人がクリックする場所や、SPで見る時にスクロールを減らすためにつけるとわかりやすいこと。