WORK

(SCHOOL WORK)Café Lavande

Café Lavandeのモックアップ画像

  • Client

    ORIGINAL WORK

  • Date

    2025.02

  • Role

    direction, design

  • Tools

    Figma, Photoshop

PDF

(概要)OUTLINE

富良野の風に包まれて、ラベンダーの香るひとときを。

(en)

I created a fictional website for a fictional cafe in Furano, Hokkaido. The target audience is female tourists, and the site is designed to convey the natural beauty and relaxing atmosphere of Furano, offering a sense of healing through both visuals and layout.

Café Lavandeのモックアップ画像

(詳細)DETAILS

(en)

Persona
A woman in her 30s who usually lives a busy life in the city. She is visiting Hokkaido in the summer. She loves flowers, aromatherapy, and dried floral arrangements. Stylish, with a strong sense of personal taste and attention to detail.
Challenges
The healing charm of lavender and the cafe is difficult to fully convey through photos alone, making it hard to communicate the value of the experience. Many tourist spots are crowded and overwhelming, but I wanted to express that this cafe offers a peaceful break in the midst of travel.
Objectives
Objectives To attract more visitors to the cafe and lavender field by conveying the unique, multi-sensory healing experience the space offers through the website.
Concept
A place where you can unwind and spend time with lavender.
Information Architecture
The first view of the website instantly communicates the experiential value. The catchphrase “A moment to unwind, surrounded by lavender” and a bright, gentle photo of the cafe’s interior help users immediately understand that this is a relaxing cafe. The layout is structured to naturally answer key questions from visitors: Where is it? What can you enjoy? What's in season? And how can you get there?
Design
Soft, gentle tones were used throughout to express a calm atmosphere. To highlight the main purple color (lavender), the overall color scheme is kept simple, with plenty of white as a base to create a sense of cleanliness and openness. A blue accent color was added, and marble patterns were used in the background to evoke a spacious, airy feeling reminiscent of a fresh summer sky. Wave motifs were incorporated into the titles to evoke the gentle breeze of Furano and the soothing scent of lavender, creating a calm and comfortable visual impression.
Key Points
1. A Consistent Visual Worldview
All visual elements—photos, colors, fonts, and decorative motifs—were unified under the concept of softness, healing, and the world of a lavender cafe. This helps visitors intuitively feel the charm of the place and imagine themselves actually being there. The logo was hand-drawn by using Illustrator.
2. Generous Use of White Space
Ample space between sections and elements creates a relaxed, airy layout that reflects the café’s atmosphere. Special attention was paid to spacing and line heights, ensuring that every part of the site feels unhurried and easy to take in.
Prouction Time
Planning / Information Architecture / Wireframes
4 days
Design
1 week
Responsive Design
Not implemented (designed for 1920×1080 screen resolution)
Tools Used
Figma, Photoshop
サイトデザインで使用したフォントとカラーコード DESIGN GUIDE TYPE FACE Lora Noto Serif JP #D3C3DF #FFFFFF #C8D7F5 #33273B

Café Lavandeのモックアップ画像

PDF