ASUS VivoWatch
既存デザインを、動きとレスポンシブ表現まで精密に実装。
プロジェクト情報
VivoWatchサイトでは、提供された画像比率、組版、動きのリズムを保つ必要がありました。
各画面・ブラウザで正確に動くフロントを実装しました。
01製品コンテンツ実装
02モーション・インタラクション
03レスポンシブ素材
04ブラウザ・性能調整
実際の流れ
製品の細部を、すべてのデバイスで成立させる。
- 01 素材分析
製品画像、マスク、モーション素材、レスポンシブ状態を実装前に整理します。
- 02 合成
製品画像、ウォッチフェイスのマスク、健康データの動きを正確に組みます。
- 03 再配置
小さい画面に合わせ、サイズ、レイヤー、読む順序を再設計します。
01 01
承認済みの製品表現をブラウザで成立させる
文字、余白、画像切り抜き、動きの時間、ブレークポイントを細かく調整し、端末が変わっても視覚の重点を保ちました。
02 02
既存デザインの中で役割を明確にする
役割はフロントエンドに限定し、精密な実装、端末調整、ブラウザ検証でデザインチームの成果を公開環境へ届けました。
03 03
動きを、製品の外ではなく製品の中に置く。
健康情報と心電図の動きをウォッチフェイスのマスク内に入れ、製品画像と合成することで、一般的なWebアニメーションではなくデバイスの機能として見せました。
04 04
動きとレスポンシブを、一つの仕組みとして検証する。
ウォッチフェイスのGIFマスク、AOSのシーケンス、Swiperの操作をブラウザと狭い画面で確認しました。PC版を縮小するだけでなく、レイヤー順、トリミング、読む順序を調整しています。
次の事例
安沛購物商城 →