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

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

お洒落なロゴの見せ方

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

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

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

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

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

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

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

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

まとめ

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

前回のレビューはこちら

0

関連記事

  • 2021.07.09

    【サイトレビュー#48】ユーザビリティに優れたデザイン!個人投資家のための信託サイト

    サイトレビュー

  • 2021.07.08

    【サイトレビュー#47】デザイナーらしいこだわりが満載のデザイナー紹介サイト

    サイトレビュー

  • 2021.07.02

    【サイトレビュー#46】遊び心満載の電車にまつわる安全を学べるサイト

    サイトレビュー

おすすめ記事

  • 2021.05.24

    【おすすめ書籍】動くデザインを作る時にまず読んでほしい本

    JavaScript

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

  • 2021.06.08

    CSSだけでできる!マーカーで線が引かれているようなデザインの作り方

    CSS

    WordPress

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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