高級ヴィラ　刻の標

https://ponco-work.site/tokinosirube/

ID demo

password demo

制作ポイント Site Point: 「何もしない贅沢」をコンセプトとした架空の高級ヴィラのLPです。
ゆったりとした時間の流れを表現するため、スクロールに連動するパララックス効果や、フワッと浮かび上がるフェードインアニメーションを実装しました。
タブ切り替えによるギャラリー機能、モーダルでのメニュー表示、アコーディオン、バリデーション付きのお問い合わせフォームなど、LP内でユーザーを飽きさせない豊富なUIを盛り込んでいます。
コーディング方針 Coding Approach: 開発環境にGulpを導入し、SassのコンパイルやJSの圧縮などを自動化して作業効率を高めました。
CSS設計は「FLOCSS」の思想と「BEM」の命名規則を採用しプレフィックスを分け、影響範囲を明確にしています。
JavaScriptはjQueryを活用しつつ、スクロール監視には軽量な「Intersection Observer」、パララックスにはカクつきを防ぐ「requestAnimationFrame」を採用するなど、
適材適所でモダンなAPIを使い分け滑らかな描画パフォーマンスを実現しました。
保守性を高める設計 Maintainability: Sassでは、メインカラーやフォント指定を変数で定義しまとめ、ブレイクポイントもmapで管理することで、
仕様変更時の修正箇所を最小限に抑えました。
また、ボタン（.c-btn）やセクションタイトル（.c-section-title）など複数回登場するパーツは独立した共通クラスとして定義し、再利用性を極限まで高めています。
使用技術 Skills: ・HTML, CSS (FLOCSS)
・JavaScript (jQuery)
・parallax
・Gulp（タスク自動化・環境構築）
制作期間 Duration: 36時間
詳細 Details: #Gulp #自主制作