ハーゲンダッツ／＃1日1サイトレビュー
概要
ハーゲンダッツ 公式サイト
ファーストインプレッション
様々な商品がバナー広告のような写真で表示しながら変化している
写真とキャッチコピーとカラフルな色使いで見てるとウキウキする
メインビジュアル
左上部にロゴマークとナブ配置
右上部にショップ、検索、ハンバーガー配置
紹介されている商品ごとにview moreボタンが常に表示されてる
背景が垂直方向に動きながら変化していて、ロゴも商品の名前になっている
背景の下部にゆっくり静かに波アニメーションが使用されている
フォント・配色
日本語フォント…dnp-shuei-gothic-gin-std
英語フォント…reuben
配色…ベース白、えんじ色
アイスクリームのサイトらしく、商品の種類ごとに色の印象が変わっていてカラフルなデザインになっている
英語フォントもロゴマークと同じで統一感があり見やすい
構成
セクション数は5つ
商品を見て「美味しそう」「食べてみたい」と思ってもらえるようなレイアウト、デザイン構成
商品写真がそれぞれ映えるような背景色を使用されている
商品ごとに特設サイトが作られていて、より詳しい商品紹介がされている
メインビジュアルに大きめの動き、他はホバー時に小さめの動きにすることで商品写真が活かされている
レスポンシブデザイン
ナブは全てハンバーガーへまとめている
ロゴマークが真ん中上部に配置、その下に大きく商品紹介
ハンバーガー内にも商品紹介のスライドショーが配置されている
写真は変わらずスライド式で前後の写真の端が表示されている
私見
アイスの味ごとに色々な色が使用されているのに、ごちゃごちゃせず、商品写真も映えていて見やすい。パステル系カラーの背景で
余白と配置位置がとても見やすくきれい
自分のデザインに取り入れるとしたら
白ベースにカラフルな配色のレイアウトデザインで、動きがそこまでなくても、配色次第で見てて飽きないことを知れたので、ビビットカラーやパステルカラーをうまく使い分けできるようにしたい
この記事が気に入ったらサポートをしてみませんか？