【TSUTSUMU株式会社】 ベビー用品会社 採用サイト

OVERVIEW

スクールの課題にて制作しました。(自主制作)

YEAR 2025

制作情報
制作時期:2025.12
制作ツール:Figma
制作時間:40時間(デザイン4時間、設計20時間 / コーディング16時間)
制作範囲:用件定義、ワイヤーフレーム、ビジュアルデザイン、実装


サイトの目的
採用サイトを通してエントリーをしてもらうこと


課題
課題①:会社の想いや世界観が、伝わらない

課題②:「共感軸」での応募動線が弱い
           (どんな人が働いているのか、自分が働くイメージがわかない)

工夫した点
本サイトでは、条件訴求ではなく価値観への共感を起点に応募が生まれる設計を行いました。
色・フォント・写真などの世界観を統一し、企業の「やさしさ」「誠実さ」が直感的に伝わるデザインにしています。
また、理念や想いを先に伝える構成とし、読み進める中で「自分はこのカルチャーに合うか」を自然に判断できる情報設計を意識しました。
CTAも強い煽りは避け、共感した人が安心して一歩踏み出せる表現にしています。


学んだこと
CTAボタンの配置やホバー仕様など、ユーザー目線で工夫できるUI設計の重要性を学んだ。
また、サイトの仕組みを理解することで、次回以降のデザインに活かせる視点を得た。


実際のサイトはこちら


目次
1. 作成したデザインカンプ
2. 制作過程
3. ムードボード
4. スタイルガイド
5. デザインの工夫(全体)
6. セクションごとのデザインの工夫


1. 作成したデザインカンプ


2. 制作過程




作成した実際のスプレッドシートはこちら



3. ムードボード


4. スタイルガイド


5. デザインの工夫(全体)

カラーについて
1)「多様な働き方がある」ことを表すため、メインカラーに沢山のカラーを使用
2)「親しみ」を表現するために優しい印象のあるベージュをベースカラーに使用、背景にぼかしをいれている

タイポグラフィについて
1)TSUTSUMUの優しい世界観を表現するため、女性らしい印象を与える丸みのあるフォント「Zen Maru Gothic」を使用

使用図形について
1)「親しみ」、「優しさ」を表現するために柔らかい印象のある角丸や円図形を使用

写真・アイコンについて
1)「親しみ」「家族」「優しさ」を表現するため、家族の写真・笑顔の写真を多く使用
2)アイコンを使用することで視覚的に内容がわかるようにしている

CTAについて
グラデーションにすることで、「立体感」を出し目立たせるよう工夫した。


6. セクションごとのデザインの工夫・講師からのフィードバック