--- title: "初めて来た人に先へ進んでもらう ― 研究サイトのトップを3Dと実機の早回し動画に" slug: top-first-view-sim-video date: 2026-11-13 day: 501 meta_description: "研究サイトの最初の画面は、文字と写真2枚より、ためてきたシミュレーションと実機の録画の早回し動画のほうが、何をしている所かが伝わる。pixelstomotors.com のトップを42秒の動画に替え、説明文も書き直した。" tags: [サイト, デザイン, トップページ, 動画, ffmpeg] series: "ひとり研究所の裏側" cover: "/media/LOG501_cover.jpg" --- **研究サイトの最初の画面（ファーストビュー）は、文字と写真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 にためていたが、トップには使っていなかった。 【画像】LOG501_01_before_top.png 直す前のトップの最初の画面。白地に見出しと説明文、その下に導入シミュレーションと研究室の写真のカードが2枚 始まりは、この依頼だった。参考として、別のサイトのトップの画面を録画した動画が添えてあった。 > TOPのFVセクションを動画に切り替えようと考えています。ヘッダーは変更しません。サイトの楽しみ方はそのままです。動画は今まで保管してきたものをベースにします。シミュレーションが65%、アーム動画が25%、サービス操作画面10%。本人は出ません。動画の候補を集めて編集して提案をお願いします。最初は3Dにハコブくん動画が表示されるようにしてください。基本は早回しの動画です。タイトルが見やすいように、FV全体に黒い乗算をかけてください。タイトルや説明文は勝手に変えないでください。 やったことの全体はこうなる。 | 段階 | やったこと | 結果 | |---|---|---| | 候補を集める | KIOXIA と iCloud から録画を探し、4コマずつの一覧の画像を作る | 録画74本と、画面を操作した録画18本 | | v1 | 11本を2〜13倍の早回しにしてつなぐ | 44.6秒。全面の映像だけ | | v2 | 縦2つ・縦3つ・4つに分けた画面を3か所入れる | 42.0秒。分けた画面は13.5秒（32%） | | v3 | 2つに分けた画面の右を Unity に、真上から撮ったアームの左の空きを切る | 今の公開の版 | | 文字の位置 | 上・真ん中を並べて見る | 見出しは左寄せのまま、縦の真ん中 | | 説明文 | 一から書き直した4案、その中の1案を言い換えた4案 | E1 で公開 | | このサイトの楽しみ方 | 動画の右上・上の帯・下・半透明・真ん中を並べて見る | 動画の上、左右の真ん中に半透明で | この下に、作業の記録をそのまま残す。 ## 作業ログ ― 保管してきた録画から、トップの動画の候補を集める ### FV と乗算の言葉 FV（ファーストビュー）は、ページを開いたときに、下へ動かさずに見える最初の画面のこと。乗算は、色を掛け合わせて重ねる重ね方で、上に黒を乗算で重ねると、下の動画の色を残したまま全体が暗くなる。サイトでは CSS の [mix-blend-mode](https://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode) に multiply を指定して重ねている。 | 言葉 | このサイトでの使い方 | |---|---| | FV | トップの最初の画面。ヘッダー（上の帯）の下から、画面の高さいっぱい | | 乗算 | 動画の上に黒の半透明の膜を multiply で重ね、白い文字を読みやすくする | | R2 | Cloudflare の [R2](https://developers.cloudflare.com/r2/)。記事の画像と動画を置く所。GitHub には入れない | ### 候補の一覧：iCloud と KIOXIA の録画74本 録画は、記事の作業フォルダ（iCloud）の LOG ごとの画像フォルダと、動画の制作フォルダ、KIOXIA の service_sim/unity にあった。KIOXIA には、試算を回したときの録画が1本40〜50MB で数百本あるので、そこからは選ばず、記事に載せるために切り出し済みのものを候補にした。一覧は、1本ごとに4コマを切り出して並べた画像（sheet_0〜7.jpg）にした。 【画像】LOG501_02_candidates.jpg 候補の一覧の1枚。病院の搬送ロボットの1日の早回しや、ファミレスの配膳ロボットを真上から見た録画のコマが並ぶ #### meta.txt（候補74本の長さと大きさ） ```text 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 9|104.656667|1236,720|サービスロボット導入シミュレーション/LOG364_images/LOG364_v5_run5_return_lane.mp4 10|51.100000|1258,720|サービスロボット導入シミュレーション/LOG374_images/LOG374_v9_before_drinkbar.mp4 11|390.800000|2560,1100|サービスロボット導入シミュレーション/LOG409_images/LOG409_compare_p2_st3_r0_vs_r2.mp4 12|392.667000|2560,1150|サービスロボット導入シミュレーション/LOG415_images/LOG415_03_compare_p4_futsu_r0_vs_r2.mp4 13|487.134000|2560,1156|サービスロボット導入シミュレーション/LOG415_images/LOG415_04_compare_p2_futsu_r0_vs_r2.mp4 14|120.000000|3840,1200|サービスロボット導入シミュレーション/LOG452_images/LOG452_09_p6_r2_r5_slow.mp4 15|61.500000|3840,1200|サービスロボット導入シミュレーション/LOG452_images/LOG452_10_p7_r2_r5_slow.mp4 16|66.334000|1920,1080|サービスロボット導入シミュレーション/LOG452_images/LOG452_11_p6_r2_focus.mp4 17|120.000000|1920,1180|サービスロボット導入シミュレーション/LOG452_images/LOG452_12_p6_r2_slow.mp4 18|61.500000|1920,1180|サービスロボット導入シミュレーション/LOG452_images/LOG452_13_p7_r2_slow.mp4 19|61.500000|3840,1280|サービスロボット導入シミュレーション/LOG456_images/LOG456_10_staff_moves_robot.mp4 20|61.500000|3840,1280|サービスロボット導入シミュレーション/LOG456_images/LOG456_11_straight_entry.mp4 21|61.500000|3840,1280|サービスロボット導入シミュレーション/LOG465_images/LOG465_03_straight_entry_people_avoid.mp4 22|61.500000|3840,1280|サービスロボット導入シミュレーション/LOG466_images/LOG466_03_compare_serve_bus_before.mp4 23|61.500000|3840,1280|サービスロボット導入シミュレーション/LOG466_images/LOG466_04_compare_serve_bus_squeeze.mp4 24|61.500000|3840,1280|サービスロボット導入シミュレーション/LOG475_images/LOG475_03_compare_before.mp4 25|61.500000|3840,1280|サービスロボット導入シミュレーション/LOG475_images/LOG475_06_compare_after.mp4 26|59.280000|1920,1080|サービスロボット導入シミュレーション/LOG491_images/LOG491_11_one_trip_blue_5x.mp4 27|145.560000|1920,1080|サービスロボット導入シミュレーション/LOG491_images/LOG491_12_one_trip_red_5x.mp4 28|30.000000|1920,1080|サービスロボット導入シミュレーション/hospital/closeup162/closeup162_load.mp4 29|32.000000|1920,1080|サービスロボット導入シミュレーション/hospital/closeup162/closeup162_receive.mp4 30|30.000000|1920,1080|サービスロボット導入シミュレーション/hospital/closeup163/closeup163_load.mp4 31|35.000000|1920,1080|サービスロボット導入シミュレーション/hospital/closeup163/closeup163_receive.mp4 32|34.000000|1920,1080|サービスロボット導入シミュレーション/hospital/closeup166/closeup166_load.mp4 33|39.500000|1920,1080|サービスロボット導入シミュレーション/hospital/closeup166/closeup166_receive.mp4 34|2049.680000|1920,1080|サービスロボット導入シミュレーション/hospital/floor143/hospital143_1日_早回し_30x.mp4 35|54.800000|1920,1080|サービスロボット導入シミュレーション/hospital/flow141/hospital141_1便目_通し_5x.mp4 36|1290.360000|1920,1080|サービスロボット導入シミュレーション/hospital/flow141/hospital141_1日_早回し_30x.mp4 37|1931.240000|1920,1080|サービスロボット導入シミュレーション/hospital/flow154/hospital154_1日_早回し_30x.mp4 38|1928.120000|1920,1080|サービスロボット導入シミュレーション/hospital/flow155/hospital155_1日_早回し_30x.mp4 39|149.560000|1280,720|サービスロボット導入シミュレーション/hospital/flow155/hospital155_切り出しの見本_3場面.mp4 40|145.560000|1920,1080|サービスロボット導入シミュレーション/hospital/flow158/hospital158_1便の通し_赤_5x.mp4 41|59.280000|1920,1080|サービスロボット導入シミュレーション/hospital/flow158/hospital158_1便の通し_青_5x.mp4 42|1936.440000|1920,1080|サービスロボット導入シミュレーション/hospital/flow158/hospital158_1日_早回し_30x.mp4 43|1930.920000|1920,1080|サービスロボット導入シミュレーション/hospital/people147/hospital147_1日_早回し_30x.mp4 44|1927.880000|1920,1080|サービスロボット導入シミュレーション/hospital/staff157/hospital157_1日_早回し_30x.mp4 45|145.560000|1920,1080|サービスロボット導入シミュレーション/hospital/tags161/hospital161_1便の通し_赤_5x.mp4 46|59.280000|1920,1080|サービスロボット導入シミュレーション/hospital/tags161/hospital161_1便の通し_青_5x.mp4 47|1936.440000|1920,1080|サービスロボット導入シミュレーション/hospital/tags161/hospital161_1日_早回し_30x.mp4 48|182.834000|1280,720|フィジカルAI研究室を作る/LOG358_images/LOG358_v1_side_180924.mp4 49|172.315278|854,480|フィジカルAI研究室を作る/LOG358_images/LOG358_v2_side_182013_182130.mp4 50|77.717188|1280,720|フィジカルAI研究室を作る/LOG358_images/LOG358_v3_side_183245.mp4 51|106.463490|1280,720|フィジカルAI研究室を作る/LOG361_images/LOG361_v1_drag_100713.mp4 52|43.839271|1280,720|フィジカルAI研究室を作る/LOG361_images/LOG361_v2_teach_replay_side.mp4 53|202.686979|854,480|フィジカルAI研究室を作る/LOG361_images/LOG361_v3_success_181602.mp4 54|212.346493|854,480|フィジカルAI研究室を作る/LOG363_images/LOG363_v1_D_190239.mp4 55|193.770521|854,480|フィジカルAI研究室を作る/LOG363_images/LOG363_v2_E_191603.mp4 56|97.802448|1280,720|フィジカルAI研究室を作る/LOG436_images/LOG436_01_hold_step.mp4 57|107.926354|1280,720|フィジカルAI研究室を作る/LOG436_images/LOG436_02_hold_ahead.mp4 58|98.639000|960,540|フィジカルAI研究室を作る/LOG446_images/LOG446_01_jog_probe_hold.mp4 59|117.795000|960,540|フィジカルAI研究室を作る/LOG446_images/LOG446_02_gamepad_drift.mp4 60|60.163000|960,540|フィジカルAI研究室を作る/LOG446_images/LOG446_03_gamepad_stuck.mp4 61|44.500000|1280,720|フィジカルAI研究室を作る/LOG450_images/LOG450_01_success_lift_by_gamepad.mp4 62|17.400000|1280,720|フィジカルAI研究室を作る/LOG450_images/LOG450_02_failure_block_tilted.mp4 63|10.042000|848,1056|動画/_FV_ハコブくん/公開用/hakobu_fv_voice_eleven.mp4 64|14.134000|1920,1080|動画/何台入れたら店は変わる/src/sim_buffet.mp4 65|10.400000|1920,1080|動画/何台入れたら店は変わる/src/sim_crowd.mp4 66|15.367000|1920,1080|動画/何台入れたら店は変わる/src/sim_hotel.mp4 67|21.834000|1920,1080|動画/何台入れたら店は変わる/src/sim_more.mp4 68|17.567000|1920,1080|動画/何台入れたら店は変わる/src/sim_one.mp4 69|17.800000|1920,1080|動画/何台入れたら店は変わる/src/sim_open.mp4 70|10.434000|1920,1080|動画/何台入れたら店は変わる/src/sim_patrol.mp4 71|8.467000|1920,1080|動画/何台入れたら店は変わる/src/sim_table.mp4 72|19.134000|1920,1080|動画/何台入れたら店は変わる/src/sim_two.mp4 73|30.000000|1920,1080|動画/何台入れたら店は変わる/src/unity_oblique.mp4 74|30.000000|1920,1080|動画/何台入れたら店は変わる/src/unity_top.mp4 ``` ### 最初のハコブくんは、3Dの看護師から荷物を受け取る寄りの場面 最初に映すのは、病院の搬送ロボット「ハコブくん」を3Dで作った回の、看護師から荷物を受け取る寄りの録画（closeup166_receive.mp4）にした。ハコブくんの顔の画面と、看護師の手元が大きく映る。終わりも同じ録画の後ろの部分にして、くり返しの頭につながるようにした。 手が映る録画（ゲームパッドでアームを動かした LOG436・LOG446）は、本人が映る扱いにして外した。 ### v1：11本を2〜13倍の早回しにしてつなぐ 動画は [ffmpeg](https://ffmpeg.org/) で作った。1本ごとに、使う区間を切り出し、速さを上げ、試算の画面の右にある数字の表のように要らない所を切り取ってから、1920×1080 にそろえてつないだ。 #### plan.txt（v1 のつなぎ順。番号・元・始まりの秒・長さ・速さ・切り取り・種類） ```text 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 を切ってつなぐコマンド ```bash 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 ``` ```text 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 バイト。 【画像】LOG501_03_v1_frames.jpg v1 から9コマを切り出して並べたもの。病院の受け渡し、実機のアーム、病院の1日、ファミレス、試算の画面が並ぶ 確認用のページ /preview/top-fv（検索に出さない設定）を作り、見出しと説明文はそのまま白い文字にして、動画の上に重ねた。黒の乗算は、文字とカードのある下の方を少し濃くした。 ## 作業ログ ― 画面を操作した録画を足し、分けた画面を3割入れる ### 画面を操作した録画18本 v1 を見たあと、こう聞かれた。 > 他にもサイトやアプリの画面操作している動画なかった？ 画面収録やデモの名前の付いた録画を探し直し、18本を一覧にした。 #### ui/meta.txt（画面を操作した録画の候補。番号|長さ（秒）|場所） ```text 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つに分けた画面の両方で直した。 【画像】LOG501_04_split_frames.jpg v3 の分けた画面3か所。左から、Unity のアーム1台と、たくさんのアーム。ハコブくんの暗証番号の画面と、病院の1便と、3Dの店。たくさんのアーム・真上のアーム・費用の試算・病院の1日の4つ v3 の割合は、シミュレーション29.25秒（70%）・アーム8.1秒（19%）・操作画面4.6秒（11%）。縦2つの画面の右を Unity に替えたので、アームの割合は依頼の25%より少なくなった。 【図解】LOG501_fv_timeline.html #### build_v2.py（v2・v3 を作るコード。v3 の値のまま） ```python 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) ``` ```text 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用・スマホ用・最初の絵） ```bash 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 ``` ```text -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 で入れた。 ```text 入れる 3・入っている 7・名前の重なり 0・合計 5.9MB 3/3 おわり ``` ## 作業ログ ― 見出しの位置と、説明文を書き直す ### 見出しは左寄せのまま、縦の真ん中に 見出しを上に置く案と、真ん中に置く案を、左下のボタンで切り替えられるようにした。答えは真ん中だったが、Claude は左右も真ん中にそろえてしまい、縦の位置のことで、左寄せはそのままだと言い直された。説明文はその下に置いた。 ### 説明文の書き直し：最初の4案 説明文も別の案を出すよう言われ、最初は今の文を少し変えた案を出した。そのあと、こう指示があった。 > 説明文は一から考え直してください。FVを見た人がページの先に進んだり、問い合わせボタンを押したくなる文章にしてください。 テーマを「ロボットが現場で止まる所を、入れる前に知る」の1つに絞り、読んだ人が自分の現場を思い浮かべた所で文が終わるようにした。研究室のことは、下の入口のカードに任せて書かなかった。 | 案 | 文 | |---|---| | 今の文 | そのために、いま2つを進めています。店に入れる前に何が起きるかを確かめることと、ロボットに動きを覚えさせること。前提・結果・コードは、すべて公開しています。 | | B | 入れたのに、使われなくなるロボットがあります。止まるのは性能ではなく、人とすれ違う通路や、手を貸すひと手間。それを、現場に入れる前に数えています。 | | C | 店や病院を人の動きごと3Dで建て直し、ロボットがどこで止まり、誰が手を貸すのかを、入れる前に数えます。あなたの現場なら、どこで止まるでしょうか。 | | D | ロボットは、入れてからでは遅い。止まる場所も、手を貸す回数も、入れる前に数えられます。 | | E | 「思っていたのと違った」を、入れる前に終わらせる。現場を人ごと再現して、ロボットが止まる場所を先に見つけます。 | ### E を土台に、止まる場所ではない言い方を4つ E を土台にし、後半の「止まる場所」を別の言い方にするよう指示があった。 【画像】LOG501_06_desc_variants.png E1〜E4 を確認用のページで並べたもの。1行目はどれも「思っていたのと違った」を、入れる前に終わらせる | 案 | 2行目 | |---|---| | E1 | 現場を人ごと再現して、入れたあとの一日を、先に見ておきます。 | | E2 | 現場を人ごと再現して、ロボットと人がどうすれ違うかを、先に確かめます。 | | E3 | 現場を人ごと再現して、入れたあとに起きることを、先に数えます。 | | E4 | 現場を人ごと再現して、つまずく前に手を打ちます。 | 確認用のページは E1 を開いた状態で見てもらい、そのまま公開した。E1 の「一日」は、後ろに流れている病院の1日の早回しの映像と重なる。 - ねらい：やっていることの説明ではなく、ロボットを入れようとしている人が困ることから入る - 変わったこと：「2つを進めています」で始まる説明から、「思っていたのと違った」で始まる2文に - 見込める効果：自分の現場のことだと思った人が、下へ進むかメッセージを送る。測るのは、トップから先へ移った数と、メッセージの数 ## 作業ログ ― 「このサイトの楽しみ方」を動画の上に移す トップには、記録を AI に読ませて聞く使い方を案内する帯「このサイトの楽しみ方」がある（2026-11-03 に作った）。依頼の最初は「そのまま」だったが、動画の下にあると最初の画面から外れるので、FV の上に置く案を出すよう言われた。右寄せがバランスがよいかもしれない、とも添えてあった。 並べた置き場所は5つ。 | 案 | 置き場所と見た目 | |---|---| | over | 動画の右上に、白い帯で重ねる | | glass | 同じ位置に、入口のカードと同じすりガラス（半透明）で | | glassc | すりガラスで、左右の真ん中 | | top | ヘッダーのすぐ下の帯。動画はその分低くする | | below | 前と同じ、FV の下 | 白い帯の案を見て、半透明の案も出すよう言われ、そのあと真ん中の案も足した。決まったのは glassc。閉じているときは白い枠と白い文字で、開くと中の質問と AI のボタンが読めるように、背景を少し濃い半透明に切り替える。 【画像】LOG501_05_after_top.png 公開したトップの最初の画面。3Dの病院で看護師とハコブくんが映る動画の上に、左寄せの見出しと説明文、上の真ん中に半透明の「このサイトの楽しみ方」、下に半透明の入口のカード2枚 【画像】LOG501_07_after_sp.png スマホで見たトップ。左は最初の画面、右は「このサイトの楽しみ方」を開いたところ ## 作業ログ ― 本番のトップに入れる 確認用のページを消し、src/pages/index.astro の最初の画面を置き換えた。 #### index.astro の差分（前のトップ cab3977 から、公開した 67b83ba まで） ```diff 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}> - -
-
-

現場で人が受け入れて、
使い続けられるロボットを。

-

そのために、いま2つを進めています。店に入れる前に何が起きるかを確かめることと、ロボットに動きを覚えさせること。前提・結果・コードは、すべて公開しています。

-
-
- - Unityで建てたファミレスを斜めから見たところ - 入れる前に確かめるサービスロボット導入シミュレーション - - - 机の上のロボットアームと、赤いブロックと白い箱 - 動きを覚えさせるフィジカルAI研究室 - -
-
- - - + 背景は保管してきた動画をつないだ早回し（R2 の top_fv_v3*.mp4。シミュレーション約3分の2・アーム約4分の1・サービスの操作画面約1割、分割画面が約3割。本人は映さない。最初と最後は3Dのハコブくん）。 + つなぎ順と作り方は KIOXIA の videos/FV_トップ動画/README.md・build_v2.py。全体に黒の乗算をかけて文字を読みやすくする。ヘッダーは変えないため、動画はヘッダーの下から始める。 + タイトルは左寄せのまま縦の真ん中、説明文はその下。「このサイトの楽しみ方」は動画の上、左右の真ん中に半透明で重ねる（2026-11-13 エイイチ）。 + 前の FV は、文字と2枚の写真のカード（git の 2026-11-13 より前）。その前はハコブくんの動画（media の hakobu_fv_voice_eleven.mp4・消さずに残してある） --> +
+
+ + +
+
+

現場で人が受け入れて、
使い続けられるロボットを。

+

「思っていたのと違った」を、入れる前に終わらせる。
現場を人ごと再現して、入れたあとの一日を、先に見ておきます。

+
+
+ + 入れる前に確かめるサービスロボット導入シミュレーション + + + 動きを覚えさせるフィジカルAI研究室 + +
+
+
+ +
+
+
@@ -219,22 +234,40 @@ const jsonLd = [