デザインコンセプト

●商品名：Natulaven（ナチュラベン）
Natural（自然に）+Lavender（ラベンダー）の造語。

●ターゲット：20代～女性
花粉などの外的ストレスから肌を守る保湿クリーム。寒い冬から暖かい春になる時期が肌が荒れやすい。さらに花粉や新生活などで何かとストレスを抱える時期かと思います。そこで、この時期にお肌を守る保湿クリームを開発しました。いつでもどこでも気になったら使用して欲しいのでハンドクリーム、ボディクリームとしても使用できるようにしました。

●設定：自然派化粧品を販売するNATUREMODEが開発。公式ストアやRakuten、Amazonでの販売をアピールしたい。

制作時間

●商品とWebデザイン構想「3時間」
●素材の選定や写真加工「8時間」
●デザインカンプ「6時間」=合計17時間

レスポンシブ

対応

使用ソフト（デザインカンプのみ）

書体

英語:Capitolium2
日本語:しっぽり明朝
商品名が明朝体なので英語、日本語のタイトル部分は同じ明朝を使用しました。説明文で明朝を使用すると文字が多くサイズも小さいので見づらくなってしまうため、ゴシックを選択しました。

使用色

紫色
topの背景写真に合わせてラベンダーの紫色にしています。

写真

フリー素材
商品パッケージのラベンダーのイラストは
イラストレーターとフォトショップで制作し合成しました。

紫、ベージュの2色で統一するように写真全体を補正しています。

Topの背景固定写真に入れている左の丸い写真2点はスクロールの途中で変わるイメージになります。初めはメインビジュアルに商品パッケージの写真があるのでパッケージ写真ではなく、クリームの使用感がわかる手に商品を塗っている写真を選びました。成分についてのセクションからは素材の写真が続くので、商品パッケージの写真に変わるようにしました。Productセクションにはスライドでクリームの質感、クリームを手に塗る写真、ボディに塗る写真の3点が切り替わるようなイメージなります。

こだわり

Topの背景を固定のデザインにしました。
スマートフォンでもすぐに見れるようにQRコードを設置。
インスタグラム、ツイッターのアイコンはスクロールしても固定されるようにしました。 公式ストアやRakuten、Amazonでも販売をアピールしたいとのご要望から、タブレットサイズ以下のバーガーアイコンを展開したナビゲーションには通販サイトにアクセスできるボタンを設置しました。写真を丸や角丸にしているのはパッケージデザインで角丸が使用されているのと、柔らかいイラストなので丸を使用して柔らかさを出しました。 成分の部分は有効成分がすぐ目に入るように図式化。どの成分がどんな効果があるのかをパッと見てすぐわかるようにしました。