デザインカンプからのコーディング｜架空のトレーニングジムのサイト

片岡えりな🍎
Webコーダー
OVERVIEW

【Figma】デザインカンプからのコーディング。 CSS設計を意識して他者でも見やすく、使い回しができ、更新しやすいコードを心がけました。テキストの増減やアスペクト比の違った画像への差し替えにも対応できるコードになっています。

URL：https://eriii--web.conohawing.com/U-FIT/

BASIC認証
ユーザー名：u-fit
パスワード：u-fit@0907

◼︎制作概要

作業内容：コーディング

ページ数：4ページ（トップページ+下層3ページ）

サイト構成：トップページ、プランページ、FAQページ、お申し込みページ


◼︎実装内容

  • CSS設計を意識したBEM設計手法でのコーディング
  • テキストを増やしたり、アスペクト比の違う画像に差し替えても表示崩れを起こさない
  • スマホファーストでのコーディング、レスポンシブ対応
  • サイズ指定をremで統一


◼︎アニメーション

  • swiperを使用して画像切替（メインビュー、VOICE）
  • gsapを使用したアニメーション（ローディング、パララックス画像）
  • ハンバーガー、ドロワーメニュー
  • アコーディオンメニュー（FAQ）
  • スムーススクロール


WEBSITE