【勝手に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サイトを覗いてみてください!

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

0

関連記事

  • 2021.07.09

    【サイトレビュー#48】ユーザビリティに優れたデザイン!個人投資家のための信託サイト

    サイトレビュー

  • 2021.07.08

    【サイトレビュー#47】デザイナーらしいこだわりが満載のデザイナー紹介サイト

    サイトレビュー

  • 2021.07.02

    【サイトレビュー#46】遊び心満載の電車にまつわる安全を学べるサイト

    サイトレビュー

おすすめ記事

  • 2021.06.08

    CSSだけでできる!マーカーで線が引かれているようなデザインの作り方

    CSS

    WordPress

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

  • 2021.05.24

    【おすすめ書籍】動くデザインを作る時にまず読んでほしい本

    JavaScript

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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