TOP ツール・フレームワーク・方法論 ケニー・ボウルズさんの思考と手法「モーションプロトタイピング設計の本質」

ケニー・ボウルズさんの思考と手法「モーションプロトタイピング設計の本質」

UX DAYS TOKYO 2017 Day2に参加したワークショップについて書きます。

ケニー・ボウルズさんは、「コンテキストを理解する」の記事を執筆したデザインコンサルタントとして有名ですが、元々デジタル・プロダクトのデザイナーであり 、その代表的な成果物は普段わたし達も使っているTwitterのモーションUIです。Webサービスにおけるアニメーションの必然性と構造理論、エンジニアに伝えるためのテクニックを学びました。

座学とハンズオンで丸1日がかり。スライドだけでも150ページ近くある内容ですので、特に印象に残った部分をかいつまんでみることにします。

How? Motion

モーション表現の手段はいくつもあります。カテゴライスすると4つ。

Code

Module

Timeline

Click-through

仕事に使うモーションツールの選択は、一長一短あるので常にツールを2つくらい熟知したほうがよいというアドバイスです。ツールを使うまえに、アニメーションで重要な“タイミング”についてのレクチャーです。お笑いの世界もアニメーションも“すべてはタイミング”という事など。

Keynoteの「マジックムーブ」でアニメーション作成

ケニーボウルズワークショップ

今回はApple社のスライド作成ツールKeynoteを使う実習課題。まず、Keynoteで作られたLindaさんというデザイナーの自由なアート作品を参考に見せてもらいました。そして、Keynote tipsのレクチャー後、手始めに「ビリヤードの球をポケットに入れる」というアニメーション。サンプルを見せられてはいるのですが、各自が頭に描いたものを作りなさいという課題です。いきなり完成度の高いものができなくてもいいとは言われましたが、基本的に自力です!!

アプリUIでよくある「ボタンメニューを選んで移動」「メニューバーをクリックして移動」というのを続けてやりました。これ、アニメーションがなかったらユーザーは自分がどういう操作をしたのか認識できないという基本的なUIです。

最後に40分かけて、「プルしてリロードする」アニメーションにトライしました。ケニーさんが同時に新しく作業されたものも最後に見せてもらいました。実際にこれくらいのスピード感で形にできてしまうってことですよね。

ケニーさんのデザインチームでは、頭で考えた動きを、手っ取り早く。大体20分くらいで1つのパーツをプロトタイピングしているそう。おそらく参加者のほとんどはKeynoteをこんな風に使い込むのは初めてです。(もっと高価なモーションツールだとしても、ほんの数%の機能しか使われていないという話もよく耳にします。)

ディズニー・アニメーションから学ぶアニメーションのセオリー

一見、関係なさそうな逆方向のコマも混ざっていてはじめて自然な動きに視えるといった、アナログ時代からのディズニースタジオ・テクニックの解説がありました。(本に書いてある12の法則は英語が読めなくても絵で理解できそうです。)

フランス語のことわざで「飛ぶ前に下がれ」

大きな動作のまえに反対方向の動きを入れる予備動作が挿入されると、とても自然な動きに視えるということなどが解説されました。

Web UIにおけるモーション、つまりアニメーションがユーザーに与える手応えのようなもの。TwitterのLike「♡」を押したときのモーションを分解するとこんなに!?というような。インタラクションも重要なユーザー体験です。まさに「細部に神は宿る」ですね。

ニュートンの物理学

ニュートンの第一法則

重力について。重い物のほうが軽いものより早く落ちる?どのような質量のものも落下率は同じなんです。第二法則、第三法則と話は続き、アニメーションで宇宙表現するときの“よくある例”が出てきました。

コレオグラフィー

「振付」という意味ですが、モーションにおいてのChoreographyは「振る舞い」ということです。一貫性をもたせないようにするほうが、体験としてひっかかりが持てるということでしょうか。かなり緻密なディレクションが、モーションデザイナーに求められます。

ワークショップを終えて

参加者はUIデザイナーだけではなく、デザイナーの指示をうけてアニメーションを実装するエンジニアも参加されていました。デザイナーがcanvasやCSSでアニメーションでprogram codeを要求されることもありますが、まず身近なツールを熟知することでプロトタイピングの幅を広げることができそうです。そして1つの手法にとらわれることなく研究することはマスト、ジャンルにとらわれず「アニメーション」「モーション」を実用的なWeb UIに応用する意義を、Day1の講演も踏まえて知る時間となりました。

 

 

 

UX DAYS TOKYO オーガナイザ/デジタルマーケティングコンサルタント 著書 ・ノンデザイナーでもわかる UX+理論で作るWebデザインGoogle Search Consoleの教科書 毎年春に行われているUX DAYS TOKYOは私自身の学びの場にもなっています。学んだ知識を実践し勉強会やブログなどでフィードバックしています。 UXは奥が深いので、みなさん一緒に勉強していきましょう! スローガンは「早く学ぶより深く学ぶ」「本質のUXを突き止める」です。

まずは言葉を覚えよう

「UX用語」のカテゴリー

UXを取り入れるためのマインドセット

「UX格言」の新着

UX格言 一覧

現場の声をリアルで届ける

動画で学ぶUX 「You X Tubo(ゆーえっくすつぼ)」の新着

You X Tubo(ゆーえっくすつぼ) 一覧