架空のアロマオイルのネットショップのサイトを職業訓練の授業で作成しました。
自分で企画してデザインカンプを作成し、コーディングしたサイトになります。
サイトはトップページのみのPC用となっております。
サイトへはこちらからご覧ください。
作成ツール：VS code
作成言語：HTML、CSS、jQuery
作成期間：6日間(企画書：2時間、デザインカンプ：2日、コーディング：4日)
ここに含まれる画像は全てフリーの素材を使用しております。
トップイメージでアロマの香りになっている花の画像を使用することで、香りの空間を引き出せるようにしました。
コンセプト：しっかり眠れない方や疲れを取りたいと思ってるお客様に手に取ってもらいたい
背景色：#fff9ee
メインカラー：#a3b4bc、#f9d9ce、#9f79a2、#fbe3bc
差し色：#005133
各空間を感じてもらいたいので、4色展開で紹介するようにしています。
背景色は落ち着いた雰囲気が感じられるように柔らかい黄色を使用して、補色の青緑を差し色として使用しました。
使用方法やアロマについて知識が無い方にも十分に理解できるようなサイトに仕上げました。
苦労した点として、花の画像にある丸いボタンにカーソルを合わせたら商品の情報が表示されるような仕組みの所が挙げられます。
どうやったらそこにカーソルがいくかを試行錯誤しながら考えました。
下記の画像はサイト全体の画像になります。
サイトをご覧になりたい場合はこちらからご覧ください。
