NATURE EXCELA

コスメブランド(架空サイト)

mia's website

自社研究開発の自然由来の成分を取り入れた化粧品を販売する新しい企業の商品紹介サイトです。

URL

https://cosme.asami-site22.com

サイトの目的

企業理念と商品サービスの認知

ターゲット

敏感肌、オーガニック、ミネラル美容に興味がある20代後半からの女性

デザインに関して

新しい企業なので、企業の理念や雰囲気の伝わるデザインにしています。時間のない消費者が素早く目的の商品に辿り着けるようトップページにすべての商品ジャンルを掲載する構成にしました。商品写真をトップページに持ってこないことで、自然派でシンプルな化粧品であることを反映しています。見出しのフォントには繊細でエレガントなセリフ書体Caslonを使い、より美容系らしさを強調しています。女性の顔に加工を施したり画像にノイズを入れたりすることで、アーティスティックな雰囲気を取り入れ、自然派でありながらエレガンスさと高級感を演出しています。

コーディングに関して

シンプルな構成を利用し、レスポンシブ対応に力を入れました。商品写真はモーダルウィンドウを使用し、かつ画面幅に合わせて伸び縮みするようにしています。

使用ツール

Figma / Photoshop /Illustrator / Dreamweaver

制作箇所

企画、デザイン、コーディング、イラストレーション

制作期間

1.5ヶ月

デザイン

コーディング前のデザイン見本です