【自主制作】ベビー用品企業採用サイト制作

📝制作情報

使用ツール：Photoshop（ワイヤーフレーム・デザインカンプ）、figma（ムードボード）、VScode（コーディング）

使用言語：HTML・CSS・JavaScrip

作成時期：2025年12月～2026年1月

作成時間：5週間

(情報設計～デザインカンプ制作 約2週間 ＋ コーデイング～サーバーアップ 約3週間)

🗂️目次

・制作物

　Webサイト

　デザインプレビュー

　要件

　ペルソナ

　ページ設計

　デザインコンセプト

　ムードボード

・制作を通して

　工夫したこと

　課題を通して学んだこと

　講師からのFB

🎨制作物

📌Webサイト

📌デザインプレビュー

📌要件

クライアント情報

クライアント名：TSUTSUMU 株式会社

ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業や家族みんなが幸せになるフォトブック事業などを展開している。軸はベビー用品だが、今後ママ・パパ、家族向けのサービスも展開していく予定をしている。  

ターゲット

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

目的

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

（採用強化のためできるだけたくさんの応募がきて欲しいが、エントリーがあれば誰でもいいわけではなく、カルチャーフィットする方に応募してもらいたい）

📌ペルソナ

要件をもとに、子育て中の方や、仕事と生活の両立を大切にしたいと考える求職者を主なターゲットとして想定し、下記のペルソナを設定しました。

📌ページ設計

📌デザインコンセプト

・あかちゃんや家族を大切にする企業の想いが直感的に伝わるように、全体的にやわらかく温かみのあるデザインを意識しています。

・採用サイトであることから、性別やライフスタイルを問わず、不安なくエントリーできるように、わかりやすい導線を心がけました。

・配色は淡い色合いを中心に、安心感や親しみやすさを感じられるトーンでまとめました。

📌ムードボード

💡制作を通して

💭工夫したポイント

①FV

クライアント情報から読み取った「やさしさ」「温もり」「おだやか」「落ち着く」印象を与える写真とキャッチコピーの「世界をやさしさでつつむ」が全面に出るように配置しました。

ヘッダーは「エントリーボタン」と、そこへのハードルが高い方へのスモールステップにあたる「資料請求・お問い合わせボタン」が目立つように、各セクションに飛ぶボタンはハンバーガーメニューの中に格納しました。

②私たちについて

TSUTSUMUのキャッチコピーの「世界をやさしさでつつむ」を想起させるイラストを使用しました。

視覚的に企業イメージを伝えられるように、家族とあかちゃんの写真をスライドショーで自動再生するように設計しました。

③働く環境

働くスタッフの家族との生活を大事にしてもらいたいという企業理念が伝わるよう、温かみのあるイラストを使用しました。

またイラストの世界観を壊さずに重要な要素が伝わるよう、雲の中にキーワードを配置し、やさしい印象を保ちながら情報を整理しています。

④募集職種

チームで仕事をしている様子が伝わるよう、あかちゃんを中心に、職種ごとのアイコンが囲む構成のイラストを配置しました。

それぞれの職種が連携しながら支えていることを視覚的に表現しています。

⑤メンバー紹介

ひとことメッセージを添えることで、現場のスタッフの想いや人柄が伝わり、ユーザーが共感しやすくなるように表現しました。

⑥イラストのテイスト

使用するイラストは、やわらかい印象を与える線画を中心に集めました。なるべく同じようなテイストになるようにしています。

⑦アニメーション

スクロールに応じて要素をフェードイン表示し、視線誘導と読みやすさの向上を意識しました。

またホバー時に、透明度を上げ、矢印が伸びるアニメーションを加えることで、ユーザーにクリック可能であることを視覚的にわかりやすくしています。

▼ボタンのホバー時の様子

💭課題を通して学んだこと

今回の課題では、初めてデザインだけでなく、HTML・CSS・JavaScriptを用いて実装まで行いました。

実際にコードを書くことで、デザインカンプ通りに再現する難しさや、画面サイズによって見え方が変わるレスポンシブ対応の重要性を学びました。

また、エラーが発生した際には開発者ツールを使って原因を確認し、一つずつ修正していくことで、問題解決の考え方や実装への理解を深めることができました。

🌟講師からのFB

● トンマナ、レイアウトについて
企業が伝えたいイメージやLPの目的など、情報設計の段階からよく考えられていると感じました。
まとめていただいたコンセプトのもと、ムードボードにあった淡いテイストの配色や手書き風の安心感あるあしらいでトンマナを表現できている提案になっていますね。
各工程で考えるべき内容を抑え、着実に制作を進められていますね

● コーディングについて
基本的なマークアップは問題ないですね！
表示の再現だけでなく動きも活用できており、トンマナの再現という意味でも十分なアウトプットになっていると思います。
サーバーアップもできており、課題としての対応も問題ございません！