Hair salon 美容室Webサイト

美容室Webサイト

制作について

職業訓練校の課題で架空美容室サイトのリニューアル提案を行いました。

制作年月

2023年5月
制作期間・範囲

ワイヤーフレーム・デザインカンプ 5日

コーディング 9日
使用ツール

Illustrator / Photoshop / Visual Studio Code

情報整理

現状サイトの課題
1. レスポンシブ対応ができていない。
2. 求人情報、料金、マップなど不足している情報がある。
3. 情報の配置がばらついていて少しわかりにくい。
制作の目的

本店開店 20 周年と新店オープンに伴うリニューアル、新規顧客獲得
ターゲット
1. 既存のお客様（子供からご年配の方まで幅広い年代）
2. 新店オープンに伴う新規のお客様

ポイント

デザイン

01上質感と親近感のバランス

写真やボタンの角をとり、親しみやすさを出しつつ上質感というイメージも保てるように細い線のあしらいを部分的に付けました。

また、手書きのフォントは子供っぽくなりすぎないものを選び、セリフ体や明朝体のフォントを目立つ部分に使用することでバランスを整えました。
02鏡のデザインでスタイルに注目させる

木の丸い枠で写真を囲むことで鏡を連想させるデザインにしました。
また、中央の写真だけにつけることで目を引くようにしました。
03糸をイメージしたあしらい

「お客様とのご縁」を大切にされているということだったので、細い線で糸を表現し、縁を結ぶ意味を込めて円を描いてからロゴの文字に結びました。同じ糸のあしらいをコンセプトとニュースの下部に配置しました。

情報・機能

01ファーストビューでお店のコンセプトを伝える

「お客様とのご縁」を大切にされているということだったので、接客中の雰囲気が伝わるような写真に一文を添えました。
02予約への誘導

予約ボタンはページをスクロールしても追従するようにし、予約に進みやすいようにしました。
また、アクセントカラーを使用することで目立つようにしました。
03情報の整理

トップページに料金表を追加し、下層ページに掲載されていた店舗情報も直ぐに確認できるように移動させました。

また、それぞれの店舗のInstagramとGoogleマップにとべるようにしました。更に、20周年の芦屋店と新店舗の甲子園店には目立つようにその旨を記載しました。