Webサイト制作｜架空のエステサロン

◽️制作したHP

◽️作業環境

Photoshop、Illustrator、HTML、CSS、jQuery

◽️制作期間

2021年1月〜3月

◽️架空のクライアント情報

開業から10年経った代官山のエステサロンで、今までのホームページが簡素だったため制作依頼があった。スタッフは10名ほど。普段はHOTPAPPER Beautyなどからの予約が多いが、サロンの情報を載せきれていないことに悩んでいた。ホームページでサロンのコンセプトや他店とは違う強み、スタッフの顔などを載せることで信用度が増し来店も増えると考えた。

◽️制作概要

1. 目的

HOTPAPPER Beautyなどのサイトを見てから訪問することを想定しているので、予約を検討している方に、コンセプトや他店とは違う強み、スタッフの顔などを見てもらうことで安心して予約をしていただく。

2. トンマナ

清潔感を出すためにライトグリーンを、安っぽくなく癒しの雰囲気を演出するために優しい色合いのブラウンとグレージュを選択。写真もあまり色の多くない明るいトーンの写真を選択している。

3. ターゲット

・20代から30代の女性

・社会人5年目以上の金銭的に余裕の出てきた女性

・代官山近くに住んでいるか、代官山近くで働いている女性

・結婚を控えている女性

・自分にご褒美をあげたいと考えている女性

・毎日忙しく癒しを求めている女性

・大手のサロンにはない親しみやすさ、プライベート空間を求めている

4. ペルソナ

・27歳の女性

・恵比寿で5年勤務の営業

・年収は500万円程度

・結婚が決まって結婚式場を予約したばかり

・最近残業が多く、遅くまでやっているサロンを探している

・結婚式に向けてエステサロンを探している

・仕事終わりに寄れる場所

・キレイになれるだけでなく癒される空間を求めている

◽️工夫したこと

1.  トンマナ

①洗練された雰囲気・清潔感のあるカラーを選択。

②ライトグリーンはあしらい程度に利用し、予約ボタンにのみ広く利用した。

③Google mapのカラーも落ち着いた色に設定。

2. 画像

①全部で3パターン作成し、ふわっと切り替わる仕様にした。ボディコース、フェイシャルコース、ブライダルコースをそれぞれ表している。

②全体的に明るく白いトーンの画像を使用。

3. フォント

見出しには細字のゴシック体、説明文にはやわらかい明朝体を使うことで洗練された雰囲気に仕上げた。

4. レシポンシブ対応

①タブレット、スマートフォンではハンバーガーメニューを実装。

②改行ポイントや文字揃えを端末によって設定。

5. 余白

項目ごとに余白を出して、ゆったりとした間を作った。

6. スクロール

項目ごとにふわっと浮き上がるようにして優しい雰囲気にした。

◽️学んだこと

1. トンマナの重要性

始めは薄いピンクも含めて4色で表現しようとしたが、ピンクが目立ってしまいごちゃごちゃしてしまった。サイトの世界観にもよるが、今回のような優しい雰囲気のサイトを作るなら、ピンクは部分使い程度に。基本は3色くらいでまとめた方が世界観が伝わる。

2. メインイメージの重要性

メインイメージによっては離脱される可能性もあるので、女性が好きそうな世界観にあった画像を選んだ。

3. 余白の重要性

余白があることで情報整理がされ、洗練されたイメージも与えることができる。文字間隔や行間隔を広げることで読みやすくなる。

4. 文字の大きさ・フォントの重要性

文字が大きいと目立つ上に元気なイメージになってしまうので、落ち着いた雰囲気にしたい場合は文字サイズも抑える必要がある。

5. HTMLのクラス名を予め決めること

6. CSSの記述順を予め決めること

初めて一からWeb制作をしてみて、手を動かすことで学ぶことが多くありました。制作の流れとしては、まずPhotoshopでデザインカンプとワイヤーフレームを作成し、それをもとにHTML/CSS/jQueryで実装していきましたが、最初は思った通りに実装できない部分や思ったように反映されないこともありました。ですが。不明な部分は調べたり人に聞いたりして、それを実践していくことでコーディング手法を身に着けることができました。今回の制作で、簡単なWeb制作はできるようになりましたが、まだまだ学ぶことは多くあるので実践を繰り返して成長していきたいと思います。