パーソナルジム　デモサイト

https://ponco-work.site/gym-lp/

ID demo

password demo

制作ポイント Site Point: このサイトはMELINDA様のご協力のもと作成したコーディング用の練習課題です。実在の人物・団体とは関係ありません。

動きは必要最小限に抑え、「セマンティックなHTMLタグの使用」に加え「画像の圧縮」「遅延読み込み」「hタグの階層構造」などSEO対策も踏まえた実装を行いました。
コーディング方針 Coding Approach: 余白やフォントサイズなど画面幅に応じてなめらかに変化させたい値は、clamp()ベースのfluid()関数で指定し375px〜1440pxの間を線形補間しています。
スクロール連動のフェードインはAOS.js、SPのドロワー開閉はVanilla JSで実装しました。
ドロワーではaria-expandedの切り替え、Escキーでの閉じ操作、背面スクロール固定にも対応し、見た目だけでなく操作の安定性も重視しています。
保守性を高める設計 Maintainability: CSS設計にはFLOCSSを採用しファイルを分割。
クラス名はBEMで統一し、スタイル汚染を避けつつ再利用しやすい構造にしました。
色・フォントなどはSass変数と共通コンポーネントとして一元管理し、後工程のデザイン変更や他開発者への引き継ぎでも最小工数で安全に改修できるようにしています。
開発環境にはGulpを導入し、Sassのコンパイル、Autoprefixer、CSS／JSの圧縮、画像のWebP化、ローカルサーバー起動を自動化しています。
使用技術 Skills: ・HTML, CSS（SCSS / FLOCSS / BEM）
・JavaScript（Vanilla JS）
・AOS.js
・Gulp（Sassコンパイル、画像WebP化、圧縮、環境構築）
制作期間 Duration: 33．5時間
詳細 Details: #Gulp #レスポンシブ対応

他の実績も見る

高級ヴィラのデモサイト