2024.07.23
AIにワイヤーフレームをつくってもらった！
- その他
WEB制作のあれこれがわかる！
WEB制作のあれこれがわかる！
こんにちは！
Webデザインアワードで入賞しているWebサイトのご紹介第26回です。
今回も引き続き「CSS Design Awards」または「Awwwards」の中から特に目に留まったWebサイトをご紹介していきます！
目次
今回ご紹介するのは、フランスのインタラクティブデザイナー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サイトでした！
前回のレビューはこちら
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design
https://spiqa.design/