世界をやさしさ♡でつつめる人を募集する採用サイトLP

【目次】

1.制作物

2.要件定義

3.工夫した点(情報設計)

4.工夫した点(ビジュアルデザイン)

5.制作を通して学んだこと

1.制作物

完成をしたサイトはこちら

ベビー用品を扱う会社ですが、性別を問わずに求人に応募しやすいような中性的な配色にしています。
キービジュアルでは、赤ちゃんとママ以外に、TSUTSUMUの会社で活き活きと働く社員の方の写真を掲載することで、採用サイトであることを表現しています。

2.要件定義

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

🔸目的
採用サイトを通じてエントリーをしてもらう。
採用強化のため、たくさんの方に応募をして欲しいが、カルチャーフィットをする方に応募をしてもらいたい。

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

🔸クライアントからの提供素材
・ロゴ
・PCワイヤーフレーム

3.工夫した点(情報設計)

TSUTSUMUの採用サイトを利用するペルソナを設定しました。

🔸ユーザーストーリー

【LPを訪問するまでのユーザーストーリー】

起（事前情報）：転職について調べてみよう

承（リサーチ）：ショッピングモールに入っているTSUTUMUはどんな感じかな

転（発見）：あ、求人のWEBサイトがある

結（検索）：どんな求人があるのか内容を見てみよう

【LPを訪問後のユーザーストーリー】

4.工夫した点(ビジュアルデザイン)

ーアニメーションについてー

🔸ヘッダーメニューとスクロール
ヘッダーメニューをホバーすると、ゆっくりふわっと色を変えることでサイトに落ち着いた演出をしています。ページをスクロールする際も、ゆっくり浮かび上がるようにしています。

🔸ボタンのホバー時はわかりやすく
もっと見るのボタンをホバーすると色が変わり、矢印が動くことで、ボタンがあることをわかりやすく演出しています。

ーレスポンシブ対応ー

JQueryを利用して、ハンバーガーメニューとスライドを設置しました。

5.制作を通して学んだこと

🔸WEBデザインの表現の幅は広い！
採用サイトでは、会社の雰囲気やカルチャーを伝える手段としてデザインのテイストを使い分けていることに気づきました。配色やフォント、あしらいの組み合わせによって、クール系から温かみまで幅広く表現をできるWEBデザインは、ユーザーに与える印象を左右すると感じました。
目的達成のためにも、デザインの役割・効果について、より学びを深めたいと思いました。

🔸WEBサイトの完成までの道のり
コーディングをしてみて、２カラムの縦幅を調整するために自動で余白が設定され、デザインカンプと差が出てしまう事象がありました。コーディングは、コードを書くだけでなく、コードが適用されているか、余白の設定はどうなっているのかと検証ツールで細かく確認をする作業もありました。
事象に対する仮説と解決方法を考え、解決できた時の喜びと完成した時の達成感を感じられるコーディングの魅力に気づくことができました。
デザインカンプの再現できるコーディング技術の向上にこれからも取り組んでいきたいです。