【課題】ベビー用品会社の採用サイト制作

【制作期間】４週間

【使用ツール】Photoshop/VScode

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

--------------------------------
目次
--------------------------------

１．制作物
２．要件
３．ペルソナ
４．情報設計
５．デザインコンセプト
６．工夫した点
７．制作を通して学んだこと

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

１．制作物

制作したサイトはこちら

２．要件

３．ペルソナ

４．情報設計

①MVで惹きつける
幸せそうな親子の写真をMVに設定。全体的に柔らかい色合いを使用することで、会社の世界観が伝わるように工夫。また、採用サイトであることがわかる文言を表示。

②会社を知る
どのような会社なのか、何を大切にしているのかが分かるセクションをMVの次に持ってくることで、カルチャーフィットした人は興味を持ち、読み進めたくなるようにした。

③事業を知る
会社の雰囲気を知った後は、何をする会社なのか興味をもつと思われるため、事業を紹介するセクションを配置。　

④社員を知る
就職や転職を希望してサイトに訪れる人は、その職場でどんな人が働いているのかに興味を持つと考えられる。楽しそうにやりがいを持って働く女性の写真を添えることで、信頼感を向上させるとともに、就職・転職希望者が自分もその会社で働いているイメージを持てるようにした。

⑤環境を知る
どのような環境・条件で働くのかは、転職・就職をする際には重要な点であると考えられる。MV～メンバー紹介まで、興味をもって読んでもらった場合は、働く環境を知ることで、より一層具体的に自分が働くイメージを持つことができる。

⑥募集職種を知る
ここまでの流れでカルチャーフィットした人は「この会社に就職したい」という気持ちが高まったと思われるので、そのタイミングで募集職種を確認してもらい、興味がある仕事の詳細を知ってもらう。

⑦疑問点を解決する
【FAQ：よくある質問】のセクションは必要要件ではなかったが、情報設計を行い必要であると判断して追加。FAQでは、応募者の不安を解消し、疑問点を解決することで、満足度を高め「応募する」という行動を促す。

⑧応募する
最後に就職・転職希望者に向けたメッセージを表示することで、応募に迷う気持ちを払拭し、「応募する」気持ちを後押しする。

５．デザインコンセプト

【コンセプト】素敵なご縁をつなぐ

【ムードボード】

要件とペルソナの情報を踏まえてムードボードを制作しました。「世界をやさしさでつつむ」というキャッチコピーのとおり、優しい雰囲気で包み込むようなデザインをイメージしました。

【デザイン】

優しくあたたかな会社の雰囲気が伝わるようなデザインにしつつも、可愛くなりすぎないように上品に見えるように工夫しました。

６．工夫した点

◆MV・背景のあしらい
赤ちゃんを包む「おくるみ」から発想を得たベールをふわっと配置しました。お母さんと赤ちゃんを包むベール状のモチーフも自作し、会社の世界観がMVを見た瞬間に伝わるように工夫しました。

◆あしらい
採用サイトなので「縁結び」を連想するちょうちょ結びと糸を配置しました。
Aboutセクションの右上にあるちょうちょ結びが会社側、エントリーセクションの右下にあるちょうちょ結びが就職・転職希望者側をイメージし、よいご縁で結ばれることを連想させるあしらいとしています。

◆写真の配置
LPを訪れた人が上から順に読み進めたときに、飽きないような配置にしました。設定したペルソナが育児を頑張りつつ仕事をどうするか悩んでいるお母さんだったので、採用サイトではありますが、見て楽しんでもらえるような配置にしました。

◆カルーセルの使用
SPではPCで表示していたものを縦並びに表示させることを基本としていますが、「事業のこと」「メンバー紹介」のセクションについては、カルーセルを使用してスクロール量を減らし、最後まで読んでもらえるように工夫しました。

◆コーディング
ヘッダーはスクロールに伴い追従する設定としたものの、SPの場合、エントリーボタンを押すのに、ハンバーガーメニューの表示→エントリーセクションへ飛ぶ→エントリーと手順が多くなります。そのため、少ない手順でエントリーできるよう、追従するエントリー単体のボタンを設けました。
なお、追従するエントリーボタンは、エントリーセクションに入ると消え、FAQセクションに戻ると再度表示される設定としました。

７．制作を通して学んだこと

◆デザイン
コーディングをすることを意識して、見出し・本文のフォントサイズや見出しのあしらい、余白を統一することができました。
コーディングではカルーセルの各画像の表示が微妙にずれる問題が発生し、原因はPhotoshopで書き出した画像サイズが異なっていたことでした。カルーセルなどの同じサイズの画像が並ぶ場合は、画像サイズを合わせる方が問題が発生しづらく、コーディング作業がスムーズになることを学びました。 

◆コーディング

今回の制作では、初めてデザインカンプからコーディングを行いました。レスポンシブ対応をスムーズにするためには、PCの実装を始める前からレスポンシブを意識し、divの配置やクラス名の選定に工夫をする必要があることを体感しました。