きのみ歯科

デザインサンプル用に作成した架空の歯医者のwebサイト。やさしい色使いとイラストで、子供を意識したポップなデザインに。ターゲットはファミリー層。流れる雲と、スクロールすると浮かび上がるアニメーションで楽しげな雰囲気にデザインしています。 スクロールアニメーションはIntersection ObserverAPIを使用。負荷を抑えるため、アニメーションはできる限りtransformとopacityのみを使用して表現しています。背後を流れる雲はjs有効時はビューポートに入る度に初期位置に戻り、テキストの読み取りを邪魔しないように配慮。子供を意識したデザインなので、アニメーションも慣性を働かせた楽しげな動きにしています。 ・ロゴ・アイコンはインラインSVG。写真はwebpに対応。 ・サイト表示の高速化処理（クリティカルcssの抽出、非同期or遅延読み込み等） ・PageSpeed Insightsは制作当時はPC95点前後、SP80点前後でした。

• https://kinomi-dental-clinic.netlify.app/