お任せにする範囲と、 譲れない条件を分けること。 海の図鑑ひとつでも、 生き物の種類、動き、カメラ、説明の出し方… 決めることって意外と多いんだよね。 それを全部お任せにしちゃうと、 自分が想像していたものとは違う方向に 仕上がってしまう可能性も大きくなる。 だから僕はまず、 「潮の満ち引きと関係する生き物を複数入れて」 「見栄えも意識して選んで」 「海岸の植物も実際の植生を考慮した種類で」 という条件を渡した。 こうすると、生き物の選定自体は任せられる。 こちらが全種類を調べて指定しなくても、 基準だけ共有しておけば狙い通りになりやすい。 動きも同じで、 「潮を操作すると潮だまりが現れる」 「生き物をクリックすると寄って、解説が出る」 みたいに、操作と結果をセットにする。 そして、最初の指示を出し終わったら 仕組みをコードにする部分はAstraに任せて 提出物を人間の審美眼に照らして評価する。 たとえば、カニとヤドカリ。 最初は脚が細すぎてキモかったので修正した。 魚も、泳ぎの繰り返しがすぐわかると 急に作り物っぽく見えるので、 アニメーションを長めにしてもらった。 あと、説明を読んでいる間は 対象の生き物の輪郭を少し光らせるようにした。 これは「今どの子の話をしてるの？」を防ぐため。 コードの直し方まで指定する必要はなくて、 「何が微妙で、どう変えてほしいか」が伝われば あとはAstraが考えてくれる。 適切なFBができれば、修正は数回で十分だ。

ガチのゲーム開発に使われるような 高品質な素材を渡してる。 そういう3Dモデルが手に入る、 「アセットストア」って場所があるんだけど Chrome拡張でAstraにブラウジングさせて、素材探しもお任せしちゃえばOK！ あとは少し作らせてから提出させて、 人間の目でジャッジするのを繰り返す。 流石にこの品質はポン出しできないので、 何度か修正してもらったらようやく完成！ 今回、僕が使ったのは 「Fab」っていうアセットストアの Megascansっていうシリーズのアセット。 他にも色んな素材があるので、 マジで何でも作れそう🦖

本棚から絵本を選び、本を開くと立体のキャラクターや風景が飛び出す、インタラクティブな3D絵本Webサイトを制作してください。 ユーザー自身がクリックして物語を進められ、本棚、本の移動、表紙を開く動き、ページめくり、物語の結末までが、ひとつの空間の中でシームレスにつながる体験にしてください。 【体験設計】 ・最初に、表紙の絵とタイトルがそれぞれ異なる複数の絵本を本棚に並べる ・本を選ぶと、その本が棚から手前の机へ移動し、表紙が開く ・ページ上にキャラクターや小物、風景が立体的に立ち上がる ・まずは1冊分の短い物語を、3〜4場面で最後まで遊べるようにする ・キャラクターや小物をクリックすると反応し、次の出来事につながる ・ページをめくる時は、そのページ上の立体物が縮んで一時的に完全に消え、めくり終えてから次の場面が立ち上がる ・カメラはキャラクターの表情が分かる距離まで寄り、物語に合わせて滑らかに動く ・画面の切断や急な視点移動を避け、すべての場面を連続した動きでつなぐ ・最後に物語にちなんだ簡単なクイズと、ごほうびを集める演出を入れる 【デザインと音】 ・このプロンプトの後に追加するテーマや世界観を反映する ・絵本らしい柔らかな色、温かな光、紙の質感を使う ・キャラクターを主役にし、文章や操作ボタンで顔を隠さない ・文章やキャラクターのセリフは、短く読みやすい日本語にする ・マウスカーソルには、動かすと少しだけ残る控えめな光の軌跡を付ける ・読み上げや音声のセリフは入れず、穏やかなBGMと小さめのクリック音、紙をめくる音などで構成する ・仮画像、ダミー文章、未完成の要素は残さない 【実装】 ・Three.jsまたは適切なWebGL技術を使用する ・キャラクターは丸みのある可愛い造形にし、テーマに合う3Dモデルや表紙イラストを用意する ・ユーザーのクリックと演出を同期させ、連打しても場面の順序が崩れないようにする ・PCではマウス、スマートフォンではタップで操作できるようにする ・音はユーザーが最初に操作した後に再生し、ミュートもできるようにする ・ローカルで起動できる完成ファイルを作成する ・モデルや画像の読み込みを待ってから体験を開始する ・コンソールエラー、表示崩れ、キャラクターの見切れがないことを確認する

スクロールに連動して3Dキャラクターが画面内を移動しながら、ページの内容を案内してくれる没入型Webサイトを制作してください。 単に3Dモデルを表示するだけではなく、ユーザーがスクロールすると物語や空間が進み、上へ戻すとキャラクター、カメラ、背景、文章の変化も自然に巻き戻る体験にしてください。 【体験設計】 ・ファーストビューから3Dキャラクターを大きく見せる ・スクロール全体を0〜1の進行度として扱い、すべての動きを進行度から決定する ・下方向では前進し、上方向では同じ軌道を正確に逆再生する ・キャラクターは画面内に見える状態を保ち、移動、回転、ポーズ、視線を変化させる ・カメラ、照明、背景、空間演出もスクロールに合わせて変化させる ・3〜4個の短いメッセージを配置し、場面の変化と同期して切り替える ・数秒おきに見た目の変化が起き、最後まで見たくなる構成にする ・自動再生ではなく、ユーザー自身のスクロールで操作できるようにする 【デザイン】 ・このプロンプトの後に追加するテーマや世界観を反映する ・テーマに合う3Dキャラクター、配色、文章、空間を設計する ・一般的な企業サイトやポートフォリオの型にはめず、ひとつの体験として構成する ・洗練されたタイポグラフィと余白を使い、3Dキャラクターを主役にする ・仮画像、ダミー文章、未完成の要素は残さない 【実装】 ・Three.jsまたは適切なWebGL技術を使用する ・外部の3Dモデルが用意できない場合は、プリミティブ形状を組み合わせてキャラクターを制作する ・PCとスマートフォンの両方で破綻しないようにする ・ローカルで起動できる完成ファイルを作成する ・スクロール停止時にアニメーションが暴れないようにする ・同じスクロール位置では毎回同じ姿勢と画面になるようにする ・コンソールエラー、表示崩れ、横スクロールがないことを確認する