企業の目指す未来（ビジョン）を直感的に理解する
ベビー用品会社採用サイトLP制作
オンラインスクール「SHElikes」PROデザイナーコースの課題として、ベビー用品事業を取り扱う「TSUTSUMU株式会社」の採用サイトを制作しました。
- 制作時期
- 2026年7月
- 制作期間
- デザイン：1週間／コーディング：2週間
- 使用ツール
- Figma／Photoshop／Illustrator
- 使用言語・ライブラリ
- HTML／CSS／jQuery
- 担当範囲
- ペルソナ設計／ムードボード作成／ワイヤーフレーム／デザイン／コーディング（レスポンシブ対応）／サーバーアップ
目次
制作物
課題要件
要件書
| 目的 |
|
|---|---|
| クライアント情報 |
クライアント名：TSUTSUMU 株式会社 ※架空の企業
|
| ターゲット |
|
| トンマナ | 明確なブランドトンマナがまだ決まっていないので、事業内容にあうトンマナを自由に提案して欲しい |
| 入れたい要素 | TSUTSUMUのロゴ（カラーのみ変更可能） |
情報設計
要件を元に考案したペルソナ
| 基本プロフィール |
|
|---|---|
| ライフスタイル・価値観 |
|
| 背景・課題 |
|
| ペルソナに届けたい価値 |
|
情報設計
メインビジュアル
私たちについて
ビジョンを深く理解し、その先を読み進めたくなる
事業について
「赤ちゃん」「家族」に関する会社であることがつかめる
働く環境
自分のライフプランとも照らし合わせながら働き方のビジョンを描ける
メンバー紹介
実際の社員のストーリーを知り、雰囲気や具体的な働き方を考えられる
募集職種
事業に対する自分の関わり方を決め実際のエントリーに繋げる
エントリーフォーム
実際の行動に起こす
デザインコンセプト
転職を検討している男女問わず幅広い求職者をターゲットに設定しています。
メインカラーには、性別を問わず親しみやすい「水色」を採用し、採用サイトに必要な「信頼感」「誠実さ」「清潔感」を表現。 アクセントカラーの「黄色」では、「温もり」「家族」「優しさ」を表現しています。
企業の誠実な姿勢を伝えつつ、家族やプライベートな時間を大切にしながら働くことができる、温かみが感じられるビジュアル設計を目指しました。
デザインの工夫
募集職種・エントリーボタンの常時追従
- 設定した仮説： 採用サイトを訪れるユーザーは、すでに企業や仕事内容に対して一定の関心や高い志望度を持っていると想定しました。
- デザインの工夫点： ページを読み進める中で「どんな職種があるのだろう？」と気になった際、スクロールの手間なくいつでも情報を確認し、そのままエントリーへ進めるようサイド追従型の導線を配置しました。
- UI/UXの狙い： 企業のカルチャーをじっくり読んでもらうことの重要性も考慮しつつ、ユーザーの「知りたい」「応募したい」という熱量やタイミングを逃さない、ストレスフリーな導線設計を目指しました。
セクションごとの配色切り替えとあしらいの統一感
- 背景と配色設計： テキストの読みやすさを最優先に考えたシンプルな単色背景を採用しつつ、情報の関連性に合わせてセクションごとに異なる水玉のあしらいを取り入れてメリハリを持たせました。
- 世界観をつなぐ演出： 最後のメッセージセクションに配置した赤ちゃんとぬいぐるみの写真内にもシャボン玉を取り入れ、背景のあしらいとリンクさせることで、サイト全体に一体感を持たせました。
- デザインの狙い： 単なる装飾にとどまらず、細部のモチーフにストーリー性を持たせることで、サイトのコンセプトや温かみのある世界観を自然に印象づける設計にしました。
コーディングの工夫
Intersection Observerを活用した「グループ別スクロールアニメーション」
- 見た目の向上： 各セクション内の要素がスクロールに合わせて「ふわっ」と上品に表示されるよう、JavaScriptの IntersectionObserver を用いて実装しました。
- データ構造によるコードのすっきり化（保守性の向上）： アニメーションさせたい対象の要素をセクションごとに fadeGroups という配列オブジェクトとして一元管理しています。これにより、要素が増減したりセレクタを変更したりする場合でも、コードをあちこち書き換える必要がなくなり、メンテナンス性が大きく向上しました。
- パフォーマンスへの配慮： スクロールイベント（scroll イベント）のたびに位置を計算するのではなく、IntersectionObserver を利用しているため、ブラウザへの負荷（カクつきなど）を抑えたスムーズな動作を実現しています。
重要メッセージの差別化アニメーション
- 視覚的な演出の工夫： サイトの核となるメインメッセージや最後のエントリーセクションには、他のコンテンツとは異なる「1文字ずつ出現するアニメーション」を採用しました。
- 効果的な視線誘導： サイト全体に動きのメリハリを持たせることで、ユーザーに一番印象付けたい情報へ自然に注意を惹きつけるような、細部の演出にこだわりました。
本課題で学んだこと
逆算したスケジューリングの重要性
- 企画・デザインから、コーディング、サーバーアップ（デプロイ）までの全工程を一人で担当したことで、プロジェクト全体を見通したスケジュール管理の重要性を深く学びました。
- 各工程の期限を明確に逆算して設定したことにより、スケジュールに追われるのではなく、余裕を持って品質のブラッシュアップや最終確認を行うことができました。
デザイン段階における余白やルールの体系化
- デザインを正確かつ効率的にコーディングに落とし込むためには、デザインカンプ作成の段階から余白のルール（マージンやパディングの数値設計）を緻密に詰めておく必要があると痛感しました。
- 事前に構造や数値を整理しておくことが、手戻りの防止やコードの美しさ、デザインの一貫性（クオリティの担保）に直結することを学びました。
マルチデバイス（レスポンシブ）を前提としたUI/UX設計
- PCとスマートフォン（SP）それぞれのデバイス特性やユーザーの視線の動きを考慮したデザイン・コーディングを実践しました。
- 単に画面幅に合わせてレイアウトを縮小するのではなく、「それぞれのデバイスでいかに視認性・操作性を高めるか」という視点を持つことの重要性を、実際の制作を通して深く実感しました。