リラクゼーションドリンク「CHILL OUT」の商品サイトをトレースしました。
この商品はこのサイトありきと思えるくらい素晴らしいデザインだと思います！
WEBデザインに「3D」や「グラデーション」、「メタリック感」を取り入れるのはチープになってしまいやすいと思うけど、滑らかで気持ちいい浮遊感のあるアニメーションや、自然なシャドウによって、リッチさや今っぽさがありつつ、3Dの良さをとても感じられます。
使用しているカラーやフォントは少なめで3Dモデルも缶のモデルのみを使っていますが、全く単調に感じません。3Dモデルそれぞれ動き方や向きが違うこと、複数種類のアニメーション（テキストのSVGアニメーション、ホバーエフェクト、パララックス効果など）が使われていること、3Dモデルだけでなくイラストも使われていることなどによるものと思います。
円形の写真も、ぼかした背景を枠のようにして合わせてメタリックに見せていてかっこいいです。
フォントには英字がappleのsystemフォント（San Francisco）、Montserrat、価格の部分は画像になっていますがDINと思われるフォントが使われていました。日本語は游ゴシック。変に3Dやチルのイメージに合わせてグラフィカルなフォントを使うより読みやすくてクセのないフォントを使っていて、ほんとにバランスが良いと感じます。MontserratはSVGアニメーションなど今っぽいアニメーションと相性が良いフォントだと思いました。商品名は大文字だけど、メニューなどの部分は頭文字のみ大文字になっています。商品に合わせてすべて大文字にしてみるとまた読みやすさや印象が違くなりました。装飾的な部分は大文字で良いですが、読む部分や見出しは小文字を入れると読みやすくなると思いました。
使用している黒は真っ黒ではなく#212121でした。
デザインだけでなくアニメーションの実装なども含めて、細かいところまでほんとに良いバランスでつくられているデザインだと思いました。自分もそういうものを作れるようになりたいと思います。
ぜひ実際のサイトもご覧ください。
この商品はこのサイトありきと思えるくらい素晴らしいデザインだと思います！
WEBデザインに「3D」や「グラデーション」、「メタリック感」を取り入れるのはチープになってしまいやすいと思うけど、滑らかで気持ちいい浮遊感のあるアニメーションや、自然なシャドウによって、リッチさや今っぽさがありつつ、3Dの良さをとても感じられます。
使用しているカラーやフォントは少なめで3Dモデルも缶のモデルのみを使っていますが、全く単調に感じません。3Dモデルそれぞれ動き方や向きが違うこと、複数種類のアニメーション（テキストのSVGアニメーション、ホバーエフェクト、パララックス効果など）が使われていること、3Dモデルだけでなくイラストも使われていることなどによるものと思います。
円形の写真も、ぼかした背景を枠のようにして合わせてメタリックに見せていてかっこいいです。
フォントには英字がappleのsystemフォント（San Francisco）、Montserrat、価格の部分は画像になっていますがDINと思われるフォントが使われていました。日本語は游ゴシック。変に3Dやチルのイメージに合わせてグラフィカルなフォントを使うより読みやすくてクセのないフォントを使っていて、ほんとにバランスが良いと感じます。MontserratはSVGアニメーションなど今っぽいアニメーションと相性が良いフォントだと思いました。商品名は大文字だけど、メニューなどの部分は頭文字のみ大文字になっています。商品に合わせてすべて大文字にしてみるとまた読みやすさや印象が違くなりました。装飾的な部分は大文字で良いですが、読む部分や見出しは小文字を入れると読みやすくなると思いました。
使用している黒は真っ黒ではなく#212121でした。
デザインだけでなくアニメーションの実装なども含めて、細かいところまでほんとに良いバランスでつくられているデザインだと思いました。自分もそういうものを作れるようになりたいと思います。
ぜひ実際のサイトもご覧ください。
