2024.07.23
AIにワイヤーフレームをつくってもらった！
- その他
WEB制作のあれこれがわかる！
WEB制作のあれこれがわかる！
こんにちは。
Webデザインアワードで入賞しているWebサイトのご紹介第22回です。
今回も引き続き「CSS Design Awards」または「Awwwards」の中から特に目に留まったWebサイトをご紹介していきます！
目次
今回ご紹介する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」など、写真を均一に、綺麗に並べるのではなく、あえて重ねたり大きさを変えて載せているのでメリハリが生まれています。
コンテンツごとに背景色を設定してありますが、スクロール量に合わせてふわっと色が移り変わるような作りになっています。
自然な動きで背景色が切り替わる工夫があることで、たくさんの色を使っても統一感が生まれるポイントだと思いました。
商品の紹介ページ（詳細）に入ると、画面の中央に大きく商品写真が表示されています。
写真の使い方も大胆ですが、この写真がスクロールしても追従するのは珍しい動きだと思いました！
また、商品に影がついて立体感も出ているのでより遠近感が生まれています。
商品を紹介仕切るまで写真が追従するので内容が理解しやすく、この様な斬新な見せ方を弊社でも取り入れていきたいと感じました！
アワードで紹介されているサイトに共通しているのですが、ホバーしたときの動きにも細かいこだわりを感じます。
このサイトであれば、
といった工夫が詰まっています。
特に2番目のテキストが流れる動きは珍しいと思いました！
マウスカーソルの変え方については当サイトでも紹介しています！
カラフルで大胆な色使いでありつつも、トーンが統一されている・スムーズに背景色が切り替わることでゴチャゴチャした印象はなくまとまりのいいサイトだと思います。
また、配色、写真や商品の見せ方、ホバーアクションなど参考にしたい点が沢山ありました！
前回のレビューはこちら
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design
https://spiqa.design/