【カンヌライオンズ2023】 フロントエンドエンジニアから見たカンヌライオンズ
Think & Craftでフロントエンドエンジニアをしております、田辺雄樹と申します。普段はWebサイト / WebAR開発などを担当しております。
2023年6月19〜23日にフランスのカンヌにて開催された「カンヌライオンズ 国際クリエイティビティ・フェスティバル」に、会社の視察メンバーとして参加してまいりました。
本稿は、そんなカンヌの視察レポートをお伝えしていこうと思うのですが、、
「各部門の金賞はこれで、今年の受賞作の傾向はこうでして…」というような総論はすでに充実したレポートが各所にあがっておりまして、そちらをご覧いただければめちゃくちゃ勉強になります。
※カンヌのレポートは、電通zeroの嶋野さんが執筆されているアドタイの記事や、ピラミッドフィルム クアドラさんのレポート記事がわかりやすくかつ丁寧でおすすめです。
僕の役割としては、もう少しニッチな範囲で書こうかなと思っております。
Webを主戦場として日々過ごしている私のフロントエンドエンジニアという立場から、カンヌライオンズをどう捉えているか、どんな作品に目が留まったか、「Web制作しててカンヌライオンズってそもそも目指すべき賞なんだっけ？」といったところをテーマに書いていきたいと思います。
Web界隈には馴染みのない広告賞？
Web界隈の僕たちが一般的に目指す賞といえば、AwwwardsやCSS Design Awards、FWAではないでしょうか。
かくいう私も、毎日AwwwardsのSite Of The Dayを見て、「こんなサイト作りてえ」という憧れと嫉妬に向き合う日々です。。
対して、カンヌライオンズは世界最大規模の広告祭と呼ばれます。
「え。カンヌライオンズってWebサイトも賞とれるの？」
という疑問があるかもしれません。（私はありました）
Webサイトも広告のアウトプットの形のひとつですので、もちろん受賞可能です。
カンヌライオンズがどれほどの数の部門があるかは、下記ページを見るとわかりやすいと思います。
数ある部門の中で、Webと関係がある部門は例えばDesign Lionsだったり、Digital Craft Lionsだったり、Mobile Lionsのような部門だったり…
ただし、Web専用の部門が設けられているわけではないことに注意が必要です。
例えばDigital Craft Lionsには「Form」「Content」「Data & AI」「Technology」といったサブカテゴリがあります。
そして「Form」に絞れば、さらにサブサブカテゴリとして「Digital Illustration & Image Design.」や「Video / Moving Image.」、「Music / Sound Design.」、「UX & Journey Design.」などに細分化されています。
つまり何が言いたいかと言うと、映像であろうと音楽であろうとVR/ARであろうとWebであろうと「デジタルの環境」であればOK！という、いわば総合格闘技の闘いということです。
カンヌライオンズで賞を目指そうと思ったら、Webサイトで応募はできるが、Web以外の広告もライバルになるぜ、ということになります。
フロントエンドエンジニアとして気になった作品
そんな総合格闘技の世界で、今年のカンヌライオンズでWebの応募作品はどのような評価だったのか見てみたいと思います。
結論から言うと、各部門のグランプリやゴールドの受賞作にWebを主体とした作品はありませんでした。。
個人的にフロントエンドエンジニアとして気になる作品はいくつかありまして、今回は4つほどピックアップして考察してみたいと思います。
※1 Shortlist（最終候補リスト）以上の結果となったものから独断と偏見で選んでおります。
※2 グランプリは別として、基本的にShortlistやブロンズ/シルバーに選出された理由は公式に発表されていないので、各作品への評価は僕の個人的な考察であることをご了承ください。
Apple Watch Ultra Website
Brand: Apple
Agency: Apple
Location: CUPERTINO（USA）
Award: Shortlisted
「Appleみたいなサイトでお願いします」
この業界にいると一度は絶対に聞くこのフレーズ。
では「Appleみたいなサイト」とは一体何なのかと。
今回、Digital Craft部門でApple Watch UltraのサイトがShortlistに選ばれていたので、なぜ選ばれたのか考えてみようと思います。
Appleのサイトのいいところは、「ユーザーがスクロールするだけで、その製品の物語を体験できる」ところだと思います。
そして、スペック情報など、ただ文字列で伝えるだけでは平凡で退屈な情報も、その物語に上手く載せて発信している。
Appleが書いた本応募作のエントリーシート文言に、「Cinematic」や「Story」といったキーワードが散りばめられていました。やはりひとつの物語を意識してサイトを構築していることがわかります。
ページに使用されている商品画像以外の画像が白黒で構成されているのも、「Apple Watch Ultraが活躍する場所はとても過酷な自然環境でも動作することを伝えるため（筆者訳）」とのこと。
ここで思ったのは、「Appleみたいなサイト」の本質を、「いい感じのコピーといい感じの商品画像がスクロールの応じてふわふわ出てくる」と捉えたら絶対にダメだということ。
対象の商品をどうひとつの物語に載せて伝えるか？
それに応じて効果のある画像/コピーは何か？
という基本的な要素をクリアして初めて生まれるWebサイトだと思います。
…. とはいえ、「言うは易く行うは難し」の典型なのですが。。
Persepolis Reimagined
Brand: Getty
Agency: MEDIA.MONKS
Location: LOS ANGELES（USA）
Award: Shortlisted
ロサンゼルスにあるゲッティ ヴィラ美術館で開催されていた古代イランの展示に合わせて開設されたWebサイトで、ブラウザ上で古代ペルシャの首都「ペルセポリス」の建造物を3Dでインタラクティブに体験できるサイトです。
WebGLで制作されており、技術的にもデザイン的にもとてもハイエンドで完成度が高く、AwwwardsではSite Of The DayならびにSite Of The Monthも受賞しています。
そのため、Webサイトとしての完成度が認められている分、Shortlisted止まりだったのは大きな驚きでした。
エンジニアとして感動した部分はたくさんあります。
モデルの精巧さやスムーズなスクロールインタラクション…などなどはサイトを開けば明らかですので、あえてここで語りたいことをひとつに絞ると、「プリレンダリング部分とリアルタイムレンダリング部分の滑らかな切り替わり」です。
ロードが完了し、城壁を超え、城の本体に入るまでは画像と動画のプリレンダリング、その後城に入った後はWebGLのリアルタイムレンダリングになっているようです。
手前が動画で、奥がリアルタイム。
この切り替わり部分をどう繋げているのかなと思って動画ファイルを引っ張ってきたら、グリーンバックになっていて、どうやらクロマキー合成をしているようでした。
もちろんこれだけでは綺麗につながらず、動画上のカメラとWebGL上のカメラが連動している必要もあるはずなので、相当な検証を重ねて実装しているだろうなと推測されます。
最後にもうひとつ。。
WebGLでフォトリアルを頑張れば頑張るほど「より忠実な再現」が求められると思います。ブラウザでのリアルタイム3DCGは性能的な限界もあって最適化がものすごく大変なのですが、その制約の中でもフォトリアルなレンダリングを実現させているのは本当に凄いことだなと思いました！
Adobe X Bowie
Brand: Adobe
Agency: DENTSU CREATIVE
Location: AMSTERDAM（Netherlands）
Award: Shortlisted
Adobeと、今は亡きロックシンガーであるデヴィッドボウイのコラボレーション企画。
デヴィッドボウイの楽屋を3DCGでWeb上に再現し、ユーザーはその楽屋の中でインタラクティブに彼にまつわる宝物とされるオブジェクト（メイク道具やギターなどなど…）に触れることができる、というWebサイトです。
こちらのサイト、残念ながら執筆時点では公開が終了しているようです。
ただ、AwwwardsでSite Of The Dayを受賞していて、以下のページにスクリーンショットが残っているので雰囲気が少しわかるかもしれません。
このサイトもWebGLが使用されているハイエンドなWebサイトでした。
WebGLを使用したWebサイトを制作しようとするとぶちあたる壁のひとつに、「インタラクティブな部分が無ければWebGLにする意味がない / 動画でいいよね」という課題があります。
しかし、このサイトはデヴィッドボウイの楽屋から彼にまつわるオブジェクトをユーザーが探し出す、そしてその間に流れる音楽、さらに操作に応じて鳴るSE、という具合にリアルタイムレンダリングでしか実現できない体験がありました。
さらに、そのオブジェクトは画像や3DデータとしてAdobe環境にダウンロードできて、ユーザーがそれらを活用してPhotoshopやSubstance 3Dなどで自由に作品を創作できるような体験設計がされていました。
このサイトの平均滞在時間は4分39秒で、一度訪れたユーザーは6回も繰り返し訪れた、とのことです。
「ずっと見ていたい、何度も来たい」サイトになったのは、必然性のあるリアルタイムレンダリング体験設計があったからこそだと思いました。
Redesigning for E-nclusion
Brand: PLAZA VEA
Agency: FAHRENHEIT DDB
Location: LIMA（Peru）
Award: Silver, Bronze, Shortlisted
クライアントであるPlazaVeaは、ペルー最大のスーパーマーケットチェーンであり、ECサイトも運営しています。
しかし、ペルーの地方では日本のように高速インターネット環境が整備されていないという課題があるようです。
そこで、低品質なインターネット環境でもECサイトで買い物ができるように「2Gでも買い物可能な簡易版ECサイト」を制作した、という施策です。
この案件は目から鱗でした。
日本だとどれだけ地方でも4Gは繋がりますし、ページ速度を上げるのは「カート時点での離脱率を下げるため」とか、「Google検索結果改善のためにCore Web Vitalsを改善する」という意識だと思います。
しかし、ペルーの地方ではページの表示速度がライフラインに関わるという重大さです。
そして、この施策のポイントは、商品画像を「データ容量は少ないが、商品として識別できるようにデザインし直した」というところにあります。
解像度を下げたとか、WebPにして画像を圧縮したなど一般的な解決策を超えて、リデザインしたところが大きいと思っています。
タイトルにもなっている「E-nclusion」は、おそらく「E Commerce」+「inclusion（インクルージョン）」の造語であり、「どんなユーザーでも見捨てないECサイト」想いが込められていると思います。（余談ですがここ数年のカンヌライオンズは、「DE&I（ダイバーシティ・エクイティ＆インクルージョン）」がひとつのテーマになっているようです）
日本では来年4月に「改正障害者差別解消法」が施行され、Web制作者は今までより一層アクセシビリティ対策に目を向けていく必要があります。
このペルーのような課題は日本には無いかもしれませんが、自分が制作するWebサイトが「誰かを置いてけぼりにしていないか？」は今一度向き合う必要があるなと思いました。
最後に
僕らWebの人間がカンヌを目指す意義は何か？
Webがテーマの応募作品をいくつか考察してきました。
個人的な感想として、Awwwardsで高い評価を受けていたWebGLごりごり実装のハイエンドWebサイトたちが賞を取れていなかったという事実はかなりの衝撃でした。
もちろんカンヌライオンズは「Webの賞じゃなくて広告全般の賞だからね」と言ってしまえばそれまでなのですが、そのスタンスだと何か勿体無いな、いや悔しいなと。
なぜなら、間違いなく「Webサイトも広告」だと思うからです。
（何を当たり前のこと言ってるんじゃ！という先輩方、すみません。ただ意外と意識できてないことじゃないかなと思っとります。）
フロントエンドエンジニアには事業会社に属する人間もいれば、広告会社に属する人間もいると思いますが、
特に後者であれば、僕たちが実装しているWebサイトというのはあきらかに広告であるわけです。
そうなると、他のメディアに"負ける"（あえてこの言い方をします）ってちょっと悔しいなって思っちゃうわけです。（僕だけかなあ、、共感してくれる方がいらっしゃれば嬉しいです。）
Webの力ってまだまだこんなもんじゃないですよ、世の中をこんな感じで変えることができますよ、っていうのを見せていきたいわけです。
カンヌは「総合格闘技のよう」と書きましたが、それゆえにWeb以外の広告にも触れることで、Webというもののパワーを客観視できると思ってます。
そして、「僕たちは広告を作ってるんだよね」という極めてシンプルな命題に再度向き合うことができます。
このような発見が、「Webの人間がカンヌを目指す意味」なのではないかと思いました。
今回現地ではさまざまな広告会社の方々と交流する機会がありましたが、フロントエンドエンジニア、というよりそもそもエンジニアの方は少なかったです。
はっきり言えます。「エンジニアもカンヌに行ったほうがいい！」と！
カンヌに行って、「そうだ、エンジニアだって広告を創るクリエイティブのメンバーの一人なんだ」と、そして「自分の持ってる技術で解決できることって実はいっぱいあるじゃん」と思えました。
「広告」としてのWeb制作
ちょっと情緒的な内容が続いてしまったので、もう少し落ち着いて具体的な反省を書きたいと思います。
最近の僕はといえば、「とにかくWebGL勉強して、派手派手なサイト作って凄いと思われたい」という、いわば自己満足的思考に陥っているなと思います。
もちろん上記のようなモチベーションは技術力の向上に繋がるので、エンジニアが持っていてダメな思考ではないし、この下心を完全に捨てようとは思いません。
しかし、デジタル黎明期ならともかく「技術力で殴る」が通用しない時代。
「自分が作ったWebによってクライアント/世の中の何が変化したか？」
「誰かを置き去りにしたWebを作っていないか？」
これらのテーマは、「広告を作っているフロントエンドエンジニア」として、常に考えていかなければならないと思いました。
広告が好きでこの業界にいます。
だから、プランナーやアートディレクターやデザイナーやコピーライターと同じように、フロントエンドエンジニアだって広告を制作するクリエイティブ職だと。
その矜持と決意を持って、本日もVisual Studio Codeに向かいたいと思います。
おわり。
▶︎Think & Craft 公式SNS◀︎
Twitter：
https://twitter.com/thinkandcraft
Instagram：
https://www.instagram.com/_thinkandcraft/
Facebook：
https://www.facebook.com/thinkandcrafttokyo/
YouTube：
https://www.youtube.com/@thinkandcrafttokyo
▶︎Think & Craft Webサイト◀︎