「動きのデザイン」の達人・奥田透也さん

連載

Webデザインの新しい参考書【達人に学ぼう】

こんにちは！ Webデザイナーのさくらです。

Webデザインには、幅広いスキルが必要です。成果の出るWebサイトをデザインするには、むやみに価値観を固定せず、自分とは異なるスタイルで仕事する人からも常に学ぶことが大切、と考えています。

この連載では、『ふところがより深いWebデザイナーになるためのヒント』をテーマに、くれまとさくらが選びぬいた話題をお届けします。

第5回は「気持ちの良い”動き”のあるWebデザインとは？」を考える

さくら：

前回の沖さんの回は実装のお話が中心でしたが、沖さんの得意なインタラクション（動き）のあるデザインについても、私、がぜん興味が出てきちゃったんですよね。それで、昨年の話になってしまいますが、UNFRAME EXHIBITIONS 5っていうインタラクションの展示を見てきたんですよ。

くれま：

ふむふむ。清澄白河で行われた展示ですよね。作品を展示している方は、現役のWeb系で活動している方が多かったとか。

さくら：

普段はフリーランスだったり、制作会社にお勤めしていたりする方が、自主制作として作品を制作・出展しているそうです。今回はこの展示に出品されていた、奥田さんという方のお話を聞いてみませんか？

くれま：

奥田さん、どんな方なんでしょう？

さくら：

かつて、tha（ティーエイチエー）でデザイナーをされていた方なのですが、thaはくれまさんもご存知ですよね？

くれま：

中村勇吾さんが代表を勤めていて、動きのあるサイト、インタラクティブなサイト制作を非常に得意とする会社ですよね。

さくら：

そうそう。広告系の受賞歴なども多いので、とても有名です。そんな奥田さんの作品なんですが、こういうものなんですよ。

くれま：

わ、目が拡大されてる？

さくら：

これ、2台のモニターの間にカメラがあって、椅子に座ってカメラを見ると両脇のモニターがついて自分の目元が写るんですが、映像に写る目と自分の目が、絶対合わないような仕掛けになっている、というものでした。人間は後ろめたい時や嘘をついている時に目をそらす、というのを再現したかったそうなんです。

くれま：

なるほど！ モニターの間にあるライトも、なんだか取調室のライトみたい……！ 奥田さんはWebデザイナーという枠にとどまらない、作家としての一面がある方なんですね。

さくら：

奥田さんなら、前回の沖さんとのお話で出てきた、「Webデザインにおける動き」について、もっと掘り下げていただけそうじゃないですか？

くれま：

期待が高まりますね！

というわけで、奥田さんが参加しているクリエイター集団「THE GUILD」さんのオフィスへ急いだ我々でした。

今回の「達人」はこんな人！ 奥田さんのキャリアを解剖

懐かしのFlash本が並んだ書棚の前に立つ、奥田透也さん。どんな経歴の方なのか、さっそく拝見していきましょう。

奥田さんは、こんな人

広島ご出身のインタラクションデザイナー。

Flashサイト黎明期の10代、Flashに出会う

Flashサイトが出始めの時期に高校生だった奥田さん。中村勇吾さんを筆頭に個人のFlashクリエーターから刺激を受け、Flashを触り始める。実はアプリのDirectorにも興味があったものの、値段で断念。

情報工学を学び、Flashクリエーターとして就職

20代前半は広島の大学・大学院で情報工学を学びながら、作品やサイトを制作。専攻を活かしてメーカーや研究者になる選択肢もあったものの、何かを表現することはずっとこれからもやり続けるだろうということで、どうせやるなら振り切ってみようと思い、Flashクリエーターとしてデザイン会社に就職、東京に上京。

制作会社でFlashの実装を担当

最初の会社ではキャンペーンサイトなどのFlashの実装・オーサリングを担当。デザインは担当せず、デザイナーが制作したデザインでサイトを作る業務が主。

中村勇吾さんから誘われthaへ

制作会社で働き出して1年目、2009年のAdobe Max Japanで中村勇吾さんが登壇した際に、名刺交換。その後中村勇吾さんから「thaにきませんか？」というメールが来たことをきっかけにthaに転職。thaではデザインからプログラミングまでを一括して担当。デザインについても学びを深めてゆく。

いくつかのタイミングが重なり、独立。

Webサイトはもちろん、スマートフォン（INFOBAR A02）のUIデザインなどの業務にも携わるようになる。その一方で、違った経験の必要性や会社外のプロジェクトに対しても興味を感じ、独立を考えるように。thaを退職ののち1年は個人事業主として活動。その後祖父が経営していた重機などの設計会社の名前「株式会社 昭和機電」を社名にする。現在はクライアントワークや作品制作の傍ら、多摩美術大学での講師などもおこなう。

Webサイトにおいて、「動き」とはどのように作用するのか。

くれま：

さっそくですが、奥田さんの考える「Webサイトにおける動きの役割」とは何ですか？

奥田：

役割は大きく2つですね。道案内みたいに目立つことで、「アテンションや導線を示す」こと。これがひとつ。あとは、「世界観や表情を作る」。これも役割のひとつです。表現全体の中で、個々の「動き」がどのような役割なのかということを考えます。

動きというのは、コミュニケーションの手段のひとつだと思っています。グラフィックで語るのか、言葉で語るのか、時間軸で語るのか。目の前のお題をどうやって語るのかという選択肢のひとつだと思います。

さくら：

動きって、グラフィックやテキストと同じように扱えるものなんですか？

奥田：

そうですね。基本的には設計があって。たとえばWebサイトとかで、ここに注目させなきゃいけないという場合、色々な手段がありますよね。文字を大きくしたりとか、太字にしたりとか、色を変えたりとか、光らせたりとか、動かしたりとか。色々な選択肢がある中で、このサイトの持っているトーンと、一番合って無理なくハマる。いい違和感を与えられるもの。何かを壊すのではなく、むしろ盛り上げて、”ここだよ”って言ってあげるフックを作れるのはなんだろうと。

そのときに動きは、「目立たせる」という引き出しに入っている手段のひとつなんです。

さくら：

なるほど。

奥田：

「サイトの世界観」に関しても一緒で、見たときにどういう気持になって欲しいのか、という問いが最初にあって、そこから、動きのリズムを考えます。

たとえば、ゆったりしているのか、パキっとしているのか。どういうイメージを与えたいのかで動きのトーンも決まってきます。ボタンを光らせるなら、ふわっと光るのか、後光が差すように光るのかとか。それが、すべての要素と合わさったときにひとつのサイトになっていくという感じで、それぞれを切り離しては考えられないですね。

くれま：

全体のバランスの上に、動きがうまくハマるところを見つけていく感じなんですね。

奥田：

そうですね。「動き」というのは、「奥行きをうまく与えてくれる道具」というイメージです。

くれま：

正解を見つけるために、かなり試行錯誤はされますか？

奥田：

しますね。こういう動きにしておけばだいたい気持ちよく見える、という「標準的な動き」というのがだいたいあって、それをやっておけば60点ぐらいは取れるんですけれど。

そこを80点90点に押し上げるためには案件ごとにチューニングが必要で、全部のバランスを調整して試行錯誤しながらやるしかない、という感じですね。

くれま：

チューニングの時、動きの「気持ちよさの判断」というのはどのようにされていますか？

奥田：

客観的に判断するのはすごく難しいんですけれど……、僕が目安にしていることをお話しますね。

一人で制作しているとき、僕はぐぐっと画面にのめり込むときと、一歩引いて見るときというのを交互にしています。のめり込んで、細かいチューニングをしたら、椅子ごと引いて、遠くからみる。これを繰り返していくと、だんだん両者の違いがわからなくなってくる時点があるんですね。違いが細かすぎて自分の目の解像度すらも超えている時。こうなると一度他の人にもジャッジしてもらわないといけないので、そこで一区切りつけるようにしています。

さくら：

他の人の意見というのは、どの程度参考にされますか？

奥田：

結構大事にします。「初めて見た人ってこういうふうに思うんだ」というのは取り入れつつ、「ここに穴があったのか」を埋めていく感じでしょうか。しかし、基本的には自分の信念や、自分がこうした方がいいんじゃないか、というのは、一回作り切るようにしています。

さくら：

ところで、クライアントから「ここに動きが欲しい」と言われたとき、「逆に、動かさなくてもいいんじゃない？」という判断をするときはありますか？

奥田：

ありますよ（笑）

さくら：

それはどのような場合ですか。

奥田：

ずっと運用や更新をしていくつもりだったら、更新しやすいほうがいいですよね。そういうときは「スタティックな方がいいんじゃないですか？」というお話はします。あと、Webサイトの場合、スマートフォンで見る人が多いと想定されるときは、「デバイスや環境に合わせたものを作ったほうがいいんじゃないか？」という提案をすることもあります。

動くことそのものが価値、という特殊な案件は作家として頼まれることのほうが多いです。クライアントワークとしては、わりと堅実に動かすべきところを動かすという選択をしています。

ここがポイント

動きの考え方、ストックの貯め方

くれま：

「動きの気持ちよさ」のストックは、どのように貯めていらっしゃいますか？

奥田：

それは、「観察」ですね。

さくら：

「観察」ですか。

奥田：

周りの、自然に起こる動きを参考にして作っています。たとえば風が木を揺らす動きなら、風が吹くことで左から右に動いていくんだけど、もどっていく、というような動きが気持ちいいとか。ぷにぷにした餅みたいなものが落ちるときの広がりとか、吸盤のようなものを壁に投げた時の止まる感じとか。これいいなという動きは、日常生活から採集しています。

くれま：

それは動画を撮っておくんですか？

奥田：

動画を撮ることもあるし、頭の中にとっておくことも多いです。何かを作るとき、動きのイメージを最初に作るのですが、たとえば「飛び出してくるもの」だとしたら、バネっぽいやつを飛ばしてみたりとか、デコピンしてみたりとか。そういった自然の動きをベースにしつつ、じゃあ0.5秒くらいの動きで、となったら、理詰めでも考えるようにしています。

さくら：

「理詰め」ってどういうことなのか、具体的に教えていただけませんか？

奥田：

では、基本的な3種類の動きの特徴を見てみましょうか。

奥田：

要するに、「時間の流れに対してどういうタイミングで、どう動くか」ということです。

こういった動きはAnimate CCでも簡単に再現できますが、さらに動きに「意図」を加えていきます。

たとえばA地点からB地点に行く場合、どこにもフックがないと、徐々に均等に加速する。それはどこにも角のない、ひっかかりのない動きです。

https://www.youtube.com/embed/7PzFmtXfzPA

奥田：

それとは違って、A地点にはフックはないけど、B地点にフックがある場合。加速度の変化が大きいから、重心がBにかかる。このように、どこかに「角」を作ることで大事な部分を見せるんです。

https://www.youtube.com/embed/FBPEuin6wjg

奥田：

集中しないでいいよというときは「角」を作らないけれど、ここを見せたいなというときは、その部分に加速度変化をもってくることで、「一連の動きなんだけれど、ここを見ろ」というような設計をします。

そういった理詰めの加速度変化の動きと、自然にモノが落ちるのって気持ちいいねという心地良さを、両方使いながら実装します。

さくら：

なるほど……！ ところで、こういった知識って、どのように習得されたんですか？

奥田：

もともと物理が好きだったので、ボールが動いたり、モノが跳ね返ってきたり、水が交じり合うシミュレーションなんかを作ったりしていました。いまお話した理論は、その後、自分で学びました。

くれま：

最初に観察をしていて、後から理論がついてきたんですね。

奥田：

そうですね。観察した動き自体は、心地よいものではあるのですが、それ自体が「何かを伝える」というものではないんです。それを「インターフェース上で何かを伝える動き」へ応用するには、こういった理論を自分の中で持っておかないと収拾がつかないんです。

さくら：

確かに！

ここがポイント

私たちがこれから「動き」を作るには、何からはじめたらいいですか？

くれま：

それでは、我々のような、理系ではなくプログラミング経験に乏しいデザイナーが、先ほど説明してくださったような「動き」を作っていくためには何が必要でしょうか。

奥田：

目的が必要ですよね。「動いていればいい」というだけでは、逆に難しいと思うんですよ。

さくら：

確かにそうです。

奥田：

デザインとして動きを入れていくときには、なんらかの目的があって、それにはどんな動きがいいだろうという進め方のほうが、自分で答え合わせできるので、いいんじゃないかなと思います。

「世界観を作るための動き」というのは最初は難しいと思うんですけれど。「柔らかい」ってどんなイメージだっけ？とか、そういうところをゼロから考えてみたり。

最初の入り口としては、サイトの中にすでにあるアイコンの一部を目立たせるとといったお題に対して、全体の雰囲気を崩さずにどうしたらいい動きをつけられるかなという感じで。

あとは、引き出しがないとだめですよね。アニメーションをいっぱい作るのはいいと思います。作る道具は、AnimateやPremiere Pro、After Effectsなど、なんでもいいと思うのですが。

くれま：

いやほんと、すごく参考になります。

奥田：

参考になりますか？ こういったお話って、需要あるのでしょうか？

さくら：

ありますよ。CSS3アニメーションでも、SVGアニメーションでも、動かし方はわからないし、どういう動きがいいのかわからないですし……。

くれま：

そうですね、静止したものしか作ってこなかったデザイナーとしては敷居があるように感じているので、とても参考になります！

奥田：

多分、いきなりCSS3アニメーションとかやらないほうがいいと思います。なんでかって言うと、単純に「難しい」んです。

さくら：

そうですね（笑）

奥田：

凝ったことをやろうとすると、動きの構造を頭にぜんぶ入れておかないとダメで、自分ができる動きしか作れなくなっちゃうというか。

くれま：

ああ。身に覚えが……。

奥田：

それよりは最初に、Animate CCや手描きでもいいので、自分の理想の表現を作ってみて、じゃあCSS3でそれをどう表現するかという方がステップとしては正しいと思います。

「この動きが作りたい！」という動きを明確にしていかないと、本当はこうしたいけどやり方がよくわからないからコレでいいや、みたいな感じで終わっちゃうんじゃないでしょうか。コレを作りたいというビジョンがないと、できるところまでしか行けませんよね。

さくら：

あるあるです。

奥田：

とにかくまず、自分のできるツールで、きちんとイメージを固めるというのが必要だと思います。僕はプログラムで動きを作り続けているので、コードだけでどんな動きかはわかっちゃうんですけれど。

ここがポイント

「ものを作る」ことって、見ることから始まる

くれま：

初心者に関しては、まず先に動きのイメージを作る、ということですね。大学でもそういった風に教えていらっしるんですか？

奥田：

はい。学生さんにもアニメーションを使った課題を出すときもあるんですけれど、完全に手で描いてもらっています。彼らは描くというのが一番得意だから、まず得意なやつでやったほうが思い通りになるので、コマアニメみたいな感じで。

モーショントゥイーンは賢すぎて手描きとはまた違ってきてしまうので、中間が省略されてしまうんです。ココからココまで動く、その中間に込める想いが無い、ということになるので。

くれま：

「中間に込める想い」ですか。名言な気がする。

奥田：

イージングを使いこなせれば、中間にそういった「想い」も持たせられるんですけど。最初から「トゥイーンって便利だなぁ」だけだと、どうしてもその中間が省略されてしまうので、良くないんじゃないかなと思います。
ちゃんと絵の描ける美大生は1枚1枚絵を描くことで、絵を連続させてアニメーションを作って、中間の動きの原理原則をやってもらったほうがいいんじゃないかっていう。

くれま：

そのアニメの再生は、どうするんですか？

奥田：

コマ撮りもやるし、手描きのパラパラ漫画もあり得ますね。実はAnimate CCも授業で使っているんですけれど、トゥイーンは教えてないです。「このツールを使うとあなた達の絵を簡単に取り込んで再生できるよ」って言うだけ（笑）

さくら：

そうなんですね（笑）

奥田：

［ステージに読み込み］を使って、連番でバーって読み込めて便利〜っていう。プロでもそういうやり方をやってる方はいるって聞きますね。

Animateだとプログラムも入れられるので、僕がボタンでアニメーションが切り替わるようにして見せると、彼らの絵っていうのがインタラクティブになるんです。いきなりAnimateやトゥイーンの使い方を教えるより、彼らがもともと持っている力をベースに、可能性を広げてあげるというのをやっています。プログラムがあれば、もっとあなた達の絵はおもしろくなるよっていうふうに。

くれま：

その授業を受けてみたくてたまりません！ そのほか、多摩美術大学ではどのような指導をされているんですか？

奥田：

「よく見よう」ということを教えています。「ものを作る」ことって、見ることから始まるんですよね。知っているものしか作れないという。物事をよく見て、それを自分で解釈して、新しい発想にして作り出すプロセスの最初の部分を教えています。

世の中や身の回りの、当たり前の空間であっても見方によってはすごく面白くなりうるとか、誰も見たことのない「見方」というのがまだ眠っているんじゃないか。そういうものを発見する授業をしています。

くれま：

物を作るプロセスやHow to的なことはあまり教えないのでしょうか？

奥田：

「発見したことを、どうすれば凄い！ と思ってもらえるように伝えることができるのか」といったプロセスは教えます。ノイズが入っているからブラッシュアップしたほうがいいんじゃない？とか。

あくまで、その人が見つけたきた視点というのをベースにものの作り方というのを教えるんですけれど、根本的には「見る」ということを教えています。

くれま：

やはり根本は「よく見よう」ということが重要なんですね。私たちも、ついつい忘れがちなことです。

ここがポイント

Webサイトで「3次元」って、どう考えればいいですか？

くれま：

奥田さんはWebGLを使ったサイトも制作されてますよね。WebGLはどちらかというと３次元的、空間デザイン的ですから、その辺が私たち平面系のデザイナーとしては正直難しさを感じます。

さくら：

奥田さんはWebGLをどのように習得されたんでしょうか。

奥田：

x座標とy座標とz座標があればだいたい応用が効くんじゃないですか？ 日本語でいいのか英語を学ぶのかっていう言語の違いと同じです。最近のプラットフォームは頭がいいから、たいていのことはできちゃいますよ。

さくら：

そ、そうですか（笑）

奥田：

あとは先程言った、自分の作りたい動きのイメージとの兼ね合いで、最適なものを判断して、これはWebGLがいいだろうと判断すれば、あとは勉強すればできます。WebGLはピクセルパーフェクトというよりは、空間を作るイメージの案件に向いてるかもしれないですね。

くれま：

奥行きっていう概念があると、怖いというか……。

奥田：

でも僕らは奥行きのある世界で生きているじゃないですか。

くれま：

そ、そうなんですけど（笑）

奥田：

むしろ、奥行きがあるほうが普通では？（笑）

さくら：

奥田さんにとっては、Webの世界とリアルの世界が、地続きになっているんですね。

奥田：

地続きというよりは、WebにはWebのルールがあるんだなーという感覚です。作るときの共通のスタンスとして、Webサイトっていうのは、無限に続いているWebの世界の一部を、たまたまブラウザという窓を通じて見ていて、ブラウザを閉じてもずっと”ある”という。そういう世界を神様気分で作るというのはあるかもしれないですね。

くれま：

それは、私にはまだ無い感覚……。3D化して捉えてストックするという習慣が無いのかもしれません。

さくら：

でも、奥田さんが言うように、世界は3Dで出来てるんですよ？（笑）

くれま：

それはそうなんですけどね（笑）

奥田：

「絵を作る」っていう考えだと、大変かもしれないですね。空間を作って、ここの中のどこにいてもいいというスタンスだと、わりと気楽にできるんですけど。

くれま：

は、はい！

奥田：

じゃあここで、WebGLをがっつり使った博物館のサイトで、いろいろな研究情報を3D空間でマッピングしたサイトをご紹介してみましょうか。

さくら：

年表の上を歩いている感じですね。

http://brh.co.jp/s_library/ 【PCでの閲覧専用】

奥田：

そうです。上から見ると年表になっていて、カメラを引いてみると大きな歴史の時代が見えます。寄ると解像度があがっていって、研究の分野同士のつながりがみえてくるような作りになっています。

さくら：

遠くから俯瞰して見るのと、寄って見るのでは同じ情報でも意味合いが変わってきますね。

奥田：

また、横から見ると別のマップになっていて、時間軸ではない絡みが見られるようになっています。3Dになると視点を変えることができるから、伝えたい情報も変わるよねというサイトです。

くれま：

自分で発見するような作りになっていますね。

奥田：

このサイトで一番伝えたいのは、いろいろな研究者が絡まり合ってひとつの生命史というのができてるんだよということです。そういう世界観づくりに3Dを使った例です。

さくら：

これはどういうフローで作られたんですか？

奥田：

イラストはもともとイラストレーターさんが描いていらっしゃって、博物館のデータとイラストを元に僕がサイトを作りました。スマートフォンに対応するとなるとこういった表現は現状難しいのですが、元になっているコンテンツの量が膨大なので、スマートフォンで見るというよりは、世界観を伝えることを優先と割り切っています。

さくら：

先程の、”動き”が向いているケース、向いていないケースを思い出しました。

奥田：

もともとPCからのアクセスが多いサイトだったという理由もあります。

くれま：

こういった空間を活かしたサイトはVRにも向いているなと感じたのですが、VRのお仕事などはされていますか？

奥田：

まだですね、興味はあるのでやってみたいとは思います。VRのコンテンツまでどうやったらスムーズに行けるのかなというところから考えてみたいです。ゴーグルを掛けるというのが現状特別な挙動なので、どうやったら普通に掛けてVRを見られるんだろうね、っていうところから考えてみたいです。

ここがポイント

手と頭を使って「喋れる言葉」を増やそう。

さくら：

先ほどVRという言葉も出ましたが、これからのWebはどのように変わっていくと思いますか？

奥田：

既にそうなりつつありますが、「Webサイト」という感覚ではなくなってくるんじゃないでしょうか。インターネットにあるコンテンツって、既にいろいろなところに「染み出している」じゃないですか。なので、インターフェースがもっと馴染んでいくというか。

くれま：

過去の「達人」の方も、同じことをおっしゃっていました。

奥田：

視覚情報じゃなくても、音声だったり触覚でもいいわけですし。今まで触覚情報のほうが向いていたけれど仕方なく視覚情報に頼っていた部分が、今後変わってくるんじゃないでしょうか。絨毯を売っているECサイトが「触覚で売ろう」というふうになるとか、そうなってもおかしくないわけです。

そうなったら、その時またいろいろな気持ちよさとか、心地よさというのがあって。先程紹介したイージングカーブの情報は視覚情報に限ったものではないと思っているので、いろいろなことにインタラクションデザインが広がっていきそうです。

くれま：

最後に、読者の方へ向けたメッセージをお願いします。私たちのように、今後「動き」を実装していきたいけど、どうしたら……。というWebデザイナーの背中を押していただけると嬉しいです。

奥田：

「喋れる言葉が一個増えるだけで楽しいですよ。」っていうことでしょうか。

それと、頭だけ使って手を動かさないと、自分の今いるところだけしか見えないんですよ。でもちょっと手を動かすと、景色が変わって全然別の風景が見えるかもしれない。常に頭で何をどうやって動かすのかを考えながら、手は手で動かし続ける。そうやってどんどん景色を変えながら、その世界で出来上がったものを見ながら動きってなんなんだろうって両方同時にやったほうがいいと思います。

とにかく動かしてみるといいんじゃないかと思います。もちろん、考えないのはだめだけど、考え過ぎもよくないです。どちらも大事ですね。そのうち慣れていくと、キーボードを打つように同時に両方できるようになると思いますよ。

さくら：

目的を持って、作りながら考える、考えながら作るということですね。とても刺さりました。今日はありがとうございました。

まとめ

くれまのまとめ

取材のお仕事で伺ったはずなのに、ナチュラルに奥田先生の授業を受けている状態になってしまった今回のわたくしでした。3Dの世界に生きているにも関わらず、世界を平面的に捉えている自分の視点をいかに変えられるのか？ まずは引き出しをコツコツ増やしていってみようと思います。

さくらのまとめ

今やデジタル領域のデザインには欠かせなくなった「変化（動き）」、漫然とデザインしがちなこのテーマに対してどのように向き合ったら良いのか、たくさんのヒントをいただきました。取材を終えてから早速色々と触っていますが、奥が深くてかなり大変。がんばります。 私としては奥田さんのキャリアにもとても感銘を受けました！ 実装力とアイディアが両方ともなった”創造力”をお持ちの奥田さん。今後のご活躍をますます楽しみにしてます。