ツイートの内容を元におすすめ作品をレコメンド！ズームブラー演出が特徴的な TSUTAYA AI のウェブサイト

doxas : 2018-09-10 14:12:54

滑らかなアニメーションが秀逸

今回ご紹介するのは、みなさんご存知の TSUTAYA さんの関連サイトです。

最近では動画配信サービスを中心に、動画や映画のジャンル、そして音楽のジャンルなどで海外からもたくさんの強豪が押し寄せていますが、実際にお店に足を運んで DVD を借りるということなら、やっぱり TSUTAYA は今でも人気があるのではないでしょうか。

ものすごいプライベートなことを唐突に書きますが、うちの大学生の息子なんかは、TSUTAYA にたまに出かけていくのを見かけることがあります。やっぱり実店舗を持っているということは、それだけ人々の生活に根ざしているということなんでしょうね。

そんな TSUTAYA が独自に開発したレコメンドサービスが、今回のウェブサイトです。Twitter のツイート内容に応じた作品をオススメしてくれるという、なんともイマドキなウェブサービスとなっています。

今回のサイト、タイトルに「TSUTAYA AI」と書かれていることからもわかるとおり、いわゆる AI を強く意識しているウェブサイトになっています。

どのような経緯で、どのように開発された AI が動いているのかということは、特に情報が無いのでちょっと今回のサイトを見ただけだとわからないのですが……

少し調べてみると、どうやら総勢 2,000 もの映画タイトルの中から、直近のツイート 100 個を分析した結果を元に、そのユーザーと親和性の高いタイトルを抽出するという仕組みになっているようで、実際バックエンドには結構ガチな実装があるのかもしれません。

今回は、フロントエンドの実装を中心に、特に WebGL を使っている場面を見てみましょう。

まず、この上の画像。これ実は、ローディング画面です。

すごくオシャレな感じですが、実際には画面の中央にある AI のマークが最初はすごくぼんやりした感じで描かれます。ロードが進むにつれ、徐々にそのシルエットが明確に、鮮明になってくる感じですね。

このときに使われているズームブラーが、今回のサイトでは中心的な演出の要素として使われています。

実際にコンテンツページが表示されると、TSUTAYA のテーマカラーであるブルーの背景に、浮遊するように映画のパッケージが並びます。

さらに Twitter アカウントの紐付けを行ってやると、直近のツイートのうち 100 件分を利用して、そのユーザーへのおすすめタイトルの抽出が始まります。

タイトルは 20 本が選び出されるようになっており、実店舗の在庫状況とかも調べることができるみたいですね。

実際に抽出が完了した際のシーン遷移の演出にもズームブラーが使われているのですが、モーションブラーにも似た、独特の迫力あるアニメーション演出がいい感じです。

WebGL の演出に限らず、アニメーションする部分の演出すべてにおいて、スルッと流れるような感じで自然なモーションが付加されているのが素晴らしいなと個人的には感じました。

比較的、サイトのデザインとしてはシンプルで、情報量がけして多い感じはしませんが、かといってまったく寂しさとか物足りなさみたいなものは感じません。

どのようなタイミングにも、絶えずサイト内のどこかに動きや変化があり、しかもそれがしつこくならないように、うまく調整されているからなのかなと思いました。