【実践課題】架空ベビー用品会社の採用サイト(デザイン〜コーディング)
OVERVIEW
架空ベビー用品会社の採用サイトの制作を行いました。 【制作概要】 情報設計からPC・SP両方のデザインカンプ制作→コーディング→アップロード【制作期間】4週間 【使用ツール】Photoshop・VScode【使用言語】 HTML・CSS・Java Script
【目次】
①制作物したLP
②企業から提示された要件
③エントリーされやすい採用サイトとは
④CVへ誘う情報設計
⑤デザインのこだわり
⑥制作を通じて学んだこと
①制作物したLP
テーマ:企業のあたたかみが伝わり、輝く未来が想像できる採用サイト
②企業から提示された要件
◾️クライアント情報
ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業や家族みんなが幸せになるフォトブック事業などを展開している。軸はベビー用品だが、今後ママ・パパ・家族向けのサービスも展開していく予定をしている。
◾️クライアントの要望
- ベビー用品をメインとした企業『TSUTSUMU株式会社』の採用サイト制作
- LPを通してエントリーをしてもらうこと
- 明確なブランドトンマナが無いため、事業内容に合うトンマナを自由に提案してほしい
- 転職希望の方、世界観に共感している人、各職種において全くの未経験よりは経験を重視視したいが、それよりもカルチャーフィットしている人がターゲット
③エントリーされやすい採用サイトとは
エントリーされやすい採用サイトとは、企業の雰囲気が採用者に伝わり働くイメージが想像でき、マッチングに繋がる採用サイトと仮定しました。クライアントの要件書を元に、ペルソナとカルチャーフィットの定義を独自で考えました。
◾️ペルソナ
◾️カルチャーフィットについて
- 要件書より、カルチャーフィットとは『社風』と『企業の目指す姿』がマッチングする事と考えました。
④CVへ誘う情報設計
⑤デザインのこだわり
◼︎スタイルガイド
◼︎レスポンシブ
- MVは社風が伝わるポジティブで風通しの良い印象を与える写真を選びました。
- SPでも写真の雰囲気の良さが伝わる配置にするためにキャッチコピーを縦文字にしレスポンシブ対応しました。
◼︎ホバー
- CTAボタンはサイト全体の柔らかい世界観をイメージし、ホバーした際にふわっと色が変わるようにデザインしました。
- ヘッダー部分は通常時は英語表記ですが、ホバー時に日本語表記に変わるようにデザインしました。
◾️あしらい
- あたたかみのある優しい雰囲気の世界観を作り出すために、丸い動くあしらいを背景につけたり、写真は全て角丸にしております。
- またセクションの切り替え部分の背景も曲線の波打つような柔らかいデザインにし、世界観を生み出すように工夫しました。
⑥制作を通じて学んだこと
- CVを明確にするために、配色のバランスを考えアクセントカラーは5%程度にすることを意識しながらデザインすることの重要性を学びました。
- クライアントの目的(エントリーしてもらうこと)を達成するためのユーザーストーリーをデザインに落とし込むために、セクションの順番や社風が伝わる写真選びの重要性を学びました。
- クライアントの求めるカルチャーフィットについて考察することで、より説得力のあるLPに仕上げることができました。