01 — 制作の概要
MOCOEのWebサイト制作
岡山のトータルビューティーサロン「MOCOE」のWebサイト。サロンの想いや施術の特徴、2店舗の情報を整理し、店舗別のLINE予約につながる構成にまとめました。
- 担当したこと
- ブランディング / 情報・導線設計 / Webデザイン / PC・スマートフォン対応 / STUDIOでの実装
- 使用したツール
- Figma / STUDIO
- 制作したもの
- PC・スマートフォンに対応したWebサイト
- 制作の目的
- サロンの世界観と安心感を伝え、希望する店舗のLINE予約へつなげる。
02 — 制作前の課題
世界観を伝えながら、
予約まで迷わせない。
初めての方も、施術と店舗を選びやすく。
設計のポイント
サロンの雰囲気だけでなく、誰が施術するのか、どんなメニューがあるのか、どの店舗で予約できるのかも伝える。
初めての方が知りたい情報を順に確認できる構成を考えました。
どんなサロン？
想い・施術者の経験を知る
自分に合うのは？
施術メニュー・料金を確認
どこで予約する？
店舗を選び、LINEで予約
03 — 情報・導線の設計
サロンを知り、
自分に合う施術を選ぶ。
安心して予約できるよう、情報をつなぐ。
予約までの情報の流れ
01
サロンを知る
想い・世界観
02
安心を感じる
施術者の紹介
03
施術を選ぶ
メニュー・料金
04
店舗を選ぶ
住所・営業時間
05
LINEで予約
店舗別の窓口
04 — デザインの工夫
一つひとつの設計に、理由を。
サロンらしさと、情報の分かりやすさを両立。
01 / 世界観の表現
白と黒、余白で印象を整える。
ロゴを中心に、モノトーンと余白でサロンの世界観を表現。情報を詰め込みすぎず、写真と文章が自然に目に入る見せ方を意識しました。
02 / 安心につながる情報
想いと経験を、施術選びの手がかり。
サロンの想いから施術者の紹介、メニューへと情報を整理。施術の種類と料金の目安を
まとめ、初めての方も相談しやすい構成にしました。03 / 店舗別の予約導線
行きたい店舗のLINEへ、迷わず。
妹尾店・平島店の住所や営業時間を分けて掲載。予約・お問い合わせでも店舗別のLINE
窓口を示し、利用したい店舗へ進みやすくしました。
05 — 完成したデザイン
完成画面と、予約へのつながり。
PC・スマートフォンで、同じ世界観と情報を。
06 — 実装
STUDIOで、見せ方と
使いやすさを形に。
公開後も、スタッフの方が更新しやすいサイトへ。
実装で意識したこと
PCでは余白を活かしてサロンの印象を伝え、
スマートフォンでは文章やメニューを読み進めやすい幅に整理。
店舗情報と予約窓口を対応させ、妹尾店・平島店それぞれのLINEへ進めるように実装しました。
