【自主制作】ベビー事業を運営する会社のLP採用サイト
SHElikes PROデザイナーでの実践課題です。 ベビー事業を運営する会社を題材にした『TSUTSUMU』の採用サイトを制作しました。
【使用ツール】photoshop、figma、Visual Studio Code
【制作期間】約１ヶ月
（ワイヤーフレーム制作：１週間、デザインカンプ：２週間、実装：１週間）
【作成範囲】ワイヤーフレーム作成～実装まで
📍目次
・制作物
・課題要件、ペルソナ
・情報設計
・デザインコンセプト
・デザインの工夫
・本学習で学んだこと
📝制作物
こちらからご確認いただけます
📝課題要件
◆お題
・【クライアント名】株式会社TSUTSUMU
・ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業や家族みんなが幸せになるフォトブック事業などを展開している。
・軸はベビー用品だが、今後ママ・パパ、家族向けのサービスも展開していく予定をしている。
◆目的
採用サイトからエントリーをしてもらうこと
（採用強化のためできるだけたくさんの応募がきて欲しいが、エントリーがあれば誰でもいいわけではなく、カルチャーフィットする方に応募してもらいたい）
◆ターゲット
転職希望の方（性別問わず）
報酬面よりもTSUTSUMUが作っていきたい世界に強く共感してくださる方
各職種において全くの未経験よりは経験を重視したいが、それよりもカルチャーフィットしている人がターゲット
◆トンマナ要望
・明確なブランドトンマナがまだ決まっていないため、事業内容にあうトンマナを自由に提案希望
◆入れたい要素
・「TSUTSUMU」のロゴ
◆ペルソナ
上記の要件を基に、ペルソナを考えました。
📝情報設計
以下、課題要件を基に設定・考察しました。
〈コンセプト・テーマ〉
- 「キャリアチェンジ」「家族支援・愛」
- キャリアチェンジや赤ちゃん関係事業に興味がある、自身の経験を活かして働きたい方など男女問わず応募してほしい
可愛らしさや女性っぽさというよりは、「ソフト」「ナチュラル」「中立的」「エネルギッシュ」を想起させるデザインに落とし込んだ。
〈ユーザーストーリー〉
メインビジュアルでは赤ちゃんの写真を使い世界観を伝え、わたしたちについて→事業内容→働く環境と続けることで実際に働いた時のイメージを具体化させていく。最後にメンバー紹介をすることで、現業の社員の顔や雰囲気を伝え、エントリーへの熱量を高めてコンバージョン率を増加させるよう組み立てた。
〈構成〉
１ ファーストビュー
２ わたしたちについて
３ 事業内容
４ 働く環境
５ 募集職種
６メンバー紹介
７ エントリー（CTA）
📝ビジュアル設計
〈デザインコンセプト〉
- ホワイト・ベージュ系をベースカラー、グリーン系をメインカラーとして制作いたしました。
- フォントは一般的によく用いられる｢NotoSandsJP｣を主に使用。
→採用サイトのため、個性的にせずフォーマルな印象を与えたい。
〈デザインの工夫〉
- FV：キービジュアルは、｢家族で幸せそう｣｢赤ちゃん用品を扱う｣ということを直観的に伝わるよう選定しました。
- FV：ナビゲーションは直観的に操作できるように、日本語で表記しました。
全体的にやわらかい印象を与えられるよう、使用する図形は角丸を使用する、ベースカラーはホワイトにするなどして表現しています。
見出しアイコン：メインカラーであるグリーンを基調として、メリハリがつくよう作成しました。
各セクション：写真を多用することで、ユーザーが「実際に働いたとき」を直感的に想像しやすいよう配置しました。
募集職種：５つの職種をカード化し、ハッシュタグで向いている素質を整理して配置しました。
📝課題を通して学んだこと
・今回は要件定義設定からペルソナ分析も自身で行い、ワイヤーフレームも０から作成しました。最初の要件定義をしっかり行った上で情報設計に落とし込むことで、「採用サイトとしてエントリーに繋げる」という芯を持って制作することができたと感じています。要件定義の重要性を実感した課題でした。
・コーディング時マークアップをしたことで、部品を分解するようにサイトの要素も分解されてわかりやすくなりました。最初は慣れず時間がかかった作業でしたが、だんだんと「どの要素をまとめるとデザインカンプ通りになるか」が見えてくるようになり、慣れると作業時間の短縮にも繋がりました。