【勝手に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サイトでした！

前回のレビューはこちら

その他

2021.04.11

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

こんにちは！Webデザインアワードで入賞しているWebサイトのご紹介第26回です。今回も引き続き「CSS Design Awards」または「Awwwards」…