【課題】LP_採用サイト

OVERVIEW

実案件を想定した演習プログラム「SHElikes PRO デザイナー」にて採用サイトのLPデザインカンプの制作~サーバアップまで取り組みました。

YEAR 2025

①対応範囲:要件定義・情報設計、PC/SP_WF 制作~デザインカンプ
②使用ツール :Figma、Visual Studio Code
③制作時間:情報設計・デザイン45H、実装30H
④実施年月:2025年9月

 制作物

https://tsutsumu-recruit.pupu.jp/

課題内容

  • クライアント
    TSUTSUMU 株式会社
    ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業や家族みんなが幸せになるフォトブック事業などを展開している。軸はベビー用品だが、今後ママ・パパ、家族向けのサービスも展開していく予定をしている。
  • 目的
    採用サイトを通してエントリーをしてもらうこと
    (採用強化のためできるだけたくさんの応募がきて欲しいが、エントリーがあれば誰でもいいわけではなく、カルチャーフィットする方に応募してもらいたい)
  • ターゲット
    ・転職希望の方(性別問わず)
    ・報酬面よりもTSUTSUMUが作っていきたい世界に強く共感してくださる方
    ・各職種において全くの未経験よりは経験を重視したいが、それよりもカルチャーフィットしている人がターゲット

要件定義

いただいた情報をもとにペルソナを定義。

情報設計

ビジュアルデザイン

既婚で子供はいない20代後半の女性をペルソナに立て、価値観 × 社会貢献性 × 信頼できる環境を伝えることを軸にトンマナを決定。TSUTSUMUが事業に対して真摯に取り組んでいることをユーザーに伝えるため、シンプルな構成で読みやすさを重視し、要素要素で丸ゴシックを使ったり、丸やウェーブのシェイプを用いたりすることで、ブランドイメージを効果的に伝えることを目指した。


イメージボードとスタイルガイド



デザインの工夫


実装時(ホバーした際)の動き

学んだこと

・デザインカンプの作成時に、どの要素を揃えるのか、また揃える時はtop center bottomのどのラインで揃えるのか考えておくことで実装がスムーズになる。

・PCの実装を行うときにレスポンシブを意識し、px指定にするのか、%指定にするのか考えながら行うことで、レスポンシブが効率よく行え、サイトの見た目も良くなる。

WEBSITE