DESIGN / 01
トップページの印象と入口
黄色と大きな店舗写真を中心に見せていたトップから、生成りの背景・大きな文字・相談ボタンを組み合わせたトップへ。店の雰囲気を残しながら、相談できることを最初に伝えます。
CASE STUDY / 01
わかやぎ
店の情報を伝えるWebから、相談を始められるWebへ。
長く育ててきた店の物語やサービスを引き継ぎながら、「何を相談できるか」「次にどう動くか」が分かる構成へ。公開後も、問い合わせや日々の確認の入口を整えています。
2026年9月9日 確認時点
BEFORE / AFTER
画面で見る、
わかやぎの変化。
変更前と変更後を、同じ画面幅で並べました。画像を押すと、別タブで拡大して確認できます。
DESIGN / 02
スマートフォンで見える情報
同じ390px幅の画面で比較。写真とごあいさつを読む流れから、目的別メニュー、相談内容の説明、ボタンへと順に進める配置に変えました。
DESIGN / 03
仕立て・お直しの案内
料金項目の一覧から始まる見せ方を、まず相談の考え方と現物確認の必要性を伝える構成に変更。書体・余白・見出しの大きさもそろえました。
各ページ上部の保存画面を掲載しています。PC版は1440×1000px、スマートフォン版は390×844px。画像内の料金・案内は撮影当時の内容です。現在の情報はわかやぎの公開サイトでご確認ください。
01 / BEFORE
出発点にあったこと。
以前のサイトには、店のごあいさつ、店舗写真、仕立て・お直し、催し物カレンダー、ブログやネットショップへの入口がありました。これらの情報を残しながら、訪れた方の目的と相談の流れに合わせて組み直しました。
02 / CHANGES
どこに手を入れ、
どう変えたか。
制作・画面・情報の変化を比較しています。事業上の効果を測定した比較ではありません。
情報の探し方
導入前
店のごあいさつと、ブログ・ショップ・仕立て・催し物などを入口にしていました。
公開した新サイト
「仕立て・お直し」「着物相談」「催し物」「店について」「店舗案内」を目的別に整理。サービスを知る、相談する、来店するという行動を選べる構成にしました。
仕立て・お直しの説明
導入前
仕立代、直し代、クリーニング、着付けを一つのページで紹介していました。
公開した新サイト
仕立て・お直し・お手入れを節に分け、料金に加えて現物確認が必要な理由、相談前の準備、引き渡しまでの流れを整理しました。
相談の始め方
導入前
サービス説明を読み、利用者が連絡方法を探す構成でした。旧サイトで同等のAI相談整理機能は確認していません。
公開した新サイト
番頭見習い「福助」の入口と着物相談ページを設置。質問を整理し、必要な確認を店主へつなぐ役割を持たせました。AIの回答だけで判断を完結させません。
03 / PROCESS
一つずつ、形にする。
- 01
大切な情報を引き継ぐ
店の物語、仕立て・お直し、催し物、ブログやショップへの接続を、新しい構成へ引き継ぎました。
- 02
相談と来店の流れを組み直す
文字の見出し、目的別メニュー、相談ボタンを整え、スマートフォンでも順に読める配置にしました。
- 03
公開してからも整える
2026年8月の公開後、プライバシー案内、Instagramの公開枠、Web問い合わせへの入口が追加されたことを確認しています。
04 / WITH AI
Webを作る、その先の支援。
公開後は、お客様向けのページに加え、日々の確認に使う管理メニューも整理しました。実装・検証・反映まで記録し、使って分かったことを次の改善へつなぐ進め方です。店主の負担がどれだけ減ったかは、まだ測定していません。
05 / ASSETS
この取り組みで残るもの。
- 整理したサービス説明と店舗情報
- 店主へつなぐ相談の案内
- ブログ・ショップ等への既存の接続
- 更新・確認の手順と改善の記録
画面に見える完成形とあわせて、確認した情報、進め方、判断の記録も次の更新へつなげます。
06 / NEXT
現在地と、次に確かめること。
今後は実際の使い勝手を確認し、分かりにくい説明や操作を見直します。公開後の追加・変更は確認できていますが、問い合わせ増加、売上増加、検索順位や作業時間の改善は未測定です。
公開サイトを見る ↗