2009.08.01 トップランナーの制作現場～デザイン＆アニメ編～

2009.08.01 トップランナーの制作現場～デザイン＆アニメ編～ [Edit]

最終更新日：2013.07.02

demo1「Flashサイトにおけるアートディレクションとデザイン」 Metamosphere 櫻井優樹
demo2「Flashお絵描き使いこなし技」:まつむらまきお
 demo3「TVアニメ制作のワークフロー」マックス・ワイントラウブ

160人収容の割りには大きめな会場でゆったりとセミナーが進みました。
櫻井氏の「アートディレクターは空気を作る」というお話しや、まつむら氏のFlash再発見絵描き技……。
さらに、マックス氏のワークフローの中の仕事の段取りなど、いづれもとても勉強になるお話でした。
詳しいレポートは後日アップの予定です。
セミナーへ参加した方のトラックバックはこちらの記事におねがいします！

8/21追記：Demo1、Demo3、じゃんけん大会、二次会のレポートを公開しました。

demo1:Flashサイトにおけるアートディレクションとデザイン

講師：Metamosphere 櫻井優樹

Metamosphereでアートディレクターを務める櫻井さんに、Flashサイトにおけるアートディレクションとデザインについて、事例を交えながら語っていただきました。

デザインをする上で気をつけていること。

デザインとはコミュニケーション。見た目をカッコ良くすることとか、整理することではなくて、デザイン対象の本質を見つけ出し、それを伝えようとすることが大切。
ありがちなことだが、オリエンやミーティングでクライアントの要望を聞いたり、アイディア出しをしたりしていく過程で、やろうとすることに余計なものが大量について、わけのわからないものができてしまう。
そういった場合は、いったん要素を分解し、5W1Hを意識しながら本質を再度見直すようにする。しっかりとしたコンセプトを決めることで、芯の通ったビジュアルも見つかる。
Art Direction ≠ Graphic Design
アートディレクションとは、対象の世界観、空気感を創り出すこと。その世界観の中には、グラフィックやインタラクティブのデザインなども含まれる。

事例紹介

Beams Arts

Beamsが展開する様々なアート系のプロダクトラインやサービスにおけるハブのような役割を務めるサイト。
ブレストの段階で、「ある一つのカルチャーは実は音楽やファッションなどそれを取り巻く周囲のカルチャーが混ざって出来上がっている、生き物のような存在」という話が起こり、そのコンセプトを表現するために色が混ざったようなビジュアルを作成した。
Webサイトはインタラクションにこだわりを入れてBeam sArtsの世界観を体感できるようなサイトにし、情報の整理ではマクロとミクロの視点を取り入れ、Beams Arts全体を俯瞰しながら、各製品の概要も掴めるような設計にした。
ちなみに、制作中のFlash デベロッパーとのやり取りは、最初はFace To Faceで話し合いをし、その後は主にメッセンジャーでやり取りをすることが多かった。

Metamosphere WebSite

櫻井さんの自社サイト。
ネットコミュニケーションをじっくりと考察してみたところ、ネット上でのリアルなコミュニケーションを一番体現しているのは某巨大掲示板なのではないかという考えが湧いてきた。
見ず知らずの人々が、ネット上のインターフェースを介して共同作業をしている。そこには独自のルールがあり、場の空気を読みながらのコミュニケーションが繰り広げられているのだが、あえて読み違えてみることで、面白い何かが生まれることもある。
そこで、このサイトではFlash Media Serverを活用して、サイトのナビゲーションを他のビジターの人と共有できるようにしてみた。特に自分が見たいところではない部分も、勝手に他の誰かにクリックされたり、その逆を自分がやったりすることで、ネット上のコミュニケーションの縮図を表現している。

ふたりパルコ(キャンペーン終了)

写真をアップロードすると、広告のキービジュアルの一部にその写真があてはめられる、パルコのキャンペーンサイト。
まずは、全体の流れを重視するために、ビジュアルマップのようなものを作成した。そして、その世界観をもとに細かい部分を濃縮していく。
技術面では、ただ単にユーザーからの写真をビジュアルにあてはめるだけだと、合成した感が丸出しだが、実験の途中でファブリック的な概念を持ち込むと、そこまで合成臭くない絵ができることがわかった。そこで、まずはアップロードされた写真をテキスタイルのようにパターン化し、さらに元の写真にかなり細かくマスクを切って部分部分でハイライトやシャドウのレイヤーを入れることで、かなりリアルな絵作りができた。

質疑応答

データの整理や受け渡しはどのようにして行っているのか？

資料/提出物などはデータを日付別にフォルダに分けて整理しておく。
制作データ類も基本は同じだが、増えすぎると大変なので、自分が間違わないように整理しながら、いつ制作したか分かるデータとして残しておく。

Flash デベロッパーなど実際に手を動かす人たちとのデータのやり取りはどのようにしているのか？

基本はPhotoshopでデザインしたものを渡している。
データは大抵一つのPSDで完結するようにしているが、規模が大きくなるとスマートオブジェクト化したデータを外部から読み込むこともしている。
また、レイヤーの名前をしっかりとつけたり、レイヤーフォルダを活用したりしながら整理して、理解しやすいデータを作るように心掛けている。

プランニングからデザインに落とし込む際のワークフローを教えてほしい。

最近はFlashなどのテクニカル部分に対する要求レベルが非常に高いので、そういった案件の場合はFlashデベロッパーにオリエン段階から入ってもらい、安請け合いによるデスマーチをなるべく防ぐようにしている。
ただ、それほどテクニカル要求が高くなく、デザイン寄りの案件に関しては、自分の中でよく練ってから、Flashデベロッパーに指示を出すこともある。

紙とWebにはデザインの作法における距離感のようなものがあるが、両方のデザインをこなしている櫻井さんは、これをどのようにして縮めようとしているのか。

Webも紙も映像もデザインコミュニケーションにおける一つのツールとして捉えている。それら全てでデザイン全体の世界観を共有できるようにまとめるようにしている。確かに苦労をすることろではあるけれど、それがすごく面白い。

デザインをする上で、自分の色やスタイルをどのくらい主張するか？

ゼロ。
コミュニケーションとして、社会の仕組みの中でいかに貢献できるかがデザインだと考えているので、文字組みなど癖のレベルではあるかもしれないけど、これと言って自分のスタイルを主張することはない。
ただ、仕事のやり方として、コミュニケーションを追及するというスタイルは譲りたくない。

独立する際に、大阪から東京に出てきた理由を教えてほしい。

漠然といつかは東京に出るのかなぁと考えていた。
コミュニケーションの中枢が東京にある場合が多く、アートディレクターは打ち合わせが多いのでその点では便利な事が多い。
いつか立派になれれば、関西に帰るかもしれない(笑)

demo3:TVアニメ制作のワークフロー

講師：マックス・ワイントラウブ

イヴ・サン＝ローランの絵本が原作のTVアニメ「おてんばルル」の作者であるマックスさん。Flashを使用した作画のポイントや、アニメーションに対する考え方などを事例を交えながらお話ししていただきました。

文化的背景

日本とアメリカ両方の文化に影響を受けた。
日本の作品ではドラえもんやキン肉マン、アメリカの作品ではバックス・バニーやディズニーなど。

キャラクターアニメーションと実験的アニメーション

キャラクターアニメーションを専攻しながら、実験的アニメーションの授業も受けていた。
ひとつのスタイルに傾倒しすぎないようにしていた。

リミテッドアニメーション

ディズニーのような時間と人手のかかるアニメーションは大変だと感じた。
日本のフレーム数が少ないアニメーション作品の影響も受けていたので、良い作品を作るのにフレーム数が多い必要はないと感じた。

「DANCE MANIA」

1997年学生時の作品。切り絵を使ったアニメーション。
手足など、パーツで切り分けて動かすストップモーション。
いかに簡単にアニメーションを作ることができるかに挑戦した。

「おてんばルル」

2009年4月～6月に、TOKYO MX（東京メトロポリタンテレビジョン）で毎週土曜日の23時22分から放送された。。
イヴ・サン＝ローランが20才のときに書いた原作の絵本をFlashアニメーション化。
1話3分の尺で全13話。1話ごと2週間、7ヶ月で全話を制作。
絵本が原作であるため、絵の中にセリフが多い。
BGMだけにしてしまうと寂しいのでフランス語のナレーションを当てた。
アニメーションを先に作り、後で音楽とナレーションを当てていった。
ナレーションに対してアニメーションが短い場合などはフレームを伸ばすなどして随時対応した。
絵本を元にしたカット割だけでは3分持たないため、重要なカットにアニメーション用の新しいカットを追加していった。
ふきだしの拡大と併せて少しずつ文字を出していくなど、セリフの出し方を工夫した。
セリフごとの感情表現に注意した。
例えば「大嫌い」のようなセリフは重みが出るようにゆっくりと動かすなどして、各セリフの感情表現を豊かにしている。

Flash制作上のテクニック

なめらかに動いているように見えるが、フレームレートは8FPS。
フレーム毎に絵を書き直す必要がある部分と、シンボル化して簡単なアニメーションで済ませられる部分に分ける。
パーツ自体が動かないものはシンボル化してしまう。
一枚一枚書いていくのはどうしても時間がかかるため、簡単に済ませられる部分は極力簡単に。
線の揺らぎは、シンボル内で3フレーム分同じ絵を描いてループさせると良い感じになる。
バレエなど難しい動きは実際のVTRを参考にしてスケッチしている。

質疑応答

Flashはいつごろから使用している？

2000年頃から。

絵コンテはどのようなソフトを使用して作成しているか

Flashで作ってそのままFlashからプリントしている。

「おてんばルル」を制作していて気づいたことは？

スケジュールを立てずに制作をしていたこともあったが、締め切りなど大変だった。あらかじめスケジュールを立てて制作をすることが大切。「どこまで」を「いつまでにやるか」。
アニメーション制作上、画面上のものが動いていないと気になるが、気にしなくてもいい場合もあることに気付いた。

すでに出来上がっているキャラクターをアニメーションにするときに気をつけていることは？

Flashの線は特徴的ですぐにそれとわかってしまうため、手書きっぽさを残すよう元の絵の線の質を変えすぎないようにする。例えば、Flashで引いた線を消しゴムツールで細かく加工することでFlashの線の特徴を軽減している。

じゃんけん大会

(株)ボーンデジタル様より

『ActionScript 3.0 アニメーション』
『Flash + AfterEffects 創造と表現の可能性をひろげる』
『DREAM WORLDS 幻想の世界をデザインする』

(株)オーム社様より

『FLASHアニメーション制作バイブル』
『パースの技法マンガでわかる遠近法・構図』
『パースの表現マンガでわかる光と陰影・着彩』

(株)ワークスコーポレーション様より

『アニメ作画のしくみ』
『デザイン・アイデア素材集/ シルエット人物・小物』
『デザイン・アイデア素材集/ マンガライン』
『Flash For Mobile』

(株)毎日コミュニケーションズ様より

『基本からしっかりわかるActionScript3.0』
『Flash Liteで作る携帯コンテンツ実践教科書』

(株)オライリー・ジャパン様より

『Adobe AIR クックブック』

大重美幸様より

『詳細！ActionScript3.0 入門ノート』
『詳細！ActionScript3.0 入門ノート2』
『詳細！ActionScript3.0 入門ノート[完全改訂版]』

二次会

総勢60余名の大移動！今回は新宿アイランドタワー44階の「北海道」にて行われました。自己紹介時には参加者それぞれ過去につけられた「痛いあだ名」を発表し、その度に笑いが巻き起こりました。 44階からは新宿の摩天楼が一望でき、写真を撮っている方も。今回も最後までとても楽しくにぎやかな大宴会となりました。

レポート作成: 小野田智, 五十嵐武志, 石井俊輔
写真: 桜井和貴

（敬称略）

F-site