採用サイトのLP制作 -PC/SPデザイン・実装- （サンプル）

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

クライアントからの依頼内容

「採用強化のため、採用サイトを作成することになりました。掲載したい要素をお渡しするので、たくさんの人にエントリーいただけるようなLPの制作をお願いいたします。」

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

◾️制作したLP

実装したサイトはこちらからご覧ください。

◾️制作要件

◎クライアント情報

クライアント名：TSUTSUMU 株式会社

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

◎目的

LPを通してエントリーをしてもらうこと

（採用強化のためできるだけたくさんの応募がきて欲しいが、エントリーがあれば

誰でもいいわけではなく、カルチャーフィットする方に応募してもらいたい）

◎ターゲット

• 転職希望の方

• 報酬面よりもTSUTSUMUが作っていきたい世界に強く共感してくださる方

• 各職種において全くの未経験よりは経験を重視したいが、それよりもカルチャー

  フィットしている人

◎制作物

• PC/SP用ワイヤーフレーム（必要要素は指定）
• PC/SP用デザインカンプ
• 実装（レスポンシブ対応、テキストコーディング）

◾️制作過程とコンセプト

①配色とフォント、ムードボード

“家族愛”を感じられるトンマナとTSUTSUMUの世界への共感を目指し、全体的にやわらかさや丸みを感じられるデザインにしました。また、ベビー用品を軸としながらも家族向けサービスを展開する予定とのことだったので、子どもらしくなりすぎない、あたたかみのある配色とフォントを選びました。

②情報設計とレスポンシブデザイン

“TSUTSUMUの世界に強く共感する人”および“カルチャーフィットしている人”がターゲットのため、大きな枠から始めて少しずつ具体的な内容へ移行させ、LPを通しTSUTSUMUの世界へ入り込んでいくイメージで作成しました。

まず冒頭でTSUTSUMUがどんな会社なのかを知り（理念、事業概要）、次にどんな人がどんな思いを持ってどんな環境で働いているのかを知ってから、より具体的な採用情報とアクション（エントリー）を表示することで、TSUTSUMUの世界観に共感した人のエントリーを促します。

◾️制作を通して学んだこと

◎LP制作の流れ

要件書を元にワイヤーフレーム作成、デザインカンプ作成、レスポンシブ対応を含むコーディング、そしてサーバーアップまですべての作業を行うことで、LP制作の流れを掴むことができました。

◎ワイヤーフレームの作成と情報設計の再考

ワイヤーフレームに関しては、自分で良しと思って1から作り上げたものを改めて推敲し直すという作業が思いの外難しく、思考が固まらないよう時間を置いて何度も見直す必要があると思いました。

◎コーディングの流れ

基本的なコーディング（HTML、CSS）の方法を習得することができました。また、サイト作成の場合はコーディングを見越したデザインカンプ作成と丁寧なマークアップ作業をすることで、最終的なコーディングがスムーズになることを学びました。