LP制作(PC/SPデザイン、実装)

OVERVIEW

SHElikes MULTI CREATOR PROJECTの課題にて、ベビー用品事業をメインとする会社の採用サイトの制作に取り組みました。クライアントからの要件書をもとに情報設計〜実装まで行いました。(制作期間:4週間)

YEAR 2021

▼制作したPC/SPデザインカンプ

実装したサイトはこちらです


▼案件内容

クライアント情報

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

ターゲット

  • 転職希望の方
  • 報酬面よりも会社の世界観に強く共感してくれる方
  • 全くの未経験よりは経験を重視したいが、それよりもカルチャーフィットしている方

目的

LPを通じてエントリーしてもらうこと(できるだけたくさん応募がきて欲しいものの、カルチャーフィットする方にエントリーしてもらいたい)

ペルソナ


▼工夫したこと

1.情報設計

今回の目的はカルチャーマッチする人にエントリーをしてもらうことである。       そのため、前半部でカルチャーマッチしているかを判断してもらった上で実際に働くイメージ、エントリーをしてもらえるような情報設計にしました。

2.会社イメージに合わせたトンマナの設定

「世界をやさしさでつつむ」というコピー、ベビー用品をメイン事業としていることから以下のイメージを設定し、配色やデザインに落とし込みました。

柔らかい、優しい、安心、平和、穏やか、幸せ

配色に関しては赤ちゃんの肌をイメージしたオレンジやピンクを用いて、平和さや穏やかさを表すために緑色も取り入れました。

また、上記イメージから手書き風の装飾やイラストを用いて柔らかい印象を表現しました。

3.会社の世界観の伝え方

今回はスキルや経験よりもカルチャーマッチする人を採用したいという目的だったため、画像をたくさん配置して視覚的に世界観が伝わるようなLPにしました。

4.直感的に操作しやすいUI

ボタンに矢印をつけたり、ホバーした際に色が変わるなどのアニメーションをつけることで直感的にクリックできるというUIも意識しました。


▼制作を通して学んだこと

1.実装したのちのイメージを加味したデザインカンプの制作

Photoshopで見た時の文字の大きさや余白感で実際にコーディングをしてみると、印象が異なることが多々ありました。デザインのみを行っていれば気づくことができなかった点だと思うので、実際にWEB上でみる際の印象をイメージしながら今後は作成していきたいです。

2.LPを制作する際の一連の流れ

情報設計〜実装まで行ったのは初めてでしたが、ペルソナやユーザーストーリー、トンマナのイメージを事前に言語化しておくことで軸がぶれていない納得感のあるデザイン、情報設計ができると思いました。                            また、デザインカンプ作成時にホバーした際の色の変化やポップアップ、ハンバーガーメニューの中身についても作成しておくとコーディングがしやすいと思いました。今後は実装も意識したデザインを制作していきたいです。