【勝手に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サイトが建築スタジオの世界観を体現しているようですね!

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

0

関連記事

  • 2021.04.30

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

    サイトレビュー

  • 2021.04.23

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

    サイトレビュー

  • 2021.04.22

    【勝手にWEBサイトレビュー#29】動きに統一感のあるコーポレートサイト

    サイトレビュー

おすすめ記事

  • 2019.03.15

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

    WordPress

  • コーディングで画像を好きな形に切り抜く方法

    2021.02.10

    【CSS】コーディングで画像を好きな形に切り抜く方法【IEにも対応】

    CSS

  • 2019.02.08

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

    CSS

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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