refabric は、来店せずに衣類のかけはぎ相談から見積り、発送案内まで進める専門サービスです。一見すると通常のWebサイトですが、実際には問い合わせフォームやLINEで写真と相談内容を受け取り、状態確認、見積り、受注へ進む見積り型のサービスECとして機能します。
対応したのは、WordPressテーマの画面設計、問い合わせから見積り・受注へつなぐ導線、問い合わせフォーム、修繕事例の見せ方、運用時の確認手順です。固定価格の商品をその場で購入するECではなく、個別状態を確認して見積りするサービスに合わせ、相談前に必要な判断材料をトップページで確認できる構成に整理しました。
問い合わせから見積り・受注までを迷わせない
衣類修繕は、穴の大きさ、素材、場所、希望納期で判断が変わります。サイト側では、LINEで見積り、フォームで見積りという二つの入口を中心に置き、写真による概算相談から正式な見積り、依頼判断へ自然につながる文言と配置にしました。
- トップページの主要CTAをLINEで見積りとフォームで見積りに整理
- 写真、状態、希望内容を送って概算相談できる前提をフォーム周辺の説明に反映
- 受注前に確認したい流れ、送料、相談方法を同じ画面内で確認できる構成に変更
修繕事例を見ながら判断できる形にする
かけはぎは、言葉だけでは仕上がりを想像しにくいサービスです。そこで、修繕事例をトップページと詳細導線に出し、症状、衣類種別、部位、Before/Afterの見せ方をそろえました。検討中の人が、自分の衣類に近い例を探せることを重視しています。
- 修繕事例の画像、説明、カテゴリを同じ形式で扱えるデータ構造に整理
- 公式事例をトップページのカルーセルや事例一覧へ出せる表示部品を用意
- 画像が登録されていない場合でも画面が崩れない代替表示を設定
運用で直せる状態にしておく
Webサイトは公開して終わりではありません。問い合わせの保存、メール通知、添付画像の扱い、フォーム状態の確認を、運用中に見直せるようにしました。テーマと問い合わせ用の処理を分けて、表示改善とフォーム運用を独立して確認できる構成にしています。
- 問い合わせフォームの保存先、通知、添付ファイルの確認手順を整理
- テーマ側の表示変更とフォーム処理を分け、原因調査しやすい構成に調整
- ローカル環境で画面、メール、保存状態を確認できる開発手順を用意
小さな改善を続けられるWebサイトへ
今回の中心は、きれいなページを作ることだけではなく、相談、見積り、受注、事例確認、問い合わせ後の運用までを一つの流れとして整えることでした。専門性の高いサービスほど、技術の説明と依頼のしやすさを同時に設計する必要があります。