その他

2022.07.27

【サイトレビュー#41】見せ方のアイデアがすごい!ポートフォリオサイト

こんにちは!

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

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

ご紹介Webサイト「Steven Taylo」

https://www.steventaylor.com/

今回ご紹介するWebサイトは、オランダのフォトグラファー、ディレクターのポートフォリオサイト「Steven Taylor」です。
こちらのWebサイトは、Awwwardsに入賞しています。

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

真似したいポイント

ランダムに並べられた作品一覧

トップページの作品一覧は作品がランダムな大きさ、配置で並べられており、さらに動画と静止画も混ざった状態になっています。
ランダムな配置がわかりやすいかは難しいところですが、並べ方としては面白いですよね!
また、ランダムの中に動画と静止画が混ざっていると、ぱっと見ただけで動画の作品なのか、静止画の作品なのか、作品のジャンルがわかりやすくて良いと思いました!

斬新な絞り込み検索

トップページの作品一覧の左側には縦書きでテキストが表示されています。
こちらのテキストはただの飾りではなく、ジャンルの絞り込みができるようになっているのです!
よく見るような絞り込みの見た目ではないアイデアで、斬新で面白いと思いました!

スクロールで次の作品へ遷移する詳細ページ

作品詳細ページに入りコンテンツを読み進めると、最後に次のコンテンツの内容の画像が大きく表示されています。
こちらは「NEXT」のテキストをクリックして遷移することもできますが、ページのスクロールを進めても次の作品のページへ遷移することができます。
スムーズに遷移ができ、わかりやすいため真似したいと思いました!

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

アクセス時のカーソルの動き

サイトにアクセスした時、全面に動画が表示されます。
それだけでは最近よく見るサイトなのですが、こちらのサイトではマウスカーソルにオーディオスペクトラム(音に合わせて動くバーのようなもの)が追従して表示されるようになっています。
追従するコンテンツに動画ならではの要素を入れているのは面白いと感じました!

無限に見られるトップページ

先ほど真似したいポイントでご紹介したトップページの作品一覧は無限スクロールができるようになっているため、いつまでも作品を見続けることができます。
また、マウスでスクロールをして離すと、スクロールした方向に向かって自動で動くようにもなっています。
じっくり見て欲しいコンテンツだからこそ無限に見続けることができる工夫が入っているのはすごいと思いました!

まとめ

コンテンツの見せ方の斬新なアイデアがたくさん盛り込まれていて、じっくり見てみたくなるサイトでした!
ぜひ実際のサイトも見てみてください!

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

この記事をシェアする

関連記事

  • 2024.03.22

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

    その他

  • 2024.03.12

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

    その他

  • 2024.02.02

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

    デザイン

    その他

おすすめ記事

  • 2022.04.12

    Chromeで画像やテキストがぼやけるときの対処法

    コーディング

    制作

  • 2022.04.28

    【カメラ初心者向け】物撮りが上手くなるコツ ~食べ物編~

    その他

    制作

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

×