【勝手にWEBサイトレビュー#34】FVにインパクトがあるフランスの食品メーカーのサイト

こんにちは!

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

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

ご紹介Webサイト「Crusta C」

https://crustac.fr/

今回ご紹介するWebサイトはフランスの食品メーカーの「Crusta C」です。

こちらのWebサイトはAwwwardsに入賞しています。

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

真似したいポイント

「C」の形に合わせて動画をマスクして表示

FV(ファーストビュー)は海の背景画像の上に「C」の形になぞってマスクされた波の動画が表示されています。
動画を背景全体に敷いたり、そのまま表示するのではなく「C」の形にマスクしているのは大胆で面白く、インパクトがあると感じました!

中央に線を引き、2カラム表示へ

FVからスクロールをすると、スクロールに合わせて赤い線が画面中央へ引かれていきます。
その線を中心に2カラムの表示となり、片方は画面いっぱいの画像、片方はテキストとボタンが表示されます。
線で区切られていることで、メリハリのある表現になっており、真似してみたいと思いました!

2カラムのハンバーガーメニューの見せ方

画面右上のメニューをクリックすると全画面に左側にリンクの一覧、右側は何もコンテンツのない2カラムのメニューが表示されます。
ただ2カラムの表示になっているのではなく、左側のリンクの中で下層ページがあるコンテンツをホバーすると右側に下層ページへのリンクが表示されます。
2カラムのこの見せ方は珍しく、こちらの表現も真似してみたいです。

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

中央に引かれる線の動き

FVから引かれる赤い線はスクロールに合わせてただ真っ直ぐ引かれるのではなく、海老のイラストを描いたり、アクセントになるモチーフを描きながら引かれていきます。
それだけでも面白く感じましたが、ボタンが描かれる部分もあり、表現として面白いだけでなくすごいと感じました。

ドットだけで地図を表現

生産拠点を紹介するページではフランスのマップをドットだけで表現しており、赤色になっているドットをクリックすると左側に画像と詳細のテキストが表示されるようになっています。
フランスの形を知っている人にはきちんと「このドットでフランスを表している」ということが伝わるため、マップのデフォルメ化のアイデアとして面白いと思いました!

まとめ

FVの見せ方にインパクトがあるだけでなく、中央に引かれる線の動きや地図のデフォルメなど斬新なアイデアも満載で、とても参考になるサイトでした!

ぜひ実際のサイトを見てみてください!

前回のレビューはこちら!

0

関連記事

  • 2021.06.17

    【サイトレビュー#41】見せ方のアイデアがすごい!ポートフォリオサイト

    サイトレビュー

  • 2021.06.15

    【サイトレビュー#40】水面のような表現が素敵なデジタルエージェンシーのサイト

    サイトレビュー

  • 2021.06.11

    【サイトレビュー#39】細かい工夫がたくさんあるアメリカのローン会社のサイト

    サイトレビュー

おすすめ記事

  • 2021.06.08

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

    CSS

    WordPress

  • 2021.05.11

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

    CSS

    HTML5

  • 2021.05.24

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

    JavaScript

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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