【勝手にWEBサイトレビュー#26】細かな工夫・こだわりがすごい!フランスのインタラクティブデザイナーのポートフォリオサイト

こんにちは!

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

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

ご紹介Webサイト「Robin Noguier

https://robin-noguier.com/

今回ご紹介するのは、フランスのインタラクティブデザイナーRobin Noguier氏のポートフォリオサイトです。
CSS Design Awards、Awwwardsのどちらも入賞しています。

▼CSS Design Awards掲載ページ
https://www.cssdesignawards.com/sites/robin-noguier-portfolio/37926/

▼Awwwards掲載ページ
https://www.awwwards.com/sites/robin-noguier-portfolio

真似したいポイント

斜めに流れていくスライダー

トップページで、早速Robin Noguier氏の制作実績をスライダーで見ることができます。

単純な横に流れていくスライダーではなく、スライドが斜めに流れていくというあまり見ないデザインです。

また、スライド画像に奥行きがあり、立体的に見えます。

制作実績をスライダーで見せるのは多くのWebサイトで実装していると思いますが、スライダーのデザインひとつとってもRobin Noguier氏のセンスが伺えますね!

スライドと連動した制作実績の動画を配置

制作実績のスライダーを動かすと、連動して左下の動画も切り替わります。

スライダーの画像だけでは伝わらない制作実績の雰囲気やイメージが伝わりますね。

小さく配置されているのも気になってクリックしたくなります。

詳細ページの画像がトリミングされるようなアニメーション

どれでも制作実績の詳細ページにアクセスしてみてください。

FV(ファーストビュー)に制作実績の画像が配置されていますが、下にスクロールすると画像が斜めにトリミングされていきます。

斜めのスライダーもですが、斜めに切り込むデザインはかっこいいですね!

ホバーすると左側のバーがジリジリと迫ってくる動作

トップページの「OPEN CSAE STUDY」にホバーさせると、左側の色がついているバーがジリジリと迫ってくる動作が起きます。

クリックすると左側からページを覆い、制作実績の詳細ページに移動する、という流れです。

ホバーの動作とページ遷移の流れに一体感があり、スムーズなのがとてもいいですね。

スマホのキャプチャ画像の見せ方

各制作実績の詳細ページに、スマホのキャプチャ画像が載っています。

一般的には、デバイスのモックアップに入れ込んで紹介していることが多いですが、ディスプレイのようにトリミングされたキャプチャ画像のみ載せています。

サイトのコンセプトによっては、デバイス枠を取った方がスッキリしていいですね。

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

画像と重なった文字が縁取り文字になっている

各制作実績のFVには、各実績の画像のタイトルが表示されています。

画像と重なった文字は縁取り文字となり、画像の邪魔をしない工夫がされています。

ファビコンがページごとに変わっている

こちらのWebサイト、なんとページによってファビコンの色が変わります。

しかもファビコンがマリオのキノコなことにも注目です。

ページごとにキノコの色が変わるので、色んなページにアクセスしてみてください。

まとめ

縁取り文字やファビコンなど、細かなところまでの工夫・こだわりが特にすごいWebサイトでした!

前回のレビューはこちら

0

関連記事

  • 2021.05.04

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

    サイトレビュー

  • 2021.04.30

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

    サイトレビュー

  • 2021.04.23

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

    サイトレビュー

おすすめ記事

  • 2021.04.05

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

    JavaScript

  • 2020.12.02

    【css】スマホでパンくずを横スクロールさせる方法

    CSS

  • 2019.02.08

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

    CSS

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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