【課題】LP制作(デザイン/コーディング)

制作したサイトはこちら　> 

|　制作したデザインカンプ

|　クライアント情報

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

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

|　要件

■目的：LPを通してエントリーをしてもらうこと（採用強化のためできるだけたくさんの応募が来てほしいが、エントリーがあれば誰でもいいわけではなく、カルチャーフィットする方に応募してもらいたい）

■ターゲット：

　・転職希望の方

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

　・各職種において全くの未経験よりは経験を重視したいが、それよりもカルチャーフィットしている人がターゲット

■トーン&マナー：

　・明確なブランドトンマナがまだ決まっていないので、事業に合うトンマナを自由に提案してほしい

|　ペルソナ

クライアント側で未設定だったため、要件をもとに自主作成しました。

|　工夫したこと

■配色

人肌をイメージさせるピンクベージュで、「優しさ」「包容力」「ぬくもり」「安心感」を表現。

可読性はありながらも刺激的な色を避けるため、アクセントカラーをライトブラウンにしました。

■世界観を表現したアニメーション

「世界をやさしさでつつむ」という企業コンセプトに合わせて、ふわふわした球体を背景に設置。呼吸をするように収縮するアニメーションを加えることで、赤ちゃんがお母さんの腕に包まれて鼓動を感じるような安心感を表現しました。

※アニメーションはサイト上でご確認ください。

制作したサイトはこちら　>

■ユーザーストーリーからワイヤーフレーム設計

①転職検索サイトで「TSUTSUMU」の求人を見て、採用サイトに訪れる

※写真はイメージです

▼

②セクション：ファーストビュー&コンセプト

「優しさ」や「赤ちゃん」「家族」を大切にしている印象を持つ。

▼

③セクション：事業について

「ベビー用品以外にもフォトブックやコミュニティなどの事業もあるんだ！フォトブック、1歳の時に作ったな、ママのコミュニティってなんだか楽しそうだな。」と自分ゴト化しながら事業に興味を持つ。

本文を読まずとも視覚情報でパッとわかるように、事業のイメージ画像を入れる。

▼

④セクション：働く環境

ペルソナが現状不満に思っている制度の部分をここで解消。

「子供がいたり、さまざまな制約がいる人でも、働けるシステムがあるんだな」と知る。

「託児所があるということは、同世代のママも多いのかな？」と親近感を持つ。

▼

⑤セクション：メンバー紹介

メンバーの写真＋ポジションだけではなく、事業に携わる想いを一文入れることで、どんな理念を持っている人たちが働いているのか臨場感を持って知る。

▼

⑥セクション：募集要項

「今の自分の不満が解消されそう（子供がいることで働く上で制限がある）」

「子供がいるからこそ、いちママという視点でも、この優しい雰囲気や実現したい世界観に共感だな」という心理状態で募集業種を見る。

そして、自身の経験が活かせそうな職種を発見する。

▼

⑦セクション：採用の流れ〜エントリー

応募職種の詳細を見た後に、採用の段階を見て応募後のフローを確認。

エントリーボタンをクリックする。

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

Web制作の一連の流れを実践を通して学びました。

クライアントの要件と、Webサイトの必要情報だけの状態から、①ペルソナの設定②ワイヤーフレーム制作③デザインカンプ制作④コーディング（HTML /CSS/JS）⑤レスポンシブ対応⑥サーバーアップを一貫して行いました。

これにより、コーディングやスマホ対応を考えたうえでワイヤーフレームやデザインカンプを制作できるようになりました。