Cutting Works
#Next.js#MicroCMS#Tailwind CSS
Overview
カッティングステッカーの制作・販売を行う「Cutting Works」の公式ウェブサイトです。ユーザーが豊富なデザインカタログから直感的に好みのステッカーを選べるよう、視覚的に優れたギャラリーUIを構築しました。また、MicroCMSを導入することで、クライアント自身が手軽に制作実績やニュースを更新できる運用体制を整えています。
Challenges & Solutions
[PROBLEM_1] 画像中心のパフォーマンス最適化
数多くのステッカー画像をギャラリーとして表示するため、ページの読み込み速度が課題となりました。Next.jsのImageコンポーネントを適切に設定し、WebPフォーマットへの変換や遅延読み込みを活用することで、高画質を維持したままCore Web Vitalsの数値を改善しました。
[PROBLEM_2] 運用負荷の軽減
以前はエンジニアがコードを修正してコンテンツを更新していましたが、更新頻度を高めるためにMicroCMSを導入。非技術者であるクライアントでも直感的に記事を入稿できる管理画面を設計し、運用フローを大幅に簡素化しました。
Future Improvements
検索・フィルタリング機能の強化
ステッカーの種類やカテゴリが増えた際に、ユーザーが目的のデザインに素早く辿り着けるよう、インスタントサーチ機能の実装を計画しています。
注文フォームとの連携
現在は外部フォームへ誘導していますが、お気に入りのデザインを選択した状態でスムーズに見積もり依頼が出せるよう、サイト内でのフォーム連携を検討しています。
Tech Stack
- Framework: Next.js (App Router)
- CMS: MicroCMS
- Styling: Tailwind CSS
- Language: TypeScript
- Hosting: Vercel