オンラインのかけはぎ専門店 refabric で、代表が過去に担当したWebサイトづくりを紹介します。衣類の写真から見積りを相談できる入口と、自分の衣類に近い修繕事例を探せる画面を整えました。
約3分で読めます
来店なしで、写真から見積りへ。かけはぎ専門店の相談から受注までを整えた事例
refabricの公開サイトで、相談・見積りの入口をご覧いただけます。
衣類ごとに状態を確かめて見積りするサービスなので、すぐ購入するボタンより、相談前の判断材料をトップページで確認できる構成を選びました。担当した範囲は次のとおりです。
担当した範囲と提供したもの
| 対象 | 提供したもの | 利用する場面 |
|---|---|---|
| 相談の入口 | WordPressテーマの画面と問い合わせフォーム | 写真や希望を伝えて見積りを相談する |
| 修繕事例 | 画像・説明・分類をそろえた一覧と表示部品 | 自分の衣類に近い修繕例を探す |
| 運用 | フォームの保存・通知・添付画像の点検手順 | 問い合わせ後の状態を確かめる |
問い合わせから見積り・受注までを迷わせない
衣類修繕は、穴の大きさ、素材、場所、希望納期で判断が変わります。サイト側では、「LINEで見積り」「フォームで見積り」という二つの入口を中心に置き、写真による概算相談から正式な見積り、依頼判断へ自然につながる文言と配置にしました。トップページの主な相談ボタンはこの二つに絞り、写真・状態・希望内容を送れば概算を相談できることを、フォームのすぐ近くで説明しています。受注前に知りたい流れ、送料、相談方法も、同じ画面の中で読めます。
写真を送ってから、依頼を決めるまで
| 利用者がすること | 受付側に渡るもの | 次に確かめること |
|---|---|---|
| 近い修繕事例を探す | 症状や衣類に近い事例 | 写真で相談する修繕箇所 |
| LINEかフォームから相談する | 衣類の写真、状態、希望 | 追加の写真や説明が必要か |
| 見積りの案内を受ける | 状態を確認するためのやり取り | 修繕内容、費用、納期 |
| 条件を見て依頼を判断する | 依頼する内容の確認 | 発送など、案内された次の手順 |
この流れに合わせ、相談前の事例確認から写真の送付先までを同じページで選べるようにしました。ここで示すのは画面と導線の変更で、受注率や対応時間の改善量は計測していません。
修繕事例を見ながら判断できる形にする
かけはぎは、言葉だけでは仕上がりを想像しにくいサービスです。そこで、修繕事例をトップページと詳細導線に出し、症状、衣類種別、部位、修繕前後の見せ方をそろえました。検討中の人が、自分の衣類に近い例を探せることを重視しています。
運営者が事例の画像・説明・分類をそろえて登録すると、トップページと事例一覧の両方に表示できるようにしました。画像が未登録でも、ほかの事例と同じ配置で説明を読める表示を用意しました。
運用で直せる状態にしておく
問い合わせが届かないときは、相談内容が保存されたか、通知メールが届いたか、添付画像を開けるかの順に確かめられる手順を残しました。画面の変更と問い合わせの処理は別々に確認できるようにし、表示、メール、保存状態を手元の開発環境で試せるようにしました。
価格が決まっていて、そのまま注文できる商品なら、購入へ進む入口を中心にできます。品物の状態によって費用や対応できる範囲が変わるサービスなら、まず一件の見積りに必要な写真・素材・希望内容を整理し、それを送れる相談の入口を用意します。


