エコだ!動物園 動きの仕掛け人 城戸氏のワークスタイル【プロに学ぶ67WS通信】


こんにちは、ロクナナワークショップの佐々木です。
最近のWebサイトには、「気持ちいい」と感じるような感覚を刺激する動きや、インタラクティブな仕掛けがいっぱい詰まっていますよね。

ユーザーに情報を提供するだけではなく、「驚き」や「楽しみ」といった、見る人に新しい感覚を発見・体感してもらう。

そこには、モーショングラフィック という手法が隠されているのです。

今日は、そんなイマドキのWebサイトを手掛けるクリエイタで、3Dを操るモーショングラフィック アーティストとして世界的にも活躍する ROXIK 城戸雅行さんにお話を伺いました。

■モーショングラフィックワークってどんなお仕事?
佐々木:城戸さんの作品には、モーショングラフィックを巧みに取り入れたFlashコンテンツが多くありますが、そもそも、モーショングラフィックワークってどんなお仕事なんですか?

城戸さん:「モーショングラフィックワーク」というのが、どこまでの範囲なのかによるけれど、ひとつの作品を作る場合の役割分担は、大きく分けると3つになるよね。

・企画
・デザイン
・プログラム

Flashにおいて、いわゆるモーショングラフィックというと、「何かしらのデザインをプログラムで動かす」ことにあたる。ただ、それだと作品にならないから、企画が必要になる。

■城戸さんが考えるモーショングラフィックワーク
僕の定義としては、モーショングラフィックワークというのは、企画(どうやったら「面白い・心地いい・感動する」ものになるのかを考えること)、プラスそれを表現するためのデザインと、実装するためのプログラミングになるのかな。

その3つのうち、デザインをやる人がデザイナーで、Flashの実装をするのがプログラマーで、企画をする人がプランナーとかディレクターとか、肩書きは色々だけど存在する。

僕は一通り担当しているから、この3つすべてを考えた上でのモーショングラフィックワークを行っている。

■「エコだ!動物園」ではマウスの動きで楽しい感覚を
僕が以前に制作した「エコだ!動物園」だったら、マウスをドラッグして上下にスライドしたり、回転させたりできる動きを取り入れている。
これは、僕がこの動きによって、ユーザーに「楽しい感覚」を提供できると思ったから。これによって、必然的に上下に長く伸びた画面構成が生まれて、それをもとにデザインを起こしていきました。
つまりモーショングラフィックスというのは、それ単体で考えることは出来なくて、アイデアとデザイン、そしてそれを実装するためのプログラムから成るわけです。
エコだ!動物園 アンコールワットさんの絵本

■城戸さん流 お仕事の進め方
佐々木:クライアントからは、どういう依頼が来て、どんな風に案件が進むんですか?

城戸さん:たとえば、以前に僕が作った作品 全日本バーベイタム選手権 を例にあげると、「Verbatim(バーベイタム)」のブランドを日本に浸透させたいと依頼が来る。
全日本バーベイタム選手権

1.企画
それをうけて、まずどのようにして展開していくべきかを考え、そのためにいくつかの企画をたてる。このときに提案した企画のうちのひとつが、現在展開されている「ロボットによる対戦ゲームを作りましょう」というもの。

2.デザイン
企画が決まったら、画面の流れやメニュー構成など細かいルールを決めながら全体の仕様を固めて、それをもとにデザインを行う。

3.プログラム
出来上がったデザインをもとに、プログラムで実装を行う。
ここはとても重要なステップで、単に仕様を満たせば良いというものではなく、いかに心地よさを感じてもらうか、かっこよさ・コミカルさを引き出すか、また余計な演出でストレスを感じさせないようにする必要もあります。注意深く何度もトライ&エラーを繰り返して完成に近づけていくのです。

この作品は、対戦するロボットの動きが命だから、企画、デザイン、プログラムと全体を通して、動きの表現・演出といった モーショングラフィック には結構こだわったよ。

■クリエイティブの本質がある
今回は、城戸さんにお話を伺って、ゼロからのモノ作りを教えてもらった気がします。
モーショングラフィックとは、デザイン(グラフィック)に動きを実装するだけではなく、クライアントの要望を受け「何を作って、どう見せたいか」「何を表現するか」を企画段階から考え、動きを考慮しつつデザイン・実装するすべてを指しているんですね。
そこには、クリエイティブの本質を感じました。

さて、そんな城戸さんは、4月23日(金)東京と、25日(日)大阪で開催のロクナナワークショップ イベント「 GEEKs Flash モーションプログラミング 」に出演されます。イベントでは、モーションプログラムの仕組みや考え方について、じっくりお話していただく予定です。

GEEKs Flash モーションプログラミング
ROXIK
エコだ!動物園
全日本バーベイタム選手権
ロクナナワークショップ

【プロに学ぶ67WS通信】の記事をもっとみる
出版業界の新しいスキル!電子書籍のつくりかた
動くサイトの謎を解く!中学の数学で作れるってホント?
出来る人はオフィス不要!クラウドワークスタイル
iPadで書籍革命!コメント付きデジタル本もあり?

共有する

関連記事

【ケータイラボ】ハーフメタリックデザインのスリムケータイ「SH703i」

「SH703i」は、背面上部にメタリック調のパネルを採用したシャープ製のスリムケータイ。異なる素材で背面を上下に分割した特長的なデザインで、横96ドット×縦39ドットのサブディスプレイに表示された文字が、メタリックパネルに美しく浮…

【ケータイラボ】香りもデザインも着せ替えられる!アロマケータイ「SO703i」

「SO703i」は、香りもデザインも着せ替えられるアロマケータイ。光沢感のある9種類の「Style-Upパネル」は、それぞれのテーマにあわせたアロマシートが同梱されており、本体に貼り付けることでデザインだけでなく、香りも楽しむことが…

【気になるトレンド用語】WebページはFlashだらけ!Flashってなんだ

インターネットでWebページを閲覧していているとアニメーションや動きのある表示ページが随分増えてきました。ほとんどの大手企業のページは、Flashアニメーションであふれかえっているといっても過言ではないでしょう。そのぶん「Flash…

【知っ得!虎の巻】「すべてのプログラム」の中がごちゃごちゃして見づらい

ソフトウェアを起動する時に開く[スタート]メニューの[すべてのプログラム]は、ソフトウェアをインストールするたびに項目が増えていく。そのため、次から次へとインストールしてしまうと、目的のソフトを見つけるのに時間がかかっ…

太陽光発電だけじゃない!環境にやさしいエコ発電の最新事情【最新ハイテク講座】

今の世界は、電気の世紀といってもいいだろう。18世紀の産業革命を経て、現在の文明を支えているのは紛れもなく「電気」だ。テレビやパソコン、電子レンジ、エアコンなど、生活で利用するほとんどの道具は電気を動力としているといって…