【勝手にWEBサイトレビュー#22】配色や画像の使い方が光るギリシャの食品メーカーのコーポレートサイト

こんにちは。

Webデザインアワードで入賞しているWebサイトのご紹介第22回です。

今回も引き続き「CSS Design Awards」または「Awwwards」の中から特に目に留まったWebサイトをご紹介していきます！

ご紹介Webサイト「WILD SOULS」

https://www.wildsouls.gr/

今回ご紹介するWebサイトは、ギリシャの加工食品メーカーのコーポレートサイトです。
CSS Design Awards、Awwwardsのどちらも入賞しています。

▼CSS Design Awards掲載ページ
https://www.cssdesignawards.com/sites/wild-souls/38643/

▼Awwwards掲載ページ
https://www.awwwards.com/sites/wild-souls

真似したいポイント

大胆な色使いや思い切った形

商品のパッケージ自体がカラフルな色使いですが、サイトも商品にマッチする大胆な色使いです。
沢山の色を使うと統一感を出すのが難しくなってきますが、トーンが統一されているのでゴチャゴチャした印象はなく、綺麗にまとまっています。

また、トップページの商品が並んでいる部分の楕円の背景や、「Wild like a Nut??」など思い切った形でコンテンツを区切っているのがユニークです。

敢えて写真のレイアウトを崩している

トップページの「Our Wild Way」の重なる写真や「Wild Recipes」など、写真を均一に、綺麗に並べるのではなく、あえて重ねたり大きさを変えて載せているのでメリハリが生まれています。

コンテンツ毎に背景が変わる

コンテンツごとに背景色を設定してありますが、スクロール量に合わせてふわっと色が移り変わるような作りになっています。
自然な動きで背景色が切り替わる工夫があることで、たくさんの色を使っても統一感が生まれるポイントだと思いました。

商品写真が固定されている商品紹介ページ

商品の紹介ページ（詳細）に入ると、画面の中央に大きく商品写真が表示されています。
写真の使い方も大胆ですが、この写真がスクロールしても追従するのは珍しい動きだと思いました！

また、商品に影がついて立体感も出ているのでより遠近感が生まれています。

商品を紹介仕切るまで写真が追従するので内容が理解しやすく、この様な斬新な見せ方を弊社でも取り入れていきたいと感じました！

すごい！と思ったポイント

マウスホバーした時の動き

アワードで紹介されているサイトに共通しているのですが、ホバーしたときの動きにも細かいこだわりを感じます。

このサイトであれば、

• 「Wildly Loved」の商品にホバーするとカーソルが目のアイコンに変わる＆商品写真の背景にパッケージと同じ模様が現れる
• 「Our Wild Way」の「DISCOVER MORE!」ボタンにホバーするとテキストが横に流れる
• 「The Concept Store」のような写真が重なっている部分はホバーで矢印のアイコンに変わる

といった工夫が詰まっています。
特に2番目のテキストが流れる動きは珍しいと思いました！

マウスカーソルの変え方については当サイトでも紹介しています！

[card url=”https://note.spiqa.design/wp/cursor-rich/”]

まとめ

カラフルで大胆な色使いでありつつも、トーンが統一されている・スムーズに背景色が切り替わることでゴチャゴチャした印象はなくまとまりのいいサイトだと思います。

また、配色、写真や商品の見せ方、ホバーアクションなど参考にしたい点が沢山ありました！

前回のレビューはこちら

[card url=”https://note.spiqa.design/wp/review21/”]