← 事例一覧
brand

雲門舞集舞蹈教室生日禮

提供されたキービジュアルを、動き、提携特典、マルチデバイス体験へ展開。

Cloud Gate Dance School 誕生日キャンペーンの公開ページ
公開キャンペーンページ。Buka Frogは段落ごとに異なる姿勢と動きを担います。

プロジェクト情報

雲門舞集舞蹈教室の誕生日企画は八つの協業ブランドをつなぎます。

顧客提供のキービジュアルと素材から、ビジュアル展開、インタラクション、フロント実装を担当しました。

01キービジュアル展開
02キャラクター微動作
03八ブランド特典・モーダル
04レスポンシブ・タッチ実装

実際の流れ

すべての段落で、キャラクターに役割を与える。

  1. 01
    キャンペーン入口

    会員が誕生日特典と8社のブランド優待を確認します。

  2. 02
    キャラクター演出

    段落ごとに内容に合ったBuka Frogの姿勢と動きを呼び出します。

  3. 03
    レスポンシブ

    デバイスをまたいで接合部、比率、reduced motion対応を維持します。

01 01

一枚のキービジュアルをインタラクティブな世界へ

カードとポスターの表現を、キャラクター、場面、動き、ページのリズムへ展開しました。カエルの微細な動きが閲覧を導きます。

02 02

デスクトップとタッチの両方で成立

デスクトップとモバイルの比率・操作差に合わせ、素材読込、動き、モーダル、タッチ挙動を調整しました。

03 03

マスコットを、一つの動画ではなく使えるデザインシステムにする。

8種類の胴体、10組の腕、12組の脚を関節座標で組み合わせ、必要な場所でidle、wave、dance、jumpを作れるようにしました。

04 04

動きはコンテンツに割り当て、画面サイズごとに確認する。

loading、hero、キャンペーン紹介、利用方法で異なる姿勢を使い、モバイルでは接合部、比率、reduced motionの動作も確認しています。

次の事例

雅樂身心量覺 →
近い課題について相談する →