トップページをほぼリニューアルした時のリファクタ事情

オンライン家庭教師マナリンクのデザイナーのHiraChikaです。

先日マナリンクのトップページをほぼリニューアルしました。
その時のリファクタ事情を書き記しておこうと思います。

角丸とドロップシャドウのmixin化

リニューアルするタイミングがあったら真っ先にやりたかったのがばらつきのある角丸とドロシャのかかり具合を統一することでした。
既存のmixinをありがたく修正&インクルードしてスッキリです✌️
またスマホで見た時に要素が積み重なってもなんとか一画面におさめたかったので、心を鬼にして既存の画像を削除…！コンパクトなマテリアルデザイン風になりました。

@mixin card {
  border-radius: 5px;
  box-shadow: 0 2px 6px 0 rgba(colors.$black, .1);
  background-color: colors.$white;
}

CSSの背景画像をlazysizesで遅延表示

もっと初めて訪れるユーザー向けにしようとファーストビュー直下に『オンライン家庭教師とは』の説明コンテンツを追加しました。

ここの背景はCSSのbackgrond-imageを使いたかったのでlazysizesというライブラリを導入することに（参考記事）。
背景画像を入れたい対象要素にlazyloadというclassを付与するとこのclassがlazyloadedに置き換えられた時に背景画像が遅延表示される仕組みです。とても簡単💪

<div class="about-service lazyload">
　（略）
</div>

.about-service {
  &.lazyloaded {
    background: url('~assets/img/top/about-service_bg.jpg') top center / cover no-repeat;
  }
}

slotで見出しを共通化

共通の見出しをデザインしたのでこの辺は名前付きslotでコンポーネントにしました。
よくやる手段ですね。

TopPageHeading.vue

<template>
  <div class="heading">
    <h2 class="heading__head">
     <slot name="head" />
    </h2>
    <p class="heading__desc"><slot name="desc" /></p>
  </div>
</template>

TopPageAboutService.vue

<top-page-heading>
  <template #head>オンライン家庭教師とは</template>
  <template #desc>
    Zoomなどのオンラインツールを使用して<br >1対1の個人指導を行うオンライン型の家庭教師です。
  </template>
</top-page-heading>

早め早めの@use対応

Sassの@importは2022年に廃止予定なので今回関連するページは全て@use修正します。

@import "@/assets/css/variable.scss";

↓

@use '~/assets/css/base/_mixins.scss';
@use '~/assets/css/base/_colors.scss';

@useになるとCSSの@importとどっちかわからない！みたいなことがなくなりそうですね。

@include mixins.mq('sp') {
  color: colors.$gray;
}

@useで読み込んだファイル名が名前空間になるので各所このように修正して完了です^^

まとめ

当初、既存デザインのトンマナを保ちつつ少し新しめにしたいという気持ちがありましたが、いきなり最新のデザインを取り入れるのも違うな悩ましいところでした。個人的には過去のデザインを尊重しつつもなんとかまとまったかなと思います。