【課題】LPデザイン制作・実装（採用サイト）

要件

●クライアント名：TSUTSUMU株式会社
ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業や家族みんなが幸せになるフォトブック事業などを展開している。軸はベビー用品だが、今後ママ・パパ、家族向けのサービスも展開していく予定をしている。
●目的
LPを通してエントリーをしてもらうこと
（採用強化のためできるだけたくさんの応募がきてほしいが、エントリーがあれば誰でもいいわけではなく、カルチャーフィットしている方に応募してもらいたい）
●ターゲット
・転職希望の方
・報酬面よりTSUTSUMUが作っていきたい世界に強く共感してくださる方
・各職種において全くの未経験よりは経験を重視したいが、それよりもカルチャーフィットしている方
●クライアントから共有された必要セクション
①キービジュアル
②私たちについて
③働く環境
④事業について
⑤募集職種
⑥メンバー紹介
⑦エントリー
⑧フッター
●トンマナ
明確なブランドトンマナが決まっていないため、事業内容にあうトンマナを自由に提案してほしい

制作したLP

実装したLP
コーディング使用言語：HTML、CSS、JavaScript

情報設計

クライアントの目的・ターゲットからより詳細なペルソナを設定し、情報設計を行いました。

デザインコンセプト、トンマナ

配色については、明るい未来をイメージしたオレンジと、やさしさをイメージできるベージュにまとめています。また、全体的に余白を広く持たせることでやさしさを表現しています。

デザインの工夫ポイント

●画像のレタッチ
LPのコンセプトやトンマナに合わせるため、使用している画像は全てレタッチを行いました。彩度を落とすことで淡さ・優しさを表現しました。

●あしらいを画像の一部に使用
背景に使用している水彩のあしらいを画像の一部に使用することで、細かい箇所でも統一感が出るよう工夫しました。

コーディングの工夫ポイント

・全体的にふわっと文字が浮かび上がることで、やさしさを表現。
・ヘッダーのメニュー、それぞれのボタンはホバーすると色が変わる。
・募集職種の各職種はホバーすると矢印が動く。
・よくある質問は開閉ができるアコーディオンメニューに
・SP版のメニューはハンバーガーメニューへ変更。また、メンバー紹介はスライドできるようになっている。
実装したLPはこちらからご覧いただけます。

制作を通して学んだこと

LP制作の一連の流れを学ぶことができました。
デザイン制作では、クライアントからの依頼を元にペルソナ設計〜ワイヤフレーム〜デザインカンプ制作を行いましたが、コンセプトに沿ったデザインができるまで時間がかかってしまいました。参考サイトを見たりトレースを行うことで、デザインの引き出しを増やしていきたいです。
また、コーディングは、HTMLとCSSの違い、記述方法は一つではなくいろいろな方法があるということなど学びが多かったです。デザインカンプで表現したものと同じように表現するにはどうしたらよいかを考えたり、調べるのは難しかったですが、とても楽しく良い経験になりました。