【実践課題】採用サイトLP制作(情報設計〜コーディング)

OVERVIEW

SHElikes MULTI CREATOR COURSEにて、ベビー用品事業等を行う企業の採用サイトの制作に取組みました。クライアントからの要件書を元に、PCとSPのデザインカンプを制作し実装を行いました。

制作ツール:Photoshop ・ VScode

制作範囲:情報設計・ワイヤーフレーム・デザインカンプ・コーディング(レスポンシブ対応)

制作期間:約5週間(デザイン2週間、コーディング3週間)


【目次】

1. 制作物

2. 要件定義

3. 工夫した点(情報設計)

4. 工夫した点(ビジュアルデザイン)

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


1. 制作物

完成したサイトはこちら

※ 実際の動きを動画に収録いたしました(モニターサイズは14インチです)。



2. 要件定義


3. 工夫した点(情報設計)

■ ターゲットやペルソナを踏まえ、サイトの世界観を考える

TSUTSUMUの企業理念を、分かりやすく伝える

ロゴの隣に「Recruit」の文字を配置したり、ヘッダーにエントリーボタンを配置することで、採用サイトであることをアピールしました。

クライアントは、カルチャーフィットする人材を優先的に求めているため、まずユーザーに分かりやすくTSUTSUMUの世界観を伝えることが重要であると考えました。「私たちについて」「事業について」のセクションを前方に配置することで、ユーザーに対してTSUTSUMUの企業理念、その企業理念からどのような事業を行なっているのかを明確に伝え、その上で読み進めてもらえるように工夫しました。


実際に働いているスタッフの写真を多く使用する

現場の写真がたくさんあることで、ユーザーに安心感が生まれるとともに、実際に働いた時のイメージがつきやすくなると考えました。TSUTSUMUの世界観に共感するユーザーは、子育てを経験している人が少なくないと思うので、働きやすそうな職場かどうか雰囲気で伝えることも大切だと思いました。

4. 工夫した点(ビジュアルデザイン)

テーマは「優しさとあたたかさ」

TSUTSUMU株式会社が目指す「世代を超えて優しく幸せに暮らせるような世界」に共感し、自分もこの世界で一人でも多くの家族を幸せにしたいと考えるきっかけになるようなサイトを目指しました。また、自分自身の幸せや未来についても思い描いてもらえるよう、ポジティブな印象にしました。


丸みのあるフォントや装飾

TSUTSUMUの世界観を表現するために、配色はピンクを基調とし、丸みのあるフォントや装飾を使用することで柔らかさや温かさを表現しました。

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

デザインについては、採用ページの作成ということで主に仕事内容についてのセクションが多くなるのかと思いましたが、サイトを参考にしていると、仕事内容もそうですが、実際に働いている職員の紹介や、インタビュー形式で会社のやりがいなどについて掲載しているものが多く、求職者の共感性に訴えかけることを大切にしていると感じました。