美容師の「顔」がみえ、ほっと一息立ち寄ってみたくなるサイト
美容師の「顔」がみえ、ほっと一息立ち寄ってみたくなるサイト
１人で経営する美容室のため、美容師の人柄やお店の雰囲気を伝えることで利用者の不安を取り除き
「行ってみたい」と思わせるサイトにした。
URL
https://ikoi151.com/
（サーバー契約・ドメイン取得、サーバーアップまで担当）
デザインカンプURL
担当
企画・写真・ワイヤーフレーム・デザイン・コーディング・サーバーアップ
コンバージョン
容室の認知と予約数アップ
ターゲット
既存客、女性（全年齢）、騒がしくない美容室を探している人、落ち着いた美容室を探している人
事前調査・要件定義
事前に依頼主にサイトに盛り込みたい要素をヒアリングした上で10個の美容室サイトを参考に、必要な要件を調査・決定。デザインについては美容室だけでなくアクセサリーサイトを参考にし、グレーをベースカラーとしシルバーやゴールドをメインに取り扱うショップから、背景を単調に見せないためのデザインのヒントを集めた。
デザインについて
⓪素材の写真撮影と地図の作成を行う
店内の写真撮影を自ら行い、店までの地図をIllustratorで作成。
①シンプルなサイトにするために
メニュー一覧のみ別ページとし、基本は１ページで完結をさせる
②更なる信頼感を得るために
明朝体を使うことで高級感と女性らしさを出す。
カラーは先方よりグレーと黒を希望されたため、きつい印象を与えないよう
明度を下げ落ち着いた雰囲気を演出する。
③予約が取れる場所を複数に配置する
「グローバルナビゲーション」「フッター」「メニュー」に予約ボタンを設置する
コーディングで考慮したこと
Sassを使用。今までdivを多用してコードを書いていたが、訓練校でSEO対策においてきれいに書く必要があることを学び、articleやsectionを用いてコードを書くことを意識した。またmetaタグにおいても、タイトルの付け方を「南浦和」や「隠れ家」といった地名やイメージを用いることでユーザーに伝わるようにした。コードルールを守るようにし、見出しタグの順番や、imgタグのalt属性も省略せず記述した。
制作時間
要件定義・画面設計：20時間
デザインカンプ：25時間
コーディング：36時間
使用アプリ・言語
デザインカンプ：AdobeXD
コーディング：HTML／CSS／Sass／jQuery／JavaScript