【自主制作】架空ベビー用品会社の採用サイト(デザイン〜コーディング)

【作成期間】3週間

【使用ツール】Figma/VScode

【使用言語】 HTML・CSS・Java Script

目次

1. 制作したLP

2. クライアントからの依頼内容 / ペルソナ像

3 . ユーザーストーリー

4 . デザインのこだわり

5 . 制作を通じて学んだこと

-----------------------------------


1. 制作したLP


2. クライアントからの依頼内容 / ペルソナ像

クライアントの要件書を元に、以下のようにペルソナ像を独自で考えました。



3 . ユーザーストーリー

ユーザーがどこにカルチャーフィットを感じるのか考えながら、ユーザーストーリーとLPの情報設計を以下のように作成しました。


4 . デザインのこだわり

▼スタイルガイド

キャッチコピーである『やさしさでつつむ。』をデザインから感じられるような、温かみのある色味と丸みのあるフォントを全体的に使用しました。また、採用サイトということで、前向きに感じられるような明るいオレンジ色をメインカラーに選択。更に、採用された方や赤ちゃんがこれからの未来に向かって成長していくイメージを連想させるような植物の緑色もポイントで取り入れました。



▼あしらい

柔らかい印象をイメージを持ってもらうために、写真やあしらいには丸いみのあるデザインや曲線を使いました。また、親しみが湧くようなドットのあしらいも取り入れました。


5 . 制作を通じて学んだこと

  • CVを明確にするために、配色のバランスを考えアクセントカラーは5%程度にすることを意識しながらデザインすることの重要性を学びました。
  • クライアントの目的(エントリーしてもらうこと)を達成するためのユーザーストーリーをデザインに落とし込むために、セクションの順番や社風が伝わる写真選びの重要性を学びました。
  • 世界観を表現するために写真をあしらいだけでなく、フェードインなど動きでも雰囲気を伝えられると学びました。
  • デザインカンプを作成する時から、コーディングをどう進めていくか考えていくことで、より効率よくサイトを制作していくことができると学びました。