UX DAYS TOKYO 2017 Day2に参加したワークショップについて書きます。
ケニー・ボウルズさんは、「コンテキストを理解する」の記事を執筆したデザインコンサルタントとして有名ですが、元々デジタル・プロダクトのデザイナーであり 、その代表的な成果物は普段わたし達も使っているTwitterのモーションUIです。Webサービスにおけるアニメーションの必然性と構造理論、エンジニアに伝えるためのテクニックを学びました。
座学とハンズオンで丸１日がかり。スライドだけでも150ページ近くある内容ですので、特に印象に残った部分をかいつまんでみることにします。
How? Motion
モーション表現の手段はいくつもあります。カテゴライスすると４つ。
• Code
• Module
• Timeline
• Click-through
仕事に使うモーションツールの選択は、一長一短あるので常にツールを2つくらい熟知したほうがよいというアドバイスです。ツールを使うまえに、アニメーションで重要な“タイミング”についてのレクチャーです。お笑いの世界もアニメーションも“すべてはタイミング”という事など。
Keynoteの「マジックムーブ」でアニメーション作成
今回はApple社のスライド作成ツールKeynoteを使う実習課題。まず、Keynoteで作られたLindaさんというデザイナーの自由なアート作品を参考に見せてもらいました。そして、Keynote tipsのレクチャー後、手始めに「ビリヤードの球をポケットに入れる」というアニメーション。サンプルを見せられてはいるのですが、各自が頭に描いたものを作りなさいという課題です。いきなり完成度の高いものができなくてもいいとは言われましたが、基本的に自力です！！
アプリUIでよくある「ボタンメニューを選んで移動」「メニューバーをクリックして移動」というのを続けてやりました。これ、アニメーションがなかったらユーザーは自分がどういう操作をしたのか認識できないという基本的なUIです。
最後に40分かけて、「プルしてリロードする」アニメーションにトライしました。ケニーさんが同時に新しく作業されたものも最後に見せてもらいました。実際にこれくらいのスピード感で形にできてしまうってことですよね。
ケニーさんのデザインチームでは、頭で考えた動きを、手っ取り早く。大体20分くらいで１つのパーツをプロトタイピングしているそう。おそらく参加者のほとんどはKeynoteをこんな風に使い込むのは初めてです。（もっと高価なモーションツールだとしても、ほんの数％の機能しか使われていないという話もよく耳にします。）
ディズニー・アニメーションから学ぶアニメーションのセオリー
一見、関係なさそうな逆方向のコマも混ざっていてはじめて自然な動きに視えるといった、アナログ時代からのディズニースタジオ・テクニックの解説がありました。（本に書いてある１２の法則は英語が読めなくても絵で理解できそうです。）
フランス語のことわざで「飛ぶ前に下がれ」
大きな動作のまえに反対方向の動きを入れる予備動作が挿入されると、とても自然な動きに視えるということなどが解説されました。
Web UIにおけるモーション、つまりアニメーションがユーザーに与える手応えのようなもの。TwitterのLike「♡」を押したときのモーションを分解するとこんなに！？というような。インタラクションも重要なユーザー体験です。まさに「細部に神は宿る」ですね。
ニュートンの物理学
ニュートンの第一法則
重力について。重い物のほうが軽いものより早く落ちる？どのような質量のものも落下率は同じなんです。第二法則、第三法則と話は続き、アニメーションで宇宙表現するときの“よくある例”が出てきました。
コレオグラフィー
「振付」という意味ですが、モーションにおいてのChoreographyは「振る舞い」ということです。一貫性をもたせないようにするほうが、体験としてひっかかりが持てるということでしょうか。かなり緻密なディレクションが、モーションデザイナーに求められます。
ワークショップを終えて
参加者はUIデザイナーだけではなく、デザイナーの指示をうけてアニメーションを実装するエンジニアも参加されていました。デザイナーがcanvasやCSSでアニメーションでprogram codeを要求されることもありますが、まず身近なツールを熟知することでプロトタイピングの幅を広げることができそうです。そして１つの手法にとらわれることなく研究することはマスト、ジャンルにとらわれず「アニメーション」「モーション」を実用的なWeb UIに応用する意義を、Day1の講演も踏まえて知る時間となりました。
