ザ・ストリッパーズの遠崎さんに聞く、「別冊 島耕作」の開発秘話

現在、アドビ システムズ社ではAcrobatの新キャンペーンを行っており、特設サイト「別冊 島耕作 meets ADOBE ACROBAT 9」が公開されています。ビジネスパーソンなら誰もが知っているであろう人気漫画キャラクター「島耕作」を起用し、雑誌スタイルという枠組みでコンテンツが展開される異色のキャンペーンです。その裏側について、開発を手掛けたザ・ストリッパーズ株式会社の遠崎寿義さんに伺いました。

別冊 島耕作 meets ADOBE ACROBAT 9
別冊 島耕作 meets ADOBE ACROBAT 9
ユーザは、島耕作が代表取締役社長を務める「HGホールディングス」の社員となり、
Acrobat の機能やノウハウを学びながら、仕事(ゲーム)をこなし、出世していく

「別冊 島耕作」では、Acrobatに関する記事や漫画、出世するための仕事(ゲーム)が展開される
「別冊 島耕作」では、Acrobat に関する記事や漫画、出世するための仕事(ゲーム)が展開される

Edge:キャンペーンのメッセージを伝える手段として、雑誌スタイルを採用されています。ツールの機能を紹介する手法として、映像などを使いビジュアル的に伝えるアプローチも考えられると思うのですが、テキストを中心とした読ませるコンテンツにしたのはなぜでしょうか?

遠崎:今回のサイトの目的は、「ビジネスのリーダー層に“Acrobat を使った新しい仕事のやり方”を知ってもらい、実践してもらう」ことです。そのためにまず伝えるべきことは、「Acrobat がどういうビジネスシーンに効くのか」ということで、その先に機能の説明があります。Acrobat が効果的なビジネスシーンを説明するにあたり、もし島耕作を起用していなければ、何らかのシチュエーション映像を作るという手法も考えられるでしょう。しかし、今回は島耕作の資産を最大限生かすことが成功につながると思っていました。

ビジネスシーンを描くとしても、島耕作の世界観を最大限生かしたい。そこで、Acrobat が効果的なビジネスシーンを説明するコンテンツ「4つの新常識」では、漫画に登場するキャラクターへのインタビュー記事という体裁をとっています。その内容を漫画で構成することもできたと思いますが、それはベストな手法ではなかったでしょう。記事体裁であれば、テキストで説明されるのは「当たり前」として受け入れられるものですが、同じ内容を漫画というフォーマットにして説明テキストの部分が多くなると、急に説明臭く、面白くなくなるものです。また、今回のメインターゲットはビジネスユーザです。30~40 代のユーザは、漫画で情報を吸収するリテラシーは比較的高い世代だとは思いますが、会社で漫画のサイトをじっくり読んでいたら怒られてしまいますよね。

「別冊 島耕作」内のインタビュー記事
「別冊 島耕作」内のインタビュー記事

ただ、昇進時や各種イベントなどでは、漫画を使っています。島耕作を起用する以上、「漫画」というフォーマットが一番ユーザにとってもわかりやすく、感情移入しやすい。このサイトでは、ユーザが仮想の「社員」となって出世していきますが、ユーザとのコミュニケーションの距離を近づけたい部分では、テンポよく表現力の高い漫画フォーマットを使っています。

昇進時や各種イベントなどときには漫画フォーマットで
昇進時や各種イベントなどときには漫画フォーマットで

こういった「テキスト」と「漫画」の部分を違和感なく組み合わせるためには、「雑誌」という形が最適と判断しました。

Edge:制作・運用にあたり、特に注力したところはどこでしょうか?

遠崎:インタビュー記事内容や漫画部分の原稿作成、デザイン、Flash、どれも大変なところですが、振り返るに、サイト全体を通して「ユーザとのコミュニケーションをデザインする」という部分が肝だった気がします。

たとえば、ユーザは、漫画の中では HG ホールディングスの社員として扱われます。その一方で、インタビュー記事など「別冊 島耕作」を普通に雑誌として読んでいる読者としての立場もあるわけです。そういった部分でユーザが混乱しないかといったところは大きな懸念点でした。

これまでは「絵コンテ」でフローを描いていたのですが、今回は「字コンテ」を作って、何度も精査していきました。ユーザとのコミュニケーションをデザインする上で、字コンテの方がかなり効果的だというのは新しい発見です。たとえば、絵コンテをざっと描いてフローを作るときに、画面上の文言を「○○○」といったダミーテキストで進めているという人も多いでしょう。しかし、「こういう画面遷移で進んだときに、ユーザがついてこれるか、参加しようと思うか?」といったことをシミュレーションするのに、その「○○○」の文言が重要だったりします。字コンテだと、そうした点をケアしながら、スピーディーに修正や試行錯誤ができます。

今回作成した字コンテ
今回作成した字コンテ

今回のサイトの場合、閲覧していると「経験値」が増えていき、「異動」のイベントが起こるようになっています。「経験値」という言葉はもはや市民権を得ている言葉だと思いますが、サイト上ではあえて使っていません。経験値は異動するためのもの、なぜ異動させるかというと、サイトを隅々まで見て楽しんでいただくためです。「あとちょっと見たら、異動できそうだ、だったらもう1ページ読んでみよう」という動機につなげるためのものなので、左下に設けた経験値を示すカウンターは「あとちょっと」を強調するために、「あと XX ポイント」と数が減っていく形をとっています。「次の異動できる経験値は2500で、今あなたは1800です」と言われるよりも、この方がシンプルで、「もう少し」という心理になりやすいですよね。

このポイントを「経験値」とラベル付けするとどうなるか? 経験値と聞けば、多くの人は増えていくものという印象を持っているでしょう。サイトでの目的としては、「減らして」いきたい。減らしていく場合、経験値という言い方には違和感があります。こういった違和感や、細かい仕様を決めていく作業を「字コンテ」を作りながら進めました。また、ポイントカウンターはサイト滞在中、常に減り続けますが、その表示が記事などを読むときの邪魔にならないようにしなければなりません。大きな動きには目線が行きやすく邪魔になるので、アナログのトリップメーターのように小さな動きでカウンター部分を表現するといったことも、字コンテの作成時に検討したことです。

経験値を示すポイントカウンター
経験値を示すポイントカウンター

Edge:この記事の読者層は主にクリエイターなのですが、技術的な見所を教えて下さい。

遠崎:今回は Flash Player 9 対応で、コンテンツはすべて 3D レンダリングしています。3D エンジンを使用していると言っても、いわゆる 3D 空間的な演出を施すためではなく、だいぶアングルを絞り込み、机上の見た目や雑誌のページをめくる操作がより自然な感じとなるように使用しています。フリップブック的な演出やライブラリは昔からよくありますが、そうした技術を使って実現できるものでは、必ず真上から見ている状態になると思います。机上や雑誌などの身近に触れるアイテムに対して、真上から見た平行移動的な演出を行うと、見せられているという感が強く、すごく不自然に感じます。もっと、ユーザ自身が見ている、操作しているという感じを強調したかったのです。

そして、3D エンジンを使うにしても、ユーザ環境を配慮しています。おそらくクリエイターの皆さんのマシン環境だとそれほど問題ないと思いますが、ビジネスパーソンが対象となると、パフォーマンスの要求はシビアです。Papervision3D などの既存の 3D ライブラリでは、パフォーマンスやページをめくる動きなどに満足がいかなかったので、今回は 3D エンジンを一から開発してもらっています。

このサイトでは、ユーザにニックネームを入力してもらい、それを漫画のセリフ中に違和感ないように当てはめています。通常、漫画の文字組では、かな部分は明朝体を、漢字部分はゴシック体を使います。そのようにするには、Flash にフォントを埋め込む必要があります。しかし、2つも日本語フォントを埋め込むと、それだけで 3MB ほどになり、現実的ではありません。ただし、フォント埋め込みは埋め込む文字を指定でき、ニックネームの長さぐらいであれば、数 KB ですみます。そこで、ニックネームが確定したら、サーバ側でニックネームに必要な文字を埋め込んだだけの SWF を生成し、それをメインの Flash にロードするようにしています。

漫画のセリフ中にはめ込まれたニックネーム
漫画のセリフ中にはめ込まれたニックネーム

Edge:このキャンペーンでは、出世ゲームの要素を取り入れていますが、今後、どのような展開が待っているのでしょうか?

遠崎:まぁ、先のお楽しみ。ですが、肩書きのステップは20近く用意しています。おそらくこのメールが配信されるときには、部長クラスまで昇進できるようになっているでしょう。部長になるには、すべてのコンテンツを閲覧し、2つのゲームをクリアしないといけません。さらにその上には役員クラスもありますが、そのための条件は……まだ秘密です。

コンテンツを閲覧していると、次々とイベントが発生し、仕事(Acrobatを使ったノウハウを実践するゲーム)をこなしながら出世していく
コンテンツを閲覧していると、次々とイベントが発生し、
仕事(Acrobat を使ったノウハウを実践するゲーム)をこなしながら出世していく

Edge:遠崎さんの会社(制作現場)では、Acrobat を利用されていますか?

遠崎:基本的に企画書は Illustrator で作成し、PDF 化しています。今回はアドビさんがクライアントなので、PDF にコメントがついて戻ってきたりして便利でした。あと、社員の自己評価シートの入力と集計にフォーム機能を使っていますね。文章の校正などは PDF で行うと確実なので、皆さんに使っていただけるとありがたいですね。制作会社はお客さんの環境に合わせてという側面があるので、皆さんがもっと使ってくれればいいのにと思っています。

関連情報


遠崎 寿義写真

遠崎 寿義

慶應義塾大学卒業後、株式会社イメージソースの取締役を経て、2005年5月ザ・ストリッパーズ株式会社を設立。One Show Interactive Gold Pencil / ロンドン国際広告賞 Winner / 東京インタラクティブ・アド・アワード金賞等、受賞多数。著書に、『Webデザインの「プロだから考えること」』(インプレス)、『デジタルの仕事がしたい』(岩波ジュニア新書)などがある。