Portfolio

【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(茶色)にした。
  • ・レスポンシブデザインにした。
  • ・ファーストビューはお店の中の写真やカットしている写真をスライダーで表示している。
  • ・自然派なことが伝わるよう、背景に植物の写真を使用した。
こだわり
  • ・女性がメインターゲットではあるが、男性も来やすいように写真に男性を使用したり、女性らしくなりすぎないようなデザインにした。
  • ・情報整理を行うことを意識したので、それぞれのセクションの区分けをはっきりさせたり整列・近接・反復・対比を意識してテキストを配置した。
お題に関する情報
こちらのお題を使用して作成しました。
hair salon kobayas PC版キャプチャ
hair salon kobayas SP版キャプチャ