【スクール課題】採用サイトLP（デザイン〜実装）

【使用ソフト】Photoshop / VScode

【使用言語】HTML / CSS / jQuery

【目次】
①課題要件
②制作物
③工夫した点（情報設計）
④工夫した点（デザイン）
⑤制作を通じて学んだこと

①課題要件

②制作物

制作したサイトはこちら

③工夫した点（情報設計）

依頼内容を踏まえ、ターゲットのペルソナとユーザーストーリーを深掘りしました。

■依頼から考えたペルソナ

・あえて「子供がいない女性」をペルソナに設定しました。
TSUTSUMU株式会社は主にベビー用品開発事業で、子育て中の方でも柔軟に働きやすい制度が整っている会社ですが、クライアントからの依頼では「子育て中の女性」を採用したいとの要望はなかったため、子供がいる・いないに関わらずカルチャーフィットしている人材を募集していると判断しました。

■依頼から考えたユーザーストーリー

・クライアントからの依頼では、業務経験があるかどうかよりも「カルチャーフィット」や「企業理念に共感」している人を採用したいとの事だったため、FVのすぐ下に採用メッセージ、その下にメンバーインタビューを載せました。TSUTSUMUの世界観や理念、実際に働いているメンバーの価値観に共感している人がその先に進めるように工夫しました。

④工夫した点（デザイン）

■あたたかさと芯の強さを感じるトンマナ

■優しい雰囲気を出すために工夫した点

・ホバー時やスクロール時にコンテンツがふわっと浮かび上がるような動きをつけました

■引き締まった雰囲気を出すために工夫した点

・ENTRYボタンホバー時に、濃いグラデーションカラーに変化する動きをつけました

■キービジュアルについて工夫した点

・クライアントから「キービジュアルには赤ちゃんなど、事業内容のイメージが伝わる写真にしてほしいけれども、デザイナー目線で適切なものを提案してほしい」との依頼がございました。
そこで今回作成するのは企業のコーポレートサイトではなく採用サイトなので、ターゲット（求職者）の興味を惹きそうな、働く社員の楽しげな雰囲気が伝わるような写真を選びました。
キービジュアル下の採用メッセージ部分には赤ちゃんの写真を配置することで、クライアント希望を取り入れつつ、あくまで採用サイトとしての目線から写真選びを行いました。

⑤制作を通じて学んだこと

デザインカンプの段階で実装を意識しながら制作することの大切さを学びました。実装時に実現できない場合があるため、表現したいデザインと実装工数のバランスを取りながら制作することが重要だと感じました。また、参考にしていたサイトのhtml、cssを研究することで自身の表現の幅を広げることができました。まだまだ知識不足を感じているので、知識と経験を増やし、表現の幅を広げていきたいです。