「SHARP Kameyama Dream Factory」の“作り方”
今月号の記事
- 「SHARP Kameyama Dream Factory」の“作り方”
- PhotoshopとFlashを統合する際のヒント集
- デベロッパセンター注目の記事
- Edge編集長からのメッセージ
- the Edge Recommends! 最新サイトアイデア帳
- Edge 最新ニュース／イベント・セミナー情報
株式会社シャープの亀山工場と言えば、液晶テレビの生産拠点として有名な存在です。「日本製」そして「亀山工場製」であることを前面に出し、工場をブランド戦略の柱のひとつに据える取り組みは、国内外から大きな注目の的となっています。その亀山工場をPRするWebサイトを制作したのが、株式会社博報堂アイ・スタジオの佐野勝彦氏と、デザイナーの西田幸司氏です。工場というメカニカルなイメージを払拭し、美しい世界観を実現したそのサイトでは、Flash 8 Professionalの機能が随所に活かされています。
「美しい工場」をWebの世界観で再現
デザイナーの西田幸司氏（左）と株式会社博報堂アイ・スタジオの佐藤勝彦氏（右）
シャープ・亀山工場のPRサイト「SHARP Kameyama Dream Factory」は、2006年8月末にオープンしました。それは同工場に「第2工場」が開設されたこと、そしてシャープの液晶テレビ「アクオス」シリーズの新製品が、全世界で同時発表されるというタイミングに合わせたものでした。そこには「工場からのブランディングを行い、企業イメージを高める」という狙いがあります。日本国内だけに向けた情報発信ではなく、7カ国の言語に対応したサイトになっているのも特徴です。
サイトの制作を行ったのが、株式会社博報堂アイ・スタジオの佐野勝彦氏と、デザイナーの西田幸司氏。このサイトの制作を統括しているのが博報堂で、中でも佐野氏はディレクションとFlashオーサリングを担当、西田氏がグラフィックの制作を担当しました。
「工場をPRするサイトを、ふつうに作っても興味を持ってもらえるのかという問題がありました。また、PIP（パーソン・イン・プレゼンテーション）という手法も今となっては弱いのではないかという思いもありました。いくら最先端の工場といっても、工場は工場ですし、ヒーローではありません。そこで、亀山工場のコンセプトを幻想的な世界で表現することを試みたんです。制作側がイメージしたのは、美を創造する夢の神殿。『夢の壁掛けテレビ』というシャープの考えがベースにあります。また『自然との共生』を掲げて環境への配慮もしている工場であることも念頭に置きました。」（佐野氏）
こうして、空中に神殿が浮かび、美しい自然の中を様々な生き物が行き交う幻想的な基本的なイメージが出来上がりました。実際のコンテンツの中では、液晶テレビに使われている部品や工場のロボットなどが紹介されているのですが、幻想的なイメージの中にうまく取り込まれており、いわゆる「メカメカしさ」を一切感じないのは特徴と言えるでしょう。
美しいグラフィックパーツをFlashでオーサリング
例えば、サイトの一場面で優雅に動く、象。基となるデータはCGで作成されています。「象だけでも5つくらいのCGムービーを作ってもらいました。それを素材として、Flash上でオーサリングしています。ムービー自体は容量の小さなものでも、それをさらにFlash上で動かすことで、動きに変化を付けています。」と佐野氏は言います。
また、中で使われている画像素材に関しては、実際に亀山工場へ出向いて撮影をさせてもらったもの、素材集から取り込んだもの、更には西田氏自身が撮影したものなどをベースにして作ったり、Photoshopで描いたりしたと言います。それをFlash上で配置して行くわけです。こういった一連の作業について、西田氏は次のように話します。
「Flash 8 Professionalでは、読み込んだ静止画や動画の描画モードを変更したり、エフェクトをかけたりすることができます。例えばPhotoshopの描画モードと同じように、「スクリーン」や「オーバーレイ」などを使って表現することができる。しかもそうした状態で動かすこともできるので、よく使用しています。」
また、このサイトの中で出てくる文字は基本的にすべて明朝体で、詩的に訴えかける部分に関してはすべて縦書きになっています。「メイド・イン・ジャパンを意識したタイポグラフィー」だと話す佐野氏。また西田氏は「シャープは職人的なところがある会社。そのクオリティで成り立っているんです。その『匠』的なイメージを出すために、縦組を使っています」と話します。
この文字はサイト上で動きが与えられていて、拡大／縮小もするのですが、すべてビットマップ化されているとのこと。「文字はすべてPhotoshop 上で作ってFlash に読み込んでいます。ベクターデータだと表示クオリティを落としたときにジャギーが現れたり、描写速度が遅いこともあり、色々と試した結果、ビットマップ画像として入れるのが良いだろうと判断しました。」と、佐野氏は説明します。
リッチコンテンツを少しでも軽くするための工夫
SHARP Kameyama Dream Factory亀山工場のサイトほどリッチなコンテンツとなると、データ容量もかなりのものとなりますが、だからといって「重たいサイト」だという印象は避けなくてはいけません。そのために、数々の工夫がなされています。
「Flash 8 の機能であるビットマップキャプチャを使っています。一度読み込んだものをビットマップでキャプチャしてオブジェクト化し、それを必要なときに呼び出します。読み込んだ画像は消してしまい、キャプチャのほうを保存しておくことができるので、後からキャプチャを呼び出すわけです。attachMovieでスクリプトによってファイルを配置させる場合、全てのファイルを初期に読み込まなければいけません。外部ファイルをオブジェクト化する方法を使う事で、初期のロードとは別にロードを行いつつattachMovieのようにタイムラグなくムービークリップを配置する事が可能になりました。作業としては面倒かもしれませんが、今回のような容量が大きいサイトは初期のロード時間が長いため、クオリティは保ちつつも少しでもロード時間を短くといった得意先の要求にも答える事ができました。」（佐野氏）
その他にも、実に細かい工夫があります。たとえば「浮かんだ島」は全景が見えているときは画面の中でゆらゆらと揺れているが、その島をアップにしたときは揺らさない。また、さまざまなオブジェクトが3D空間でグルグルと回転し、あるモノは画面の外に出て行くこともあります。そうやって画面の外に消えたモノは、画面の外で「止まって」いるのです。これらの動きはすべてAction Scriptで書かれていますが、スクリプトの工夫で少しでも処理を軽くすることができるのです。
さらに、BGMには生演奏を特別に録音したクラシック音楽が5種類使われていますが「5つとも同時に流し、ボリュームのコントロールで使い分ける」（佐野氏）といったことも行われているところも、まさに「工夫の積み重ね」と言えるでしょう。
最後に佐野氏と西田氏は、次のように話します。
「今回の案件における作業の工程は、撮影や素材の用意など、CM制作の工程に似ていると思います。実際、作業としてはほぼ同じだったと言っても良いのではないでしょうか。それでいて、Web的なアウトプットができたこと。それは良かったと思います。」（佐野氏）
「今回は、工場の方々も含めて、シャープさんがたいへん熱意を持ってくださったので、制作している中での一体感がありました。それは作っている段階で、私たちが『亀山マニア』になってしまうほどでした。」（西田氏）
クライアントと制作側双方の熱意と、Flash 8 Professionalで実現する様々なアイディアや工夫が相まって、出来上がったサイトは海外のデザインポータルからも注目され「誇りを持てる日本発のサイト」となったのです。
今回の記事と併せて、EDGE 10月号に掲載した『SHARP Kameyama Dream Factoryの歩き方』をご覧いただけると、亀山工場Webサイトをより多角的に体験できます。ぜひアクセスしてみてください。
