デザインのポイント

美容・化粧品市場において重視される「透明感」を強く感じられるようなデザインで作成しました。

化粧品は、薬機法により効能効果の過剰表現が禁止されているため、注釈表記を行う必要があったりと、繊細な作りが求められます。 文章での表記に制限があるぶん、うるおいや、柔らかさを感じられるようなテクスチャやイメージ画像を多く配置し、視覚的に化粧品の良さを訴求します。

また、単純に商品の良さをうたうだけでなく、画面全体を通してストーリー性のある構成となっています。 化粧品に関する悩みを挙げ閲覧者の共感性を高め、ポイントで商品の良さ・安全性を記述し、購入意欲を高めます。

サンプルを見る

アニメーション表現のポイント

メインビジュアル

この特設サイトに使用されているアニメーションはこちらのブラーインのパターンのみです。ブラーインとは、ぼかし効果のことを言います。このサイトでは、この効果をゆったりとした速さで使用し、ラグジュアリーなイメージを演出します。

また、美容用品や化粧品を扱うWEBサイトは、商品のイメージを訴求しなければならないため、画像が大きく使用される傾向にあります。 スライドのような移動を伴うアニメーションを広い面積で使用すると、過剰に感じる場合があるため、ブラーインがより効果的な演出と言えます。

商品コンセプト

コンセプトを掲載しているこちらのセクションは、人物などのイメージ画像を大きく使用し個性を強調します。 例えば、商品の特長に関連したしずくの形状や、クリームの切り抜き画像は、世界観の演出に役立ちます。

箇条書きの内容を時間差で表示

こちらのセクションでは、各文章を1文ずつ時間差で表示します。並列の情報をリズミカルに表示することにより、複数の文章が存在することを無意識のうちに認識することが可能です。 また、悩みとはいっても、暗い表情の写真を使用してしまうと過剰な印象になってしまうため、通常の写真のトーンを落とす程度にとどめています。過剰に煽るとネガティブに作用してしまう場合があるため、注意が必要です。

サンプルを見る

ポイント

今回は、成分と安全性をうたう、2つのポイントを掲載しました。 アニメーション表現では、お悩みのセクションと同様に並列の情報は時間差で表示し、単調にならないように情報の流れを作ります。 各成分のイメージ写真を挿入し丁寧に説明することにより、品質が高いように感じるようになります。