CASE 04
物語で伝えるブランドデザイン
soulagement / CHAIRMAKERS
Brand Website Design
Concept Project
職人の手仕事から生まれる一脚の椅子。
その価値を、商品の機能やスペックだけではなく、
「職人」「時間」「暮らし」という一つの物語として伝える。
架空の家具ブランド「soulagement / CHAIRMAKERS」を通して、
ブランドの世界観をスクロール体験へと落とし込んだWebデザイン事例です。
【IMAGE 01｜HERO】
PROJECT
椅子を売るのではなく、
椅子に宿る時間を伝える。
今回想定したのは、職人の手仕事によって一脚ずつ生み出される家具ブランド。
ブランド名は、
soulagement / CHAIRMAKERS
「soulagement」は、フランス語で「安らぎ」や「ほっとすること」を意味します。
椅子は、購入した瞬間だけ価値を持つものではありません。
職人が木を削り、磨き、仕上げる時間。
そして、その椅子を迎えた人が暮らしの中で重ねていく時間。
その二つの時間によって、一脚の椅子は少しずつ完成していく。
そんなブランドの在り方を、Webサイト全体で表現することを目指しました。
【IMAGE 02｜PROJECT / BRAND WORLD】
CHALLENGE
商品を見せるだけでは、
ブランドの価値は伝わらない。
家具を紹介するとき、
木材の種類。
革の素材。
サイズ。
価格。
こうした情報はもちろん必要です。
しかし、それだけでは商品の「違い」は説明できても、
そのブランドを選ぶ「理由」までは伝えきれません。
今回考えたのは、
「なぜ、この椅子を長く使いたいと思うのか。」
ということ。
商品のスペックを並べるのではなく、
職人の技術。
素材へのこだわり。
一脚が生まれるまでの時間。
そして、使い続けることで生まれる変化。
それらを一つの体験として伝える必要があると考えました。
【IMAGE 03｜PRODUCT】
CONCEPT
CRAFT × TIME × LIFE
今回のブランド体験を設計するうえで、
3つの「時間」を軸にしました。
CRAFT
職人が積み重ねてきた時間。
木を削り、磨き、仕上げる。
一脚の椅子には、目には見えない職人の経験と時間が積み重なっています。
TIME
椅子そのものが重ねていく時間。
木には艶が生まれ、革には皺が刻まれる。
新品の状態を完成とするのではなく、変化そのものを価値として捉えました。
LIFE
使う人が重ねていく時間。
職人の手を離れた椅子は、誰かの暮らしへ。
そこで過ごした時間によって、その人だけの一脚へと変わっていきます。
【IMAGE 04｜CONCEPT】
STORY DESIGN
SCROLL THE STORY.
Webサイトを見るという行為そのものを、
ブランドの物語を辿る体験として設計しました。
ページは、
BRAND STORY
↓
FEATURE
↓
PRODUCT
↓
CRAFTSMAN
↓
COLLECTION
↓
VALUE
↓
CTA
という順番で構成しています。
最初にブランドを知る。
次に椅子を知る。
そして、その椅子を作る職人を知る。
一脚が生まれる工程を追い、
最後には、その椅子を使う人の時間へと物語が移っていく。
情報を並べるのではなく、
「何を、どの順番で知ってもらうのか。」
その順番そのものをブランドデザインの一部として考えました。
【IMAGE 05｜STORY DESIGN】
MOTION DESIGN
動かすために、動かさない。
今回のWebサイトでは、複数のスクロールアニメーションを使用しています。
しかし、目的はサイトを派手に見せることではありません。
動きそのものにも、役割を持たせる。
それを一つのルールとしました。
STICKY
PRODUCTでは、椅子を画面に留めながら情報を切り替えることで、製品そのものに集中できる構成に。
STICKY STORY
COLLECTIONでは、スクロールによって職人の工程と椅子が変化。
一脚が生まれていく過程を、ユーザー自身が追うような体験を設計しました。
TEXT REVEAL
VALUEでは、
TIME MAKES VALUE.
という言葉が、スクロールとともに少しずつ現れます。
「時間が価値をつくる」というメッセージを、読むだけではなく、時間を使って体験する演出です。
ENTRANCE
最後のCTAでは、動きを抑えました。
背景。
言葉。
ボタン。
それぞれが静かに現れ、ブランドの物語をゆっくりと閉じていきます。
【IMAGE 06｜MOTION】
COLLECTION
職人の手を追うように、
椅子と出会う。
COLLECTIONでは、
SHAPING
↓
SANDING
↓
FINISHING
という職人の工程とともに、
Héritage
Lumière
Calme
3脚の椅子を紹介しています。
背景では職人が作業を続け、その手前で完成した椅子と商品情報が切り替わる。
商品一覧を眺めるのではなく、
「一脚が生まれる時間の中で、椅子と出会う。」
そんな体験を目指しました。
【IMAGE 07｜COLLECTION 01】
SHAPING × Héritage
【IMAGE 08｜COLLECTION 02】
SANDING × Lumière
【IMAGE 09｜COLLECTION 03】
FINISHING × Calme
VALUE
TIME MAKES VALUE.
時間が、価値をつくる。
職人が椅子を完成させても、
ブランドの物語はそこで終わりません。
新しいときが、完成ではない。
木に艶が生まれ、
革に皺が刻まれ、
暮らしの跡が残っていく。
使い続けた時間そのものが、
一脚の椅子を、その人だけのものへ変えていく。
だからこのWebサイトでは、
「商品が完成するまで」ではなく、
「商品が完成した、その先」
までをブランドの物語として設計しました。
【IMAGE 10｜VALUE】
【IMAGE 11｜AGING】
RESPONSIVE DESIGN
画面が変われば、
伝え方も変える。
PCのレイアウトを、そのまま小さくする。
それだけでは、同じブランド体験にはなりません。
画面の大きさが変われば、
写真の見え方。
文字の大きさ。
情報の優先順位。
スクロールしたときの視線。
そのすべてが変わります。
特にCOLLECTIONでは、モバイルでも職人の表情や作業する手元、椅子、商品情報が一つの画面の中で物語として成立するよう、構図を再設計しました。
小さくするのではなく、伝え方をつくり直す。
レスポンシブデザインも、ブランド体験の一部として考えています。
【IMAGE 12｜PC / MOBILE】
VISUAL DESIGN
世界観を支える、
静かなデザイン。
ブランドの中心にあるのは、
木。
革。
職人。
そして時間。
それらを邪魔しないよう、視覚表現はできるだけ抑えました。
COLOR
深いブラック。
ウォールナットを思わせるブラウン。
柔らかなオフホワイト。
そして、光を感じさせるアンバー。
TYPOGRAPHY
細く、静かなタイポグラフィ。
大きな文字を使いながらも、強く叫ばない。
余白と組み合わせることで、ブランドの落ち着きを表現しています。
PHOTOGRAPHY
自然光。
木の質感。
革の皺。
職人の手。
完成した商品だけではなく、
「そこに積み重なった時間が見える写真」
を中心に構成しました。
SPACE
余白も、ブランドを伝えるための要素。
情報を詰め込まず、写真と言葉の間に時間をつくることで、ゆっくりとブランドを感じられる画面を目指しました。
【IMAGE 13｜DESIGN SYSTEM】
FINAL
物語で、価値を伝える。
ブランドの価値は、
説明するだけでは伝わらないことがあります。
見る順番。
言葉。
写真。
余白。
そして、動き。
それらを一つの物語として設計することで、
ブランドの価値を、
「読むもの」から、
「体験するもの」へ。
soulagement / CHAIRMAKERSでは、
一脚の椅子を通して、
職人が重ねてきた時間と、
これから使う人が重ねていく時間を、
一つのWeb体験としてデザインしました。
【IMAGE 14｜CTA】
soulagement / CHAIRMAKERS
Brand Website Design
Concept Project