ポートフォリオサイト

https://ponco-work.site

制作ポイント Site Point: 本ポートフォリオサイトです。
ユーザーの直感的な操作を促すため、サムネイル画像にホバーするとシームレスに動画が再生されるリッチなUIを実装しました。
制作実績をスムーズに探せるよう「カテゴリ検索」と「タグ検索」の両方に対応しています。
あえて複雑なAND検索は実装せず、ユーザーが迷わず目的の情報に辿り着けるシンプルな絞り込み体験を優先した設計にしています。
コーディング方針 Coding Approach: 「動きの余韻と空気感を伝える」ことをテーマに、GSAPを活用してスクロールに連動したスムースなアニメーションを実装しました。
また開発環境にはGulpを導入し、Sassのコンパイルや画像圧縮などのタスクを自動化。
作業効率を極限まで高めるとともにミスを防ぐ環境を構築しています。
保守性を高める設計 Maintainability: CSSの設計にはFLOCSSを採用し、再利用性と拡張性を高めるとともにスタイル汚染のリスクを排除しています。
色やブレイクポイントなどの共通値はSassの変数（Variables）として一元管理しました。
これにより後工程でのデザイン変更や、他の開発者が引き継いだ際にも最小工数で安全に改修ができる構造を実現しています。
またGulpを用いてSassのコンパイルやローカルサーバーの立ち上げを自動化し、スムーズな開発環境を構築しました。
使用技術 Skills: ・HTML, CSS (SCSS/FLOCSS)
・JavaScript (jQuery)
・GSAP
・particles.js
・Gulp（タスク自動化・環境構築）
制作期間 Duration: 185時間
詳細 Details: #Gulp #WordPress

他の実績も見る

カフェのデモサイト