【自主制作】架空ベビー用品会社の採用サイト(LP)

【制作概要】
・LPワイヤーフレーム（PC/SP）
・LPデザインカンプ（PC/SP）
・コーディング
・サーバーアップ

【制作期間】5週間
【使用ツール】Figma・VScode
【使用言語】HTML・CSS・Java Script

制作したWebサイトはこちら

＜制作物＞

＜課題要件＞

◾️メインターゲット：
・転職希望の方(性別問わず)
・報酬面よりもTSUTSUMUが作っていきたい世界に強く共感してくださる方
・各職種において全くの未経験よりは経験を重視したいが、それよりもカルチャー
　フィットしている人がターゲット

◾️サイトの目的：
・採用サイトを通してエントリーをしてもらうこと
　(採用強化のためできるだけたくさんの応募がきて欲しいが、エントリーがあれば
　誰でもいいわけではなく、カルチャーフィットする方に応募してもらいたい)

◾️伝えたいこと：
・家族の幸せをつつむ(TSUTSUMU)価値をつくる企業であること

→企業ブランドイメージを保ちつつも、性別を問わず幅広い人材に向けて働く意義や職場　　　　　　環境が伝わる設計が重要

＜ペルソナ＞

＜情報設計＞

「共感」から「応募」への動線を論理的に構築
カルチャーマッチした人材が、納得感を持って「ENTRY」ボタンを押せるよう、情報の優先順位と構成を徹底的に検討しました。
コンテンツの拡張：企業の透明性を高めるため、最新の取り組みを伝える「NEWS」や、入社後のイメージを具体化する「FLOW（選考フロー）」セクションを追加しました。
戦略的な配置：TSUTSUMUのビジョンへの「共感」直後に、働く環境や具体的なステップを配置することで、熱量を維持したままCTAへ繋げる情報構成にこだわりました。

＜デザインコンセプト＞

TSUTSUMUが掲げる「世界をやさしさでつつむ」というビジョンを、直感的に伝える世界観を構築しました。

キーワード：「やさしさ」「幸せで包み込む」「ぬくもり」「家族との時間」

タイポグラフィ：和文には「Zen Maru Gothic」を採用し、ふんわりとしたやさしさを表現。見出しの英字には「Montserrat」を組み合わせ、やさしさの中に企業としての誠実さとモダンな信頼感を共存させています。

配色・あしらい：ブランドカラーを基調に、包み込むような柔らかさを感じさせる配色やあしらいを取り入れ、サイト全体で「TSUTSUMUらしさ」を意識しました。

スタイルガイド：

ムードボード：

レスポンシブ(FV)：

デバイスごとの最適化を目指し、SP版では「迷わせない操作性」を追求しました。メニューをハンバーガーメニューに変更し画面を広く確保しつつ、CVを逃さないよう下部にもCTAを設置しました。
また、長いページでもストレスなく回遊できるよう、CTAのすぐそばに追従型のTOPへ戻るボタンを配置。指一本でスムーズに操作できる設計にこだわりました。

ホバー：

あしらい：

ブランケットをイメージした波状の境界線や、温かみのある水玉・ハートのモチーフを採用 。配色から細部のあしらいまで徹底して「TSUTSUMU」の世界観に一貫性を持たせ、ターゲット層への心理的共感を生むデザインを目指しました 。

＜課題を通して学んだこと＞

実装効率と保守性を両立させるコンポーネント設計
Figmaでのデザイン段階から、実装時の効率を意識したコンポーネントやインスタンスの活用を徹底した。本課題を通じ、単なる見た目の制作に留まらず、レスポンシブ展開や修正作業に強い「破綻しないデザインデータ」を構築するスキルの重要性を学べた。

ユーザー体験(UX)を深めるインタラクションの実装
デザインをコーディングする際、ブランドの世界観を保つためのアニメーション実装を意識した。スクロールに応じた挙動やホバー時の変化など、「生きたサイト」になるよう意識し、ユーザーの共感を高める演出と実装技術を習得。

全工程のプロジェクト俯瞰力と工程管理
情報設計→デザイン制作→コーディング→サーバーアップまでの全工程を一人で完結させたことで、デザインが後のコーディングにどう影響するかという「後工程への配慮」が身についた。また実案件を想定し、全体のスケジュールを逆算して管理できた。