サイトトレース / 採用サイト

使用ツール：AdobeXD

制作内容：情報設計 /デザインカンプ

制作期間：6時間

▷分析まとめ

◎トンマナ

白・黒・グリーン3色。アクセントカラーのみ有彩色なので、メリハリつく。

白黒の無彩色を使用した３色なのに、リッチで寂しくない印象なのは、キービジュアルの画像が変わるごとや、hoverで文字の色が変化するため。

◎キービジュアルの写真とhover以外動きなし

コーポレートサイトではなく採用ページなので、インパクトよりも、コンテンツの内容で他企業との差別化。世界観よりも分かりやすさを重視。

◎下層ページ全ページに求める人物像][エントリー]がある

応募数増加の目的達成のための導線。

◎コンテンツの重要性

採用ページは特に求職者が隅々までページを見る。コンテンツの内容でより企業を魅力的に見せることはもちろん、求職者と企業のミスマッチを防ぐ役割もあることは今回大変勉強になった。

▷制作を通して学んだこと

1.コンテンツの需要性

コーポレートサイトなどは、幅広い層のユーザーや絶対に目的がある人ばかりではなく、少しの興味やたまたまで見る人も多いので、デザインする上でインパクトやビジュアル、世界観も大切になるが、採用サイトはピンポイントのターゲットかつ「企業を知る」という明確な目的があるので、ビジュアル面でのデザインよりもコンテンツ企画やサイトマップ設計がより重要視することも大切。

いい面ばかりをアピールすれば応募数は伸びて目的達成、表面上は課題解決に見えるが、採用後のミスマッチで離職者が増えたり、応募数ばかり増え求めている人材の応募がなく採用につながらなければ根本の解決には至らないばかりか採用コストがかかるばかりで企業にとって不利益になってしまう。ギャップのない実態をアピールすることが結果、企業、求職者双方にとってプラスになる。

2.トンマナと色の効果

トレースではアクセントカラーを赤に変更し制作を行った。アクセントカラーなので使われている箇所は多くはないが、ページの雰囲気、メッセージ性が大きく変わる。

見本の印象(緑)：落ち着き、和やか、広い視野

トレースの印象(赤)：情熱、使命感、営業っぽい

企業の特色や事業内容によって意味のあるアクセントカラーを使用することが重要。

今回の採用ページのように無彩色、有彩色をのバランスでページにメリハリがついたり、今回とは逆にトンマナに有彩色の同系色を使うと一体感や世界観を表すことができる。

同じ企業でも「コーポレートサイト」「採用ページ」ではトンマナに差をつけるとより企業側の意図や想いが正確にユーザーに伝わりユーザーにとっての使いやすさにも繋がる。

3.サイトのリッチさと実装

サイトをリッチに見せるために写真をスライドさせたり動きをつけたりと実装するが、使いやすさと実装のバランスがとても大切だと感じた。hover域はどこまで広くするのか、写真を最も印象深く見せたい部分のみに動きをつけるなど、たくさんの動きがなくても細かい部分の実装で十分に落ち着いた高級感を感じ、寂しくない印象に仕上がる。

また、キービジュアルの写真によって文字の白黒を変化させたりボタンの色を反転させたり、視認性を高く保つ工夫も勉強になりました。

実装