【スクール・課題】LPデザイン制作・実装（ベビー用品事業会社の採用サイト）

実装したサイトはこちら

目次

①情報設計

②制作したWF（PC版・SP版）

③完成したLP（PC版・SP版）

④ 工夫したこと

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

①情報設計

〈課題で提示された要件〉

• クライアント情報
  ＜クライアント名：TSUTSUMU株式会社＞
  ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業や家族みんなが幸せになるフォトブック事業などを展開している。軸はベビー用品だが、今後ママ・パパ・家族向けのサービスも展開していく予定をしている。
• 目的
  LPを通して、カルチャーフィットする方にエントリーしてもらいたい。
• ターゲット
  転職希望の方。
  報酬面よりもTSUTSUMUの世界観に共感する方。
  経験者重視だが、それ以上にカルチャーフィットを重視。
• トンマナ、ペルソナ
  明確に定まっていないため、自由に提案してほしい。

⬇️

要件書と達成ゴール「カルチャーフィットする方のエントリー」をもとに以下、

ペルソナ・デザインガイド（トンマナ）・ユーザーストーリーの設計を行いました。

② 制作したWF（PC版・SP版）

③完成したLP（PC版・SP版）

④ 工夫したこと

■「企業の採用目的」と「ペルソナのニーズ」を兼ねた情報設計

企業様の採用目的（達成ゴール）は、カルチャーフィットする人材のエントリー。

ペルソナのニーズは、育児に理解ある環境かどうか・未経験業界への職場復帰で不安が払拭できるかどうかです。

↓

これらを踏まえた上で事業内容や募集要項よりも、企業理念や職場環境の情報を優先的に配置。ペルソナの不安を払拭すると同時に、TSUTSUMU株式会社様ならではの「育児中の方でも働きやすい・サポート力ある企業特徴」を打ち出しました。

企業理念やデザインから想起される世界観だけでなく、会社の働き方を優先度高く明示することでカルチャーフィットの要素を強化しています。

■世界観の伝わる要素をデザインする

ベビー事業を運営する企業様の「らしさ」を表すために、要素の角を無くして柔らかさを表現するデザインを制作しました。

→丸みを帯びたフォント選び

→肌や温もりを感じさせる配色

→お母さんの胎内（＝大切に包まれる）をイメージした、動く球体のアニメーション

→綿毛がふんわり舞うアニメーション

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

■実装を踏まえたデザインカンプ作成

デザインの基本原則はデザインカンプの制作時だけでなく、コーディングにおける要素の括りや反復の記述する時にも重要だと痛感しました。

特にコーディングにおいては、無駄な記述をせずにシンプルかつ明確であることがサイトのメンテナンスや早期改善に繋げることができると思います。デザインとコーディングは一貫したものであるということを念頭に制作していきたいと思います。

また、今回HTML・CSSは講義を繰り返し復習しながら記述しました。jQueryやJava Scriptの記述への理解が不足していると感じるため、引き続き学習を続けていきたいと思います。