LP制作（PC/SPデザイン・実装）

【所要時間】合計 約65時間（情報設計：8h、デザイン制作：21h、コーディング：36h）
【使用ツール】Photoshop/HTML/CSS

目次

① 制作・実装したLP
② 要件
③ ユーザーストーリー
④ トンマナ
⑤ 工夫したこと
⑥ 制作を通して学んだこと

----------------------------------------------------------------------------------

① 制作・実装したLP

実装したサイトは こちら

② 要件

クライアント情報：ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業や家族みんなが幸せになるフォトブック事業などを展開している。軸はベビー用品だが、今後ママ・パパ・家族向けのサービスも展開していく予定をしている。
目的：LPを通して、カルチャーフィットしている人にエントリーをしてもらうこと。
ターゲット：転職希望の方、世界観に共感している人、カルチャーフィットしている人。トンマナ：明確に定まっていないため、自由に提案してほしい。

③ ユーザーストーリー

・目的とターゲットを理解した情報設計
カルチャーマッチした人材を採用することがこのLPのゴールであるため、そのための情報設計を考えました。

・目的とペルソナについて
コンテンツの順番を決める際に、各コンテンツの目的と効果を書き出した上で優先順位付けをしました。また、事前に詳細なペルソナを立てたことで、ターゲットのペルソナの立場になってリアルなユーザーストーリーを考えることができました。

・ユーザーストーリーについて
コンセプト・メンバー紹介・働く環境といった " 共感・訴求 " のコンテンツを通してターゲットの「働きたい！」という温度を上げ、事業について・募集要項といった " より深く理解 " するコンテンツに進んでもらい、最終的なゴールであるエントリーをしてもらう流れです。

④ トンマナ

・配色：あたたかくてやさしいイメージになるようなパステルカラーの配色にしました。
・フォント：長文でも読みやすいスタンダードな游ゴシックにしました。

⑤ 工夫したこと

1. 企業コンセプトからトンマナを設定
「世界をやさしさでつつむ。」という企業コンセプトが伝わるように、あたたかいイメージのやさしい色のピンクをメインカラーにして、あしらいをクレヨン風にしました。画像や仕切り線、ボタンも直線でなく曲線にしてやわらかさを表現しました。また、ホバー時のアニメーションも「ふわっ」とjQuery でフェードインさせました。

2. 採用サイトの目的を意識して使用する画像を選択
赤ちゃんのイメージのデザインにしすぎてしまうと採用サイトでなく、コーポレートサイトになってしまうため、使用する画像はサイト訪問者に企業コンセプトが伝わり、働くイメージが想像できるような画像を使用しました。

3. 育休明けの社員の声を追加して働きやすい環境だと訴求
必要要件には入っていなかったのですが、赤ちゃん事業に関心がある方はご自身にも赤ちゃんがいる場合もあると考えて「育休明け社員の声」を追加することで、職場復帰しやすい職場であること」を知ってもらい、安心して働ける環境であることを訴求しました。

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

1. 実装を意識したデザインを制作する重要性
今回の課題はデザインを制作してそれを実装する必要があるので、実装を意識したデザインを心がけました。ただ、Photoshopでデザインを制作してちょうど良いサイズだと思っていても、コーディング後にスマホで見ると画像やボタンが大きすぎたりしたため、スマホで確認しながらデザインすることが大切だと学びました。

2. ペルソナ設定の重要性
LPのターゲットについて理解するために、詳しくペルソナを立てました。具体的なペルソナを立てたことで、ユーザーストーリーが作りやすくなり、情報設計に納得感が出ました。