【課題】採用サイトLP(デザインカンプ~実装)
SHElikes MULTI CREATOR COURSE の課題で、ベビー用品事業等を行う企業の採用サイトの制作に取組みました。クライアントからの要件書を元に、PCとSPのデザインカンプを制作し実装を行いました。
【目次】
1:制作物
2:要件定義
3:ペルソナとユーザーストーリー
4:工夫した点
5:制作を通して学んだこと
1:制作物
◇デザインカンプ
◇実際のサイト
2:要件定義
ワイヤーフレーム〜デザインカンプ〜コーディング〜レスポンシブ対応〜サーバーアップまで、WEBデザインに必要なフローに一通り取り組む。
◇クライアント:TSUTSUMU株式会社
ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業や家族みんなが幸せになるフォトブック事業などを展開している。軸はベビー用品だが、今後、ママ・パパ、家族向けのサービスも展開していく予定をしている。
◇ターゲット
・転職希望の人
・報酬面よりもTSUTSUMUの世界観に強く共感してくれる人
・各職種ともに経験の有無よりは、カルチャーフィットしている人を重視
◇目的
LPを通してエントリーをしてもらうこと。
※カルチャーフィットする方に応募してもらいたい。
◇必要要素
・キービジュアル(家族の写真やママが子どもに寄り添う写真)
・私たちについて
・働く環境
・事業について
・募集職種
・メンバー紹介
・エントリー
・フッター
・ロゴ(提供)
3:ペルソナとユーザーストーリー
◇ペルソナ
◇ユーザーストーリー
○ファーストビュー:TSUTSUMU株式会社の社風とコンセプトを表す写真で興味を持ってもらい、画面をスクロールしてもらう。
○わたしたちについて:会社のミッションを伝え、関心を持ってもらう。
○事業内容:どんなことをしている会社なのか理解してもらう。
○働く環境:実際にどんな働き方ができるのか知ってもらう。
○あるTSUTSUMU社員のいちにち:社員のリアルな1日を知ることで、自分だったらどんな働き方ができるのか想像し、より自分ごとに感じてもらう。
○募集職種:募集職種の中から選択してもらう。
○メンバー紹介:メンバーからのメッセージで、応募の後押し!
○応募する:アクション!
4:工夫した点
◇配色
あかるく・まあるく・やさしく。
ベースカラーは、やさしくつつみこむホワイトと淡いグレー。
メインカラーは、あかるくやさしく照らすペールイエロー。
アクセントカラーは木漏れ日を連想させるようなグリーンで、自然のやさしさにつつまれ成長していく会社と人材を表しています。
◇フォント
ロゴのイメージにあうように、日本語はNoto Sans JP、英数字はM PLUS 1pを選びました。
2つとも、TSUTSUMUの世界観にあわせたやわらかくまるみのあるフォントを意識しました。
◇こだわりポイント
企業の採用サイトではあるのですが、ペルソナもそうでない方も、このLPページに訪れた方みなさんがあたたかな気持ちになり、おなかの底からあたたかなパワーがあふれてくるような光に満ちたLPにしました。
求められている人物像、採用に必要な事業内容、募集職種など、会社が伝えたいことや、応募者の方が知りたいことを、やさしい黄色をメインカラーに使いました。
明るくあたたかく、まるみをおびたあしらいを使うことで、やさしさでつつむように表現し、カルチャーフィットする人材にアピールしました。
5:制作を通して学んだこと
ひとことで言うと、コーディングです!
デザインカンプ制作は2回目の取り組みだったので、工程に余裕があり、楽しんでこだわってデザインをしたのですが、いざコーディング実装となると、わたしの技術では可能なくあきらめたデザインもあり、デザインする際にコーディングのことを考えてデザインすると、個人での仕事の際だけでなく、チームで仕事をする際にも活かされると思いました。
「ペルソナ設定→情報設計→デザイン制作→コーディング→サーバーアップ」という一連の流れを扱うことで、ほんとうにたくさんの学びがあった課題でした!