架空ベビー用品事業の採用サイト（デザイン・コーディング）

01. 制作時間・使用ツール 

合計 80時間

内訳）情報設計：10h、デザイン制作：26h、コーディング：44h 

使用ツール）Photoshop / HTML / CSS /  jQuery

＜ Webサイト＞

TSUTSUMU RECRUIT SITE

02.制作物

03.クライアント概要・要件整理

クライアント

TSUTSUMU

事業内容

ベビー用品を中心に、フォトブック事業・育児サポートコミュニティ事業を展開。今後はパパママ向けの新規事業も予定。

制作依頼内容

ベビー用品事業を軸とした企業の「採用サイト制作」。

ターゲット

• 企業理念やビジョンに共感できる方

• 多様な働き方を求め、自分らしく働ける環境を探している方

• 長期的なキャリア形成を考える転職希望の方

目的

• 企業の想いや社風を理解し、TSUTSUMU の価値観に共感・カルチャーフィットする人材の応募へつなげる

• 「会社のビジョンに共感し、長く働きたい」と思える求職者に魅力が伝わる構成

• エントリーまでの導線をシンプルにし、応募行動につながりやすくする

• 企業の価値観や雰囲気が伝わり、応募のハードルを下げる採用サイトにしたい

ゴール

TSUTSUMU のビジョンやプロダクトに共感し、カルチャーフィットできる人材からの応募数を増やすこと。

04. 情報設計

クライアントから提示された要件やターゲット像をもとに、企業理念や働く環境に共感し、長期的なキャリア形成を望む求職者像をペルソナとして具体化しました。
その上で、応募までの心理的ハードルやサイト上で求められる情報を整理し、ペルソナの行動や感情の流れをユーザーストーリーとして設計。
整理した内容をワイヤーフレームに落とし込み、採用サイトに必要な構成と導線を明確にしています。

05.  ムードボード・スタイルガイド

日常でふと心が動く "小さなやさしさ" を表現軸に、白を基調としたシンプルなデザインで男女問わず受け入れやすいトーンに。働く人の雰囲気や、企業の誠実な空気感が伝わる構成を意識しました。

06. デザインポイント

サイト全体のデザイン方針

サイトの全体感は、シンプルさをベースにしつつ、ベビー用品を扱う会社ならではの“遊び心”を意識しています。採用サイトとしての間口を広げるため、甘くなりすぎない信頼性のある水色をアクセントカラーに起用しています。

• クレヨンのような手書きのあしらいを取り入れる
• やさしくて、少し温度を感じる世界観
• 男女問わず共感できる中性的トーン

ファーストビュー・メインビジュアル

• ファーストビューは、第一印象で会社の雰囲気を伝えることを一番大切にしました。
• やさしさや安心感を表現するために、楕円のモチーフがふわふわ浮いているようなモーションをつけています。
• スクロールしたときに、コンテンツがふわっと浮かび上がるような動きを入れ、サイト全体にやわらかい印象を持ってもらえるようにしました。
• CTAボタンは追従することで、いつでもエントリーできるように。
• キャッチコピーを子供が書いたようなフォントを使用することで、ベビー用品を取り扱う企業の遊び心とやさしさを表現しています。

メインビジュアル内の写真の意図

• 楕円の中でスライドする写真には、 赤ちゃんが安心して眠っている様子や、
   家族や社員さんの笑顔、 誠実につくられているプロダクトの写真をセレクト。

理由：「この会社が何を大切にしているのか」を言葉より先にビジュアルで感じてもらいたかったからです。

メンバー紹介

• 単なるプロフィール紹介ではなく、 読み手が 「自分がここで働いたら、この人がロールモデルになりそう」 と感じられる構成を目指しました。
• 働く環境で使用したアイコンを共通で使ったり、「時短勤務」「中途採用」などのタグを入れることで、読み手が自分を投影しやすい情報設計にしています。
• 手書きのあしらいを随所に入れたり、余白をつけて、サイト全体の世界観が崩れないよう意識しています。

08. 学び

今回の制作では、コーディングを通して、余白の扱い方やレスポンシブ調整の難しさと面白さを実感しました。思い通りに再現できない場面も多く、その都度検証と修正を重ねながらレイアウトを整えていくプロセス自体が、大きな経験値になったと感じています。

また、採用サイトにありがちな“硬い印象”を避けつつ、企業の価値観や温度感が自然に伝わる情緒的なデザインにも挑戦しました。ブランドが持つ空気感をどのように視覚化するかを探る中で、価値観をデザインへ落とし込む構成力が鍛えられたと思います。

さらに、各セクションが「なぜ必要なのか」「どんな役割を持っているのか」といった“意図”を意識して構築する重要性にも気づきました。要素の背景まで踏み込んで考えることで、全体の説得力やデザインの一貫性がより強くなることを実感しています。