こんにちは。GMOインターネットグループ株式会社 フロントエンドエンジニアの山名です。この度、弊社の新卒採用サイトのフルリニューアルを担当させていただいたので、その際に新卒なりに意識したことなどをご紹介していきます!
執筆の背景
冒頭でも少し触れましたが、この度GMOインターネットグループ株式会社の新卒採用サイトをフルリニューアルするとのことで、企画から公開までフロントエンドとしてプロジェクトに参画させていただきました。
自分が配属されてから約3ヶ月、案件としてサイトの構築から担当するのは初めてだったこともあり、何もかも手探りの状態で制作を進めました。
そんな中でも、「ここはこうしよう」「これはこっちの方がいいはず」と自分の知識を総動員しつつサイト構築を行っていたのですが、今思えば結構大事なことを考えていたのかもしれないなぁと思っています。
ということで今回は、新しくなった新卒採用サイトの告知がてら新卒一年目がサイト構築で意識したあれこれをご紹介していこうと思います!
サイト構築で特に意識したこと4選
ここからはサイト構築で特に意識したことを4つご紹介していきます!
1.チーム内のルールから逸脱しすぎない
やって当然と言われそうですが、なんならここが一番大変だった気がします。
今までの個人制作では、厳密なルールなどは決めずに好きに作っていましたし、入社後担当していた商材の保守案件では元々チーム内のルールに沿って作られたものを編集するだけなことが多かったため、いざ1から作るとなるとどうしても自分の手癖が出てしまって苦労しました。
ある程度好きに作ってもいいよとは言われていたのですが、クラスや変数の命名規則、基本的なディレクトリ構成に関しては、今後の保守に関わってくる部分なのでコーディングをする際にはこういった部内ルールを守るようにしていました。
また、GMOインターネットグループ株式会社のサイトとして公開される以上、グループ共通のヘッダーやロゴの扱いに関しても厳しいルールがあるため、そういったことも含めて構築するサイトがチーム内のルールから逸脱しすぎないように意識していました。
// 例
// クラス名はBEMで書く
// JavaSvcriptで制御するものには接頭辞に「js-」をつける
<section class="mainvisual">
<div class="mainvisual_movie">
<video src="◯◯"></video>
</div>
<button class="mainvisual_movie_play js-movie_play">PLAY</button>
</div>
2.誰が見ても分かるコード
やって当然(2回目)です。それでもやっぱり難しいのですが...
”誰が見ても分かるコードを書く” ということに関しては、サイト構築の際だけじゃなく常日頃から気をつけていることになるのですが、やっぱり後々誰が触るかわからない以上自分だけがわかるコードじゃダメだと思っています。
そんな中で今回のサイト構築、自分1人で作っていくため誰が見てもわかるようなコードなのか判断が難しく、処理を書いては見返したり、クラス名や変数名がしっかりそのものを表しているか確認したり、モジュールは適切に分けられているか確認したり...
とにかく一度自分が書いたコードを何度も確認することで、なんとか分かりやすいコードを目指しました。実際できているかは分かりませんがなんとか自分の癖は薄められたんじゃないかなと思います。笑
// 例
// モーダルウィンドウ表示部分の一部処理
// 変数の中身と処理の内容がわかりやすい(はず)
const $movie_play = document.getElementsByClassName('js-movie_play');
const $modal = document.querySelector('.js-modal');
const $modal_movie = document.querySelector('.js-modal_movie');
const $modal_close = document.querySelector('.js-modal_close');
const $modal_back = document.querySelector('.js-modal_back');
for (let i = 0; i < $movie_play.length; i++) {
$movie_play[i].addEventListener('click', () => {
const src = $movie_play[i].getAttribute('value');
$modal_movie.setAttribute('src', src);
$modal.classList.add('is-active');
$modal_back.classList.add('is-active');
});
・・・
}
3.デザイナーとの連携
次にデザイナーさんとの連携です。
新卒採用サイトのリニューアルにあたり、同期のWebデザイナーがサイトデザインを担当していたのですが、コンセプトが「枠組みを壊せ」なだけあってダイナミックでおしゃれなデザインを作ってくれていて、それに合わせてアニメーションの提案やデザインの調整等の連携を積極的に行っていました。
分からないことや確認したいことも含めて些細なことをこまめに共有し合うことで、生産効率がかなり向上していたように思います!
4.自分らしさを出す
このままでは部内ルールに沿って、もらったデザインをコーディングしているだけなんですが、やっぱり自分らしさは少し出したい!といことで、企画から公開までの流れでちょくちょく自分なりに提案をさせてもらっていました。
結果的には、前述したアニメーションの提案やSEO対策、サイトの軽量化や運用に関わる部分で自分なりに考えた構築ができた気がします。
こうして自分らしさを少しずつ出しながら進めていくことで、終始楽しみつつモチベーション保って制作ができていたので、改めて大事なことだなぁとしみじみ感じました。
終わりに
いかがでしたでしょうか。
分からないことだらけのサイト構築で、デザイナーや先輩方に助けていただきながらではありますが中々のものができたんじゃないかなーと思ったりしています。
実際にリニューアルしたサイトはこちらになります。
気になる方は是非見てみてください!
また、GMOインターネットグループ株式会社では、現在「次世代リーダー」を募集しております。
詳しくは上記サイトからご確認いただき、是非エントリーしてみてください!