その他

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

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

お洒落なロゴの見せ方

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

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

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

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

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

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

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

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

まとめ

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

前回のレビューはこちら

この記事をシェアする

関連記事

  • 2024.03.22

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

    その他

  • 2024.03.12

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

    その他

  • 2024.02.02

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

    デザイン

    その他

おすすめ記事

  • 2022.04.28

    【カメラ初心者向け】物撮りが上手くなるコツ ~食べ物編~

    その他

    制作

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

  • 2022.04.22

    【第1回】Photoshopでテキストの一部の色を変える方法!<初心者向け>

    デザイン

    制作

×