フォームでご相談
サイト概要
SNS運用、ホームページ制作、MEO対策を手がけるWeb制作会社さまの自社サイトです。デザインデータをもとにコーディングとWordPress構築を行い、制作実績やお知らせをご自身で更新できる形で公開まで対応しました。同業だからこそコードの中身まで見られる前提で、設計と品質を評価いただいた案件です。
実装で工夫した点
Viteを組み込んだWordPressテーマ開発
テーマにViteのビルド環境を統合し、開発時はホットリロード、本番はビルド済みアセットへ自動で切り替わるようにしています。ファイルの更新日時をもとにしたキャッシュ対策も入れており、公開後の修正が反映されないといったトラブルを防いでいます。
CSS設計と自動整形の仕組み
SassはFLOCSSの構成で設計し、ビルド時にメディアクエリの統合、プロパティ順の並べ替え、圧縮までを自動で行います。stylelintやmarkuplintも併用し、人の目だけに頼らずコードの状態を一定に保てるようにしました。
制作実績を運用しやすくする管理画面の作り込み
実績のカスタム投稿では、表示順を管理画面の並び順と連動させた前後ナビゲーションを実装しました。実績一覧にクライアント名の列を追加して並べ替えにも対応させるなど、更新するご担当者の使い勝手を優先しています。
画像最適化とアニメーションの軽さ
画像はビルド時にWebPへ変換し、すべての画像に幅・高さと遅延読み込みを指定しています。スクロール連動の表示アニメーションはIntersectionObserverで自作し、ライブラリに頼りすぎない軽い実装にしています。
使用技術
- WordPress
- Vite
- Sass（FLOCSS）
- GSAP
- Secure Custom Fields