アニメーションにも現実世界の個性をプラス!?ロータスデザイン会議室 #3


週間ドリブル会議とは?
ロータスのツイッター@lotus_chan_にて更新している日刊ドリブル(不定期)より、
毎週1回、その週に取り上げたドリブルから1つ選んで、デザインを紐解いていく。
そんな会議です。
簡単な自己紹介
🌭 ホットドッグちゃん:UX好きなUI/Webデザイナー
🍔 ハンバーガーくん:アートディレクターのようなイラストレーター

ホットドッグちゃん🌭

今回も始まりましたね!
今回はGoogleのアニメーターが作成したアニメーションに決定です。

ハンバーガーくん🍔
せっせと働いているモーション。可愛いです。
決定のポイントはどんなところでしょう?

ホットドッグちゃん🌭
決定のポイントはまず、「かわいい!」から目に止まるのですが、よく見ると何をしているのかすぐ分かる。
一人一人に個性がある。あとはGoogleらしい色遣いを旨く使っているところですかね。

ハンバーガーくん🍔
グーグルのロゴの配色と微妙に違いますね。
理由があるのでしょうか?

ホットドッグちゃん🌭
Googleのロゴは青、赤、黄、色、青、緑、赤の順番ですが、今回の作品は緑、黄、赤、青、緑です。
ちなみにGoogleのロゴは色の三原色である赤、青、黄、に+緑で常識にはとらわれないとの経営理念が込められているみたいです。

ハンバーガーくん🍔
こちら、キャラの並びは両脇「緑」でバランス取ってますね。

ハンバーガーくん🍔

・・(ネット検索中)

ハンバーガーくん🍔
あ、実際に使われている!
https://madeby.google.com/intl/en_in/phone/

ホットドッグちゃん🌭
iPhoneからデータを移行しているんですね!!
だからこんなに働いていたというわけですね!大変な作業です。
OS違いますしね。
こんな演出されるとワクワクしちゃいますね!

ハンバーガーくん🍔
素体はシンプルなのですが、各キャラ様々に動きを作ることで個性が浮き出ていますね。

ホットドッグちゃん🌭
っと、このモーションはGoogleが推奨するマテリアルデザインのモーションを利用していますね!
https://material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations

ハンバーガーくん🍔
たしかにキャラクターが運んでいるるオブジェクトの動き特徴がありますね。
こういう細かいところの演出も印象に残る理由なんですね。

ホットドッグちゃん🌭
マテリアルデザインはモーションに力を入れていて、研究すると面白いですよ。
現在進行形なので毎日進化しています。

ハンバーガーくん🍔
日々勉強ですね。ところでPixel Phoneの日本発売はいつなのでしょうか?

ホットドッグちゃん🌭
分かりません。
それよりマテリアルデザインのドキュメントが日本語になりましたので、熟読をお願いします。

https://material.io/jp/guidelines/

ハンバーガーくん🍔
…土日中に読んでおきます。

関連記事