その他

2022.07.27

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

こんにちは!

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

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

https://bridgelanding.qodeinteractive.com/tour/

今回ご紹介するのは、WordPressのベストセラーであるBridgeテーマのコレクションサイトです。
CSS Design Awards、Awwwardsのどちらも入賞しています。

▼CSS Design Awards掲載ページ
https://www.cssdesignawards.com/sites/bridge-tour/38829/

▼Awwwards掲載ページ
https://www.awwwards.com/sites/bridge-tour

真似したいポイント

様々なコンテンツのレイアウト

こちらのWebサイトは、アクセスするとスクロールを促すメッセージのみが表示されています。

そこから画面をスクロールすることで、コンテンツが移り変わっていきます。

  • 文字が1文字ずつ現れる
  • 数字がカウントアップされる
  • コンテンツが回転する
  • 横からコンテンツが現れて横スクロールに変わる
  • 画像が拡大・縮小される
  • 画面が真ん中から開く

など様々表現が散りばめられています。

スクロールをするだけでこんなにも楽しめるWebサイトはとても魅力的だと感じました。

また、固定ヘッダーは常に見えているWebサイトが多い中、こちらのWebサイトでは、固定ヘッダーを覆うコンテンツもあり、斬新だと感じました。

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

ユーザーに求めるアクションを表すアイコン

こちらのWebサイトでは、右上にアイコンが表示されています。

コンテンツに応じて、Scroll / Focus / Wiggle / Repeat と表示内容が変わっており、ユーザーアクションがわかりやすくなっています。

カーソルのデザインを変えてユーザーアクションを示すものはよく見るものの、このように画面の一部分に固定して表示している例は珍しいと思いました。

まとめ

とにかくスクロールするのが楽しくなるWebサイトでした!
また、WordPressのテーマもたくさん掲載されているので、ぜひWebサイトを覗いてみてください!

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

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

この記事をシェアする

関連記事

  • 2024.03.22

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

    その他

  • 2024.03.12

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

    その他

  • 2024.02.02

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

    その他

おすすめ記事

  • 2021.04.22

    【勝手にWEBサイトレビュー#29】動きに統一感のあるコーポレートサイト

    その他

  • 2021.12.24

    【HTML5】目立たせる要素(em・strong・mark・b)の違いや使い方

    その他

  • 2021.04.11

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

    その他

TAG

×