その他

2022.07.27

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

こんにちは!

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

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

ご紹介Webサイト「studio arte」

https://www.studioarte.info/

今回ご紹介するWebサイトはポルトガルにある建築デザインスタジオ「studio arte」です。

こちらのWebサイトはCSS design AwardとAwwwardsどちらも入賞しています。

▼CSS Design Awards掲載ページ
https://www.cssdesignawards.com/sites/studio-arte/38657/

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

真似したいポイント

ホバーで画像が切り替わる

Protfolioページでは、建築の制作実績がタイトルとアイキャッチ画像のセットでリストとして1カラムで並んでいます。

クリックすると各実績の詳細ページに移動することができます。

ここまではよくある実績の見せ方だと思いますが、各実績にホバーさせると実績に関連する写真がスピーディに切り替わります。

アイキャッチ画像のみだとどんな実績なのかどうしてもイメージが制限されてしまいますが、このように画像を切替えることで入ってくる情報量が多く、より実績詳細を見たくなるでしょう。

どの実績も素敵な写真なので、ついつい長い時間眺めていました。

全幅から引きに変わる画像

続いては実績詳細ページでのいいところ。

どの実績詳細でもいいのでアクセスしてみてください。

FV下部にウインドウ全幅の実績の画像が配置されていますが、スクロールしていくとだんだんと画像が引いていきます。

最初はウインドウ幅いっぱいでインパクトを与えて、実際に見る時は画像を引くことで見やすくなります。

実際に現実で歩いて眺めているイメージを与えるための動きなのかとも思いました。

次のプロジェクトにスムーズにいける下部リンク

実績詳細ページ最下部に移動すると次の実績のリンクがあり、次の実績詳細ページへとスムーズに移動できます。

わざわざ実績一覧ページに戻る必要がないため、とても実績を見やすいサイト設計になっていますね。

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

マウスカーソルを近づけると引き寄せられる動き

すごいと思ったポイントとして、アクセスした時の最初の画面のアニメーションです。

画面中央に配置される「view project」にマウスカーソルを近づけると引き寄せられるような動きがなめらかでとてもかわいいなと思いました。

まとめ

動きや写真の見せ方などの工夫があってサイト内を回遊しやすく、シンプルかつ無駄がないデザインという印象です!

建築の実績もそのような印象で、Webサイトが建築スタジオの世界観を体現しているようですね!

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

[card url=”http://note.spiqa.design/wp/review31/”]

この記事をシェアする

関連記事

  • 2024.03.22

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

    その他

  • 2024.03.12

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

    その他

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    その他

おすすめ記事

  • 2021.02.08

    【勝手にWEBサイトレビュー #08】細かい動きと工夫が面白い対人暴力防止プログラムの紹介サイト

    その他

  • 2021.11.26

    WEB担当者になったらまず読んで欲しいおすすめ書籍

    その他

  • 2021.09.16

    iPadのお絵かきアプリ「Procreate(プロクリエイト)」のタイムラプス機能を使ってメイキング動画を書き出そ……

    その他

TAG

×