【勝手にWEBサイトレビュー#33】イラストや動きに統一感のあるウォッカの紹介サイト

こんにちは!

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

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

ご紹介Webサイト「495 Vodka

https://495.vodka/

今回ご紹介するWebサイトは、ロシアのウォッカ紹介サイトです。
こちらのWebサイトは、CSS design AwardとAwwwardsどちらも入賞しています。

▼CSS Design Awards掲載ページ
https://www.cssdesignawards.com/sites/495-vodka/39109/

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

真似したいポイント

統一感のあるイラスト

こちらのWebサイトでは、全体的にイラストが使用されています。
イラストのテイストが統一してあることはもちろん、左上のハンバーガーメニューや右上のSNSボタンもイラストのテイストに合うデザインになっており、とてもまとまりがあります!

また、写真はほぼ使用されていませんが、写真が使用されている場所では、モノクロ調にしてあったりと、こちらもWebサイト全体で統一されています。

イラストにあった動き

こちらのWebサイトは、スクロールに合わせてイラストが動く仕組みになっています。こちらの動きもイラストのテイストにあった可愛らしいものになっています。

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

スクロールの位置がわかる%表示

こちらのWebサイトでは、画面左下に「0%」と数値が表示されていて、スクロールすると数値が上がっていき、ページの下までたどり着くと「100%」になります。

スクロールバーでなく、このような%表示で画面のスクロール位置を示す方法は初めて見たので、斬新でした!

まとめ

白と黒を基調としたシンプルなWebサイトながら、統一感のあるイラストと動きでとても可愛らしいWebサイトでした。
画像ではなく、イラストをたくさん使うWebサイトも良いですね!

前回のレビューはこちら!

0

関連記事

  • 2021.06.17

    【サイトレビュー#41】見せ方のアイデアがすごい!ポートフォリオサイト

    サイトレビュー

  • 2021.06.15

    【サイトレビュー#40】水面のような表現が素敵なデジタルエージェンシーのサイト

    サイトレビュー

  • 2021.06.11

    【サイトレビュー#39】細かい工夫がたくさんあるアメリカのローン会社のサイト

    サイトレビュー

おすすめ記事

  • 2021.05.24

    【おすすめ書籍】動くデザインを作る時にまず読んでほしい本

    JavaScript

  • 2021.06.08

    CSSだけでできる!マーカーで線が引かれているようなデザインの作り方

    CSS

    WordPress

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!