デザインのポイント

焼肉用の精肉・肉加工品の通販特設サイトのサンプルです。すでに通販サイトを運営している前提で、おすすめの商品への誘導を目的としています。
赤身肉のシズル感を引き立たせるために黒を基調しています。また、装飾などに高級感を持たせ、通販でも満足できる品質のお肉を提供してくれそう、とユーザーに期待を持ってもらえるようなデザインになっています。

サンプルを見る

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

動画再生(メインビジュアルでユーザーに訴求)

ユーザーに食品の魅力が一目で伝わりやすくするために、メインビジュアルで動画再生を採用。
実際の調理の工程などをサイトを開いてすぐに動画で見せることで、ユーザーの食欲と購買意欲を向上させる効果が期待できます。  

スライド(商品への注目を高める)

様々な調理例をスライドの流れで見せ、ユーザーに「実際に食べてみたい」と感じさせる表現を演出しています。
また、今後サイトを更新していくにあたり、調理例の画像の増減があった場合も、デザインの変更に大きな影響がなく対応することができます。    

カラーオーバー(購入ページへの誘導)

購入ページへのリンクにはマウスホバーのアニメーションを取り入れました。
マウスホバーアニメーションを取り入れることで、クリックできると認識させ、コンバージョンとなる購入ページへのアクセスを促します。
ホバーすると、背景色が流れるように変わるようcssで設定をしており、ボタンを「押している」という感覚と、マウスポインターを当てた時に意識がボタンに向くよう配慮しています。

サンプルを見る