数値は指定せず「ぎこちない」と伝えるだけ ──Codexでｽﾀｯｸﾁｬﾝをスムーズに動かす方法

「作りたい！」を形にする個人開発。AIと叶える「あなただけのスタックチャン」開発入門　第3回

「ぎこちない」を伝える ──感想ベースで動きを磨く

　試作の仕組みが分かったところで、実際に動かしたときに気になった点を調整していきます。ここからは、私が「どのような動きにしたいか」を伝え、Codexに実装してもらった結果を、もう一度実機で確かめるという流れを繰り返します。良かった点を残しつつ、変更したい点を伝えていきます。

「もっと滑らかに」で何が変わったか

　最初に気になったのは「首の動きが小さいこと」と、「動く速さに変化が感じられず、平坦に見えること」でした。そこで、左右の振れ幅を広げるとともに、左右を向くときには少し上も向くようにしたいと伝えました。あわせて、動き始めは速く、終点に近づくほどゆっくりになるよう、速さにも変化をつけてもらいます。

プロンプト例

首の振れ幅を可能な限り大きくして、左右を向くときには上も向くようにしてください。
また、動かすときに、最初は速く、後半ほどゆっくりにできますか？

Codexの返答（要約）

左右の振れ幅を±5度から±30度へ広げ、左右の端では上向き25度、中央では正面を向くようにしました。
動き始めは速く、終点ほどゆっくりになるease-outを使っています。
テンポは90BPM、実行時間は3秒のまま、終了したら正面へ戻ります。

　このように、動き始めは速く、終点に近づくほどゆっくりにする変化は、Webのアニメーションでも使われる「イージング」の一種（ease-out）です。左右へ向くにつれて顔を上げ、中央へ戻るにつれて正面を向くので、左右だけでなく上下にも動きが加わりました。

　ただ、実際に見てみると、まだぎこちなさが残っていました。このぎこちなさについても、実際に見えた動きの印象をそのまま伝えて、もう一度調整してもらいます。

プロンプト例

異常なしです。
中央→左→中央→右、のようにぎこちなく動いています。
もっと滑らかに速度を変化させることはできますか？

　この依頼を受けて調整してもらった動きを見たところ、速さの変化が滑らかになっていました。何を変えたのか説明を聞いてみます。

Codexの返答（要約）

変更前の処理では、中央から左へ動く間を5段階に分け、それぞれの段階でモーターへ角度と速度を指示していました。
この部分を、約20ミリ秒ごとに左右と上下の目標角度を計算して、モーターへ伝える処理に変更しました。

　Webのアニメーションにたとえると、イージングで途中の位置を計算していても、移動が終わるまでに画面を数回しか書き換えていなかったような状態です。つまり、動く速さの変化を細かく計算することに加えて、計算した途中の角度をこまめにモーターへ伝えることで、動きが滑らかになったわけです。

　今回の90BPMでは、中央から左へ移動する半拍の時間が約333ミリ秒なので、その間に約17段階の指示を送ることになります。左右±30度、上向き25度という振り付けやテンポ、3秒という実行時間はそのままに、途中の角度を伝える頻度を増やしています。次の図では、中央から左へ向くときの左右の目標角度を取り出して比べています。

同じ移動時間と振れ幅で、目標角度の指示を5段階から17段階へ細かくする比較

指令の頻度で動きがどう変わるか

　この調整で、私が最初から「約20ミリ秒ごとに更新してほしい」と指定したわけではありません。実際に見えたぎこちなさを伝えると、Codexが実装したコードを確認し、角度を伝える頻度の調整につなげてくれました。変更したあとに理由を説明してもらうことで、次に動きを確認するときには、振れ幅や速さに加えて、こうした更新の頻度にも目を向けられるようになります。

速い手拍子でも落ち着いた動きにする

　首の動きが滑らかになったところで、今度は拍に合わせて鳴る短い音と、左右交互に光るLEDの演出を加えました。あわせて、速い手拍子にも反応できるように、受け付けるテンポの上限を120BPMから200BPMへ広げています。ところが、音のテンポが速くなった分だけ首も速く往復するようになると、動きが忙しく、踊りというより暴れているように見えます。音は速い拍を刻んだまま、首はもう少しゆったり動いてほしいところです。

　そこで、一定のテンポを超えたら、首の1回の移動に使う時間を長くするように提案しました。

プロンプト例

一定のテンポを超えると半拍で真ん中に戻すのをやめて、左→真ん中→右→真ん中で動かすのはどうですか？

Codexの返答（要約）

120BPM以下なら、中央から左へ、左から中央へといった1回の移動に半拍を使います。
120BPMを超えたら、各移動に1拍を使うようにします。

　この切り替えによって、各テンポでの移動時間は次のようになります。

テンポ	1回の移動に使う拍数	移動に使う時間
90BPM	半拍	約333ミリ秒
120BPM	半拍	250ミリ秒
200BPM	1拍	300ミリ秒

　表のように、200BPMでも、1回の移動に使う時間は120BPMのときより短くなりません。そのため、音は速い拍を刻みながらも、首はその拍に合わせて中央と左右をゆったり行き来する動きになりました。

プロンプト例

首振りのタイミングは意図したとおりです。音とも同期しています。

200BPMの音の拍を保ったまま、首の各移動を半拍の150ミリ秒から1拍の300ミリ秒へ延ばす比較

音は速いまま、首はゆったり

メロディーに繰り返しを持たせる

　首の動きと音のタイミングが合うようになったので、そのタイミングは保ったまま、LEDの見え方と、ダンス中に鳴らす音を調整しました。LEDは見やすい明るさになるまで段階的に輝度を上げ、色はピンクにしました。また、音は1拍の間に4音ずつ鳴らし、C、Am、F、Gの和音を順にたどるメロディーにしました。このように和音を構成する音を一音ずつ順番に鳴らす奏法を、アルペジオと呼びます。メロディーを聞いて楽しめるように、ダンスの長さも最初の試作の3秒から約6秒へ延ばしています。

　実際に聞いてみると、音の並びが毎回ランダムに変わるよりも、同じ並びが繰り返し戻ってくる方が、私の好みに合いそうだと感じました。LEDや音量についてはイメージどおりだったので、その設定は保ちつつ、アルペジオの音の並び方を調整するように依頼します。

プロンプト例

LED、音量、メロディーはイメージ通りでした
アルペジオのパターンは完全にランダムよりも、十数種類のパターンから選ぶ形にして、1回のダンスの中で同じコードは同じパターンになるようにしてください

Codexの返答（要約）

4音の並びを16種類用意し、ダンスが始まるときに、各和音へ1パターンずつ割り当てるようにしました。
一度割り当てた並びは、そのダンスが終わるまで同じ和音に使い続け、次のダンスが始まるときに選び直します。

　例えば、C、Am、F、Gと進んでCの和音が再び現れたら、最初のCと同じ4音の並びを繰り返すことになります。毎回まったく同じ曲になるのも、音の並びが毎回ばらばらになるのも、イメージしていた演奏とは少し違いました。そうした好みを伝えることで、「1回のダンスの中では同じ和音に同じ並びを使う」という、繰り返しの範囲が決まりました。

同じダンスではCの和音に同じ4音の並びを使い、次のダンスでは各和音の並びを選び直す例

同じ音の並びが戻ってくるのを聴く

ニールセンの原則をロボットに応用する

　ダンス自体の動きが整ってきたので、続いて、手拍子をしたときの反応を調整します。手拍子でダンスを始めることはできるものの、4回の拍手を終えて踊り始めるまで、顔やLEDに変化がありませんでした。これでは、こちらの手拍子が届いているのか分からず、続けてたたいてよいのか迷ってしまいます。そこで、拍手を受け付けていることが分かるように、次のように依頼しました。

プロンプト例

拍手中に何もリアクションが無いと、拍手を聞いていることが分かりづらいです。拍手を１回検知する度にディスプレイかLEDを変化させたいです

Codexの返答（要約）

拍手を1回受け付けるごとに、背面LEDの点灯数を3灯ずつ増やす表示を加えました。

　1回目は3灯、2回目は6灯、3回目は9灯と増えていくので、踊り始める前でも、何回の拍手を受け付けたのかが分かります。

　同じように操作していて気になったのが、頭なででモードを切り替えたときの反応です。頭をなでて手を離しても、拍手を受け付ける状態に切り替わったのかが分かりにくく感じました。そこで、モードが切り替わったことも目で分かるように依頼します。

プロンプト例

拍手待ちに切り替わったタイミングがLEDか画面でわかるようにしてください
待ちになったタイミングも同様

Codexの返答（要約）

待機中はオレンジ、拍手待ちは水色のLEDが点灯するようにしました。
モードが切り替わったときには、画面にも「手拍子を4回」「待機中」という案内を8秒間表示します。

　拍手を受け付け始めると、先ほどのピンクのLEDが3灯ずつ増えていき、ダンスが終わって次の拍手を待つ状態になると、水色へ戻ります。これで、画面の案内を見逃してしまっても、LEDの色を見れば今どちらのモードにいるのかを確かめられます。

待機はオレンジ、拍手待ちは水色、手拍子2回でピンクが6灯になるLED表示

頭なでからダンス、待機に戻るまで

　首の振り方やメロディーを調整するだけでなく、こちらの操作が受け付けられたことを表示することで、次に何をすればよいかも分かりやすくなりました。

　Webのユーザビリティ研究で知られるヤコブ・ニールセンも、現在の状態を適切なフィードバックで利用者に伝えることを、UI設計の基本原則に挙げています。こうした原則の多くは、ロボットとのインタラクション設計にも応用できると考えています。

補足：調整用のWeb画面もCodexに作らせる

　今回はCodexとの会話を通じて調整しましたが、細かい値を何度も変えて試したい場合は、調整用の画面を作ってもらう方法もあります。

　例えば、stackchan-idfの設定ページには、顔の見た目を調整する「顔エディタ」があります。目の大きさや位置、口の幅などをスライダーで変えると、ブラウザ上のプレビューにすぐ反映されます。Bluetoothで実機に接続していれば、実物の顔もリアルタイムに変わるので、見た目を確かめながら好みの設定を探せます。

　ダンスでも同じように、振れ幅や動き始めの速さを指定して実機へ送るWeb画面を用意すれば、動きを見ながら値を調整できます。あるいは、画面上の3Dモデルで動きを比べられるシミュレーターを作ることも考えられます。調整のたびに依頼をしたり、実機へ書き込んだりする手間が気になってきたら、こうした調整用の道具もCodexに作ってもらうとよいでしょう。