withmeは「わたしと共に」という意味で、自分自身をいたわり暮らしに寄り添う。20代後半からの大人の女性向けブランドです。毎日浴びている紫外線からのダメージのケアに特化し、優しい洗浄成分で洗いあげることができるシャンプーです。

URL

https://e-kaga.com/works-3/index.html

担当

デザイン・コーディング

サイトの目的

商品の購入。認知度の向上。

ターゲット

20代後半の女性。仕事でパソコンを使用するが、家では主にスマホを使っている。ロングヘアーで美容院には1.5カ月～2月に1回の頻度で通っており、月の美容代は1～2万円。美容にこだわりがあり、家でのケアにも力を入れている。

デザインについて

ターゲットは20代後半からの女性で移動時間や家で寛ぐ時間にスマホからサイト閲覧することを考慮してスマホファーストのレイアウトにしました。スマホの時は右上のボタンにメニューを隠し、スクロールした際にも付いてきて、見たい内容にいつでも飛べるようにしました。タブレットでは左側にメニューを固定で設置し、PCになるとさらに右にバナーが固定で出るようにしました。
形は曲線を使用し柔らかい印象あたえています。メインカラーは濃いピンク色で女性的で華やかな印象を与えています。アクセントカラーは茶色で落ち着きや温もり、安心感を与えています。かけ合わせることで高級感や大人っぽさを引き出しています。文字は明朝体を使用し、高級感と上品さ大人っぽい印象を与えています。

コーディングについて

jQueryを仮想しながらトグルメニューを実装しました。SEOを考慮し、様々なタグを使用しました。レスポンシブの記述の際にタブレットサイズ768px以上でレイアウトを切り替え、左にメニューを出して、メインの要素は500px以下にならないように固定しています。PCの際は1025px以上でレイアウトを切り替え、右に写真を出しています。