2024.07.23
AIにワイヤーフレームをつくってもらった！
- その他
WEB制作のあれこれがわかる！
WEB制作のあれこれがわかる！
こんにちは。
Webデザインアワードで入賞しているWebサイトのご紹介第16回です。
今回も引き続き「CSS Design Awards」または「Awwwards」の中から特に目に留まったWebサイトをご紹介していきます！
目次
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」のページではルーレットがあります。
ブロック崩しだったり、マウスを使ってアイコンをバスケットゴールに入れる遊びが入っているサイトもありますが、こういったちょっとしたゲームがあると思わずチャレンジしたくなります。
弊社のサイトでも何か遊び心のあるゲームをいつか作ってみたいです…っ！
弊社にもイラストが得意なデザイナーが複数名いるので、オリジナルイラストを使うサイトではただイラストをそのまま使うのではなく、プラスアルファのデザインを取り入れたいと思います！
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design
https://spiqa.design/