【SHElikes PROデザイナーコース実践課題】 採用サイト制作
【実施時期】2025/12月
【制作概要】
・LPワイヤーフレーム（PC/SP）
・LPデザインカンプ（PC/SP）
・コーディング
・サーバーアップ
【制作期間】5週間
【使用ツール】Figma・VScode
【使用言語】HTML・CSS・Java Script目次
制作物
課題要件
→上記の要件より、企業ブランドイメージを保ちつつも、性別を問わず幅広い人材に向けて働く意義や職場環境が伝わる設計が重要なため、このように設計しました。
ペルソナ
※ペルソナは、課題で提供された要件より自分で設定しました。
情報設計
「共感」から「応募」への動線を論理的に構築
カルチャーマッチした人材が、納得感を持って「ENTRY」ボタンを押せるよう、情報の優先順位と構成を徹底的に検討しました。
・コンテンツの追加：企業の透明性を高めるため、最新の取り組みを伝える「NEWS」や、応募から入社までの流れを明確にする「FLOW（選考フロー）」セクションを追加しました。
・戦略的な配置：TSUTSUMUのビジョンへの「共感」直後に、働く環境や、メンバー紹介、募集職種とTSUTSUMUの理解を深められる配置にすることで、熱量を維持したままCTAへ繋げる情報構成にこだわりました。
デザインコンセプト
TSUTSUMUが掲げる「世界をやさしさでつつむ」というビジョンを、直感的に伝える世界観を構築しました。
キーワード：「やさしさ」「幸せで包み込む」「ぬくもり」「家族との時間」
タイポグラフィ：和文には「Zen Maru Gothic」を採用し、ふんわりとしたやさしさを表現。見出しの英字には「Montserrat」を使用し、採用サイトらしい信頼感と先進的な雰囲気を加えました。
配色・あしらい：「世界をやさしさでつつむ」というコンセプトに合うよう、包み込むようなやわらかさを感じさせるピンク/オレンジ系の配色やあしらいを取り入れ、サイト全体で「TSUTSUMUらしさ」を意識しました。
スタイルガイド
ムードボード
レスポンシブ(FV)
デバイスごとの最適化を目指し、SP版では「迷わせない操作性」を追求しました。メニューをハンバーガーメニューに変更し画面を広く確保しつつ、CVを逃さないよう下部にもCTAを設置しました。
また、長いページでもストレスなく回遊できるよう、CTAのすぐそばに追従型のTOPへ戻るボタンを配置。指一本でスムーズに操作できる設計にこだわりました。
ホバー
あしらい
ブランケットをイメージした波状の境界線や、温かみのある水玉・ハートのモチーフを採用 。配色から細部のあしらいまで徹底して「TSUTSUMU」の世界観に一貫性を持たせ、ターゲット層への心理的共感を生むデザインを目指しました 。
課題を通して学んだこと
実装効率と保守性を両立させるコンポーネント設計
Figmaでのデザイン段階から、実装時の効率を意識したコンポーネントやインスタンスの活用を徹底した。本課題を通じ、単なる見た目の制作に留まらず、レスポンシブ展開や修正作業に強い「破綻しないデザインデータ」を構築するスキルの重要性を学べた。
ユーザー体験(UX)を深めるインタラクションの実装
デザインをコーディングする際、ブランドの世界観を保つためのアニメーション実装を意識した。スクロールに応じた挙動やホバー時の変化など、「生きたサイト」になるよう意識し、ユーザーの共感を高める演出と実装技術を習得。
全工程のプロジェクト俯瞰力と工程管理
情報設計→デザイン制作→コーディング→サーバーアップまでの全工程を一人で完結させたことで、デザインが後のコーディングにどう影響するかという「後工程への配慮」が身についた。また実案件を想定し、全体のスケジュールを逆算して管理できた。