大切な服を、捨てずに直す熟練の技術と丁寧な手仕事を繊細な糸で未来に紡ぐ

紬かけつぎ店

Web

Visit Site

Outline

繊維の町、愛知県一宮市でかけつぎ店を営む紬かけつぎ店様のサイトリニューアルを担当しました。

かけつぎは、衣類にできた穴や虫食いを元に近い形に戻す技術です。お気に入りの服を長く着てもらえるように直す手仕事や、お預かりした服を大切に扱っている様子をイラストで表現しました。
修理を検討する方が気になる事例やお客様の声、依頼方法などのコンテンツを用意し、ユーザーの疑問をWebサイト上で解消できることを目指しました。
また、お客様が相談や依頼をしやすいよう、LINEの窓口を新規に設置しています。

WebデザインアワードのCSS Design Awardsで「SPECIAL KUDOS」、「Best UI Design」、「Best UX Design」、「Best Innovation」。

Planning

当初、ASPのWebサイト制作サービスを用いたサイトがありましたが、デザイン面で課題を感じており、開業1周年を機にリニューアルを決めたとのことでした。

リニューアル前のサイトにはデザイン以外にも以下の課題がありました。
・今は法人取引が多いが、一般のお客様からの注文を増やしたい
・やわらかい、親しみやすい印象を与えたい（他社と差別化したい）
・情報量が多くてもきれいにまとまっているサイトにしたい

これらの課題を解決できるよう、検討を行いました。

Design

競合サイトを調査すると、和のテイストで熟練の職人や伝統の技術を訴求するサイトが多く、同じ方向性だと埋もれてしまう可能性がありました。そこで、他にはない「紬かけつぎ店」らしさが出るような表現を検討しました。

リクエストであった「親しみやすい印象」を実現しつつ、糸をデザインに取り入れてコンテンツのつながりを表現すべく、イラストを採用することに。イラストは線を少なくしてリアル感を出しすぎず、親しみやすい印象を感じてもらうことを意識しました。

さらに、普段かけつぎを行う際に使用している道具を散りばめることで、手仕事感を表現しました。

Technology

画面幅が変わるとコンテンツの高さが変化し、糸の位置が変わってくるので、以下の点に気を遣いました。

・コンテンツやイラストと糸の関わり方を適切にする。どの画面幅でも、近づきすぎず、離れすぎず、重なりが不自然にならないように
・コンテンツ量の変化に対応できるよう、左右の折り返し部分が画面外に見切れるようにしているが、全体で一本の糸につながっていることが感じられるようにする
・糸の太さを一定に保つ

かけつぎで1本ずつ糸を通す作業があることから、ハンバーガーメニューを縫ったようなアニメーションをつけています。

Contents

かけつぎを依頼したい方は傷んでしまった服が直るか知りたいため、かけつぎ事例を多く掲載しました。また、事例を探しやすいように、衣服の種類や穴の大きさなど複数の条件で絞り込む機能も実装しています。

さらに、オンライン見積に必要な情報を連絡してもらうための手順や依頼の流れも、わかりやすく伝える工夫をしました。

Voice

ホームページ公開ありがとうございます！すごく素敵でホントに気に入っております！！
お問い合わせも順調に増えてます！
ホームページを見た人の反応もすごく良いです！！本当にありがとうございます！

Project Data

Client: 紬かけつぎ店
Place: 愛知県一宮市
Launch Date: 2020.10
Url: https://kaketsugi.jp/
Industry: 暮らし

Director: 保科大輔
Designer: ハラヒロシ
HTML Coder: 長張由布
Engineer: 長張由布
Illustrator: 住澤みかげ
Designer: 栗原康平