歯科クリニック（自主制作）

コーディング内容

Figmaのデザインカンプからコーディングし、WordPress構築を行いました。大型ディスプレイでも300px程度でも表示崩れが起きないよう丁寧にコーディングしています。jQueryに依存せずVanilla JSでコーディングし、軽量化・高速化も行っています。

こだわり

表示速度を早めるためにWebフォントをサブセット化し、各ファイル必要なページにのみ適用されるよう調整。全ページパフォーマンススコアは100近くです。スムーススクロールに、指で弾いたような感覚を得られるイージング（easeOutExpo）を採用し、心地良い体感が得られるように細かく調整しました。

コーディング設計

CSS設計はBEMを基本に、Sassで作成しています。出来るだけ共通部分は使い回しを効かせて、コードの複雑さを回避しています。カスタム投稿タイプやカスタムフィールドを利用し、更新しやすいシステムを組みました。