サイト構築

優秀な人材獲得のため
採用サイトのブランディング

今回のウェブサイト制作の目的は「優秀な新卒採用」。現在ある新卒採用サイトはイメージと異なっている＆古いため、一新したいとのことでした。また、画像で作成されていた要素も多く、更新がストップしており、継続的に運用できるようにしていきたいというご要望でした。

クライアントは歴史のある会社というのもあり、コーポレートサイトは比較的落ち着いた雰囲気です。かっこよく見た目の良いサイトになったとしても、コーポレートサイトとあまりにも剥離したデザインを採用した結果、入社後のイメージとかけ離れてしまっては意味がありません。よって、会社の基となるイメージは崩さず、さらなるブランディングにつながるようなデザインをご提案しました。

ビジュアルとしては、トップページのファーストビューで画面いっぱいに、「ここで働きたい」と思ってもらえるようなムービーを表示して、強いインパクトを与える作りにしました。また各社員の画像は姿勢や目線を統一してもらい、デザインに一貫性を出しました。

デスクトップよりもモバイルを優先した
スマートフォンファーストのデザイン設計

Googleが2018年に発表したモバイルファーストインデックス。Googleからの評価も大事ですが、今回は採用サイトだったため、一番は実際に使っていただけるユーザーにとって閲覧しやすいサイトかどうかだと考えます。

応募者が閲覧時に利用する可能性が大きいスマートフォン端末を最優先にした設計や導線を組み、デスクトップサイトはモバイルデザインを最適化させたレスポンシブウェブデザインの形を採用し、スマホファーストのデザイン設計を行いました。

トップページ画面いっぱいに表示した動画素材、確かにファーストビューで大きく動画コンテンツを表示するとインパクトが強いです。
一方、動画データは画像より圧倒的に容量が大きいため、モバイル版でも同じように表示すると初回読込が非常に遅くなり、ユーザビリティの低下が懸念されます。

そこで、動画はイメージが伝わることが目的と割り切ることで、薄くマスクをかけたような見え方にして動画データを軽量化しました。また、動画データ容量はクオリティが維持できる極限まで抑え、モバイル端末での読込速度が遅くならないように注意しました。さらに、ページ読込時には動画と同等の背景画像を先に表示しておくことにより、読込時の見え方バランスを調整しました。

アニメーションやインフォグラフィックスでリッチ感と見やすさを。
公開後も安心の運用を提供

要素の表示やボタンタップ時にアニメーションを設定しリッチ感を演出。また、社員アンケートコンテンツにインフォグラフィックスを作成し見た目でのわかりやすさを追求しました。

各端末やブラウザ間での予期せぬ不具合やエラーを起こらないようにするため、レスポンシブ対応のフロントエンドフレームワークを採用。
それにより可読性の高いコードや管理しやすいディレクトリ構造となり、公開後の運用においても安心です。

制作範囲

デザイン（レスポンシブウェブデザイン） / コーディング / ディレクション