【自主制作】ベビー用品開発事業 TSUTSUMU 採用サイト

架空案件：ベビー用品等を展開する「TSUTSUMU」の採用サイト制作

【制作時期】2025年12月

【制作期間】約4週間（デザインまで：約10日 / コーディング：約18日）
　　　　　　 ∟情報設計〜ワイヤーフレーム：12時間
　　　　　　 ∟デザイン：16時間
　　　　　　 ∟コーディング：39.5時間

【使用ツール】Figma / Illustrator / Photoshop / HTML / CSS / jQuery

【目次】

◆制作物（ワイヤーフレーム制作・LPデザインカンプ・サイト公開）

◆課題要件

◆情報設計の工夫

◆デザインの工夫

◆制作を通して学んだこと

【制作物】

サイトはこちら

▼PCデザインカンプ（左）
　SPデザインカンプ（右）

【課題要件】

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

採用強化。ビジョンに共感いただける方にたくさんエントリーいただけるような採用サイトの制作。

▼要件書

【情報設計の工夫】

▼要件をもとに考案したペルソナ

▼ページ設計

【デザインの工夫】

▼ムードボード

◆トンマナ

本課題では明確なブランドトンマナの指定がなかったため、事業内容をもとにトンマナを提案する形でデザイン設計を行いました。

ベビー用品を扱う事業であることから、あかちゃんや育児用品（おくるみ・おもちゃ・ガーゼ・おむつ）から連想される
「あたたかい」「やわらかい」 というキーワードを軸に設定しています。

また、あかちゃんがお腹の中にいる子宮の形がたまご型であることから、命のはじまりや包み込む安心感を表現する要素として
「たまご」 をトンマナのひとつとして取り入れました。

◆あしらい
複数のパステルカラーを用いたたまご型のあしらいを取り入れることで、
やわらかく、あたたかみのある企業イメージをサイト全体で表現しました。

◆配色

• メインカラー：4色のパステルカラー
  TSUTSUMUのあたたかい、やわらかい世界観を表現するために4色のパステルカラーをメインカラーとして使用しました。
• ベースカラー：ブルーのパステルカラー
  採用サイトとしての誠実さや安心感を表現するため、ブルーのパステルカラーをベースカラーに使用しました。主張しすぎないトーンにすることで、全体をやさしくまとめています。
• アクセントカラー：パープル
  パステルカラーを基調とした配色の中で、視認性を確保しつつ世界観を損なわない色として、パープルをアクセントに採用しました。やわらかな色味と調和しながらも、誠実さや信頼感を感じさせる色であり、主張しすぎることなく必要な情報に自然と視線を集められるようにしています。

◆フォント

採用サイトとしての誠実さや信頼感を表現するため、本文には手書きフォントや丸ゴシックは使用せず、「Noto Sans JP」を採用しました。可読性が高く、情報を正確に伝えられる点を重視しています。
一方で、それだけでは硬くなりすぎないよう、英字部分には線が整っていてすっきりとした印象の「Josefin Sans」を使用し、洗練された中にも企業らしさを感じられるよう工夫しました。

【制作を通して学んだこと】

実案件を想定し、ペルソナ設計からワイヤーフレーム、デザインカンプ（PC／SP）、コーディング、サイト公開までを一貫して制作しました。実際に手を動かしながら一連の流れを経験したことで、Webサイト制作の全体像を理解でき、仕事として案件を請け負う際のイメージを具体的に持つことができました。その分、とてもやりがいのある課題でした。

また、ペルソナを明確に設定することや、情報設計の段階から必要な要素を整理しておくことの重要性を改めて実感しました。さらに、コーディングにおいては検証ツールを活用しながら実装・確認を行うことが、品質を担保するうえで欠かせないという学びも得ました。