月刊インタラ塾,gihyo.jp瓦版

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

この記事を読むのに必要な時間:およそ 3 分

西田幸司が語る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の勉強をしていたという(これに関してはまた後ほど)。

著者プロフィール

月刊インタラ塾(げっかんいんたらじゅく)

昨今、マス広告のあり方が大きく変化し,Web広告はより一層重要なポジションを担って来ております。そんな中,「宣伝・広報」「広告代理業」「広告制作業」に携わる方々へ向けてユーザーに響くWeb広告を生み出すための考え方や技術など,役に立つ情報をイベントを通じてお伝えできるのではないかと思い,開催致しました。また,このイベントをきっかけに,次代を担う人がでてきてくれればと願い,微力ながらもWeb業界全体に貢献ができればと考えております。

URLhttp://www.intarajyuku.net/

コメント

コメントの記入