初めて来た人に先へ進んでもらう ― 研究サイトのトップを3Dと実機の早回し動画に

研究サイトの最初の画面（ファーストビュー）は、文字と写真2枚を並べるより、ためてきたシミュレーションと実機の録画をつないだ早回しの動画を流したほうが、何をしている所かが一目で伝わる。 ロボットの研究記録サイト Pixels to Motors（pixelstomotors.com ）のトップを、病院の搬送ロボット・ファミレスの配膳ロボット・机の上のロボットアームの録画をつないだ42秒の動画に替え、その上に見出しと、新しく書き直した説明文と、2つの入口を重ねた。

変えたことで、次のことが変わった。

• トップを開いた人は、最初の6秒で、3Dの病院で看護師がロボットに荷物を渡す場面を見る。そのあと36秒のあいだに、Unity（3Dのゲームを作る道具）で再現した店や病院、実機のアーム、試算のページを操作する画面が、早回しで次々に流れる。前の画面は、白地に見出しと2枚の写真だけだった
• 説明文を、やっていることの説明（2つを進めています）から、読んだ人の困りごとから入る文（「思っていたのと違った」を、入れる前に終わらせる）に書き直した
• 依頼を受けてから公開までは1時間30分（11:01 に依頼、12:31 に公開）。そのあいだに確認用のページを9回作り直した。動画は保管してあった92本の候補から11本を選んでつないだ
• 効果はまだ測っていない。前の画面の数字（11月8日から13日の人の表示7回・表示時間の中央5秒・入口のカードを押した数0）を、2週間後に同じ形で比べる

Pixels to Motors は、フィジカルAI（AI がロボットなどの体を通して現実に働きかける技術）の研究記録のサイトで、ロボットを店や病院に入れる前に何が起きるかを3Dで確かめるシリーズと、机の上のロボットアームに動きを覚えさせるシリーズを続けている。録画はふだんから KIOXIA の外付けの SSD と iCloud にためていたが、トップには使っていなかった。

始まりは、この依頼だった。参考として、別のサイトのトップの画面を録画した動画が添えてあった。

TOPのFVセクションを動画に切り替えようと考えています。ヘッダーは変更しません。サイトの楽しみ方はそのままです。動画は今まで保管してきたものをベースにします。シミュレーションが65%、アーム動画が25%、サービス操作画面10%。本人は出ません。動画の候補を集めて編集して提案をお願いします。最初は3Dにハコブくん動画が表示されるようにしてください。基本は早回しの動画です。タイトルが見やすいように、FV全体に黒い乗算をかけてください。タイトルや説明文は勝手に変えないでください。

やったことの全体はこうなる。

この下に、作業の記録をそのまま残す。

作業ログ ― 保管してきた録画から、トップの動画の候補を集める

FV と乗算の言葉

FV（ファーストビュー）は、ページを開いたときに、下へ動かさずに見える最初の画面のこと。乗算は、色を掛け合わせて重ねる重ね方で、上に黒を乗算で重ねると、下の動画の色を残したまま全体が暗くなる。サイトでは CSS の mix-blend-mode に multiply を指定して重ねている。

候補の一覧：iCloud と KIOXIA の録画74本

録画は、記事の作業フォルダ（iCloud）の LOG ごとの画像フォルダと、動画の制作フォルダ、KIOXIA の service_sim/unity にあった。KIOXIA には、試算を回したときの録画が1本40〜50MB で数百本あるので、そこからは選ばず、記事に載せるために切り出し済みのものを候補にした。一覧は、1本ごとに4コマを切り出して並べた画像（sheet_0〜7.jpg）にした。

meta.txt（候補74本の長さと大きさ）

1|55.411667|1246,720|サービスロボット導入シミュレーション/LOG357_images/LOG357_v1_stage2_oblique.mp4
2|58.816667|1246,720|サービスロボット導入シミュレーション/LOG357_images/LOG357_v2_stage2_top.mp4
3|46.433333|1212,720|サービスロボット導入シミュレーション/LOG357_images/LOG357_v3_guest_flow_labels.mp4
4|49.166667|916,720|サービスロボット導入シミュレーション/LOG357_images/LOG357_v4_before_fixes.mp4
5|46.150000|916,720|サービスロボット導入シミュレーション/LOG357_images/LOG357_v5_register_back.mp4
6|24.528333|1226,720|サービスロボット導入シミュレーション/LOG364_images/LOG364_v2_run2_after_rescue_fix.mp4
7|77.756667|1236,720|サービスロボット導入シミュレーション/LOG364_images/LOG364_v3_run3_people_and_robots.mp4
8|41.383333|1236,720|サービスロボット導入シミュレーション/LOG364_images/LOG364_v4_run4_robots_back_and_forth.mp4

最初のハコブくんは、3Dの看護師から荷物を受け取る寄りの場面

最初に映すのは、病院の搬送ロボット「ハコブくん」を3Dで作った回の、看護師から荷物を受け取る寄りの録画（closeup166_receive.mp4）にした。ハコブくんの顔の画面と、看護師の手元が大きく映る。終わりも同じ録画の後ろの部分にして、くり返しの頭につながるようにした。

手が映る録画（ゲームパッドでアームを動かした LOG436・LOG446）は、本人が映る扱いにして外した。

v1：11本を2〜13倍の早回しにしてつなぐ

動画は ffmpeg で作った。1本ごとに、使う区間を切り出し、速さを上げ、試算の画面の右にある数字の表のように要らない所を切り取ってから、1920×1080 にそろえてつないだ。

plan.txt（v1 のつなぎ順。番号・元・始まりの秒・長さ・速さ・切り取り・種類）

01 c166r 0 12 2 none sim
02 a361 10 32 8 none arm
03 h158 40 16 4 1360:765:0:160 sim
04 l452 4 18 4 1360:765:0:300 sim
05 ui_open 0 8 2 1120:630:400:0 ui
06 c166l 4 16 4 none sim
07 a450 0 28 8 none arm
08 l491 3 32 8 1360:765:0:160 sim
09 uob 0 24 6 1600:900:100:120 sim
10 a358 20 40 13 none arm
11 c166r 30 7 2 none sim

v1 を切ってつなぐコマンド

cd /tmp/fv/s && rm -f /tmp/fv/seg/*; while read n f ss t sp cr k; do vf="setpts=PTS/$sp"; [ "$cr" != none ] && vf="$vf,crop=$cr"; vf="$vf,scale=1920:1080:force_original_aspect_ratio=increase,crop=1920:1080,fps=30,format=yuv420p"; ffmpeg -nostdin -v error -y -ss $ss -t $t -i $f.mp4 -an -vf "$vf" -c:v libx264 -preset veryfast -crf 18 /tmp/fv/seg/$n.mp4; echo "$n $k $(ffprobe -v error -show_entries format=duration -of csv=p=0 /tmp/fv/seg/$n.mp4)"; done < /tmp/fv/plan.txt

01 sim 6.000000
02 arm 4.000000
03 sim 4.000000
04 sim 4.500000
05 ui 4.000000
06 sim 4.000000
07 arm 3.500000
08 sim 4.000000
09 sim 4.000000
10 arm 3.066667
11 sim 3.500000

最初は ffmpeg が読み込みのループの入力を食べてしまい、2本目から引数がずれた。-nostdin を付けて直した。

v1 は44.6秒。割合は、シミュレーション30.0秒（67%）・アーム10.6秒（24%）・操作画面4.0秒（9%）で、依頼の65・25・10にほぼ合った。PC用は 1600×900 で 3,970,351 バイト、スマホ用は 960×540 で 1,741,811 バイト。

確認用のページ /preview/top-fv（検索に出さない設定）を作り、見出しと説明文はそのまま白い文字にして、動画の上に重ねた。黒の乗算は、文字とカードのある下の方を少し濃くした。

作業ログ ― 画面を操作した録画を足し、分けた画面を3割入れる

画面を操作した録画18本

v1 を見たあと、こう聞かれた。

他にもサイトやアプリの画面操作している動画なかった？

画面収録やデモの名前の付いた録画を探し直し、18本を一覧にした。

ui/meta.txt（画面を操作した録画の候補。番号|長さ（秒）|場所）

U1|9.700000|PixelstoMotors/デジタルツイン学習R2R2R/動画/画面収録 2026-02-19 16.31.20.mov
U3|29.028833|PixelstoMotors/デジタルツイン学習R2R2R/動画/画面収録 2026-04-10 12.46.18.mov
U4|20.025000|PixelstoMotors/デジタルツイン学習R2R2R/動画/画面収録 2026-06-05 18.30.00.mp4
U5|18.523333|PixelstoMotors/デジタルツイン学習R2R2R/動画/画面収録 2026-07-03 9.21.17.mov
U6|15.064500|PixelstoMotors/デジタルツイン学習R2R2R/Robotics_UX_Project/画面収録 2026-02-18 21.01.48.mov
U7|49.588167|PixelstoMotors/デジタルツイン学習R2R2R/動画/デジタルツイン_260417.mov
U8|21.334000|PixelstoMotors/デジタルツイン学習R2R2R/フィジカルAI研究室を作る/series6_guide_images/upload/lab-setup-pi05-run-v2.mp4
U9|829.718000|PixelstoMotors/site_archive/content/record/DAY330_making-explainer-video-with-ai/images/s-1920x1080_b273c60b-57bf-4356-b2b2-1b5a4023565f.mp4
U10|6.834000|KIOXIA/r2r2r-data/videos/_試作_画面型/_取り込み/rec2.mp4
U11|18.517000|KIOXIA/r2r2r-data/videos/_試作_画面型/_取り込み/rec5.mp4
U12|96.367000|KIOXIA/r2r2r-data/videos/配膳ロボットで1人減らせるか/_取り込み/背景_第2回/sim_cost.mp4
U13|74.000000|KIOXIA/r2r2r-data/videos/配膳ロボットで1人減らせるか/_取り込み/背景_第2回/sim_costsens.mp4
U14|73.534000|KIOXIA/r2r2r-data/videos/配膳ロボットで1人減らせるか/_取り込み/背景_第2回/sim_cut.mp4
U15|70.300000|KIOXIA/r2r2r-data/videos/配膳ロボットで1人減らせるか/_取り込み/背景_第2回/sim_entry2.mp4
U16|35.000000|KIOXIA/r2r2r-data/videos/series8_serving_sim_demo/series8_serving_sim_demo.mp4
U17|15.367000|PixelstoMotors/デジタルツイン学習R2R2R/動画/何台入れたら店は変わる/src/sim_hotel.mp4
U18|21.834000|PixelstoMotors/デジタルツイン学習R2R2R/動画/何台入れたら店は変わる/src/sim_more.mp4

U2（画面収録 2026-02-22 12.43.13.mov）は一覧の画像には並べたが、一覧のファイルを書き出すときに失敗して、この表から抜けている。中身は、左にコードが流れるターミナル、右に作っている途中のサイトで、サイトの見出しが前の名前（ADAPT DESIGN）のままだったので使わなかった。

使ったのは、サイトの試算のページを操作した録画（U16）、費用の試算を切り替えた録画（U12）、Unity でアームを1台動かした画面（U3）、たくさんのアームを並べて動かした画面（U4・U7）。

v2：縦2つ・縦3つ・4つに分けた画面を、全体の約3割にする

全面の映像だけでは単調なので、画面を縦2つ・縦3つ・4つに分けて動きを出すよう頼まれた。分けた画面は全体の30%くらいに、という指定だった。

分けた画面は、それぞれの枠を画面の外から滑り込ませ、枠ごとに0.12秒ずつずらした。動きは0.45秒で、終わりにかけてゆっくり止まる形（1−(1−t)³）にした。

• ねらい：全面の映像が続くと、どれも同じ店の録画に見える。並べることで、店・病院・アーム・画面を同時に見せる
• 変わったこと：42.0秒のうち13.5秒（32%）が分けた画面になった。全面は9カット
• 見込める効果：最初の画面を見ている数秒のうちに、シミュレーションと実機の両方をやっているのが伝わる。測るのは、入口のカードを押した数

v3：2つに分けた画面の右を Unity に、アームの左の空きを切る

v2 を見て、縦2つの画面の右を実機ではなく Unity の映像にするよう指示があった。左は Unity のアーム1台なので、右は同じ Unity の、たくさんのアームを並べた画面（デジタルツイン_260417.mov）にした。

真上から撮ったアームの録画は、左にカッターマットの何もない所が大きく空いていると指摘があった。アームと箱が真ん中に来るように、768×432 で切り取って寄せた。全面と4つに分けた画面の両方で直した。

v3 の割合は、シミュレーション29.25秒（70%）・アーム8.1秒（19%）・操作画面4.6秒（11%）。縦2つの画面の右を Unity に替えたので、アームの割合は依頼の25%より少なくなった。

build_v2.py（v2・v3 を作るコード。v3 の値のまま）

import subprocess, os
S='/tmp/fv/s'; O='/tmp/fv/seg2'
def run(a): subprocess.run(['ffmpeg','-nostdin','-v','error','-y']+a, check=True)
def prep(src, ss, t, sp, crop, w, h, out, outdur):
    vf=f"setpts=PTS/{sp}"
    if crop: vf+=f",crop={crop}"
    vf+=f",scale={w}:{h}:force_original_aspect_ratio=increase,crop={w}:{h},fps=30,format=yuv420p,tpad=stop_mode=clone:stop_duration=2"
    run(['-ss',str(ss),'-t',str(t),'-i',f'{S}/{src}','-an','-vf',vf,'-t',str(outdur),'-c:v','libx264','-preset','veryfast','-crf','18',out])
def full(n, src, ss, t, sp, crop=None):
    prep(src, ss, t, sp, crop, 1920, 1080, f'{O}/{n}.mp4', t/sp)
def split(n, dur, panels):
    # panels: (src, ss, t, sp, crop, x, y, w, h, dx, dy)  dx/dy: direction of entry (-1,0,1)
    ins=[]; parts=[]
    for i,(src,ss,t,sp,crop,x,y,w,h,dx,dy) in enumerate(panels):
        p=f'{O}/{n}_p{i}.mp4'; prep(src,ss,t,sp,crop,w,h,p,dur); ins+=['-i',p]
    fc=f"color=c=black:s=1920x1080:r=30:d={dur}[b0];"
    for i,(src,ss,t,sp,crop,x,y,w,h,dx,dy) in enumerate(panels):
        d=0.12*i; e=f"(1-pow(1-clip((t-{d})/0.45,0,1),3))"
        X=f"{x}-(1-{e})*{dx}*1920" if dx else str(x); Y=f"{y}-(1-{e})*{dy}*1080" if dy else str(y)
        fc+=f"[b{i}][{i+1}:v]overlay=x='{X}':y='{Y}':eval=frame:shortest=0[b{i+1}];"
    fc+=f"[b{len(panels)}]format=yuv420p"
    run(['-f','lavfi','-i',f'color=c=black:s=16x16:d={dur}']+ins+['-filter_complex',fc.replace('[b0];','[b0];',1).replace(f"color=c=black:s=1920x1080:r=30:d={dur}[b0];",f"[0:v]scale=1920:1080,fps=30[b0];"),'-t',str(dur),'-c:v','libx264','-preset','veryfast','-crf','18',f'{O}/{n}.mp4'])
G=6
W2=(1920-G)//2; W3=(1920-2*G)//3; H2=(1080-G)//2
full('01','c166r.mp4',0,12,2)
full('02','a361.mp4',10,28,8)
# 縦2分割：Unity のアーム1台｜Unity のたくさんのアーム
split('03',4.5,[('u_arm.mov',2,26,6,'1000:910:330:90',0,0,W2,1080,0,-1),
                ('u_grid.mov',0,48,10,'860:930:440:80',W2+G,0,1920-W2-G,1080,0,1)])
full('04','h158.mp4',40,16,4,'1360:765:0:160')
full('05','l452.mp4',4,18,4,'1240:698:80:288')
full('06','ui_s8.mp4',4,7,2,'1360:765:120:0')
# 縦3分割：ハコブくん・病院の1便・3Dの店
split('07',4.5,[('c166l.mp4',4,18,4,None,0,0,W3,1080,0,-1),
                ('l491.mp4',3,36,8,'1360:765:0:160',W3+G,0,W3,1080,0,1),
                ('uob.mp4',0,27,6,'1600:900:100:120',2*(W3+G),0,1920-2*(W3+G),1080,0,-1)])
full('08','a450.mp4',0,28,8,'768:432:430:175')
# 4分割：Unity のたくさんのアーム・実機・試算の画面・病院
split('09',4.5,[('u_many.mp4',0,9,2,'1440:860:70:65',0,0,W2,H2,-1,0),
                ('a450.mp4',28,16,4,'768:432:430:175',W2+G,0,1920-W2-G,H2,1,0),
                ('ui_cost.mp4',0,27,6,'1080:608:440:20',0,H2+G,W2,1080-H2-G,-1,0),
                ('h158.mp4',150,18,4,'1360:765:0:160',W2+G,H2+G,1920-W2-G,1080-H2-G,1,0)])
full('10','c166r.mp4',30,7,2)

01.mp4 6.000000
02.mp4 3.500000
03.mp4 4.500000
04.mp4 4.000000
05.mp4 4.500000
06.mp4 3.500000
07.mp4 4.500000
08.mp4 3.500000
09.mp4 4.500000
10.mp4 3.500000
all.mp4 42.000000

書き出し（PC用・スマホ用・最初の絵）

ffmpeg -nostdin -v error -y -i seg2/all.mp4 -an -vf scale=1600:900 -c:v libx264 -preset slow -crf 27 -pix_fmt yuv420p -movflags +faststart -g 60 top_fv_v3.mp4
ffmpeg -nostdin -v error -y -i seg2/all.mp4 -an -vf scale=960:540 -c:v libx264 -preset slow -crf 28 -pix_fmt yuv420p -movflags +faststart -g 60 top_fv_v3_sp.mp4
ffmpeg -nostdin -v error -y -ss 0.4 -i top_fv_v3.mp4 -frames:v 1 -c:v libwebp -quality 70 top_fv_v3_poster.webp

-rw-r--r-- 1 root root 4043733 Nov 13 11:47 top_fv_v3.mp4
-rw-r--r-- 1 root root   17204 Nov 13 11:47 top_fv_v3_poster.webp
-rw-r--r-- 1 root root 1823333 Nov 13 11:47 top_fv_v3_sp.mp4

R2 へは upload_media.py で入れた。

入れる 3・入っている 7・名前の重なり 0・合計 5.9MB
  3/3
おわり

作業ログ ― 見出しの位置と、説明文を書き直す

見出しは左寄せのまま、縦の真ん中に

見出しを上に置く案と、真ん中に置く案を、左下のボタンで切り替えられるようにした。答えは真ん中だったが、Claude は左右も真ん中にそろえてしまい、縦の位置のことで、左寄せはそのままだと言い直された。説明文はその下に置いた。

説明文の書き直し：最初の4案

説明文も別の案を出すよう言われ、最初は今の文を少し変えた案を出した。そのあと、こう指示があった。

説明文は一から考え直してください。FVを見た人がページの先に進んだり、問い合わせボタンを押したくなる文章にしてください。

テーマを「ロボットが現場で止まる所を、入れる前に知る」の1つに絞り、読んだ人が自分の現場を思い浮かべた所で文が終わるようにした。研究室のことは、下の入口のカードに任せて書かなかった。

E を土台に、止まる場所ではない言い方を4つ

E を土台にし、後半の「止まる場所」を別の言い方にするよう指示があった。

確認用のページは E1 を開いた状態で見てもらい、そのまま公開した。E1 の「一日」は、後ろに流れている病院の1日の早回しの映像と重なる。

• ねらい：やっていることの説明ではなく、ロボットを入れようとしている人が困ることから入る
• 変わったこと：「2つを進めています」で始まる説明から、「思っていたのと違った」で始まる2文に
• 見込める効果：自分の現場のことだと思った人が、下へ進むかメッセージを送る。測るのは、トップから先へ移った数と、メッセージの数

作業ログ ― 「このサイトの楽しみ方」を動画の上に移す

トップには、記録を AI に読ませて聞く使い方を案内する帯「このサイトの楽しみ方」がある（2026-11-03 に作った）。依頼の最初は「そのまま」だったが、動画の下にあると最初の画面から外れるので、FV の上に置く案を出すよう言われた。右寄せがバランスがよいかもしれない、とも添えてあった。

並べた置き場所は5つ。

白い帯の案を見て、半透明の案も出すよう言われ、そのあと真ん中の案も足した。決まったのは glassc。閉じているときは白い枠と白い文字で、開くと中の質問と AI のボタンが読めるように、背景を少し濃い半透明に切り替える。

作業ログ ― 本番のトップに入れる

確認用のページを消し、src/pages/index.astro の最初の画面を置き換えた。

index.astro の差分（前のトップ cab3977 から、公開した 67b83ba まで）

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5914ebb..c144328 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -82,28 +82,43 @@ const jsonLd = [
   description={DESC}
   ogImage="/site/ffb300c2-1071-4714-978c-87d386d5dfd3.png" path="/" jsonLd={jsonLd}>
 

ほかに、TopAiGuide.astro の頭の説明と、p2m-site の README.md に「トップの最初の画面」の節を足した。

67b83ba トップの最初の画面を早回しの動画に（背景 top_fv_v3・黒の乗算・タイトルは縦の真ん中・説明文を新しい文に・このサイトの楽しみ方を動画の上の真ん中に半透明で）。確認用の /preview/top-fv は消した

公開のあと、トップの HTML に動画の名前と説明文と案内の帯があること、確認用のページが 404 になったことを確かめた。

class="guide-band"
top_fv_v3.mp4
入れたあとの一日
preview 404

公開の前の数字と、これから比べるもの

効果は、まだ測っていない。前の画面の11月8日から13日の数字を、サイトの計測（/api/ev-stats、人の操作があった表示だけ）から残しておく。

表示が7回しかないので、2週間後に比べても差は偶然の範囲かもしれない。そのときは、期間を延ばして見る。