アドブレーン2017年度新卒Web採用サイトの構築

概要

株式会社アドブレーン(以下アドブレーン)の2017年度新卒用のリクルートページの構築を担当しました。表現面と技術面での折り合いをつけつつも最大限の工夫を盛り込んだサイトとなりました。

フロントエンド解説

リクルートサイトは以前「RECRUIT DNA」で培った構築経験があり、要所でその知識が役に立ちました。実装環境は Middleman を採用し、レスポンシブ対応ではなくPC・SPで別々のソースを自動的に切り替える仕様にしました。

特に意識した点は ”SASS, SCSS をいかにうまく使うか” です。

統一されたページデザインのテイストで、色や文字でヴァリエーションを出していくというテーマの中で「メンテナンス性を保ちながら最速でコードを書く」という命題に対して、SASS 3.4 がうまく機能しました。

以前は yaml や jbulder などを用いて html を動的に生成することでメンテナンス性を向上させていましたが、今回は CSS で同等のクオリティを実現しました。

演出面においては、各種アニメーションを png animation, gif, video の3種の方法で対応しています。

png animation は最も容易な実装方法でしたが、画像サイズが大きくなるとパフォーマンスが落ちやすく、特に SP で顕著な影響があったため、解像度の調整や最適化の対応を行いました。

gif は容量的に軽くなる一方で、再生タイミングの調整に少々工夫が必要でした。今回は止め絵の png と gif を置き換えることでクリアしましたが、リクエストが都度走るため通信環境によってはやや難があるかもしれません。PC, SP ともに同等のパフォーマンスが出せるという点で有効でした。

video は最も圧縮効率が良く、コントロールの自由度も高いため最高のパフォーマンスが出ました。ただ変換の際に色味が若干変わってしまうため、背景の色となじませるために各ブラウザごとに調整する必要がありました。 SP での利用に制限があるため、今回は PC の 一部ページでの採用に留めましたが、今後も積極的に利用を検討したいと思います。