Category: アプリデザイン・開発話

タッチパネル版ピッケ完成しました


2晩続きで、現地へインストールチェックに行ってきました。
のはずが、実際はそれ以前のPC環境の設定ができていなくて、
そこからの四苦八苦!…したのは、吸原さんで、
私は、皆さんが内装など追い込みの中、あちこちちょこちょこ
見せてもらいました。

場所は、神戸ハーバーランドの旧「ビーズキス」。
これまでの若者からファミリー層へ対象を変更し、
名称も「ファミリオ」となるそうです。
地下1階が、食+絵本の
「キッズライブラリーフードコート プレイ!」です。
ピッケは その入り口と、絵本コーナー横に、設置されます。
行ってまず驚いたのが、とにかく広ーーーいこと。

Img080424_1
入り口近くに、1台目のタッチディスプレイ。
(比較するものが無くて、この写真では大きさがわからないですね…)
フロアのデザインコンセプトが「北欧の森」だそうで、
白木がふんだんに使われています。

Img080424_2
開けるとこんなです。スピーカーはBOSE。嬉し。

Img080424_3
テーブルはアリの巣のデザイン。
くぼんでいる部分は、赤ちゃんがポコンと収まるための場所。

Img080424_4
テーブル上には、オモチャ。

フードコーナーを抜けると右奥に絵本コーナー。
Img080424_5
mi-te[ミーテ]さんの協力で選ばれた日本の絵本が数100冊と
北欧4ヵ国の絵本が並ぶはず。
絵本はなんと、売るのではなく、自由に閲覧できるのだそう。

突きあたりを曲がったところがピッケコーナーで、2台並びます。
Img080424_6
ちゃんとお願いした通りの高低差で設置してくださってました。
開けるとこんなです。
Img080424_7

ピッケコーナーのすぐ右は、ベビールームの入り口。
Img080424_8
おむつ換えコーナーや、授乳用個室も並んでいます。
Img080424_9

絵本コーナー壁面ぐるりは、上田バロンさんの北欧の森の絵です。
Img080424_10

Img080424_11
テーブルの上に絵本が 伏せて置いてあるので、
何だろう? と思ったら、

Img080424_12
照明です! 可愛いアイディアですね。
よく見ると、壁面の絵の中にも、同じカタチで絵本が飛んでいます。

さて、明日25日はいよいよオープン! 10:00~です。
気になるので、終日はりつきます。
多分、ピッケのところで、ハガキ(作りました)を配っているか、
絵本コーナーで、北欧絵本をながめて遊んでいると思います。
声をかけてくださいね。

タッチパネル版ピッケを作成中11


週末、Oさんが、5歳の姪っ子さんと事務所に来てくださいました。
バリバリに仕事ができて、元気ですぐ動き、その上美しい。
会ってまだ数回なのに、ちっともそんな気がしない
信頼のおける女性です。
「よかったら、姪っ子をモニターに連れてきますよ」
と、貴重な休日に、差し入れまで持ってやって来てくれたのでした。

Img080422_1

何の説明もせずに試してもらって…
あれ、空で画面から雲が無くなってしまった!?
その時はバグかと思ったのですが、雲をひっぱってくるってことが
うまくできないため、それぞれの雲が反対側へ逃げてしまい
画面にピッケが乗ってる雲以外なくなってしまっていたのでした。
大人だとうまくできてしまうので、気づかないことでした。
トータルの数を変更することは、今から入れるにはこわいので、
入ってくる雲のスピードを倍速にする直しを入れました。

他にも、池の、灯りのカタチの2つの水草。全体の水の動きに
合わせての反応しか入っていないのですが、何かあるに違いないと
何回目であっても(全部で1時間くらい遊んでくれたのです)
その上で指を動かしています。
全体の水の動きに反応することに加えて、ローカルでの動きに
対しても、反応(出るキラキラの色と形を変える+音)を
追加しました。

5歳は、まさに対象年齢ど真ん中。
試してもらえて、ほんとに参考になりました。

Img080422_2

姪っ子さんが、「おみやげ」と持って来てくれたミニ絵本。
表紙のピッケの顔、バツグンに可愛いです。
みみちゃんとまあくんの胸には「M」マーク。
裏表紙のおたまちゃん、キョトン としてますね。

「あのね、ようちえんにも、たまちゃんっているの。
 おんなのこだけどね。」
と教えてくれました。

タッチパネル版ピッケを作成中10


メニュー画面も、タッチディスプレイ用のみの新規作成なので、
音が要ります。
・ 起動時の音
・ 選択したときの音

まずは、NASH MUSIC LIBRARY 「FREE USE MUSIC」
起動時の音は、ここで短い楽曲?を買って、
一部分を切り出して使うことにしました。

選択時の音は、NASHの中でも、まぁ これでもいいかな
というのがいくつか。
でも ピタッとはこないので、さらに、外へ探しに…。
良さそうなのがありました。
TAM Music Factoryメニュー用効果音の決定音。
なかでも、(10)か(12)が良さそうです。
こちらも「素材利用規定」を明記してくださっているので
安心して利用させていただけます。

NASHの音は、不正利用禁止のためなのでしょうが、
「~ ナッシュ ミュージック ラボラトリー ~」と
音声がかぶせてあるため、検討したいだけであっても
とりあえず買わなければなりません。
この買ったいくつかと、さきほどのTAMさんの決定音を
実際に貼り付けてみて、比較検討。
断然、決定音(10)が良い! ピタッとハマりました。決定!
TAMさん、ありがとうございます。

これで やっと音が揃いました。
案内役の、くりんのふりつけを足して、
(ちょこちょこ走って出てきて、ひとことふたこと。
 すぐ走り去ります。)
メニュー画面も完成しました。

Img080421_1

タッチパネル版ピッケを作成中9


池サブステージに、カニと clear moss を追加作成したので、
音をつけねばなりません。
「リズムのもり」の音楽は大貫貴子さんにお願いしたのだけど、
今回の予算と納期では、とても無理。
自分で作るか探すかしなくては。

ほしい音は、4つ。
・ clear moss が、ぷよんぷよんと転がる音
・ clear moss が、触られてびっくり、虹色になる音
・ カニ が、カシャカシャ横歩きする音
・ カニ が、触られてびっくり、真っ赤になる音

Img080418_1_2

Img080418_2 

まず、NASH MUSIC LIBRARY 「FREE USE MUSIC」へ。
以前利用したことがあり契約してあるので、
即ダウンロード購入できます。
ジャンル別 Sound Effects で、"キラキラ"とか"アクセント"とか
キーワードを頼りに、次々聞いて探します。
clear moss、カニとも、"びっくり"に使えそうな音は、いくつか見つかりました。でも、clear moss の "ぷよんぷよん" が 無い… 困った。

「フリー効果音」のキーワードで探し回って、
その名も"ポワッとした音"を発見!
clear moss が転がるのに、ぴったり。
同じサイトの"カメラのシャッター音"も、
カニ歩きに使わせていただきました。
加工も商用利用もOKとのこと。
soundoffice.com 小山さん、ありがとうございます!

音がつくと、愛嬌あって可愛い~です。特に clear moss。
ぷよん ぷよん ぷよん ぷよん

タッチパネル版ピッケを作成中8


最初のメニュー画面と、さいごのエンドクレジット画面ができました。
これで、絵本でいうなら、表紙と裏表紙がついた感じです。

Img080417_1
ブルーの表紙(メニュー画面)を開くと(タッチすると)

Img080417_2
開く窓の向こうに、ピッケの世界が見えてくる。そこへ遊びに行く。

Img080417_3
バイバイして、こっちの世界へ戻ってくる。窓がすーっと閉じる。

Img080417_4
パタンと閉じて(終了して)、裏表紙(エンドクレジット画面)。
なかなか、気に入っています。

タッチパネル版ピッケを作成中7


2つ並ぶタッチディスプレイの設置する高さに高低をつけて、
・低い方 → 池~地面~葉っぱサブステージ
・高い方 → 地面~葉っぱ~空サブステージ
と、コンテンツの中身も出し分けることにしたのですが(理由)、
すると、どうも、低いほうが、見劣りしてしまいます。
高いほうの、空へは ピッケがついていくけれど、
低いほうだと、池へも葉っぱへも、ピッケはついていかないし…。

そこで、池サブステージを、大幅にやり直すことにしました。
新しいサブキャラ(セリフの無い通行人的なキャラです)も追加。
カニと透明なマリモです。
スタッフの間では(って、私と吸原さんの合計2人ですが)
"clear moss"(←造語)と呼んでいます。

Img080415_1
   ↑半透明のおもちみたいなのが clear moss。 転がって移動します。

ずいぶん、にぎやかになったでしょう? なりすぎ?
一度これを見てしまうと、Web公開版がさびしく見えます。
4/25を無事すぎたら、Web公開版にも反映させたいと思っていますので、5月初旬を楽しみにしていてくださいね!

タッチパネル版ピッケを作成中6


タッチパネル版は、「手の届く範囲」を意識します。
例えば、合奏で、Web公開版のままのレイアウトだと、
触りたいものの大半が、画面の上半分になってしまい
タッチするのが大変です。
かといって、手が届くようにと、全部を低くすると、
デザイン的には、重心が下がってしまい良くありません。

Img080413_1
     ↑Web公開版の合奏のシーン

身長100cmの子どもが、今日 上の方に届かないものがあっても、
半年後、1年後には届くかもしれない、
パパ&ママにだっこしてもらってのタッチも嬉しい、
と考えることにして、
それでもやっぱり、主なものには手が届くようにしたい。
不自然にならない程度に、水面部分は狭めて、
リズム植物が手の届く範囲にくるよう配置しました。

Img080413_2
     ↑タッチパネル版の合奏のシーン

また、腕の長さ分の距離まで画面に近づくことになります。
ということは、パパ&ママに読んでもらいたいと思っているセリフが、
子ども自身の体で隠れしまい、読みにくいときも出てきます。

そもそも、こういう場所の大型タッチディスプレイでのピッケのときに、
Web公開版と同じ、音声無しのふきだし表示でいいのか。

一長一短あるのです。
パパ&ママと一緒に楽しむよう誘導できることは、
PCでない今回の場合にも良いに違いない。
でも、PCと違い画面全体を見渡しにくいので、
少し大きな子どもで自分で読む場合にも、
読みにくいことがあるだろう。
小さい子どもで、親が読む場合には、上に書いたように
隠れて読めないときが出そう。

でも、それぞれのキャラクタに、イメージに合う声優さんを
今から探すなど 現実問題むずかしいし、
なんだか違う気もします。
音声をつけるにしても、絵本の読み聞かせのように、
ひとりの人の声がいいかも知れません。
だけど やっぱり せっかく親子で来ている場所なので、
音声でなく、パパ&ママの声がいちばんいいのだがなぁ。

ところで、タッチパネル版の画像の中に、
Web公開版では、ありえないコトがひとつあります。
さて、なんでしょう?
(かなりのピッケ通でないと気づかないと思います。難易度高)
答えは、おたまちゃん(カエルの姿)とまんねんさん(カメ)
が、両方いること。
Web公開版では、その回のセッションで会ったキャラクタ
だけが再登場するので、おたまちゃんとまんねんさんが、
両方出てくることはありません。
(おたまちゃん再登場は、カエルになりきるまで池であそんだとき
 だけなので、さらに確率下がります)

タッチパネル版ピッケを作成中5


Web公開版のピッケも、特に遊び方などを読まなくても
いきなり遊べるのですが、はじめての人が短時間1度きり遊ぶ
今回の場合は、より一層わかりやすくしなくてはなりません。

思い切って、下1列ボタンが並んでいるメニュー部分を
取ることにしました。
サブステージ(そら、はっぱ、じめん、いけ)の移動は、
うえしたボタンは使わず、すべてピッケが主導することに。

Web公開版のピッケの特長である「名前で呼びかける」も、
ずいぶん悩んだ末、あきらめることにしました。
誰でもが自由に出入りできる場所ですし、
「パパ&ママと一緒に」を推奨はしますが、子どもだけでの
利用もありうることを思うと、子どもの名前が大画面に
表示されるのは、よくないかも…と考えました。
ピッケが、まっすぐこちらを見て名前で呼びかける
というのは、楽しさの秘訣のひとつなので、
ここが無くなるのは とっても残念なのですが。

画面のタテヨコ比、Web公開版では、4:3のところ、
今回は、16:9のワイド画面になります。
各サブステージのレイアウトも、ワイド用にやりなおしました。
また解像度も、Web公開版では、1024×768 を標準ユーザーと
定め、そのサイズを100%として、ビットマップ素材などを
作成していますが、今回は高解像度 1920×1080 pixel となるので、
すべての素材を、作り直しました。
(メモリーとマシンスペックの兼ね合いをみながら)

Img080411_1_2
        ↑Web公開版の画面
Img080411_2
        ↑今回のタッチパネル版の画面

というわけで、だいぶんカタチになってきました。
(って、そんな流暢なことを言ってる場合ではないのでした。
 オープンが 4/25に、正式に決まったそうです。)
これまで気にとめていなかった細かなコトが、
これだけの高解像度大画面になると、やたら眼についてしまって、
大局を進める一方で、細かなところもつい直したくなってしまい、
時間がいくらあっても足りない感じです。

タッチパネル版ピッケを作成中4


ご近所の子どもたちが、ピッケと遊びにやってきました。
せっかくなので、途中だけれどタッチパネル版を試してもらったところ
わぁ~ と喜んでくれて、ひとまず、ほっ。

使い方の説明をせずに、様子を見ていると…。
ひとさし指1本で、最初から最後までやりとおしていました。
池の水、はっぱのところ、空の雲などは、
1本指より、手の指先全体(4本)のほうがしやすいのだけれど、
そんな使い分け、わかりっこないですね。

PCだと、見渡せるからか、画面全体にマウスを動かすのに、
大画面になると、葉っぱ「1枚」とか、小さいところへ集中するんだなぁ。
なるほど。

Img080409_1
Img080409_2

「春休みって宿題ないの?」とたずねると
「あるけど、しなくていいの。復習だから。」って。 本当?

タッチパネル版ピッケを作成中3


タッチパネルでは、当然なのですが、マウス操作でいう
・ マウスオーバー(クリックボタンを押さない) VS クリック(押す)
・ ホバリング(クリックボタンを押さない) VS ドラッグ(押す)
を、区別できません。
(PC用語としての「ホバリング」を、私は
 タッチパネルではじめて知りました。クリックボタンを押さずに
 マウスを動かす操作。 浮いている っていうことなのですね。)

Img080404_2
今のピッケで言うと、葉っぱの色を変えることはホバリングでしていて
空の雲を動かすことはドラッグでしています。
この2つが、タッチ操作では並び立たないのです。

クリックのモード設定は、複数から選べるようになっています。
「ドラッグ(デフォルト)」とか、「マウスモード」とか。

Img080404_1 

「マウスモード」にすると、通常の はい/いいえを選ぶボタン操作や、
リズム植物や水の生物のクリックは、違和感なくできます。
葉っぱの色変えもスムーズです。
が、雲のドラッグは、当然ながらダメ。

去年の夏頃、eITさんのタッチパネル製品を知って
ピッケをタッチパネルでできたら面白そうだなぁー
と興味をもちました。
当時も、PCにアタッチできるタッチパネルを貸してくださり
試してみることができました。それで、この問題に気づいたのです。
普通にビジネスプレゼンでの利用なら「マウスモード」でいいし、
お絵描きソフトの利用なら「ドラッグ(デフォルト)」で、
おそらく なんら問題ないのです。
ピッケは、複数の操作方法が同居してるので、ややこしいのですね。

ダメモトで(お客でもないただの一個人です)
 「マウスモード」時の2本指での操作をドラッグとみなす
 っていうことができると、雲のドラッグもできるようになるのですが
と、ご相談したところ、
なんと専用のプラグインを作ってくださいました。
今回も このプラグインでいこうと思っていたのですが、
そうすると、「くもをひっぱってくるには、2本指でね」
っていう説明パネルを近くに貼るか、ピッケのセリフで言わせるか
何かしないといけない。「チョキのゆび」って言えば意味はわかるかも
しれないけれど、その指先2点がきちんと画面に触れたままで動かす
なんていうコツの要ることを、小さな子どもにのぞむのは、現実的でなかった… ということで、頭を悩ましています。
他にも、考えることがいっぱい。 でも、面白いです!