WorksHP
atelier-bloom-image-consulting
十勝のイメージコンサルティングサロン「Atelier blooms様」向けに、ブランドの世界観訴求と予約獲得を両立するサイトを制作。 技術は Next.js（App Router）+ TypeScript + Tailwind CSS + microCMS + Netlify Forms を採用し、最新構成で保守性と拡張性を確保。 ニュースやなどはCMS化し、非エンジニアでも更新しやすい運用設計にした。 表示速度も最適化し、Lighthouse Performance は100点を記録。
- Client
- 垢抜け教室 Atelier bloom様
- Category
- HP
- URL
- atelier-bloom-salon.com
Project Notes
課題
無形サービスは価値が伝わりづらく、初見ユーザーが「何を受けられるか」「自分に合うか」「どのように予約するか」を短時間で理解しにくい課題があった。 加えて、公開後に担当者が自走して情報更新できる運用性も必須だった。
解決策
情報設計を Concept→Menu→Voice→Flow→FAQ→Contact に整理し、理解の流れに沿ってCTAを配置。Before/Afterや診断実例でサービスの具体性を補強し、予約導線を明確化。運用面ではmicroCMSを導入して更新負荷を下げ、実装面では画像最適化・不要JS削減・レンダリング最適化で高速表示を実現し、CVしやすいサイトに仕上げた。
Tech Stack
TypeScriptNext.jsmicroCMSTailwind CSS