【勝手に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.04.16

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

    サイトレビュー

  • 2021.04.15

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

    サイトレビュー

  • 2021.04.11

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

    サイトレビュー

おすすめ記事

  • 2021.04.05

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

    JavaScript

  • 2019.02.08

    【css】IEにobject-fitを簡単に効かせる方法

    CSS

  • 2021.02.06

    【CSS】疑似要素(before, after)に画像を表示させる方法【サイズ変更も可能】

    CSS

    HTML5

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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