【勝手に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」のページではルーレットがあります。

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

[card url=”https://note.spiqa.design/wp/review04/”]

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

まとめ

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