西田幸司が語るWEBサイト制作におけるアートディレクション
先週に引き続き開催の、インタラ塾。第6回の節目に西田幸司さんの登場だ。今回は、がっつり制作系の話。AD（アートディレクション）って何をしている人なの？グラフィックを使ってWEBサイトを作って生計をたてるってどういうこと？期待が高まる中、さっそうと登場した西田さんは実案件をもとにその制作過程を語ってくれた。
西田幸司さん 用意してきた資料がタナカさんからのダメだしでNG。急遽、実案件のサイトをもとに話してもらうことに。
HPFRANCE（アッシュ・ぺー・フランス）のショッピングモール「H.P.F, MALL」 ADとしてサイト全体（カバーページ）を、さらにカバーページ、FEATUREページ（Juana de Arcoのキャンペーン） は西田さん自身がデザイナーとして制作にあたった案件。
カバーページ
白の、わりと構造が入り組んだ建物に、アッシュ・ぺー・フランスのたくさんのブランドが静止画や動画のサムネールでコラージュされたカバーページ。画面は、全体に上から下へスクロールする。Flashの実装は22才の若手にまかせたという。
そもそものクライアントからの依頼が「コラージュでrakugakiっぽく、アッシュ・ぺー・フランスのページを作ってほしい」 。アッシュ・ぺー・フランスという、アート色の強いクライアントをどうブランディングするかと、まずは都内のアッシュ・ぺー・フランスの店舗（約30件ほど）に行き、アッシュ・ぺー・フランスがどういうものかを知ることから始めたという。コラージュ用に使用する商品類の写真もそのとき撮影。大切なのは、実際のアッシュ・ぺー・フランスのお店の空気感を味わう、実感すること。
コラージュ用に使用する素材は業者にパス抜きを依頼（ただし、特に変態的に難しいものは自分でやるとのこと） 。業者から素材が上がってきたら、Flashの実装を担当する岡部さんに。同時にイメージを1枚の絵で渡し、こういう動きでやってね、と伝える。
このとき、彼に言ったのは
1つ1つに存在を感じて欲しい ドラム缶に3分の1くらい水が入っていて、それが水の中でふわふわ浮かんでいる感じ（の動き）
の2点だという。
モーションをつける、動きを考えるとき、そのものの質量感を感じることが大切なのだ。岡部さんには2～30回は直してもらったそう。1番難しかったのは、ローディング中、それにローディングの後。はじめは、動きながらローディングする（サムネームもローディングしながら）形にしようと、電話で画面を見ながらやり取りを繰り返した。結果、いい感じの動きになったが、最終的にこの動きはなしにしたという。サムネールに容量の大きなものが読み込まれると、どうしても全体の動きをじゃまする。滑らかさが損なわれてしまうから。
「 2～30回やり直し、でも最終的にその動きなし。これは、無駄なようでいて実は無駄ではないんです。」作る＝試行錯誤する、ことだと西田さんは言う。最終的に採用しなかったものでも、その経験、過程は身になる。経験を蓄積していくことになるし、成長につながる。
必ずしも、一発でてきることがいいことではない。ひょっとしたら？ やってみたらおもしろいかもしれない。そういう行為を繰り返して、一番いい見せ方だと納得できることで達成感が得られるのではないか。これが、西田さん流のスタイル。もちろん、岡部さんにとっても試行錯誤することで、この作品が西田さんの作品というだけでなく、岡部さんの作品になる。中途半端でやめるより最後までやる、納得できたことは必ずコンテンツにつながるのだと。
ちなみに、バックの白の建物は3Dで西田さんが作ったものだという。実は、3年くらい前からこっそり3Dの勉強をしていたという（これに関してはまた後ほど） 。
中のコンテンツ（ショッピングページ）
ここはデザインもFlashも他の人にお願いし、西田さんはADとして関わった部分。ここでも、無駄になるかもしれないけどちょっと遊んでみようかという話をしたという。だけど、それが不満になってはいけない。そのため自分がおいしいところだけではなく、雑用（というか、ページに必要な細々した部分）もがんばったそうだ。ショッピングッモールなので、さまざまな情報ページが必要になってくる。「 ご利用ガイド」「 よくあるご質問」「 お客様登録」などなど。こういうページにはこういう情報が必要と、下地の文章を作成し、それをクライアントに見せ、アッシュ・ぺー・フランスっぽい色に直してもらう。法的なこと、システム周りのこともきちんと確認しておく。
ここで、クライアントやデザイナーとどういう形で、素材などデータ類のやり取りを行ったのかを具体的に教えてくれた。
手書きのラフを渡す際、素材、パーツ類も渡すことになるが、ブランドの数も多く、クライアントから一度にもらえるものでもない。煩雑なので、ブランドごとにメインにする写真、使用可能なアイテム、ロゴなどまとめてExcelのシートで表にし、ある程度まとまったところでデザイナーに渡す。
これは運営、更新の際も同じで（作って終わり、ではないので） 、ブランドのロゴ管理は非常に重要なので、間違いがないよう、入れ替わりが発生する際などクライアントにExcelの管理表に赤字でオリジナルのファイル名を入力してもらい、変換したファイル名と対応させておく。このやり方も最初からすぐうまくいくわけではないが、2～3回やり取りすればわかってもらえて、あとはスムーズにできたという。
「 PMっぽいことになるけど、この手の陰の仕事は上の立場になる人ほどやったほうがいいと思います。PMのありがたさがわかります」と西田さん。
古布を使って下着を作るマリアナ・コルテスさんのお店。まず、クライアントとの打ち合わせで
ことにした。
古布を使った下着、2つとして同じものはない。そんな手作り感を全面に出したい。また、プレゼント用のパッケージが凝っていておもしろい（ex. 卵のプラケースの1つ1つに色とりどりのパンツが入っている）ので、そんなプレゼントをもらったときの「おもしろい」とか、「 なんかわくわくする」感情を大切にしようというコンセプトだ。
実際の画面にはくまねずみが登場し、Juana de Arcoのお店に行って買い物をし、プレゼントをあげる。それが配達され、受け取った女の子の笑顔までムービーで紹介される。
ムービーを使うことにしたのは、ぬいぐるみの「くまねずみ」がイメージキャラクター的に使われていたので、それを動かせばいいんじゃないかと。また、マリアナさんが将来的に映画を、ショートムービーを撮りたいと言っていたので、すんなり決まったという。
打ち合わせでは、絵を描きながら。するとクライアントの理解も得やすい。
図1 図2 図3 図4 ぬいぐるみを使って撮影し、1枚1枚の静止画をAfter Effectsでつないでムービーに。ぬいぐるみを持つ人の手は編集で切り取ることになるので、その部分を埋めるための同じようなショットをぬいぐるみ単体で撮っておく。切り抜きして、コラージュしてっていうのは相変わらずやってますね、と笑う西田さん。
図5 素材が用意できたら、各シーンのレイアウトをラフで用意し、まずクライアントのチェック。文字をJuana de Arcoっぽく直してもらう。そこから、西田さんはADとしての立ち位置に。ラフと入れて欲しいパーツ類をデザイナーに渡し、あとのレイアウトは自由にやってもらったという。ここでも、デザイナーと一緒にボタンや刺繍糸を買いに行ったりとPM的な役回りも渡す。
図6 デザインはprismgirl の眞野東紗さんに頼み、彼女が写真の切り抜き、加工、デザイン、映像の編集まで。彼女に声をかけたのは、「 眞野さんはprismgirlってサイトで名前がどんどん出てしまって、でも、彼女のイメージがそれに固定されてしまい、苦しそうだった」から。全然違う世界観でデザインしてもらうことで何か変化になるんじゃないか。自分が同じように苦しんだことがあったから、なんとなくわかったという。ただし、彼女がまだクライアントワークが初めてだったこともあり、方向性は作った上でまかせるという形に。
ADは、一緒に仕事をするアーティストのヒアリングをしておくことも必要と西田さんはいう。いま、何か方向性を変えたがっているのでは、とか、興味のある方向は？などなど…。眞野さんもAfter Effectsを使い始めたことも知っていたので、今回のコンテンツはちょうどよかったかも、と。
Flashはまた別の若い人にお願いしたが、彼が、やりたいけど忙しい、正味数日しかこの仕事にさけないという状態だったので、シーンごとのFlashの細かい動き、仕様を詳細に書き込んだラフを用意。その上で実装を進めてもらった。ただ、そうはいっても、細かい動きはFlash実装の人のセンス次第。このコンテンツでいえば、バルーンのついてくる動きや車が動くときの道のでこぼこ感とか。逆に、大まかな動きを指示することで、そこに時間をかけてもらうことができる。
図7 図8 この仕事のように、西田さんが「一緒に仕事をやっていく、人を育てたい」という意識が強くなったのは、とある仕事で荻野さんというPMに出会ったからだという。チームでやること、みんなで仕事をすることの楽しさを知った。それまでは、ADは人にやらせてる感があって、逆に、なかなか人にまかせることができなかったと。
ADとは、みんながいかに楽しんで仕事ができる場を作ることができるか。それが、よりいいものを作ることにつながるし、まわりが楽しんでできれば自分もやりやすい。ある意味、現場監督的な役回りなのかもしれない。
最後に、質問に答える形で西田さんの仕事の極意が。「 アートがなぜ仕事につながるのか？」―こういうものを作りたい、というストックを常に作っておくこと。
たとえば、「 H.P.F, MALL」カバーページの白い建物は九龍城がモチーフになっている。実は、以前から九龍城をモチーフに何か作りたいと思っていたのだという。映像もそう。前々から実写を撮りたいと思っていたし、7月頃から始めて、人前に出せるように練習していたと。
つまり、ネタをためておいて、クライアントワークにうまく使うこと。
もちろん、トライアンドエラーの蓄積の中から、その手のネタになっていくこともある。クライアントワーク、ルーチンワークだけではダメ。クオリティのいいものを作りたいのなら、それ以上のことを自分でやっておくことだと語る西田さんは、圧倒的なまでにストイック！ 常に、そこまでやっているからこその、西田さんのクオリティなのだろうと思う。
第6回の「ファイブミニッツプレゼン」の模様は、「 月刊インタラ塾 」のサイトをご覧ください。
