【課題制作】TSUTSUMU採用サイト

WEBサイト

完成URL : https://tsutsumu-test.babymilk.jp/test-5/

デザインカンプ

制作時間・制作ツール

制作期間：1ヶ月

ワイヤーフレーム：5日間

デザインカンプ：10日間

コーディング：2週間

制作ツール：Photoshop（デザイン）、Visual Studio Code（コーディング）

課題要件

ペルソナ

ユーザーストーリー

ワイヤーフレーム

◼️構築したPC/SPのWF：提案追加したセクション

ムードボード

「やさしさに包まれた世界観を、働く人にも広げていく採用サイト」

赤ちゃんや家族の暮らしを大切にしてきたTSUTSUMUの想いを、そのまま“働く環境”にも重ね合わせたコンセプトです。やわらかく誠実な価値観に共感し、自分の人生や家族との時間も大切にしながら働きたい──そんな人が自然と惹かれるような、あたたかく安心感のある世界観を目指しました。

「あたたかさ × 自然体× 誠実さ」

応募者が“ここでなら自分らしく働けそう” と感じられる心地よさを意識したテーマです。過度な飾りを排し、ゆったりとした余白や穏やかな色調で、TSUTSUMUの本質である「やさしさ」「家族へのまなざし」「誠実なものづくり」を視覚的に表現しています。

スタイルガイド

ビジュアルデザインのこだわり

工夫したこと

今回の要件では、事業は【家族や子供】に対してのサービス事業でしたが、ターゲットはあくまでも求職者である【大人】。そのため、柔らかで暖かな雰囲気をサイト上でも残しつつ、採用ページであることの統一感や洗練されたイメージを担保するように意識しました。

コーディングでは、スライダーやアコーディオンの動きをつけて、間延びしないような仕組みを入れました。また、ホバーをする際に動きがでるようにあえて画像のサイズを変更（採用情報箇所）SPではサイズを調整するレスポンシブ対応だけでなく、小さな画面だからこそのインパクトを残せるような調整を意識しました。（仕事を知る/働き方を知る箇所）

課題を通して学んだこと

コーディングの経験を経て、雰囲気や見た目を重視したデザインではなく、実現可能かをしっかりと意識しつつ、ユーザーストーリーに寄り添う設計をすることの大切さ、難しさを実感しました。様々なサイトを参考にこういった動きをコーディングで実装できたらなとデザインを進めていましたが、実際にコーディングしていくと小さな余白の調整ですら理解して進めることが難しく、調べてはコードを書き直しの繰り返しでした。そのおかげか、しっかりと不明点を言語化して自分で回答を見つけることに対して大きな成長があったと感じます。