こんにちは!キャスレーコンサルティング21卒エンジニアのHです。

今回は、コーポレートサイトに新しく開設された「23卒向け新卒採用ページ」を皆様にご紹介させていただきたいと思います。

実際にページに盛り込んだコンテンツやこだわったところ、アニメーションと吹き出しのCSSなど…盛りだくさんでお届け致します!

ぜひ最後まで見ていってください!

コンテンツを考えるにあたって

今回開設された新卒採用ページは企画から設計、実装まで21年新卒が担当しました。実際に盛り込んだコンテンツは以下のようになっております。

  • 2021年入社社員インタビュー
  • 事業紹介
  • 配属してから~Mさんのある1日~
  • 採用応募開始から、入社後まで
  • うれしい制度
  • イベント紹介(フォトギャラリー)

コンテンツはキャスレーの魅力を伝えられるように、そして就活生にとって有意義な情報となるように考えました。また、21卒が経験し23卒も経験するであろう「新型コロナウイルス蔓延下での就職活動」そして「未経験からのエンジニア就職」では、私たちが経験した話や実際に働いているエピソードが就活生の不安を解消する手立てになるのではないかと考え、力を入れました。

新型コロナウイルス蔓延下での就職活動を経験して

私たち21卒は、新型コロナウイルス蔓延の中人生初の就活を迎えました。サイト構築に伴い、就活時代を振り返ってみるとやはり急速に普及したリモートワークによるコミュニケーション面での不安やそもそもどうやって仕事をしているのか、など変化する働き方に不安や疑問を抱くことが多くありました。こういった経験から、新卒ながらリモートワークを1年間やってみた率直な声や業務フローをご紹介することで就活生の皆様の不安や疑問を少しでも解決できるのではないかと考え、コンテンツを用意しました。特に「2021年入社社員インタビュー」や「配属してから~Mさんのある1日~」では、リモートワークに関するトピックスを扱っています。ぜひ覗いてみてください!

未経験からのエンジニア就職

これは私自身もそうだったのでぜひとも入れたいトピックスでした!(笑)私自身の話ですが、私はエンジニアという職業に対して「なんとなく理系の専門な感じがする」と思っていました。その偏見は就活を通じてなくなりましたが、実際にエンジニアになりたい!と思っても「どんな流れを通じてエンジニアになれるの?」「研修はあるのか?」「文系歓迎と言っているけど先輩にフォローしてもらえる環境なのか?」また、「経験者だけどスキルアップの場はあるのか?」という不安がありました。こうした思いを解決すべく、「採用応募開始から、入社後まで」が誕生致しました。また、「2021年入社社員インタビュー」内のブログ紹介でもさらに詳しい新卒インタビューを行っております。ぜひご覧ください!

新卒採用ページデザイン紹介

前段では新卒サイトに対する熱い想いを語りましたが…ここからはサイト構築でこだわったCSSをご紹介させていただきます!

■CSSでのアニメーション実装

サイトトップ部分は本社の恵比寿ガーデンプレイスや実際に働いている様子をアニメーションで表現しました。

CSSで表現したアニメーションをご紹介致します。以下にHTMLとCSSのコードを用意しました。

<aside id="mainimg">
	<img src="images/images1.jpg" alt="" class="slide0">
	<img src="images/images2.jpg" alt="" class="slide1">
	<img src="images/images3.jpg" alt="" class="slide2">
	<img src="images/images4.jpg" alt="" class="slide3">
</aside>

HTMLではアニメーションで表示させたい画像を選択し、「mainimg」で囲みます。画像にはクラスを指定しておきましょう。5枚目の画像を追加したい場合はmainimg内に以下を追加しましょう。

<img src="images/images5.jpg" alt="" class="slide4">

続いてCSSです。

/*1枚目*/
@keyframes slide1 {
	0% {opacity: 0;}
	10% {opacity: 1;}
	35% {opacity: 1;}
	45% {opacity: 0;}
	100% {opacity: 0;}
}
/*2枚目*/
@keyframes slide2 {
	0% {opacity: 0;}
	25% {opacity: 0;}
	35% {opacity: 1;}
	60% {opacity: 1;}
	70% {opacity: 0;}
	100% {opacity: 0;}
}
/*3枚目*/
@keyframes slide3 {
	0% {opacity: 0;}
	50% {opacity: 0;}
	60% {opacity: 1;}
	75% {opacity: 1;}
	85% {opacity: 0;}
	100% {opacity: 0;}
}

#mainimg {
	clear: left;
	width: 100%;
	position: relative;
	margin: 0 auto;
}
.slide1,.slide2,.slide3,.slide4 {
	animation-duration: 15s;	
    /*アニメーションを実行する時間。「s」は秒の事。*/
	animation-iteration-count:infinite;
	position: absolute;left:0px;top:0px;width: 100%;height: auto;
	animation-fill-mode: both;	
    /*アニメーションの待機中は最初のキーフレームを維持、終了後は最後のキーフレームを維持。*/
	animation-delay: 2s;		
    /*出現するタイミング(秒後)*/
}
.slide0 {
	position: relative;width: 100%;height: auto;z-index: -1;
}
.slide1 {
	animation-name: slide1;
}
.slide2 {
	animation-name: slide2;
}
.slide3 {
	animation-name: slide3;
}
.slide4 {
	animation-name: slide4;
}

CSSの上部(@keyframesで指定している箇所)では主に画像のフェードイン・アウトの調整を行っています。例えば1枚目の画像から2枚目の画像に切り替わる際に1枚目の透明度と2枚目の透明度を調節している…という形です。透明にするかしないかはopacityで調節します。

/*透明、色を出さない*/
{opacity: 0;}
/*透明でない、色を出す*/
{opacity: 1;}

実際に画面上で見ていると消えて移り変わる…というように見えますがCSS上では消えるのではなく透明になって他の画像に色が付くという動きをしていることが分かります。

また、画像の切り替わり方や切り替わるタイミングなども細かく指定できます。先ほどHTMLの画像に指定したクラス(この場合.slide1,.slide2,.slide3,.slide4)内で調整を行いましょう。

ここに載せたアニメーションは新卒サイト上のトップページのものになります。移り変わりなどはぜひ新卒サイトのトップを確認してみてください!

■CSSでの吹き出し実装

新卒サイト内の「2021年入社社員インタビュー」では、顔写真とcssを用いた吹き出しで実際に社員が話しているような構成にしました。このサイトをご覧いただいた皆様に楽しんでいただければ嬉しいです。

今回はその吹き出しのcssをご紹介したいと思います!

まずはサンプルのアイコン付き吹き出しとそのHTML、CSSのコードを用意しました。今回は分かりやすく吹き出し部分に赤色を付けています。

<ul class="intervew-box">
  <li class="icon"><img src="任意の画像ファイル">
	<p>アイコン名</p>
  </li>
  <li class="intervew-box01">
    <ol class="hukidashi_comments">
      <p>吹き出しの中身が入ります!</p>
    </ol>
  </li>
</ul>
.intervew-box {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 80%;
  margin: 1% 10%;
}

.intervew-box01 {
  width: 75%;
  list-style:none;
}

  /* --- 吹き出し部分 ---*/
  /* 四角い部分 */
.hukidashi_comments {
  width: 680px;
  position: relative;
  background-color: #f08080;
  font-size: 14px;
  display: grid;
  place-items: center;
  padding: 3%;
  padding: auto;
}

  /* 三角アイコン */
.hukidashi_comments::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -45px;
  top: 20px;
  border-right: 50px solid #f08080;
  border-bottom: 50px solid transparent;
}

  /*アイコン */
.icon {
  display: inline-block;
  position: relative;
  width: 20%;
  text-align: center;
  margin-right: -30px;
}

.icon img {
  border-radius: 90px;
  height: 100px;
  width: 100px;
  background-size: cover;
}

…このコードを見てお気づきの方もいらっしゃると思いますが、cssで吹き出しを実装する際には「文字が入る四角の部分」+「飛び出している三角の部分」というように表されています!

試しに三角アイコン部分のCSS(.hukidashi_comments::before)のleft: -100px;にしてみると…

  /* 三角アイコン */
.hukidashi_comments::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -100px;  /* ここを変更 */
  top: 20px;
  border-right: 50px solid #f08080;
  border-bottom: 50px solid transparent;
}

切り離されてしまいました!このように、吹き出しは組み合わせで作成されていることが分かります。

さらに吹き出しの角を丸くしたい場合は「border-radius」で角を調整します。

/* 四角い部分を丸くしたい*/
.hukidashi_comments {
  width: 680px;
  position: relative;
  background-color: #f08080;
  font-size: 14px;
  display: grid;
  place-items: center;
  padding: 3%;
  padding: auto;  
  border-radius: 20px; /* 追加 */
}

ここではご紹介しきれませんでしたが、その他にもインタビュー項目にはおもしろい仕掛けがしてあります!ぜひチェックしてみてください。

所感

ここまで読んでくださいましてありがとうございます!研修でHTML,CSSを学びましたが、いつしか頭の隅の方へ行ってしまっていたので苦労しました(笑)。大変なことも多かったですがたくさんの方にご助言いただきながら、無事に新卒サイトを完成させられて良かったなと思っています。今回の開発を通じて、デザインの分野にも少し興味が湧きました。遊びでいろいろ作って練習してみたいと思います…!就活生の方、そうでない方、キャスレーブログ同様たくさんの方に見ていただけると嬉しいです。

H.H
SD部 H.H
21卒です!最近うさぎを飼い始めました!