【Webサイト】Hair Salon Kobayas(架空)

- 作業フェーズ
- デザイン(WF・テキスト以外) / コーディング
- 制作期間
- 2021年12月〜2022年2月(デザイン9h / コーディング10h)
- 使用ツール
- Photoshop / VSCode Editor
- ターゲット
- 20代〜40代の女性とその家族(旦那さん等) / 近隣の人
- コンセプト
- 清潔感と温もりを感じる美容室のWebサイト
- クライアントの課題
-
- ・Webマガジンサイトからの集客だと業者へ支払う中間マージンが高く、手元に入る売上が少ない。
- ・DMで予約希望のお問合せが来るが、内容に不足が多いので何とかしたい。
- ・Instagramでは載せられる情報に限界を感じているので、もっと見やすく自分のサロン情報を載せていきたい。
- クライアントの要望
-
- ・清潔感と温もりを感じる色合いにしてほしい。#f6f6f1(ベージュ)と#b8dae6(水色)を使ってほしい。
- ・レスポンシブデザインにしてほしい
- ・ファーストビューはお店の雰囲気やカットしている状態がわかるようにスライダーで表示してほしい。
- ・全てのメニュー見られるよう「ヘアメニュー」ページにリンクを貼ってほしい。
- ・予約フォームのリンクを貼ってほしい。休みの日が分かるようにカレンダーを差し込んでほしい。
- アウトプットによる解決策
-
- ・予約フォームにすぐ遷移できるように、予約ボタンをヘッダーに設置した。
- ・予約ページで予約内容を細かく入力することを想定している。
- ・サロンメニューはグルーピングがわかりやすいように大分類と小分類で見た目を分けた。
- ・ベースカラーに#f6f6f1(ベージュ)を、アクセントカラーに#b8dae6(水色)を使用し、メインカラーは自然や温もりを感じられる#66541d(茶色)にした。
- ・レスポンシブデザインにした。
- ・ファーストビューはお店の中の写真やカットしている写真をスライダーで表示している。
- ・自然派なことが伝わるよう、背景に植物の写真を使用した。
- こだわり
-
- ・女性がメインターゲットではあるが、男性も来やすいように写真に男性を使用したり、女性らしくなりすぎないようなデザインにした。
- ・情報整理を行うことを意識したので、それぞれのセクションの区分けをはっきりさせたり整列・近接・反復・対比を意識してテキストを配置した。
- お題に関する情報
- こちらのお題を使用して作成しました。