架空企業のアロマオイル(天然精油)のサブスクリプションサービス紹介サイトを制作いたしました。
（制作ページ：topページ、アロマ診断、プラン選択）
URL
担当範囲・所要時間
企画(5時間) / デザイン(10時間) / コーディング(25時間) / 企業ロゴ作成(5時間)
使用ツール
XD / Visual Studio Code / Photoshop / Illustrator / jQuery
サイトの目的
サービスの認知拡大とSNSでの拡散、サービス契約数の増加
ターゲット
20代後半～30代、働き盛りの女性。真面目で責任感が強く、癒されたいと感じている方。
使用カラー
#7f8a7f
#95504b
#FFEDE8
女性らしい柔らかさと自然を感じさせるため、メインカラーは落ち着いたグリーン、アクセントカラーは赤みのあるブラウン、ベースカラーは薄いピンクにしています。
デザインについて
シンプルで透明感があり、女性らしい柔らかさがありつつ芯があるイメージで制作しました。
スマホで見ていただくことを想定してワンカラムで余白を多くとって制作しました。
フォントは、見出しには丁寧な印象のある明朝体、本文は可読性の高い游ゴシックを使用しています。
レスポンシブ対応しており、タブレット・スマホ表示では画面上部のナビメニューをハンバーガーメニューとしています。
サイトの滞在時間を増やし、SNSでシェアしたくなるよう、アロマ診断を実装しました。
コーディングについて
HTML・CSS・jQueryで制作しました。
(使用したjQueryプラグイン、JavaScriptライブラリ：Vegas.js / Rellax.js / slick.js)
その他、jQueryで下記の動きを実装しています。
- 画面上部のヘッダーをスクロールに合わせて出し入れ
- スクロールすると各セクションがふわっと表示
- アロマ診断(チャート式の診断)