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

    【勝手にWEBサイトレビュー#32】建築とWebのデザインが調和している!ポルトガルの建築デザインスタジオのWeb……

    サイトレビュー

  • 2021.04.30

    【勝手にWEBサイトレビュー#31】映像の見せ方が多用な映像制作会社のコーポレートサイト

    サイトレビュー

  • 2021.04.23

    【勝手にWEBサイトレビュー#30】スタイリッシュかつ見やすい!ギリシャにあるオープンスペースの紹介サイト

    サイトレビュー

おすすめ記事

  • 2019.03.15

    【WordPress】固定ページにページネーションを効かせる方法

    WordPress

  • 2021.04.05

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

    JavaScript

  • 2019.02.08

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

    CSS

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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