【ホームページ】
脱毛サロンciao (サンプルサイト)
こんにちは、Webデザイナーの菊地舜です!
今回は、私が制作した「脱毛サロンのデモサイト」についてご紹介します。
デザインの背景やコンセプト、各パートの工夫や狙いを詳しく解説し、どのようにサイト全体を作成したかをまとめます。
制作の背景と目的
今回の脱毛サロンのホームページは、「見る人がこのサロンで受けられるサービスがしっかりわかるように」というところを重視しました。
脱毛は数十万円もする大きな出費です。
そのため、サービス購入をする人は慎重にいくつものサイトを調べていると思います。
それを踏まえて、このサイトの目的は2つあります。
- 脱毛サロン自体やサービス内容に安心感を感じてもらうこと
- 必要な情報をわかりやすく提示すること
情報過多なサイトでは訪問者が迷子になりやすいため、できるだけシンプルで明快な構成を心がけました。
コンセプト
コンセプトは「シンプルで信頼感のあるWebサイト」。
余計な装飾を省き、情報が整理した見やすいデザインにしました。
さらに、訪問者が迷わず行動できるように、ボタンを固定で配置しています。
結果として「見やすく」「使いやすい」サイト体験を提供できる構成になっています。
サイト構成と各パートの説明
ヘッダー

ページをスクロールしても固定されるナビゲーションを設置しました。
また、「お問い合わせ」に飛ぶナビゲーション内も設置しています。
ファーストビュー

ファーストビューはサイトの第一印象を決める重要な部分です。
キャッチコピーと背景画像を大きく配置し、ブランドの方向性を直感的に伝えられるようにしました。
また、右側に女性の画像を置くことで自然とキャッチコピーに目線が行くようにしています。
さらに、サイトを開いてすぐに店舗情報が分かるように営業日、営業時間、電話番号を設置しました。
選ばれる理由

選ばれる理由は3つに絞りました。
そして、画像についてです。
Webデザインの基本として、「誰が見るのか」を意識したビジュアル選びが欠かせません。
特に女性をターゲットにしたサイトでは、女性の写真を多く使うことで自然と共感を得やすくなるんです!
人物写真は「自分に近い存在」としてイメージしやすいです!
そのため、女性が登場する画像を多めに配置すると、閲覧者の目を引きやすくなります。
たとえば、カウンセリングのところでは女性同士が話している画像を使用しています。
そうすることで、施術者が女性である安心感や実際のカウンセリングの雰囲気が伝わるんです!
そして、「痛みの少ない最新機器」も画像を載せることで「この機械を使うんだ」と知ってもらえます。
これも1つの情報提供ですね。
脱毛の効果

ここは見やすいように表にしています!
画像でいれるともっとおしゃれにもできますが…
SEOも意識して、プラグインと呼ばれるものを使用して表を作成しました!
(SEO〈検索順位〉の観点では、Googleは画像そのものよりも「文字データ」を優先的に評価します♪)
脱毛のプラン

アコーディオンのメニューを使用して、見たいプランだけを見れるようにしました!
きっとこのサイトを見ている人はどこを脱毛したいのか決まっているはず…
そのため、定番の4つのプランをそれぞれイラスト付きでわかりやすくまとめました!
脱毛可能な部位

イラストでわかりやすく表示しています!
お客様の声

多すぎると全部読むにはストレスになってしまうので、3つに絞りました!
掲載するのは年齢層や性別を変えることで、ホームページを閲覧した人の共感をより得られるようにしています。
また、それぞれのコメントのアイコンを変えることで、別な人のレビューであることを表現しています。
店舗一覧

こちらもアコーディオンメニューを使用しています!
全国展開していて、店舗が多いと情報が見づらくなることも…
そのため、自分の通える脱毛サロンの情報だけを見れるようにしています。
Q&A

質問に対しての回答が長文なので、アコーディオンメニューを使用しました!
店舗一覧と同様に自分が気になる内容以外のものが多いと見るのが疲れてしまいます。
そのため、ストレスフリーで情報を得られるように工夫しています。
お問い合わせ

Q&Aや直接問い合わせがしたい人向けのフォームです!
項目が多いとお客様も大変なので、必要最低限の項目のみを設定しています!
フッター

営業時間や問い合わせ先を設定しています。
LINEとも連携が可能で、お客様の一番好きな方法でお問い合わせが可能になります。
配色の工夫
配色は「清潔感」「安心感」「信頼感」を意識しました。
ベースカラー:ホワイト
サロンの清潔感を演出しました!
メインカラー:ブルー
ベースカラー同様に清潔感を感じさせます!
さらに、信頼や誠実さを表現しました。
アクセントカラー:オレンジ
「お客様の声」で使用しています。
コメントに合わせてポジティブな印象を与えています。
想定される効果
このホームページを通じて期待できる効果は以下の通りです。
- 第一印象で信頼感を与えられる
- サービス内容がイラスト付きでわかりやすく整理されている
- お客様の声で安心感を強化できる
- お問い合わせにつながりやすい導線を確保できる