【勝手にWEBサイトレビュー #16】イラストとペイントの融合がかわいいロシアのパートナーシッププログラム紹介サイト

こんにちは。

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

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

ご紹介Webサイト「CreativeCrew」

https://partners.cpeople.ru/en/

今回ご紹介するのはロシアのパートナーシッププログラム紹介サイトです。
CSS Design Awards、Awwwardsのどちらも入賞しています。

▼CSS Design Awards掲載ページ
https://www.cssdesignawards.com/sites/creativecrew/37248/

▼Awwwards掲載ページ
https://www.awwwards.com/sites/creativecrew

真似したいポイント

まず、このWebサイト見て、真似したい・参考にしたいと感じたポイントをご紹介いたします。

ロード画面のアニメーション

ロード画面ではロゴの上に「CREW」という文字がかぶさっています。
また字体も何パターンもあり、コロコロと切り替わります。

読み込みが終わると左上に移動する点は是非参考にしたいと思いました。

また、ロゴのPeopleの上にスプレーで書いたような「CREW」の文字が書き足されている点も、ロゴデザインとして斬新です。

質感の違うイラストの融合

モノクロでシンプルな線で描かれたイラストの上に真っ赤なスプレーで描いた文字やイラストが重なるデザインがかわいいです。

同じテイストやカラーリングのイラストで統一するのではなく、質感の違うものを重ねることでオリジナリティが出ています。

ホバーアクションにも赤いスプレーを取り入れている

ボタンにホバーしたとき、ボタンの不透明度を下げたり、色を反転させたりすることが多いですが、このサイトはホバーアクションでも赤いスプレーのペイントを取り入れています。

赤いスプレーで手書きの枠が付くことで、デザインの統一感が生まれます。

また、お問い合わせフォームのバリデーションでも同様です。
未入力欄があるまま送信しようとするとボタンの上に手書きの×が大胆にかぶさります。

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

ルーレット

we recommend partners to clients」のページではルーレットがあります。

ブロック崩しだったり、マウスを使ってアイコンをバスケットゴールに入れる遊びが入っているサイトもありますが、こういったちょっとしたゲームがあると思わずチャレンジしたくなります。

弊社のサイトでも何か遊び心のあるゲームをいつか作ってみたいです…っ!

まとめ

弊社にもイラストが得意なデザイナーが複数名いるので、オリジナルイラストを使うサイトではただイラストをそのまま使うのではなく、プラスアルファのデザインを取り入れたいと思います!

0

関連記事

  • 2021.07.09

    【サイトレビュー#48】ユーザビリティに優れたデザイン!個人投資家のための信託サイト

    サイトレビュー

  • 2021.07.08

    【サイトレビュー#47】デザイナーらしいこだわりが満載のデザイナー紹介サイト

    サイトレビュー

  • 2021.07.02

    【サイトレビュー#46】遊び心満載の電車にまつわる安全を学べるサイト

    サイトレビュー

おすすめ記事

  • 2021.06.08

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

    CSS

    WordPress

  • 2021.05.24

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

    JavaScript

  • 2021.05.11

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

    CSS

    HTML5

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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