その他

2022.07.27

【サイトレビュー#43】シンプルなのに斬新!カスタムパッケージのサービスサイト

こんにちは!

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

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

ご紹介Webサイト「Packwire」

https://packwire.com/

今回ご紹介するWebサイトは、カスタムパッケージ(メーラー・ダンボールなど)のサービスサイトです。
こちらのWebサイトは、CSS design AwardとAwwwardsどちらも入賞しています。

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

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

真似したいポイント

珍しいボタンのホバーアクション

ボタンにホバーしたとき、ボタンの周りにきらきらのイラストが表示されるアニメーションになっています。ホバーでは、ボタン自体の色を変えたり動かしたりすることが多いので、このような見せ方は珍しいと思いました!

また、FVからスクロールしていった部分の商品概要部分では、ボタンにホバーすることで商品名の色が変わり、その上に装飾も表示されています。
このようにボタンとは少し離れている要素を変化させるのも面白いと思います。

シンプルなのに斬新な背景

こちらのWEBサイトの背景では、大きな丸が使われています。
画面から見切れるほど大きな丸を背景に敷いているデザインは斬新だと感じました。

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

立体感を感じるパッケージの見せ方

FVではパッケージが4つ並んでおり、スクロールに合わせて移動し、それぞれの説明が表示される形になっています。

立体感を感じる角度とシンプルだけどおしゃれな動きがとても良いと思いました。

リロードにより変わるFV

こちらのWEBサイトは、リロードすることでFVの背景色とパッケージの色が変わります。背景色だけでなくパッケージも一緒に変わるのは面白みがありますね!

まとめ

今回は、シンプルだけど見せ方などに工夫のあるWEBサイトでした。
色々な見せ方を取り入れて、より良いWEBサイトを作っていきたいですね!

前回のレビューはこちら!

[card url=”http://note.spiqa.design/wp/review42/”]

この記事をシェアする

関連記事

  • 2024.03.22

    Webデザインにおけるアニメーションについて考えてみた〜実例編〜

    その他

  • 2024.03.12

    Webデザインにおけるアニメーションについて考えてみた〜メリット・デメリット編〜

    その他

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    その他

おすすめ記事

  • 2019.02.08

    【簡単3ステップ】IEにobject-fitを効かせ、画像を綺麗に見せる方法

    その他

  • 2023.11.14

    コーダー同士の情報のやり取りで効率がアップした話

    その他

  • 2020.12.09

    擬似要素とは?::before / ::afterの使い方

    その他

TAG

×