ヴィッツシャンブルアパリコレクション

Apr 21, 2009

TOYOTA
Vitz
Works

女の子のためのクリエイティブコンセプト

１万人の女性にクルマ作りに関するアンケートを実施して、その中から人気の高かった「パリの小部屋」というコンセプトを元に、トヨタの女性デザイナーがデザインしたヴィッツ。
その世界観をwebで体験してもらえるように、ドールハウスをモチーフに自分らしい”Chambre à Paris（パリの小部屋）”を作ることができるコンテンツが今回のメインコンセプトでした。

気合いの入った行動力でミニチュアを集め、ドールハウスをプロダクトデザイナーまで連れてきて作り始めるディレクター。僕が企画・仕様書から設計を始める横でルンルンでデザインするデザイナーを見ていると、「あぁ、女の子は大好きな世界感なんだな〜」と改めて企画の精度の高さを感じました。

今回のクリエイティブで頭を悩ませたのは着々と出来上がって行くパリの小部屋。そして、女の子のキラキラな世界感です。

テクニカルトピックス

キラキラを再現せよ

家具が変わる時、ボタンに触れる時、このサイトではほとんどのボタンエリアにボタンサイズまたは用途にあった範囲と量を調整できるカスタムパーティクルを設定しています。
Tweensyなど便利で高性能なライブラリも実装の候補に上がり、ひとまず何パターンか見せて見ましたが「う〜ん」の印象。Emitterを用いた単純な拡散ではダメ。リアルな重力と粒子が細かく加算の効いた妖精の粉的な物もイメージと違う。曰く「もっとふんわり。ややコミカルというか、綺麗すぎない感じで、チカチカした感じ」という抽象的なイメージから何度もすり合せ、メモリーリークも取れた頃、やっと今の形に落ち着きました。

ポイントはコマアニメーションと何種類かのシェイプを混ぜたキラキラをパーティクルとすることと、easingジェネレータ系の動きに見えない、自然なようで誇張された放物線だったようです。

恐るべしパリの小部屋

オープニングが終わり、女の子のおしゃべりが終わると、メインコンテンツのお部屋エディットモードになります。
ここでは、手塩にかけた自家製のドールハウスを絶妙のライティングと撮影、さらにレタッチでしっかり加工された、質の良いミニチュア家具が画像数113パターン。お部屋を存分に楽しむと総容量12.1MBが読み込まれます。

「ここはこのコンテンツの要だから世界感を崩さず綺麗に遷移して、動作を軽くしたい」「パチパチ押して、ポンって出てくる感じが可愛い」「読み込みに時間かかるのは嫌」「ローディングで待つのは寒い」etc 様々な意見と難題が。

さらにエディット後はモデルの女の子をお着替えさせて、お出かけモードへ。
お出かけへの遷移中にローディングを出さずユーザーからは見えない様に裏側でお部屋と女の子のキャプチャーを取り、サーバーに送信、壁紙APIに送るというちょっとややこしい仕様です。

家具の部分にはエリア毎に独立したページングとクリックに対してすぐさま現在のローディングと家具名のラベルを切り替える優先度を持ったローダークラスを作り対応。
"ローディングはアニメーションと遷移で目立たない様に”、"アニメーション中は裏処理を行う機会”というある種当たり前の方法でしっかり実装しました。