webサイト制作｜架空の美容医療クリニック
OVERVIEW
オンラインデザイン講座の講師に課題を提供してもらい、作成しました。架空の美容医療クリニックのwebサイトです。
//サイトurl//
https://mons-design.com/clinic
//制作期間//
- デザイン：10日間
- コーディング：17日間
//使用技術//
- HTML 、CSS、jQuery、Illustrator、Photoshop、Dreamweaver、XD
//対応機種//
- PC/SP
//制作目的//
- リーズナブルな価格の美容医療クリニックのため、顧客にしっかりとした安心感、信頼感を与える。
- サブスク型のメリットを伝えることで、お得感を持っていただき、予約数の増加に繋げる。
//デザインコンセプト//
華やかさ、清潔感、安心感、女性らしさ
//ターゲット//
- 20代から40代の女性
- 美意識が高い
- 美容医療に興味を持っているが、どこにしていいか迷っている
- 仕事終わりに気軽に寄れる美容クリニックを探している
- 都内近郊で働いている
- 自分にどんな美容メニューがあうかわからない
- 未婚、結婚を控えている
- 既婚、共働き
- まずはお試し感覚で通いたい
//こだわったところ//
- LINE予約を促すため、ナビの右側にボタンを置き、スクロールしても常に予約ボタンが上に固定されいつでもボタンを押せるようにした。また、ボタンを目立たせる為、色をグラデーションにした。
- メインビジュアルのキャッチコピーの『50』種類、『定額制』の文字のジャンプ率を高くした。美容メニューの豊富さとサブスク型ということがすぐわかるように工夫した。
- メインビジュアルの写真は、健康的で自然体な笑顔の日本人女性にすることで、親しみやすさを出せるよう意識した。また、ロゴに使われている花と同じ種類の花の写真をバックに入れ、デザインに統一感を持たせた。
- サイト全体を緑系、ピンク系の色でまとめ、爽やかさ、誠実さ、安心感、女性らしさを表現した。美容だけでなく、医療行為を行うクリニックの為、幅広い年齢層からの信頼、安心感が得られるデザインとなるよう意識した。
- コンセプトで使われているフォントのみ、敢えて明朝体とし、クリニックの誠実さ、品のある雰囲気が出せるよう工夫した。
- クーポンは切り取り線のあるチケット風のデザインにし、思わず押してしまいたくなるような、ワクワクするようなデザインとした。
- メリットは特に目立たせたいワードのフォントサイズと色を変更、下線にドットのあしらいを行った。
- 20代〜40代までのお客様の声を載せることで自分がクリニックに通った場合のイメージがしやすくなるようにした。
- よくあるご質問ではCSSのみでアコーディオンメニューを実装。
- サイトの下部にも入会費無料や友達紹介キャンペーンのお得なクーポンバナーを入れることで、サイトを一通り最後まで見終わったユーザーに再度入会を促す。
- バナーはあえて色を多用した目立つ配色にしたりボタンを配置してユーザーからクリックしてもらいやすくした。
- スマホ版ではナビにハンバーガーメニューを実装。
- スマホ版ではスクロール後、ブラウザ下部に予約ボタンを常に表示させるようにした。
