와카사만 천연 활어 요리 다이쇼 | 디자인 리뉴얼

교토의 정취와 일식의 전통을 표현

Figma와 Webflow로 재구축한 두 번째 리뉴얼 프로젝트

교토의 일식집 “다이쇼”의 톱 페이지 리뉴얼을 담당했습니다.
Webharu가 처음 제작을 담당한 것은 2년 전. 당시에는 보조금 범위 내에서의 제작이라는 조건 아래 운영성을 중시한 토대 설계를 진행했고, 사이트의 절반은 점주가 직접 구축을 담당하는 공동 제작 형식이었습니다.

이번에는 그 제2장으로서 “톱 페이지 디자인의 쇄신”과 “EC 판매 사업의 시작”을 주제로, 브랜드의 진화에 맞춘 대규모 리뉴얼을 실시했습니다.

배경

보조금을 활용해 제작된 초기 사이트는 지역 점포로서 충분히 기능하고 있었지만, 사업 확대에 따라 디자인·동선·정보 정리의 재검토가 필요해졌습니다. 특히 EC 사업의 신규 시작으로 점포의 “현장”과 “온라인”을 잇는 디자인 리뉴얼이 요구되었습니다.

Webharu는 기존 사이트의 구조를 살리면서도 Figma로 전체를 재설계했습니다. Webflow에서 애니메이션을 살린 모던한 톱 페이지를 구축했습니다.

Webharu의 해결 접근

디자인 콘셉트

교토의 정취와 일식의 전통, 그리고 현대의 EC 동선을 융합
• 브랜드의 고요함과 따뜻함을 양립시킨 색채·여백 설계
• 요리·점포·사람의 표정이 전달되는 비주얼 중심의 구성
• 애니메이션으로 “대접”의 흐름을 연출

구현과 기능 설계

• Figma에서 비주얼과 움직임을 일체 설계하고, 구성 단계에서 UI 애니메이션을 설계
• Webflow에서 페이드·슬라이드·타임라인 연출을 구현
• EC 사이트로의 동선 설계를 최적화해 구매·예약 행동으로의 자연스러운 흐름을 구축
• 반응형 대응으로 스마트폰에서도 쾌적한 조작성을 실현

제작 범위

•
• 톱 페이지 리뉴얼 설계
Figma 디자인 구축
Webflow 구현·애니메이션 설계
EC 사이트 연동 설정
반응형 최적화·UX 개선

이번 리뉴얼에서는 “전통을 남기면서 앞으로 나아간다”라는 브랜드 테마를 축으로 설계했습니다.
애니메이션을 사용해 정과 동의 대비를 표현하고, 방문·구매·열람 모든 경험을 매끄럽게 이었습니다.

Webharu가 공들인 부분

Webharu는 초기 구축으로부터 2년을 거쳐, 점포의 성장과 함께 진화하는 리뉴얼을 실현했습니다.
단순한 디자인 변경이 아니라 지금까지의 운영 이력을 살려, 사용 편의성·갱신성·브랜드 경험의 세 축으로 최적화를 실시했습니다.
Figma에서의 구축 정밀도와 Webflow에서의 표현력을 곱해, 장인의 마음과 교토의 공기감을 디지털 안에 재현했습니다.

이번 프로젝트는 초기 제작의 연장이 아니라 “브랜드의 제2장”으로서, 미래로 이어지는 디자인 리뉴얼이 되었습니다.

‍