インタラ塾第6回「西田幸司が語るWEBサイト制作におけるアートディレクション」

更新日：2022.4.15 公開日：2008.11.28

概要

第6回、月刊インタラ塾はゲストに「H.P.F, MALL」「Juana de Arco あげるヨロコビ。もらうヨロコビ。」「WOW!! Emotional Mansion,Mitsui」「KAZUHA MATSUMOTO PHOTOGRAPHY」「SHARP The Kameyama Dream plant」「つなぐ TSUNAGU」「イエカキ理想の住まい」「INSPIRATION SCENE」「kashiwadaisuke.com」等を手がけた、西田幸司氏（RAKU-GAKI）をお招きし、WEBサイトを制作していく上で、アートディレクターの役割について語っていただきます。管理、制作、指示、落としどころ等、どこにも所属したことがないという西田氏独自のアートディレクションとはどういったものなのでしょうか？乞うご期待！

イベントレポート

先週に引き続き開催の、インタラ塾。第6回の節目に西田幸司さんの登場だ。今回は、がっつり制作系の話。AD（アートディレクション）って何をしている人なの？グラフィックを使ってWEBサイトを作って生計をたてるってどういうこと？
期待が高まる中、さっそうと登場した西田さんは実案件をもとにその制作過程を語ってくれた。

intara_6th_report_photo1

用意してきた資料がタナカさんからのダメだしで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のありがたさがわかります」と西田さん。

■FEATUREページ（Juana de Arcoのキャンペーン）

古布を使って下着を作るマリアナ・コルテスさんのお店。まず、クライアントとの打ち合わせで

・手作り感いっぱいにしよう
・パッケージに凝る

ことにした。
古布を使った下着、2つとして同じものはない。そんな手作り感を全面に出したい。また、プレゼント用のパッケージが凝っていておもしろい（ex. 卵のプラケースの1つ1つに色とりどりのパンツが入っている）ので、そんなプレゼントをもらったときの「おもしろい」とか、「なんかわくわくする」感情を大切にしようというコンセプトだ。

実際の画面にはくまねずみが登場し、Juana de Arcoのお店に行って買い物をし、プレゼントをあげる。それが配達され、受け取った女の子の笑顔までムービーで紹介される。

ムービーを使うことにしたのは、ぬいぐるみの「くまねずみ」がイメージキャラクター的に使われていたので、それを動かせばいいんじゃないかと。また、マリアナさんが将来的に映画を、ショートムービーを撮りたいと言っていたので、すんなり決まったという。

打ち合わせでは、絵を描きながら。するとクライアントの理解も得やすい。

intara_6th_report_photo2

intara_6th_report_photo3

intara_6th_report_photo4

intara_6th_report_photo5

ぬいぐるみを使って撮影し、1枚1枚の静止画をAfter Effectsでつないでムービーに。ぬいぐるみを持つ人の手は編集で切り取ることになるので、その部分を埋めるための同じようなショットをぬいぐるみ単体で撮っておく。切り抜きして、コラージュしてっていうのは相変わらずやってますね、と笑う西田さん。

intara_6th_report_photo6

素材が用意できたら、各シーンのレイアウトをラフで用意し、まずクライアントのチェック。文字をJuana de Arcoっぽく直してもらう。そこから、西田さんはAD としての立ち位置に。ラフと入れて欲しいパーツ類をデザイナーに渡し、あとのレイアウトは自由にやってもらったという。ここでも、デザイナーと一緒にボタンや刺繍糸を買いに行ったりとPM的な役回りも渡す。

intara_6th_report_photo7

デザインはprismgirlの眞野東紗さんに頼み、彼女が写真の切り抜き、加工、デザイン、映像の編集まで。彼女に声をかけたのは、「眞野さんはprismgirlってサイトで名前がどんどん出てしまって、でも、彼女のイメージがそれに固定されてしまい、苦しそうだった」から。全然違う世界観でデザインしてもらうことで何か変化になるんじゃないか。自分が同じように苦しんだことがあったから、なんとなくわかったという。ただし、彼女がまだクライアントワークが初めてだったこともあり、方向性は作った上でまかせるという形に。

ADは、一緒に仕事をするアーティストのヒアリングをしておくことも必要と西田さんはいう。いま、何か方向性を変えたがっているのでは、とか、興味のある方向は？などなど…。眞野さんもAfter Effectsを使い始めたことも知っていたので、今回のコンテンツはちょうどよかったかも、と。

Flashはまた別の若い人にお願いしたが、彼が、やりたいけど忙しい、正味数日しかこの仕事にさけないという状態だったので、シーンごとのFlashの細かい動き、仕様を詳細に書き込んだラフを用意。その上で実装を進めてもらった。ただ、そうはいっても、細かい動きはFlash実装の人のセンス次第。このコンテンツでいえば、バルーンのついてくる動きや車が動くときの道のでこぼこ感とか。逆に、大まかな動きを指示することで、そこに時間をかけてもらうことができる。

intara_6th_report_photo8

intara_6th_report_photo9

この仕事のように、西田さんが「一緒に仕事をやっていく、人を育てたい」という意識が強くなったのは、とある仕事で荻野さんというPMに出会ったからだという。チームでやること、みんなで仕事をすることの楽しさを知った。それまでは、ADは人にやらせてる感があって、逆に、なかなか人にまかせることができなかったと。

ADとは、みんながいかに楽しんで仕事ができる場を作ることができるか。それが、よりいいものを作ることにつながるし、まわりが楽しんでできれば自分もやりやすい。ある意味、現場監督的な役回りなのかもしれない。

最後に、質問に答える形で西田さんの仕事の極意が。
「アートがなぜ仕事につながるのか？」
―こういうものを作りたい、というストックを常に作っておくこと。
たとえば、「H.P.F, MALL」カバーページの白い建物は九龍城がモチーフになっている。実は、以前から九龍城をモチーフに何か作りたいと思っていたのだという。映像もそう。前々から実写を撮りたいと思っていたし、7月頃から始めて、人前に出せるように練習していたと。

つまり、ネタをためておいて、クライアントワークにうまく使うこと。
もちろん、トライアンドエラーの蓄積の中から、その手のネタになっていくこともある。クライアントワーク、ルーチンワークだけではダメ。クオリティのいいものを作りたいのなら、それ以上のことを自分でやっておくことだと語る西田さんは、圧倒的なまでにストイック！常に、そこまでやっているからこその、西田さんのクオリティなのだろうと思う。

ファイブミニッツプレゼン　レポート

「修悦体の見つけ方とトリオフォーの事」山下陽光（トリオフォー）

資料のダウンロードはこちら(PDF)

intara_6th_report_photo10

普段は高円寺で古着屋をやっているという山下陽光さん。あの佐藤修悦さん、ガムテープを使った案内文字（修悦体）を発掘した人だ。

トリオフォーの最近の活動は、というと…。修悦体→ガムテープ案内文字→ガムテープということでニチバンにいったり、鳥山明さんに会いに行ったり、ファミコンのカセットの裏の名前を追いかけたり、携帯小説リアルタイムSHOW？トミモトリエさん（第5回インタラ塾ファイブミニッツ、スピーカー）が話している間に鉄割アルバトロスケットの戌井昭人さんがその場で小説を書き、渋さ知らズの松原東洋さんが踊り出すというイベントだったり。

今日みたいに大勢の人にじっと話を聞いてもらうのは実はあまり好きじゃないと、京都精華大学の授業では、トリオフォーの活動を紹介するムービーを見せながら、生徒に携帯を通じていろんな指令を送り、教室がとんでもないことになったそう。

基本、自給自足。人におもしろいコンテンツを提供しようというより、自分たちを楽しませるためにやっているという山下さん。ナイトスクープ、電波少年が終わってしまった腹いせとも？

「プログラミングで絵を描く」
西村斉輝（多摩美術大学）

資料はこちらから
※キーボード操作でページ移動ができます。（「←」：戻る、「→」：進む）

intara_6th_report_photo11

西村斉輝さんはまだ多摩美術大学の学生さん。大学でグラフィックデザインを学びつつ、一方、趣味で自サイトや友人のサイトをFlashで作っている。大学で教わっている、絵の構成、構図や色などの知識とFlashの技術を組み合わせることで、「プログラミングで絵を描いて」いる。その手法をいくつか紹介してくれた。

「Chuck Close Engine」、近くで見るとバラバラの色なのに離れてみると写真のようなリアルな絵が現れる。チャック＝クロースの表現をシミュレートするプログラム。「Wreckage of Art」、画面をクリックすると図形が次から次へと出てきて、その軌跡が絵になる。これは、過去のアーティストの複数の表現方法を組み合わせたもの。ジャクソン＝ポロックのアクションペインティング、アンディ＝ウォーホルのポップアート。「Spline Rendererβ」、これは絵を描く道具として、毛を作る→束ねて筆にする→筆に絵の具をつけてみる、というもの。

美術の知識＋Flashの技術を組み合わせて、こういう表現をしている西村さん曰く、道具の知識だけじゃなく、表現するための知識も必要なんだと。確かに。

「プロジェクトマネージャー（PM）の魅力をざっくりお話します」
中田正幸（TYO）

資料のダウンロードはこちら(PDF)

intara_6th_report_photo12

PMというちょっとわかりにくいお仕事の魅力を、3年目から「PMがおもしろくなった」という中田さんのプレゼン。

そもそも。プロジェクトにはさまざまな人が関わってくる。PMは、いわば「みんなをまとめて目的地まで導く」ツアーの添乗員さんだという。そのために重要になってくるのは、「時間（スケジュール）のコントロール」と「人のコントロール」だ。一口にゴールといっても、人それぞれ。高い山もあれば、発生する問題もそれぞれ。この過程で生じる1つ1つの課題をクリアしていくおもしろさがあるという。そして、それは最終目的地（ゴールのコンテンツ）のおもしろさにつながるはずだとも。

たいていの場合、時間は非常に限られる。その中でなんとかうまくやりくりしていく、それがPMの腕の見せどころ。時には予期せぬトラブルが起きる。でも、慌てず、冷静に、ポジティブシンキングで乗り切る。要はコミュニケーション、と語る中田さん。「間に挟まれてつらいこと、多くないですか？」との質問に、「そんなこと、しょっちゅうですよ（笑）」と。そこは仕事なのでそれぞれの意図をくみ取りながら、なんとかするそう。みんなが満足してそのプロジェクトが終わったとき、よかったなと思うと。

「みなさん、PMの人に感謝しましょう」というタナカさんの声に、会場中で大きなうなづきが…。

intara_6th_report_photo13