2024.07.23
AIにワイヤーフレームをつくってもらった！
- その他
WEB制作のあれこれがわかる！
WEB制作のあれこれがわかる！
こんにちは。
Webデザインアワードで入賞しているWebサイトのご紹介第13回です。
今回も引き続き「CSS Design Awards」または「Awwwards」の中から特に目に留まったWebサイトをご紹介していきます！
目次
今回ご紹介するのは、イタリアにある広告会社「Blab Studio」のコーポレートサイトです。
たくさんの色を使用したポップなWebデザインと、多彩なアニメーションが施されているのが特徴です。
▼CSS Design Awards掲載ページ
https://www.cssdesignawards.com/sites/blab-studio/36649/
▼Awwwards掲載ページ
https://www.awwwards.com/sites/blab-studio
トップページのFV(ファーストビュー)のロゴが、下にスクロールすると縦向きに変わり、ウインドウ左端に固定されます。個性的なロゴが常に固定で見えるのはインパクトがあっていいですね。
フッターまでたどり着くと、画面の右下に移動するアニメーションも気持ちがいいです！
また、右上にお問い合わせページへのリンクがありますが、こちらも元々横向きだったのがスクロールすると縦向きに変わります。
縦向きにした方がスクロール中のアニメーションの邪魔にならず、ロゴと同じ動きなので統一感があっていいですね。
Webサイトに統一感をもたせるためには、テーマカラーを2～3つ定めて、Webサイトをデザインしていくのが一般的ですね。
色を増やせば増やすほど、ミスマッチが起きやすくなり、デザインは難しくなります。
しかしこちらのWebサイトは各ページごとに配色が全く異なりますが、個性的な図形のアニメーションや、絶妙な配色によってサイト全体の統一感を保っていますね！
「このページはどんな配色なんだろう」と気になり、サイト内を移動しているだけでも楽しいです。
配色についての延長線上の話になりますが、スクロールバーの色もページごとの配色に沿って色を変えています。
細部にまでこだわるのが統一感を出す秘訣ですね！
まずWebサイトにアクセスすると、FV(ファーストビュー)にロゴが描かれたり、呼吸をするように動く図形のアニメーションが目を引きますね。
数あるアニメーションの中でも目を引いたのが、ページ遷移、メニューを閉じた時のアニメーション。
ページ上部に「…」の形をしたメニューがあるので開いて、ページ遷移をしたりメニューを閉じたりしてみください。
ロゴが画面いっぱいにアップになってページ遷移します。
ページごとに配色が全く違うのですが、ロゴがアップになって画面全体を覆うことで違和感を感じることなく遷移しますね。
こちらのサイトで表示されている画像はスクロールして表示された時にゆらゆらと動くアニメーションがつけられています。
サイト全体を通してやわらかいアニメーションが素敵です！
使用する色を絞ったシンプルなWebサイトが多い中、ページごとに配色が全く違うのは斬新なデザインでした。
挑戦的なデザインをしているのにもかかわらず統一感を持っているのがすごいですね！
配色・デザインは奥が深く、楽しいと再認識しました！
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design
https://spiqa.design/