一撃デザインの種明かし（2）

ケータイFlashでさくさく動く
Illustratorデータの作り方

面白法人カヤック
カヤックモバイル＄
2009/4/1

ケータイ用のFlash Liteで動くゲーム。アイテム作りのルールを伝授したい。Illustratorデータを軽くするためにデザイナが気を配っているポイントは？

秘儀！『ケータイペットゲーム』の作り方！

　一撃デザインの種明かし第2弾は、ケータイで育てる珍感覚ペット『ポケットフレンズ コンチ』です。これを教材に、今回は「ケータイペットゲーム」の作り方をご紹介したいと思います。

　今回は Adobe Illustratorを中心として、下記の3ソフトを使います。

• Adobe Illustrator
• Adobe Fireworks
• Adobe Flash

モチーフを決めて手を動かせ！！

　最初にモチーフ選びから始めましょう。いろいろなアイテムを身にまとう“素体”となることをイメージしながら、自分の好きな物、かわいいと思う物を選んでいきます。

アイテムを身にまとう“素体”たち

　今回ご紹介するコンチの場合は、最初に『愛のシンボル』というテーマがあったので、必然的にモチーフが決めやすかったです。

　モチーフが決まったら、とにかく手を動かし数を作ることです。こだわるポイントをしっかり決めておくと、発想の手助けになります。コンチの場合は柔らかさや、曲線のきれいさ具合にこだわってデザインをしています。

　アイデアに行き詰まったときの思考のプロセスとしては、単純化する、ひっくり返す、回転させるを試したのち(*1)、今回は似た形を置き換える手法で進みました。

(*1)発想法の転換方法については、体系的な課題解決法で、私が勉強中のTRIZ（トゥリーズ）発明原理や、SCAMPER法を使うと幅が広がります。関連するブログ記事→SCAMPER法。企画系のアイデアチェックリスト。（石井力重の活動報告）

　その結果できたものはこれ。最終的にはよりシンプルでありながら、モチーフも認識できる範囲でかわいい形に落ち着きました。

基本の“素体”ができあがった

　イメージができあがったら、いよいよケータイで動くペットゲームの素体作りです。基本的にベクターデータを用います。

　コンチの場合はIllustratorで作ったキャラクターデータをFlashで読み込み、動きを付けて完成させる方法をとっています。

アウトラインで線をとる

　このキャラクター制作で注目していただきたいのは、アウトラインを用いるか否かという点です。

　動くケータイペットゲームの場合、塗りだけで構成されたものが大半だと思いますが、それはアウトラインで線を用いることで処理速度が遅くなりペットの動きに支障が出てしまうためです。

　今回コンチは処理速度よりもビジュアルを重視したためアウトラインを残すことにしました。アウトラインの線を塗りに置き換えるやり方だと、アンカーポイントの数が増えて容量に負担がかかります。

　この素体にいくつもの着せ替えアイテムが追加されることを考えると、そのままアウトラインの線を使う方が無難と判断しました。

線(左）を塗り(右）に変換した場合。アンカーポイントが増えてしまうため厳しい

キャラ設定で命を吹き込め！

　キャラクターができたら今度は設定を決めていきましょう。

　コンチの設定を決める前に、このキャラクターが「自分の分身」なのか、「ペット」なのか「友達」なのかを検討しました。例えば、ペットとした場合には、オスなのかメスなのか？ 何歳なのか？ 人間の言葉をしゃべるのか？ どこで生まれたのか？ など、決定事項がたくさんあります。では、項目を見ていきましょう。

◎キャラクター設定で決めておきたいポイント

• 性別
• 年齢
• 言語（生まれ）
• ユーザーとの関係（ペットなのか友達なのか上司なのか）
• 好きなもの、嫌いな物
• 喜、怒、哀、楽（どういうときに喜ぶのか）

　コンチの場合はペットで性別なし。6歳くらいで意味不明な言葉をしゃべる。巨根の大木から木の実のように落ちてきた卵から生まれる。こういった表に出ない部分も裏設定として作りました。

サービスとは関係のない世界観を共有するためだけのイラストも内部的に用意しておくとそれっぽい雰囲気が出る

　性格はユーザーの育て方で変わってくるように、規定をあまり作っていません。単純に育てたいと思ってもらえるように、「寂しがり」「オシャレ好き」など簡単な設定は設けています。大きなテーマの「愛」も忘れずに、ペットとユーザー間の「愛」、コンチユーザー間の「愛」などを機能やデザインに盛り込みました。

目はどんなアイテムよりも重要！とにかく慎重に作っていく

　ケータイペットゲームのキャラクターの設定は、最初に世界観をきっちりと決め過ぎると、ユーザーの感情移入の妨げになるので、できる限り設定しないケースが多いようです。

表情は17種類を用意。どんな動きやシチュエーションにも対応できるようにシミュレーションを重ねながら用意

　ただ、サービスを開始して、実際コンチを使うユーザーを見ていると、完全に自由な世界よりも、ある程度設定がある方が、ユーザーが感情移入しやすくなっているようです。

着せ替えアイテムを量産せよ！

　ケータイペットゲームとして最も重要なのは、ユーザーが自分の個性を出すことのできる“着せ替え”の部分です。ユーザーは自分のペットに着せたいアイテムを購入し、他のユーザーとは異なる自分オリジナルのペットを作り上げます。着せ替えさせたペットを、友達や他のユーザーに自慢できます。

　もちろん人に見せるだけでなく、単純にアイテムを組み合わせた着せ替えも楽しみの1つです。どんなニーズにも応えられるさまざまなアイテムを用意する必要があります。

　コンチでは着せ替えアイテムを[頭][目][メイク][首飾り][服][クツ][右手持物][左手持物][背景]の9つの部分に分けしました。多いアイテムで200種類、少ないものでも50種類以上のアイテムを展開しています。

　キャラクターの着せ替えアイテムの重ね順は、次のようになっています。

1:[右手左手の持ち物]　2:[帽子、髪の毛]　3:[目]　4:[メイク]　5:[頭部]　6:[首飾り]　7＋11:[服]　8:[靴]　9:[足]　10:[体]　12:[手]　13:[背景] 1,2,3,4,6,7,8,11,13は変更可能。アイテムはショップで購入したり、イベントでもらったりできます

1/2

INDEX
一撃デザインの種明かし（2）　 ケータイFlashでさくさく動くIllustratorデータの作り方
	Page1 秘儀！『ケータイペットゲーム』の作り方！ モチーフを決めて手を動かせ！！ キャラ設定で命を吹き込め！ 着せ替えアイテムを量産せよ！
	Page2 重要！Illustratorはこう使え！ とにかくアンカーポイントを少なめに！（1ポイントが6byte！） ハンドルは必要のない場合は使わない（1ハンドルは5byte！） 線を使う場合は必ず角と先端を丸くしておくこと 細かい部分をつぶれれない状態で見せる方法 背景の画像作りにも独特のルール

「デザインハック」コーナーへ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）