株式会社コムデは2022年度卒業学生を対象に新卒採用を開始しました。
そのプロモーションのための新卒サイトを自社で制作したので、開発の過程を公開します！

▼新卒サイトはこちらから

デザイン

デザインは採用サイトとしては珍しいモノクロ調で、弊社のコーポレートサイト(https://www.commude.co.jp/) に合わせた体裁となっております。
トップページはマウスホバーでフローティングするメニューのみで、目を引くレイアウトにしました。

ーーマウスカーソルは中の領域が色反転する円にしています。

黒背景なので画像素材や、グラフのボーダー色が映えます。

コーディング

ページ遷移を高速化するためにSPA(Single Page Application)として作成しております。
また、フレームワークはNuxt.js (Vue.js) を用いております。

使っているVue.jsのPluginは下記の通りです。

plugins: [
    { src: "~/plugins/vue-cursor-fx", mode: "client" }, // カーソルエフェクト
    { src: '~/plugins/vue-awesome-swiper', mode: 'client' }, // TOP + Project スライダー
    { src: '~/plugins/vue-cookie', mode: 'client' }, // 初回訪問時のスプラッシュ
    { src: '~/plugins/vue-fullpage', mode: 'client' }, // フルスクロールエフェクト
    { src: '~/plugins/vue-scrollto', mode: 'client' }, // SPAとアンカーリンクの両立
  ],

カーソルエフェクト

カーソル領域内の色が反転するエフェクトは実装前は難易度が高いと思ったのですが、実はCSSだけで実装できました。
カーソル要素に色反転のプロパティを設定するのみです。

mix-blend-mode: difference;

初回訪問時のスプラッシュアニメーション

vue-cookie plugin を用いて実装しました。

初回訪問時にcookieに"access"というキーで"done"という値を14日間代入して、アクセス時にaccessキーの値によって処理を出し分けするロジックです。

<div class="splash" :class="{ open: isFirst }"></div>

<script>
export default {
  data() {
    return {
      isFirst: "", // 初回訪問を判定するための変数
    };
  },
  methods: {
    // cookie 判定する関数
    checkCookie() {
      if (this.$cookie.get("access") !== "done") {
        // 初回訪問
        this.isFirst = true; // 初回訪問を判定するための変数 に true を代入
      }
    },
  },
  created() {
    this.checkCookie();
    this.$cookie.set("access", "done", 14); // 14日間 'access' というcookieに 'done' という値を保存する
  },
};
</script>

従来の採用サイトの常識を越えたシックで独創的なデザイン、コムデならではのこだわりが詰まったサイトとなりましたので、ぜひ一度サイトに遊びにきてください！