【勝手にWEBサイトレビュー #13】多彩な配色とアニメーションが特徴のイタリアにある広告会社のコーポレートサイト

こんにちは。

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

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

ご紹介サイト「Blab Studio」

https://blab.studio/

今回ご紹介するのは、イタリアにある広告会社「Blab Studio」のコーポレートサイトです。

たくさんの色を使用したポップなWebデザインと、多彩なアニメーションが施されているのが特徴です。

▼CSS Design Awards掲載ページ
https://www.cssdesignawards.com/sites/blab-studio/36649/

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

真似したいと思ったポイント

移動中や位置によってロゴやリンクの向きが変わる

トップページのFV(ファーストビュー)のロゴが、下にスクロールすると縦向きに変わり、ウインドウ左端に固定されます。個性的なロゴが常に固定で見えるのはインパクトがあっていいですね。

フッターまでたどり着くと、画面の右下に移動するアニメーションも気持ちがいいです!

また、右上にお問い合わせページへのリンクがありますが、こちらも元々横向きだったのがスクロールすると縦向きに変わります。

縦向きにした方がスクロール中のアニメーションの邪魔にならず、ロゴと同じ動きなので統一感があっていいですね。

色を多用したWebデザイン

Webサイトに統一感をもたせるためには、テーマカラーを2~3つ定めて、Webサイトをデザインしていくのが一般的ですね。

色を増やせば増やすほど、ミスマッチが起きやすくなり、デザインは難しくなります。

しかしこちらのWebサイトは各ページごとに配色が全く異なりますが、個性的な図形のアニメーションや、絶妙な配色によってサイト全体の統一感を保っていますね!

「このページはどんな配色なんだろう」と気になり、サイト内を移動しているだけでも楽しいです。

ページごとにスクロールバーの色も変えている

配色についての延長線上の話になりますが、スクロールバーの色もページごとの配色に沿って色を変えています。

細部にまでこだわるのが統一感を出す秘訣ですね!

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

ページ移動した時のアニメーション

まずWebサイトにアクセスすると、FV(ファーストビュー)にロゴが描かれたり、呼吸をするように動く図形のアニメーションが目を引きますね。

数あるアニメーションの中でも目を引いたのが、ページ遷移、メニューを閉じた時のアニメーション。

ページ上部に「…」の形をしたメニューがあるので開いて、ページ遷移をしたりメニューを閉じたりしてみください。

ロゴが画面いっぱいにアップになってページ遷移します。

ページごとに配色が全く違うのですが、ロゴがアップになって画面全体を覆うことで違和感を感じることなく遷移しますね。

画像がゆらゆら動くアニメーション

こちらのサイトで表示されている画像はスクロールして表示された時にゆらゆらと動くアニメーションがつけられています。

サイト全体を通してやわらかいアニメーションが素敵です!

まとめ

使用する色を絞ったシンプルなWebサイトが多い中、ページごとに配色が全く違うのは斬新なデザインでした。

挑戦的なデザインをしているのにもかかわらず統一感を持っているのがすごいですね!

配色・デザインは奥が深く、楽しいと再認識しました!

0

関連記事

  • 2021.04.16

    【勝手にWEBサイトレビュー#28】画像の枠にこだわりのあるポートフォリオサイト

    サイトレビュー

  • 2021.04.15

    【勝手にWEBサイトレビュー#27】画面スクロールで楽しめるWPテーマコレクションサイト

    サイトレビュー

  • 2021.04.11

    【勝手にWEBサイトレビュー#26】細かな工夫・こだわりがすごい!フランスのインタラクティブデザイナーのポートフォ……

    サイトレビュー

おすすめ記事

  • 2020.12.02

    【css】スマホでパンくずを横スクロールさせる方法

    CSS

  • 2021.04.05

    【jQuery】jQueryのみでPC/SPの画像を切り替える方法

    JavaScript

  • コーディングで画像を好きな形に切り抜く方法

    2021.02.10

    【CSS】コーディングで画像を好きな形に切り抜く方法【IEにも対応】

    CSS

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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