【勝手にWEBサイトレビュー #15】見せ方が斬新な旅行の写真まとめサイト

こんにちは。

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

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

ご紹介Webサイト
「Monokai: a trip through Japan」

https://monokai.nl/2019/japan/

今回ご紹介するのは2019年春に日本旅行をした時の写真をまとめたサイトです。
こちらのサイトはAwwwardsに入賞しています。

▼Awwwards掲載ページ
https://www.awwwards.com/sites/monokai-a-trip-through-japan

真似したいポイント

動いて広がる画像のポップアップ

たくさん並べられている日本旅行の写真をクリックすると、画面の中央に移動しながら拡大されるように写真が動きます。
よく見かけるポップアップのようにクリックで拡大表示するだけではなく、動きに少し工夫があると色々な写真をクリックしてみたくなりますね!

バラバラに表示されるコンテンツの区切り目

スクロールを進めて次のコンテンツに差し掛かる時、次のコンテンツの背景色がバラバラと現れ始め、さらにスクロールをするとバラバラの文字のパーツが現れます。
そこからさらにスクロールをし次のコンテンツに入ると、そのコンテンツの都市名が綺麗なゴシック体で表示されてコンテンツの内容が始まります。
コンテンツの区切り目に面白い見せ方が入っているとスクロールをするのが楽しくて何度も見てみたくなります!

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

マウスカーソルに表示される日本地図

先ほど真似したいポイントでもご紹介したコンテンツの区切り目を表示している時、マウスカーソルが拡大し、日本地図が表示されます。
ただの日本地図だけではなく、次のコンテンツの都市の場所を指し示すアニメーションが入っています。
面白いだけではなく、紹介されている場所が日本のどのあたりなのか知ることができるすごい工夫だと思いました!

ホバーで画像がぼやけるマウスカーソル

写真をホバーするとマウスカーソルの丸が拡大され、ホバーしている部分だけ色味が変わりぼやけて表示されます。
クリックをしてみる前に、写真の色々な部分にカーソルを当ててみたくなりますね!

まとめ

斬新な見せ方や、細かい部分に面白い動きが入っていることで、サイトの中をじっくり見たくなるサイトでした。
ぜひ色々な写真を見てみてください!

0

関連記事

  • 2021.07.09

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

    サイトレビュー

  • 2021.07.08

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

    サイトレビュー

  • 2021.07.02

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

    サイトレビュー

おすすめ記事

  • 2021.06.30

    【おすすめ書籍】Sassを始めてみるならこの1冊

    CSS

  • 2021.05.11

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

    CSS

    HTML5

  • 2021.05.24

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

    JavaScript

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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