好きな海外アニメに学ぶ UIアニメーション

はじめまして。WOW 仙台オフィスUIデザイナーの小林です。
昨年WOWに新卒で入社し、今年で2年目です。最近はステイホームの延長で家にいることが多いですが、島をクリエイトするために走り回っているのでさほど運動不足は感じていません。どうぞよろしくお願いします！

今回テーマに選んだのは海外アニメです。アニメは人並みに観てきましたが、小さい頃一番好きだったのが海外アニメでした。ストーリーはどれも起承転結がしっかりとしていてシンプルなものなのですが、海外の文化や生活様式が盛り込まれた内容に、当時は新鮮さと憧れ的なものを感じていました。特に惹かれていたのは登場するキャラクターたちです。日本ではあまり見られないサイケデリックな色使い、出てくるキャラ全員が超個性的なビジュアル、最大限誇張された大胆かつコミカルな動き。これらは「キモいけど、つい気になって見てしまう・・・」という中毒性があり、子どもの時からその魅力に引き込まれていました。今でも観てしまうほど印象的で素敵な作品ばかりです。

私が観ていた海外アニメの多くは世界各国で楽しまれています。子どもたちが物語を理解でき、言語を超えて楽しめるものとなっている理由には、キャラクターの魅力的な動きも関係しているのではないでしょうか。また、これはUIアニメーションにも繋がる大切なポイントが詰め込まれていそうです。そこで、オススメ海外アニメを3作品紹介しながら、その中で私が感じたUIアニメーションで大切な基本テクニックも合わせてご紹介していきます。

1.フィードバックの大切さ

一作品目は「無口なウサギ」です。イギリスとカナダの共同制作アニメで、黄色いウサギとその友達の動物たちが現代の都会で生活するシュールな日常を描いています。雑な感じの線やちょっと歪な背景画がゆるくて可愛いです。

このアニメの特徴は、タイトルからも分かるように「喋らない」、つまりセリフがありません。キャラクターたちの動きと、場面にあった素敵な音楽だけでストーリーが展開していきます。中でも注目したいのはキャラクターの表情です。

蓋が開くたびに下がる口角、元気がなくなって垂れていく耳、目と眉毛の細かな位置の移動。このような表情の変化で、ウサギは木の実に相当うんざりしていることが分かります。蓋を開ける一回一回の動作にリアクションを添えることで、今どんな状況なのか理解しやすくなります。このように丁寧で適切なフィードバックは、ユーザーが操作をする上で「今何が行われている（いた）か」を理解し、ストレスなく使用を続けるために重要なテクニックです。

2.予備動作の存在

二作品目は「エド エッド エディ」です。カートゥーンネットワーク（アメリカ）のオリジナルアニメで、性格にクセのある凸凹３人組が悪知恵を出し合い、日常の小さな事件に挑む（が大体失敗する）コメディアニメです。

キャラクターたちがとにかく個性的で、舌が水色という独特な色使いや、想像もつかない頭の形、極端に細い首や伸縮している手足など、いわゆるカートゥーン調と呼ばれるデザインが見ていて楽しい作品です。

そんなキャラクターたちが繰り出す個性的な動きが、このアニメの特徴です。中でも印象的なのがこちら。

体を後ろに倒して腕を垂らし、しゃがんだような形のままチョコチョコと動く足。これで走っているんです。NARUTO走りも真っ青なフォームです。この走り方に至る走り出しが気になります。

立ち上がるために一度体を縮めています。その勢いで立ち上がると同時に体を大きく反らせてあの走り方に繋がります。「座った状態→走る」の間に一瞬縮む動作を入れることで、その後の動きも違和感なく見続けることができます。どんなにコミカルな動きの前にも「予備動作」があることで、連続する動作としてより自然に見られるようになります。

3.誇張表現の面白さ

三作品目は「オギー＆コックローチ」です。ちょっとマヌケな猫のオギーと悪戯好きな３匹のゴキブリがドタバタするフランスのコメディアニメです。フランス版「トムとジェリー」とも呼ばれ、猫とゴキブリの先の読めない派手な追いかけっこがクセになります。

このアニメは「重力は下を見るまで作用しない」でお馴染みの、アニメ的物理法則がふんだんに使われています。王道な表現がこちら。

足で確認する余裕まであります。落ちる時に頭が最後まで残っていることを含め、とても美しい（アニメ的）物理方程式です。大袈裟すぎるようにも見えますが、この表現により落ちる動作一つが更にシュールで印象的になり、次がどうなるのかを楽しみにさせてくれます。動作やリアクションの誇張は、その動きを強調し印象的にするだけでなく、存在や次の動作に注目させることもできます。

・・・

世界中の子供たちが理解できて楽しめる海外アニメには、UIデザインにも繋がるテクニックや魅力的な表現がつまっていることが分かりました。まだまだ面白い海外アニメは沢山あるので、ぜひ見てみてください！（運動不足にはお気をつけください。）

<Writing：UI Designer / Mayu Kobayashi>

出典元
・「無口なウサギ」あにこれ
・「エドエッドエディ」カートゥーンネットワーク
・「オギー＆コックローチ」カートゥーンネットワーク
参考
・モバイルアプリのUI設計に大切な、7つの基本アニメーションまとめ
・ゲームUI演出