カウンセリング事務所様ホームページ

https://c-tetote.com/

制作ポイント Site Point: GSAP／ScrollTriggerを用いたSVGの一筆書き演出やスクロール連動のアニメーションなど、UIの細部までこだわって実装しました。
アニメーションについてはmatchMediaでPC/SP別に分岐させています。
また比較表には独自のスクロールバー同期処理（マウス・タッチ・慣性スクロール対応）を実装するなど、
単なる見た目の再現に留まらない、体験として自然に感じられる動きの実装を重視しています。
コーディング方針 Coding Approach: CSSの設計にはFLOCSSを採用し、再利用性と拡張性を高めるとともにスタイル汚染のリスクを排除しています。
JavaScriptはjQueryに依存せずVanilla JSで実装し、ドロワーやアコーディオンにはARIA属性・Web Animations APIを用いてアクセシビリティにも配慮しています。
またGulpを用いてSassのコンパイルやWebP変換・画像パスの自動書き換えまでを自動化し、スムーズで再現性の高い開発環境にて実装を行いました。
保守性を高める設計 Maintainability: CSS変数を「テーマカラー」と「役割別（セマンティック）変数」の2階層で管理し、デザイン変更や他の開発者が引き継いだ際にも安全に改修ができる構造を実現しています。
またSCSSのindex.scssはGulp起動時に自動生成される仕組みとし、手動での作業に起因する人的ミスを防止しています。
使用技術 Skills: ・HTML, CSS (FLOCSS)
・JavaScript
・GSAP
・Gulp（WebP自動変換・css / js圧縮自動化などのタスク効率化）
制作期間 Duration: 242時間
詳細 Details: #Gulp #実案件

他の実績も見る

ポートフォリオサイト

カフェのデモサイト