【課題】LPデザイン&コーディング

OVERVIEW

SHElikes MULTI CREATOR COURSEにて中途採用サイトのLP制作課題に取り組みました。PC版とSP版デザインカンプの制作、コーディング、レスポンシブ対応、サーバアップまで行いました。 ◼️制作日数:約5週間

YEAR 2024



【目次】


1. 制作物
2.ユーザーストーリー
3. 要件
4. 要件をもとに考えたペルソナ
5. LPの中でアピールしたいこと
6. イメージボードと配色
7. 工夫したところ
8. 制作を通して学んだこと


1. 制作物

    |サイトへのリンクはこちら


2.ユーザーストーリー

01.働きたいけど子供優先で働けるところないかな?

02.TSUTSUMUってなんだろう?採用サイトみたい!

03.表紙みたいに働きながらも赤ちゃんと楽しく過ごせるような生活ができるのかな?

04.コンセプトが世界を優しさでつつむか。素敵だな!

05.事業内容もたくさんの家族を幸せにしていけそうで素敵だな〜

06.フレックスなら子供に何かあった時すぐに駆けつけられる。

   託児所に預けられたら安心して仕事に打ち込めそうだな。

   リモートワークならずっと子供のこと見てられるしとっても安心!

07.働いている方達もとっても優しそう!ここで働いてみたいな!

08.前職に引き続きデザイナーとして働きたいな!

09.書類選考と面接が2回か!ポートフォリオも提出なんだ!

10.エントリーしてみよ!

11.面接前にもっと会社について知りたいな!インスタやホームページもみてみよ!


3. 要件

|クライアント情報
クライアント名:TSUTSUMU 株式会社

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

|クライアントの要望
採用強化のため、採用サイトを作成することになった。
LPを通してたくさんの人にエントリーをしてもらいたい。

|ターゲット
・転職希望の方
・報酬面よりもTSUTSUMUが作っていきたい世界に強く共感してくださる方
・各職種において全くの未経験よりは経験を重視したいが、
 それよりもカルチャーフィットしている人がターゲット

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

|トンマナ
明確なブランドトンマナがまだ決まっていないので、
事業内容にあうトンマナを自由に提案する
ロゴ支給あり

4. 要件をもとに考えたペルソナ

|基本情報 
林 愛佳(27)夫と2歳の娘の3人暮らし

IT企業 デザイナー

|背景や行動
これまでの職場では、子供の発熱などやむを得ない理由で仕事を休み、居心地の悪さや、仕事にもの足りなさを感じている様子を見てきた。

家族が大切だが、仕事も情熱を持って取り組みたいと考えている。

|ニーズやゴール
女性のライフステージの変化を受け止め、子供の有無に関わらず、堂々と働けるような 職場で働きたいと考えている。


5. LPの中でアピールしたいこと

  • TSUTSUMUがこどもや家庭を大切にする価値観を持ったまま働ける、
    魅力的な会社だと伝えること
  • やさしい世界感に説得力を持たせ、応募者の方に自分もここで働きたい!と思ってもらう


6. イメージボードと配色|配色

<ピンク> 優しさや人の温もり

<ブラウン> 安心感や温もり

赤ちゃんに優しく寄り添うような世界感をイメージしました。

 
7. 工夫したところ

|リボン

・神様からのプレゼント=赤ちゃん

・人と人を結ぶ、絆や約束

 をイメージしています🎀


|シャボン玉

・すぐに割れてしまう(儚く脆い=赤ちゃん)を大切に優しく包み込むイメージです🫧


|青い鳥/花

<青い鳥の印象>

幸運を運ぶ🍀

<花の印象>

リラックスや温かく優しい🌸

→温かい仲間と心に余裕を持ちながら楽しくお仕事ができる職場を連想させている。

写真ではなくイラストにすることで赤ちゃんが連想できるようにしました。


8.制作を通して学んだこと

SHElikesのWebデザインコースの動画の復習を繰り返し、分からないことはWebで検索、をして学習を進めました。
・3カラムのレイアウトの作り方
・javascriptで動きをつける(自動スライド、スクロールするとフワッと表示)
・レスポンシブ対応
・サーバアップ

コーディングの事を考えながらデザインカンプを作成しないと、コーディング時に変更することになり、想定より時間がかかってしまうため、デザイン還付の作成は丁寧に考えながら行うことが大切だと学びました。



WEBSITE