ベビー用品企業採用サイト制作 (PC/SPデザイン・実装)
SHElikesPROデザイナーの課題で、ベビー用品を取り扱う企業の架空採用サイトを作成しました。クライアントからの要件書をもとに、PCとSPのデザインカンプを制作、レスポンシブ対応を含めたコーディング実装を行いました。
【所要時間】合計 63時間(情報設計〜デザイン制作:23h コーディング:40h)/5週間
【使用ツール】Photoshop
目次
① 制作したLP
② クライアント情報
③ 要件
④ 工夫したこと
⑤制作を通して学んだこと
①制作したLP
実装したサイトはこちらです。

② クライアント情報
クライアント名:TSUTSUMU 株式会社
ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業や家族みんなが幸せになるフォトブック事業などを展開している。軸はベビー用品だが、今後ママ・パパ、家族向けのサービスも展開していく予定をしている。
③要件
クライアントより:
採用強化のため、採用サイトを作成することになりました。掲載したい要素をお渡し
するので、ビジョンに共感いただける方にたくさんエントリーいただけるような採用
サイトの制作をお願いいたします。
ターゲット▶︎転職希望の方、報酬面よりもTSUTSUMUが作っていきたい世界に強く共感してくださる方
目的▶︎採用サイトを通してエントリーをしてもらうこと
ポイント:
採用強化のためできるだけたくさんの応募がきて欲しいが、エントリーがあれば
誰でもいいわけではなく、カルチャーフィットする方に応募してもらいたい
④工夫したこと
1.情報設計
「価値観の合う人の行動をそっと促す採用サイト」をテーマに、サイトを訪れた人がエントリーボタンを押したくなるような導線を意識し、デザインに落とし込みました。
<ペルソナ>

<ユーザーストーリー>

2.トンマナ*
「『世界をやさしさでつつむ。』というフレーズに共感し、家族や人とのつながりを大切にできる人が安心して応募できる採用サイト」をコンセプトに、安心感ややさしさを感じるトンマナで制作を行いました。
*トンマナ:トーン(色使いやフォント、画像の雰囲気)&マナー(文体や表記ルール、構成)。


3.社員紹介セクション
「ここで働きたいな」「こんな風に働けたらいいな」という気持ちを高める、信頼感のあるデザインを目指しました。

⑤学んだこと
◾️実装を想定したデザイン制作
当たり前のことですが、webサイトのデザインはコーディングを想定したものでなければならないと実感できました。デザイン通りにコードを書く難しさがわかったことで、デザイン制作の際に「HTML、CSSで実装可能かどうか」という視点を持って対応ができるようになりました。
◾️レスポンシブ対応
スマホやタブレット、PCなど、どんな端末でサイトを見ても違和感のない見た目にするよう、ワイヤーフレームやマークアップ設計図などの上流工程から、SPやPCサイズでの想定を細やかに行う必要があると学びました。