キリンビール / 365 FLOWERS by 淡麗グリーンラベル(https://365flowers.kirin.co.jp/

① トップページの「このサイトは、20歳未満の方はご利用できません。」のタイトル画像とリボンのイメージも微かに動いているのが、アナログ感が出ていて好きです。カラクリとしては、手描き文字(アルファベット)を画像化して並べ、それを CSS の transition で数フレーム動かしているだけなんだけど、それだけの工夫であんなにもアナログ感を出せるのはスゴいですね。

② トップページでボタンをクリックした後、各種画像ファイルが拡大→縮小 + フェードアウト してから、読み込み画面にページ遷移する動きがスムーズすぎて、どうやっているかわからないです。SPA(Single Page Application)として作ってるのかな。すごく気になります。

③ 本体ページのローディング中にサイトのコンセプトを説明するテキストが順次流れていく表現が、ユーザの待ち時間を少しでも軽減するのに役立っているように思います。

④ 本体ページが読み込まれると、青空を雲が流れ、タイトルが表示され、現在の日付まで遷移していく様子がとてもシームレスに流れていきます。その流れに対してユーザが途中でアクションすることはできません。しかし、世界観が隅から隅まで構築されていて表現をブラウザのデフォルト機能に頼っていないところに美意識を感じます。

⑤ 本体ページの該当する月へ遷移した後も、ゆったりとページ遷移は続き、季節に応じて枯葉が降ったり、雪が降ったり、鳥が飛んで行ったり、花びらが舞ったり、季節感を表現する仕組みが仕込まれていて思わず没入してしまいます。画面を舞う雪・花・枯葉・鳥はいずれも静止画ではなく、その一つ一つの要素が全部アニメーションしているところが素晴らしいです。

⑥ それぞれの花にマウスホバーすると、背景画像(緑色の円形)が現れて花のキャラクターが拡大して動くところが、「私の出番来たー!」みたいに思えて、操作しているコチラが嬉しくなります。マウスホバーというシンプルなアクションにも関わらず、(A)画面全体が動いてくれること(B)マウスアクションに反応してくれることがとても嬉しく感じます。

⑦ それぞれの花をクリックすると、該当する花のキャラクターアニメーションを読み込むためのローディング画面が数秒登場するんですが、そこに現れる数文字のテキストが他の花も見てみたくなるようなコピーになっていて、さらにページを楽しもうという没入感と期待感を高めてくれます。

⑧ それぞれの花のページは、(A)花キャラクターアニメーションを中心に、(B)日付、(C)花の名前、(D)花言葉、(E)花の分類、(F)花の原産地、(G)誕生日の人への一言コメント、(H)Facebookでのシェア、(I)Twitterでのツイート、(J)アニメーションデータのダウンロード、(K)注釈キャプション、で構成されているのですが、(A)の要素とそれ以外の要素の強弱がハッキリとつけられているので、そんなに情報量が多いように思えません。この情報量を365日分やってのける物量に制作者の執念を感じます。スゲェ!

⑨ 背景色は白から少しだけ濁った暖色(#f8f6ea)になっていて、そのBGカラーの上にビビッドな配色のキャラクターアニメーションがワサワサうごめいている感じが「生きている」感じを醸し出していて、生命力を感じます。

⑩ 商品紹介の商品イメージさえ、同じアートコンセプトを持ったイラストになっていてびっくりした!そのうえ製品のブランドページ自体は別にあるっていうこと自体にさらに驚いた!えぇー、じゃあ、このページなんだったんだろう!?楽しいだけじゃん。

 

情報ソース:誕生花をオリジナリティ溢れるアニメーションで表現した誕生花辞典の決定版『365 FLOWERS by 淡麗グリーンラベル』公開

 

アニメーション制作は「CALF」という東京の会社のようです。圧倒的に確立されたビジュアルを物凄い物量でこなすパワープレイヤーという印象です。

全ページスナップショットを取って保存したいくらいのサイトです。

 

カテゴリー: WEB