その他

2022.07.27

【勝手にWEBサイトレビュー#21】見せ方がお洒落な広告会社のコーポレートサイト

こんにちは。

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

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

ご紹介Webサイト「Bonjour Paris

https://www.bonjour.paris/en

今回ご紹介するWebサイトは、フランス パリの広告会社のコーポレートサイトです。
CSS Design Awards、Awwwardsのどちらも入賞しています。

▼CSS Design Awards掲載ページ
https://www.cssdesignawards.com/sites/bonjour-paris/38672/

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

真似したいポイント

操作方法を伝えるマウスカーソル

トップページのみマウスカーソルに「SCROLL」というテキストが付くようになっています。
横スクロールのトップページであるため、どうやってコンテンツを見たらいいかわからないユーザーもいると思いますが、カーソルにテキストが付いていることで操作方法がわかりやすくてユーザーも迷わずにコンテンツを見ることができると思いました!
ユーザーが使いやすくなるひと工夫はどんどん真似したいです!

マウスカーソルの変え方はこちら!

[card url=”http://note.spiqa.design/wp/cursor-rich/”]

お洒落なロゴの見せ方

ロゴの一覧を載せる時、同じ幅で横並びや、グレーの枠を付けるなどのシンプルな見た目になりがちですが、こちらのサイトではロゴによって横幅を変えていたり所々に横線が入っておりとてもお洒落な見せ方をしています。
詳細があるものはホバーで画像が表示されるようにもなっており、内容を押してみたくなる工夫もされていて見るのが楽しくなります!

片方だけスクロールするメニュー

一見よくある全画面のメニューですが、右側は固定で画像が表示され、左側にメニューはまとまっています。
半分画像になっているとインパクトもあり面白いと思いました!
また、今回のように写真を多く載せたい場合や商品を紹介するサイトなどではメニューの中でも写真を使って訴求することができるので真似してみたいアイデアでした!

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

片方ずつスクロールするコンテンツ

実績を紹介しているページは写真がスクロールした後に全体がスクロールし次のコンテンツが表示されます。
見せたい内容をしっかりと見せてから次のコンテンツを表示することができるため、しっかり見せたい内容がある時はこの見せ方をしてみたいです!

次のコンテンツを大きく表示

実績を紹介しているページでコンテンツを見終わると、次のコンテンツを画像を大きく使い、かなりしっかりと紹介されています。
次のコンテンツを載せる時は小さくさり気なく載せがちですが、こちらのように大きく目立つように載せているのは斬新で、次のコンテンツを見てみたいなと感じました。

まとめ

ユーザーが使いやすくなる工夫や、細かいデザインがお洒落になっており色々なところを見てみたくなるサイトでした!
また、コンテンツの見せ方も斬新で次の内容をどんどん見てみたくなる工夫はとても勉強になりました。
ぜひ見てみてください!

前回のレビューはこちら

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

この記事をシェアする

関連記事

  • 2024.03.22

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

    その他

  • 2024.03.12

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

    その他

  • 2023.12.30

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

    その他

おすすめ記事

  • 2021.04.20

    【HTML5】見出しタグの違いと使い方とは?

    その他

  • 2021.05.19

    【CSS】英単語の間隔を調整できるword-spacing

    その他

  • 2021.11.02

    CSSのcursor:pointerが効かない時にまず確認したい3つのこと

    その他

TAG

×