> UIの動き(モーション) 現場では、UIの動き方はどんな風に伝えているのか知りたい。 単純タップするモーションというよりは、少し高度な動きなど。例えばYouTubeアプリを開く時に出てくるモーションなど。
- 【デザイン共有】MTGでの伝え方を実演してみた
- https://www.bo-no.design/contents/rookiesaction-sharedesign02
- デザインを現場で上手に伝える2つの方法
- https://www.bo-no.design/contents/designcommunication01
あまりYouTubeの動きのような複雑なものを作ることは稀だと思いますが、基本的に「やりたいこと」をエンジニア（実装する人）に伝えられるようにします。
なのでYouTubeのような挙動をやりたい場合はそれを第三者に伝えられるようにプロトタイプを作ります。かつ、作って見せてやってね、ではなくしっかり伝えることとすり合わせを通して実現します。
”挙動”を理解できるように、理解できる"物"を作ります。
- いつその動きが発動するのか
- どこまでは自動で動いて、どこを触るとどういう動きをするのか？の細かい分岐まで”設計(デザイン）”します
など、"動き"と”仕様”を細かく、できる限り詰めます。
アニメーションに限らず「Figmaみてね。あとはよろしく！」とはならないです。困ります。
なのでMTGなどで仕様の説明や認識のすり合わせは必要です。どれだけ詳細にドキュメントを作っても文字だけでは齟齬が生まれるので話し合いましょう。
また初期フェーズに相談しておく、特にエンジニアさんに、はかなり必須です。
アニメーション作るのってめっちゃしんどい（だるい）のがエンジニアさん側なので、それも説得する必要があるかもしれない。また、実装のことを考えてもらわないとコードで実現するので早めに相談するべきです。
実装コストや、そもそも今の仕組みで実現できるのか？結局コードで実現するのでコードのことも考える必要があります。ただ全てのデザイナーがコードに詳しいわけではないですよね。
なのでエンジニアさんに相談しながら進めるのが普通です。
ここは「１年目の立ち回り」レッスンをご覧ください。
https://www.bo-no.design/series/rookiesaction
正直伝わればなんでもOKです。コード書ける場合を除き何で作っても実装状況を加味して作らないといけないので”動き”と”仕様”を整えるのが最重要です
例えばこういうのでつくる
- Figmaのプロトタイプアニメーション
- 今なら：生成AI (Figma Make / Lovable / boltなど)
- AfterEffect
- コード書く
複雑なアニメーションに限らず”動き”と”仕様”を固めてユーザーバリューを提案するのがデザイナーの任務でござる🥷
> UIの動き(モーション) 現場では、UIの動き方はどんな風に伝えているのか知りたい。 単純タップするモーションというよりは、少し高度な動きなど。例えばYouTubeアプリを開く時に出てくるモーションなど。
- 【デザイン共有】MTGでの伝え方を実演してみた
- https://www.bo-no.design/contents/rookiesaction-sharedesign02
- デザインを現場で上手に伝える2つの方法
- https://www.bo-no.design/contents/designcommunication01
あまりYouTubeの動きのような複雑なものを作ることは稀だと思いますが、基本的に「やりたいこと」をエンジニア（実装する人）に伝えられるようにします。
なのでYouTubeのような挙動をやりたい場合はそれを第三者に伝えられるようにプロトタイプを作ります。かつ、作って見せてやってね、ではなくしっかり伝えることとすり合わせを通して実現します。
”挙動”を理解できるように、理解できる"物"を作ります。
- いつその動きが発動するのか
- どこまでは自動で動いて、どこを触るとどういう動きをするのか？の細かい分岐まで”設計(デザイン）”します
など、"動き"と”仕様”を細かく、できる限り詰めます。
アニメーションに限らず「Figmaみてね。あとはよろしく！」とはならないです。困ります。
なのでMTGなどで仕様の説明や認識のすり合わせは必要です。どれだけ詳細にドキュメントを作っても文字だけでは齟齬が生まれるので話し合いましょう。
また初期フェーズに相談しておく、特にエンジニアさんに、はかなり必須です。
アニメーション作るのってめっちゃしんどい（だるい）のがエンジニアさん側なので、それも説得する必要があるかもしれない。また、実装のことを考えてもらわないとコードで実現するので早めに相談するべきです。
実装コストや、そもそも今の仕組みで実現できるのか？結局コードで実現するのでコードのことも考える必要があります。ただ全てのデザイナーがコードに詳しいわけではないですよね。
なのでエンジニアさんに相談しながら進めるのが普通です。
ここは「１年目の立ち回り」レッスンをご覧ください。
https://www.bo-no.design/series/rookiesaction
正直伝わればなんでもOKです。コード書ける場合を除き何で作っても実装状況を加味して作らないといけないので”動き”と”仕様”を整えるのが最重要です
例えばこういうのでつくる
- Figmaのプロトタイプアニメーション
- 今なら：生成AI (Figma Make / Lovable / boltなど)
- AfterEffect
- コード書く
複雑なアニメーションに限らず”動き”と”仕様”を固めてユーザーバリューを提案するのがデザイナーの任務でござる🥷
> UIの動き(モーション) 現場では、UIの動き方はどんな風に伝えているのか知りたい。 単純タップするモーションというよりは、少し高度な動きなど。例えばYouTubeアプリを開く時に出てくるモーションなど。
- 【デザイン共有】MTGでの伝え方を実演してみた
- https://www.bo-no.design/contents/rookiesaction-sharedesign02
- デザインを現場で上手に伝える2つの方法
- https://www.bo-no.design/contents/designcommunication01
あまりYouTubeの動きのような複雑なものを作ることは稀だと思いますが、基本的に「やりたいこと」をエンジニア（実装する人）に伝えられるようにします。
なのでYouTubeのような挙動をやりたい場合はそれを第三者に伝えられるようにプロトタイプを作ります。かつ、作って見せてやってね、ではなくしっかり伝えることとすり合わせを通して実現します。
”挙動”を理解できるように、理解できる"物"を作ります。
- いつその動きが発動するのか
- どこまでは自動で動いて、どこを触るとどういう動きをするのか？の細かい分岐まで”設計(デザイン）”します
など、"動き"と”仕様”を細かく、できる限り詰めます。
アニメーションに限らず「Figmaみてね。あとはよろしく！」とはならないです。困ります。
なのでMTGなどで仕様の説明や認識のすり合わせは必要です。どれだけ詳細にドキュメントを作っても文字だけでは齟齬が生まれるので話し合いましょう。
また初期フェーズに相談しておく、特にエンジニアさんに、はかなり必須です。
アニメーション作るのってめっちゃしんどい（だるい）のがエンジニアさん側なので、それも説得する必要があるかもしれない。また、実装のことを考えてもらわないとコードで実現するので早めに相談するべきです。
実装コストや、そもそも今の仕組みで実現できるのか？結局コードで実現するのでコードのことも考える必要があります。ただ全てのデザイナーがコードに詳しいわけではないですよね。
なのでエンジニアさんに相談しながら進めるのが普通です。
ここは「１年目の立ち回り」レッスンをご覧ください。
https://www.bo-no.design/series/rookiesaction
正直伝わればなんでもOKです。コード書ける場合を除き何で作っても実装状況を加味して作らないといけないので”動き”と”仕様”を整えるのが最重要です
例えばこういうのでつくる
- Figmaのプロトタイプアニメーション
- 今なら：生成AI (Figma Make / Lovable / boltなど)
- AfterEffect
- コード書く
複雑なアニメーションに限らず”動き”と”仕様”を固めてユーザーバリューを提案するのがデザイナーの任務でござる🥷
0 Comments