【課題】採用サイト制作（デザイン／コーディング）

KAORI.S

｜制作概要｜

　制 作 期 間  ◆ ワイヤーフレーム・デザインカンプ：2週間
　　　　　　　  コーディング・サーバーアップ： 7週間

　制 作 範 囲  ◆ 要件定義・情報設計・ワイヤーフレーム・デザイン・コーディング

　使用ツール ◆ Photoshop、Illustrator、html、css、jQuery


｜目次｜

　1. 制作物

　2. 要件定義・情報設計

　3. デザインで工夫した点

　4. 課題を通して学んだ点 

1. 制作物

◾️PCデザインカンプ

２.要件定義・情報設計

◾️クライアント情報・要件書

要件書をもとに、自分なりになぜTSUTSUMUがカルチャーフィットする人材を求めているかを考えた上で、制作テーマ・ミッションを設定しました。

◾️制作のテーマ・ミッション

◾️ペルソナ

◾️ユーザーストーリー

３.デザイン・情報設計で工夫した点

◾️メインビジュアル

TSUTSUMUの世界観を伝えるために、アニメーションを取り入れ、３枚の写真が切り替わるよう実装しました。①はベビー用品を扱うTSUTSUMUの事業内容が感じられる写真、②は働く母親が家族（娘）に笑顔で行ってきます＝家族に誇れる仕事をしていることが感じられる写真、③は前向きなマインドで働く女性が感じられる写真を選びました。

◾️採用における課題を解決する情報設計

「わたしたちについて」に「ミッション・バリューを知る」のボタン、「採用情報」に「採用で大切にしていること」の文言と「理想の人物像を知る」のボタンを設置。これらは、カルチャーフィットを感じていただくには重要な情報であると考え、余白をしっかり取ることでユーザーに読みやすくする工夫をしました。

◾️カルチャーフィットを感じてもらう情報設計

POINT１：写真を通じて企業の雰囲気の良さを視覚的に表現

わたしたちを知るのセクションに、働く人たちの写真を５枚自動で流れるよう実装

POINT２：PEOPLE（メンバーを知る）セクションに、クロストーク欄を追加


4. 課題を通して学んだ点

  • 要件書にあった目的を深掘りすることで、ペルソナとユーザーストーリーの設定もしやすくなり、課題を解決するための情報設計ができることを学びました。
  • 事前のマークアップ構成図作成は、コーディングをスムーズに進めるために必要な工程であると学びました。
  • 効率よくサイト制作するためには、デザインカンプ作成段階からコーディングをどう進めていくか考えていくことが重要だと学びました。