世の中を元気づけたクリエイティブなグッドニュースをまとめた LIONS GOOD NEWS 2020 が楽しい
ビジュアルだけでなく読み物としても面白い
今回ご紹介するのは、いわゆる広告系のアワードであるカンヌライオンズ(の日本事務局)が公開しているウェブサイトです。
2020 年、コロナウィルス感染症の影響から、それこそ世界中でどこか暗い空気が停滞した、そんな一年だったと思います。しかしそんなときだからこそ、人々を勇気づけ、元気づけ、明るくさせるような活動を行った人や組織もたくさんありました。
今回紹介する LIONS GOOD NEWS 2020 では、そんなクリエイティブで人々を元気づけるような活動や、それに携わった人々を独自にまとめ、紹介しています。
WebGL を利用した迫力あるビジュアルも特徴的な、見応えのあるウェブサイトとなっています。
リンク:
イントロシーンもかっこいい
今回のサイトはプレスリリースも出ていたのでそちらにも目を通してみたのですが……
要約すると、過去のカンヌライオンズの事例とこの一年に見られた様々な事例とを比較しながら、今後のトレンドも踏まえつつ解説しているもの、ということらしいです。
実際にコンテンツを見てみると、日本のもの、国外のものなど、様々な事例が実際に紹介・解説されていて、単純に読み物としてもかなり読み応えのある内容になっています。
WebGL の実装に目を向けてみると、もうサイトが表示された最初のイントロ演出から迫力満点で、グラフィックスの面でも見応えのある作りになっています。
たくさんのポスターが風に巻き上げられ、それがそのまま各コンテンツへのリンクになっているという演出ですね。
背景にはモノクロの画像が並び、奥行きと広がりのある空気感が演出されています。
スクリーンショットでは見えにくいというか見えないと思いますが、サイト全体に薄っすらと、常にホワイトノイズのポストエフェクトが掛かっており、ポスターの質感も含めてどこかノスタルジックなデザインです。
About ページでは背景がまた一風変わった雰囲気になり、コンテキストの切り替えにかなり配慮されている感じがします。
各ポスターをクリックして移動できる事例の詳細ページは、その詳細ページの冒頭部分で、一度背景が完全なベタ塗りのような状態になります。(ポスターの背景色で塗られた状態)
これにより、閲覧者はグラフィックスを見るために使っていた視覚を、次は文章を見るために使うよう、無意識に、かつごく自然に脳内でコンテキストを切り替えさせられます。
そういったユーザーの「意識の導線」までしっかりと考えたデザインがなされていて、個人的にはすごく感動してしまいました……
背景がベタ塗りになっているときも、そこに WebGL の描画が使われていないというわけではなく、途中背景がうっすら半透明になったりする場面もあります。
背景が一瞬半透明になり、背後に浮かんでいるモノクロ画像が透けて見える場面も。
私はデザインが専門じゃないですし、偉そうになにか批評できるほど優れた知識を持ってるわけではありません。
それでも、背景色の変化を利用したユーザーの意識までコントロールするデザインや、まずはイントロで強く興味を引きつけるグラフィックスとしてのデザインなど、素人目に見てもハッとさせられるような発見がいくつもありました。
アニメーションの1つ1つに対するイージングでの性格付けなども丁寧で、とても完成度の高いサイトだと思います。
ぜひチェックしてみてください。