😇

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

3 min read

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

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

manalink-top_01

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

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

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

manalink-top_02

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

もっと初めて訪れるユーザー向けにしようとファーストビュー直下に『オンライン家庭教師とは』の説明コンテンツを追加しました。
スクリーンショット 2021-06-01 18 43 27
ここの背景は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 >11の個人指導を行うオンライン型の家庭教師です。
  </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で読み込んだファイル名が名前空間になるので各所このように修正して完了です^^

まとめ

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

🔔 採用情報

オンライン家庭教師サービス「マナリンク」の2人目エンジニアを探しています!

https://manalink.jp/

オンライン家庭教師とは、Zoomなどを用いて全国各地の生徒さんを指導する仕事です。
マナリンクは2020年8月に正式版が公開され、小〜高校生を主なターゲットに、オンライン家庭教師のマッチングサービスとオンライン指導アプリを提供しています。
お陰様で売上も伸びていますし、保護者さんには「もっと早くマナリンクさんに出会いたかった」、先生には「これからオンライン家庭教師を始める方にはマナリンクをお勧めします」といった評価をいただいています。

2021年11月現在、CTO1人で以下プロダクトを開発しています!

  • 保護者さんが先生にお問合せ・お支払いできるWebサイト(Nuxt.js、Laravel、AWS)
  • 生徒さんと先生が宿題をやり取りし、保護者さんが閲覧できるReact Nativeアプリ
  • オンライン家庭教師を集客するNext.js製メディア

これから高難易度だったり規模の大きい施策を始めるにあたり、複数人体制で開発したいと考えています!
最初は数ヶ月の「おためし複業」期間を設けるので、そこで丁寧にお互いの認識をすり合わせることができます。

▼採用情報

https://noschool.notion.site/TypeScript-PHP-8b37ebb8d2344b58b0fd88acff0e21af

まず詳しい話を聴いてみたい方はカジュアル面談の形式で一度お話しましょう!
ご連絡をお待ちしております!

Discussion

ログインするとコメントできます