---
title: "研究サイトの入口で立ち位置を伝える ― トップの見出しを1文に決め直した"
slug: top-first-view-one-sentence-stance
date: 2026-11-08
day: 476
meta_description: "Pixels to Motors のトップの最初の画面を、立ち位置の1文「現場で人が受け入れて、使い続けられるロボットを。」と、サービスロボット導入シミュレーションとフィジカルAI研究室への入口2枚に作り直した。同じ1文をタイトル・説明文・AI 向けの案内にもそろえた。"
tags: [サイト, デザイン, トップページ, ファーストビュー, llms.txt, 構造化データ, フィジカルAI]
series: "ひとり研究所の裏側"
cover: "/media/LOG476_cover.jpg"
---

**研究サイト Pixels to Motors（pixelstomotors.com ）のトップの最初の画面を、「現場で人が受け入れて、使い続けられるロボットを。」という立ち位置の1文と、それを示す2つの取り組み（サービスロボット導入シミュレーションとフィジカルAI研究室）への入口に作り直した。** どちらか1つのシリーズを主役にせず、立ち位置を言ってから2つを証拠として並べたのは、トップに来た人の滞在が中央値18秒と短く、AI がこのサイトを説明するときの言葉もトップから取られているからだ。

作り直したことで、次のことが変わった。

- トップを開いた人が、PC では最初の画面の中で「何を目指しているか」と「そのために進めている2つ」を両方見られる。前の画面は、見出しはシミュレーション、本文は机の上のロボットアーム、画像は病院の搬送ロボットと、3つが別々の話をしていた
- AI がこのサイトを説明するときに拾う4か所（ページのタイトル・説明文・構造化データ・AI 向けの案内 llms.txt）が、同じ1文で始まるようになった。前は4か所とも言っていることが違った
- 見出しを決めてから公開まで（21:38 に1文を決めて、21:45 に公開）は7分。そこに至るまでの調べ直しと案づくりは、21:21 から約17分。前の見出しを決めたときの時間は測っていない
- 効果（滞在・2つのシリーズへの移動・AI に紹介される言い方）は、まだ測っていない。2週間後に同じ数字で見る

ファーストビュー（FV）は、ページを開いて最初に見える画面のこと。Pixels to Motors はフィジカルAI（AI がロボットなどの体を通して現実に作用する技術）の研究記録のサイトで、記事の大半は作業ログだ。人が全部を読むより、AI に読ませて使ってもらう前提で作っている。そのトップの最初の画面を変えたいと思ったのは、いまのサイトの主な取り組みが「フィジカルAI研究室」と「サービスロボット導入シミュレーション」の2つになり、前の画面がそれに追いついていなかったからだ。

【画像】LOG476_01_old_fv_phone.jpg 作り直す前のトップの最初の画面（スマホ）。見出しは「人とロボットの関わりをシミュレーションでデザインする」、本文は机の上のロボットアームの話、画像は病院の部屋にいる搬送ロボット

相談の初めはこうだった。

> サイトのFVの内容変更したいと思うけど、何がいいかな？今のメインはフィジカルAI研究所とサービスロボット導入シミュレーションになってる。

やったことの全体は次のとおり。

| 順 | やったこと | なぜ | 結果 |
|---|---|---|---|
| 1 | シミュレーションを主役にしたスマホの案を3つ作った | 最初に選んだ方向が「シミュレーションが主役」だったため | シミュレーションだけに寄りすぎ、サイト全体が見えなくなった |
| 2 | サイトの中身とアクセスを調べ、PC の案を3つ作った | PC で見る人が多く、2つのシリーズの読まれ方が違ったため | 「2つを同じ重さで並べる」案が候補になった |
| 3 | 別の角度（だれに何を決めてほしいか・AI にどう紹介されるか）から調べ直した | 数字だけで決めると、サイトの目的が抜けるため | 主役は2つのシリーズではなく「立ち位置の1文」だと分かった |
| 4 | 1文を選んでもらい、トップと AI 向けの4か所にそろえて公開した | 1文が決まらないと、画面も AI への説明も決まらないため | 21:45 に公開した |

この先に目指しているのは、フィジカルAIの技術で作られたロボットが、現場で使い続けられるためのサービスやプロダクトを作る研究所だ。ただ、どこに絞るかを決めるのはまだ早い。

> 最終的にはフィジカルAI技術でつくられたロボットが現場で使い続けられるためのサービスやプロダクトをつくっていくための研究所にします。

> じぶんが目指すべき方向がわかったらもっと事業を絞ってフォーカスして集中する必要がありますが、今はまだ明確にするタイミングではない

なので、最初の画面ではどちらか1つに絞らず、目指す先を1文で言って、いま進めている2つを並べる形にした。


## 作業ログ ― 最初の案はシミュレーションだけに寄りすぎた

### 前の最初の画面は、見出し・本文・画像が別の話をしていた

最初に、前の画面の何が問題かを整理した。3つの要素が、それぞれ別のシリーズを指していた。

| 要素 | 書いてあったこと | 指していたシリーズ |
|---|---|---|
| 見出し | 人とロボットの関わりをシミュレーションでデザインする | サービスロボット導入シミュレーション |
| 本文 | 机の上のロボットアームでお手本のデータを集め、AIに学習させ、動かして確かめる | フィジカルAI研究室 |
| 画像（動画） | 病院の部屋にいる搬送ロボット（hakobu_fv_voice_eleven.mp4） | 薬剤搬送ロボットハコブくん |

方向として3つを出した。シミュレーションを主役にする（A）、研究室を主役にする（B）、2つをつなぐ軸を主役にする（C）。エイイチは A を選んだ。

### スマホの案3つ：動く店・止まる場所・数字

A の中で「何を主役にするか」を変えて、スマホの最初の画面を3つ作った。案はデザインのキャンバス（Claude の Artifact の Design の形。画面の案を並べて見比べられる）に置いた。

| 案 | 主役 | 見出し |
|---|---|---|
| A-1 | Unity で建てた店を斜めから見た画像 | 配膳ロボットを入れた店で、何が起きるか。 |
| A-2 | 受け渡し口の横でロボット2台が止まっている場面 | ロボットが止まる場所を、入れる前に見つける。 |
| A-3 | 試算の数字「99条件のうち38」 | 配膳ロボットを2台入れても、スタッフが減らない店がある。 |

【画像】LOG476_04_phone_drafts_a.jpg スマホの最初の画面の案3つ。左から A-1（Unity で建てた店を斜めから見た画像が主役）、A-2（受け渡し口の横で止まったロボット2台を丸で囲んだ画像が主役）、A-3（「99条件のうち38」の数字が主役）。3つともシミュレーションだけを見せている

A-3 の数字は、サイトの試算（src/lib/servingSim.ts）から読んだ。38,982条件のうち、店の形と混み具合の99の組み合わせで、ロボットを2台入れても回る人数が減らないのが38あった。

#### A-3 の数字を試算から読んだコマンドと出力

```
cat > /tmp/claude-0/n.mts <<'EOF'
import { twoRobots, CONDITIONS, headline } from '/home/claude/p2m-site/src/lib/servingSim.ts';
console.log(JSON.stringify({twoRobots, CONDITIONS, base:headline.base, same:headline.same}));
EOF
npx -y tsx /tmp/claude-0/n.mts 2>&1 | head -20
```

```
{"twoRobots":{"none":38,"one":61,"onePeak":[120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,150,150,150,150,150,150,150,150,150,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120],"total":99},"CONDITIONS":38982,"base":{"store":"family","staff":3,"robots":0,"arrivals_per_h":35,"mode":"serve","trays":1,"fragile_by":"any","registers":1,"dish_wait_mean":0.962,"dish_wait_p90":1.891,"cold_share":0.008,"entry_wait_mean":9.254,"full_wait_mean":1.13,"staff_wait_mean":7.891,"turn_mean":17.62,"walk_km_per_staff":3.977,"staff_util":0.823,"robot_util":0,"robot_share":0,"robot_bus_share":0,"collects":0,"rescues":0,"pauses":0,"fragile_robot":0,"groups":69.775,"pay_wait_mean":2.264,"ng":0},"same":{"store":"family","staff":3,"robots":2,"arrivals_per_h":35,"mode":"serve","trays":3,"fragile_by":"any","registers":1,"dish_wait_mean":1.042,"dish_wait_p90":2.055,"cold_share":0.015,"entry_wait_mean":2.721,"full_wait_mean":0.416,"staff_wait_mean":2.074,"turn_mean":6.065,"walk_km_per_staff":2.355,"staff_util":0.716,"robot_util":0.582,"robot_share":0.995,"robot_bus_share":0,"collects":0,"rescues":1.375,"pauses":40.5,"fragile_robot":36.375,"groups":70.35,"pay_wait_mean":2.264,"ng":0}}
```

3案を見たエイイチの問いはこうだった。

> うちのサイトはいろんなことをしてるけど、サービスロボット導入シミュレーションに完全に絞る感じ？

絞るわけではない。変えるのは最初に何を見せるかだけで、サイトの中身はそのまま。ただ、3案ともシミュレーションに寄せすぎていて、「シミュレーションの会社のサイト」に見えるおそれがあった。サイトの目的（Mission）の「誰でも同じ環境から研究を始められる」は研究室の側の話で、そこが最初の画面から消えていた。


## 作業ログ ― アクセスとサイトの中身を調べて PC の案を作った

エイイチの指示は「PC のデザインでもう一度考え直してください。サイトのことを今一度調査分析したのちに、デザインを作成するように」だった。

### サイトの計測から見た、人の読まれ方（2026-10-26〜11-08）

サイトの計測は、Claude につないだ部品（MCP の PTM）から読んだ。人の表示は、マウス・指・キーの操作があったものだけを数えている（機械の表示はその約9割ある）。

#### 週ごとの人の表示（site_usage・who=human）

| 週 | 人の表示 | 表示時間の中央値 | 75%まで読んだ割合 | スマホの割合 |
|---|---|---|---|---|
| 2026-11-02〜11-08 | 136 | 13秒 | 29% | 21% |
| 2026-10-26〜11-01 | 163 | 15秒 | 26% | 50% |

#### ページごとの人の表示（上位と、2つのシリーズの入口）

| ページ | 表示 | 表示時間の中央値 | 25%まで | 50%まで | 75%まで | 最後まで |
|---|---|---|---|---|---|---|
| /（トップ） | 33 | 18秒 | 73% | 48% | 30% | 18% |
| /gpu-buy-or-rent（研究室の導入比較ガイド） | 19 | 11秒 | 53% | 53% | 11% | 0% |
| /issues（課題地図） | 17 | 9秒 | 6% | 0% | 0% | 0% |
| /manga-archive | 11 | 8秒 | 9% | 0% | 0% | 0% |
| /message | 9 | 9秒 | 100% | 100% | 100% | 11% |
| /series8（導入シミュレーション） | 8 | 16秒 | 0% | 0% | 0% | 0% |
| /series6（フィジカルAI研究室） | 7 | 20秒 | 71% | 43% | 43% | 29% |
| /serving-robot-one-less-staff（配膳ロボットの導入前シミュレーション） | 2 | 22秒 | 50% | 50% | 50% | 50% |

#### トップからの移動（同じ期間）

| 移動 | 回数 |
|---|---|
| / → /series4 | 2 |
| / → /series6 | 2 |
| / → / | 2 |
| / → /message | 1 |
| / → /series1 | 1 |
| / → /issues | 1 |
| / → /record/gemini-api-4koma | 1 |
| / → /record/robot-research-data-index-and-provenance | 1 |

#### どこから来たか（人の表示・上位）

| 来た所 | 回数 |
|---|---|
| （直接・不明） | 134 |
| www.google.com | 70 |
| （サイト内） | 60 |
| search.yahoo.co.jp | 10 |
| www.linkedin.com | 7 |
| t.co | 4 |
| teams.public.onecdn.static.microsoft | 3 |
| chatgpt.com（リンクの印） | 3 |
| www.city.oga.akita.jp | 2 |
| www.bing.com | 2 |
| studio.design | 2 |
| com.google.android.googlequicksearchbox | 1 |
| com.linkedin.android | 1 |
| www.youtube.com | 1 |

#### AI の利用者の依頼で読まれた数（kpi）

| 週 | AI の依頼で読まれた数 | うち ChatGPT-User | うち Claude-User | AI のリンクから来た人 |
|---|---|---|---|---|
| 2026-10-26 | 55 | 52 | 3 | 0 |
| 2026-11-02 | 61 | 45 | 16 | 3（ChatGPT） |

日ごとの「よく読まれたページ」では、トップ（/）が14日のうち10日に入っていた（11-07 は5回）。ただし、エイイチ自身が ChatGPT や Claude にサイトのことを聞いた分も入りうる（見分けられない）。

### 直近の記録のシリーズの内訳

記録（記事）のファイルの先頭の日付とシリーズを読み、新しい順に数えた。

#### 数えたスクリプトと出力

```python
import os,re,collections
d='src/content/records'; rows=[]
for f in os.listdir(d):
    t=open(os.path.join(d,f),encoding='utf-8').read(3000)
    m=re.search(r'^date:\s*["\']?([\d-]+)',t,re.M); s=re.search(r'^series:\s*["\']?([^"\'\n]+)',t,re.M)
    if m: rows.append((m.group(1),s.group(1) if s else '?'))
rows.sort(reverse=True)
for n in (30,60):
  print(n,collections.Counter(s for _,s in rows[:n]).most_common())
```

```
30 [('ひとり研究所の裏側', 17), ('導入シミュレーション', 5), ('フィジカルAI研究室', 4), ('考察記事', 3), ('画像認識・物体検出', 1)]
60 [('ひとり研究所の裏側', 28), ('導入シミュレーション', 13), ('考察記事', 10), ('フィジカルAI研究室', 8), ('画像認識・物体検出', 1)]
```

直近30本のうち17本が、研究の外側の作業（サイト・動画・記録の整理）の記録だった。MASTER の「週に一度、研究の記録が半分を下回っていないかを見る」に当てはめると、下回っている。この記事も、その17本の側に入る。

### 調べて分かったことと、PC の案3つ

分かったことは4つ。

- 人の表示は、直近の週で PC が約8割（スマホ21%）。最初に作るのは PC でよい
- トップの表示時間は中央値18秒、半分まで読む人は48%。最初の画面で「何のサイトか」が伝わらないと、そこで離れる
- 研究室の導入比較ガイド（19）が、導入シミュレーションのシリーズのページ（8）と配膳ロボットの導入前シミュレーション（2）より多く見られていた。シミュレーションだけでは、来た人を受け止めきれない
- 前の画面は、見出し・本文・画像が別の話をしていた（上の表）

これをもとに、PC（1440幅）の最初の画面を3つ作った。

| 案 | 主役 | 形 |
|---|---|---|
| PC-1 | シミュレーション＋研究室の帯 | 軸の言葉を小さく1行、動く店とボタン1つ、画面の下端に研究室への帯 |
| PC-2 | 2つの柱を同じ重さで | 見出しの下に、店とアームの2枚を並べる。ボタンは置かず、2枚を入口にする |
| PC-3 | サイトの軸の言葉 | 「画面のデザインから、動きのデザインへ。」を大きく、2つは小さな入口 |

【画像】LOG476_05_pc_drafts.jpg PC の最初の画面の案3つ。上から PC-1（シミュレーションの店の画像とボタン、下端に研究室への帯）、PC-2（「人とロボットの関わりを、動かして確かめる。」の下に店とアームの2枚のカード）、PC-3（「画面のデザインから、動きのデザインへ。」を大きく、2つは小さな入口）

Claude は PC-2 を勧めた。トップに来た人が18秒で2つを両方見られて、研究室の側に来ている人も受け止められるためだ。


## 作業ログ ― 別の角度から調べ直し、主役は立ち位置の1文になった

エイイチの指示は「もう一度別角度から分析しなおしてみて」だった。1回目はアクセスの数から見たので、2回目は数ではなく、だれに何を決めてほしいサイトか（目的）と、AI がこのサイトをどう紹介するか（言葉）から見直した。

### 目的から：トップで判断する人が知りたいのは「どこに立っている人か」

エイイチは、研究だけしていても意味はなく、研究の先に仕事がないといけないと考えている。トップで「この人は何を考えて、何ができるか」を短い時間で判断するのは、LinkedIn や AI から来る企業の人やヘッドハンターだ。その人たちが知りたいのは、何をやっているかより、どこに立っている人かだ。

エイイチがこれまでに言ってきた立ち位置は、「ロボットを現場で役立たせる側」と「現場で人が受け入れて使い続けられるか」の2つだった。シミュレーションも研究室も、その立ち位置の証拠になる。どちらかを主役にするより、立ち位置を言って、2つを証拠として見せるほうが筋が通る。

ただし、MASTER でサイトのトップに相談の窓口は出さないと決めているので、最初の画面のボタンを「相談する」にはできない。

### 言葉から：AI が拾う4か所が、それぞれ違うことを言っていた

ChatGPT が利用者の依頼で読んだページでは、トップが上位に入る日が多い。AI はタイトル・見出し・説明文・AI 向けの案内から「このサイトは何か」を答える。その4か所が、それぞれ違うことを言っていた。

| 場所 | 前の言葉（要点） |
|---|---|
| ページのタイトル・見出し | 人とロボットの関わりを、シミュレーションでデザインする |
| 説明文（meta description） | 机の上のロボットアームでお手本のデータを集め、AIに学習させ、動かして確かめる |
| AI 向けの案内（llms.txt・llms.html） | フィジカルAI・ロボットの研究記録のサイト。導入前シミュレーション「も」行っている |
| 構造化データ（WebSite） | 説明なし |

llms.txt は、AI がサイトを読むときの案内を置く決まり（llmstxt.org ）。このサイトでは /llms.txt と、Gemini のアプリ向けの HTML 版 /llms.html を、ビルドのたびに作っている。構造化データは、検索エンジンや AI 向けにページの中身を決まった形（schema.org ）で書いたもの。

このままだと、AI がエイイチを説明するたびに言うことが変わる。最初の画面の言葉は、AI に言ってほしい1文として決め、4か所をそろえることにした。

### 立ち位置の1文を選んだ

新しいキャッチコピーは、MASTER で「追加は別途決定」としている。Claude が決めずに、エイイチの言葉から3つを出した。

| 候補 | 決まりとの関係 |
|---|---|
| 1. ロボットを、現場で役立たせる。 | 新しい言葉 |
| 2. 現場で人が受け入れて、使い続けられるロボットを。 | 新しい言葉 |
| 3. 人とロボットの関わりを、シミュレーションでデザインする | 前のタイトルのまま |

エイイチは2を選んだ（「2かな。」）。MASTER の更新履歴には、エイイチが「2026-11-08：トップの見出しを『現場で人が受け入れて、使い続けられるロボットを。』に決定」を書き足した。

PC-2 をこの1文で作り直した。見出しの横に「そのために、いま2つを進めています」と1文だけ置き、2枚のカードの上に、それぞれの役目を小さく入れた。

| カード | 小さな言葉 | 行き先 |
|---|---|---|
| サービスロボット導入シミュレーション | 入れる前に確かめる | /series8 |
| フィジカルAI研究室 | 動きを覚えさせる | /series6 |

【画像】LOG476_06_pc2_final_draft.jpg 1文を決めたあとの PC-2 の案。見出し「現場で人が受け入れて、使い続けられるロボットを。」の下に、「入れる前に確かめる」サービスロボット導入シミュレーションと「動きを覚えさせる」フィジカルAI研究室の2枚のカード


## 作業ログ ― トップと AI 向けの案内を同じ1文で公開した

エイイチの指示は「進めてください」。途中で「サイトの楽しみ方は残してください」と加わった。入れ替えたのは最初の画面だけで、その下の「このサイトの楽しみ方」（記録を AI に読ませて使う方法の案内）はそのまま残した。

### 変えた2つのファイル

- `src/pages/index.astro`：最初の画面・タイトル・説明文・構造化データ（WebSite に説明を足した）
- `src/lib/llmsGuide.ts`：AI 向けの案内の書き出し（/llms.txt と /llms.html の両方に出る）

前のハコブくんの動画（media の hakobu_fv_voice_eleven.mp4）は消さずに残した。

ねらい・変わったこと・見込める効果（効果はまだ測っていない見込み）：

- ねらい：トップを開いた人と、トップを読んだ AI の両方に、同じ1文で「どこに立っているサイトか」を伝える
- 変わったこと：見出しと4か所の言葉が「現場で人が受け入れて、使い続けられるロボットを」で始まるようになり、最初の画面に2つのシリーズへの入口がそろった
- 見込める効果：トップから /series6・/series8 への移動が増え、AI がこのサイトを紹介する言い方がそろう。2週間後に、トップの表示時間・半分まで読む割合（今は18秒・48%）と、トップからの2つのシリーズへの移動（今は /series6 が2回・/series8 が0回）を同じ道具で見る。数が30未満なら判断しない

### 公開した変更の全文（git show c2952e8）

```
commit c2952e8
Author: Claude <noreply@anthropic.com>
Date:   Sun Nov 8 21:45:10 2026 +0900

    トップの最初の画面を作り直す：立ち位置の1文と、いま進めている2つ（導入シミュレーション・研究室）
    
    - 見出しを「現場で人が受け入れて、使い続けられるロボットを。」に（2026-11-08 エイイチが決定）
    - その証拠として /series8 と /series6 への入口を2枚並べる（前のハコブくんの動画は media に残してある）
    - 同じ1文をタイトル・説明文・WebSite の構造化データ・AI 向けの案内（llms.txt / llms.html）にそろえる
    - このサイトの楽しみ方は残す

diff --git a/src/lib/llmsGuide.ts b/src/lib/llmsGuide.ts
--- a/src/lib/llmsGuide.ts
+++ b/src/lib/llmsGuide.ts
@@ export type GuideSection = { h: string; items: GuideItem[] };
 export const GUIDE_TITLE = 'Pixels to Motors';
-export const GUIDE_LEAD = 'ADAPT DESIGN（島津 栄一 / Eiichi Shimazu）による、フィジカルAI・ロボットの研究記録のサイト。机の上のロボットアームでお手本のデータを集め、AI に学習させ、実機で動かして確かめる環境を自宅で組み、誰でも同じ手順で始められる形で公開している。サービスロボット（配膳・搬送・清掃など）の導入前シミュレーションも行っている。';
+// 書き出しの1文はトップの見出し（src/pages/index.astro の LINE）とそろえる（2026-11-08）
+export const GUIDE_LEAD = 'ADAPT DESIGN（島津 栄一 / Eiichi Shimazu）による、フィジカルAI・ロボットの研究記録のサイト。目指すのは「現場で人が受け入れて、使い続けられるロボット」。そのために2つを進めている。1つは、サービスロボット（配膳・搬送・清掃など）を店や施設に入れる前に、何人で回るか・どこで止まるか・いくらかかるかを試算と3D（Unity）で確かめる導入シミュレーション。もう1つは、机の上のロボットアームでお手本のデータを集めて AI に学習させ、実機で確かめるフィジカルAI研究室。前提・結果・コードは、誰でも同じ手順で始められる形で公開している。';
 export const GUIDE_NOTES = [

diff --git a/src/pages/index.astro b/src/pages/index.astro
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ const records = await allCards();
 const records = await allCards();
+// 立ち位置の1文（2026-11-08 エイイチが決定）。タイトル・説明文・AI 向けの案内（src/lib/llmsGuide.ts の GUIDE_LEAD）とそろえる
+const LINE = '現場で人が受け入れて、使い続けられるロボットを';
+const DESC = `${LINE}。そのために、サービスロボットを店に入れる前に何が起きるかを試算と3D（Unity）で確かめ、机の上のロボットアームにお手本から動きを覚えさせています。前提・結果・コードはすべて公開。29年のデザイナー経験をもつ島津 栄一（ADAPT DESIGN）の研究記録です。`;
 import { SITE, SITE_NAME, AUTHOR, PUBLISHER } from '../lib/seo';
 const jsonLd = [
-  { '@context': 'https://schema.org', '@type': 'WebSite', name: SITE_NAME, url: SITE + '/', inLanguage: 'ja', publisher: PUBLISHER },
+  { '@context': 'https://schema.org', '@type': 'WebSite', name: SITE_NAME, url: SITE + '/', inLanguage: 'ja', description: DESC, publisher: PUBLISHER },
@@
-<Base title="Pixels to Motors ｜ 人とロボットの関わりを、シミュレーションでデザインする"
-  description="29年のデザイナー経験を、いまロボティクスに応用しています。机の上のロボットアームでお手本のデータを集め、AIに学習させ、動かして確かめる。その環境を自宅で組み、誰でも同じ手順で始められる形で公開しています。"
+<Base title={`Pixels to Motors ｜ ${LINE}`}
+  description={DESC}
   ogImage="/site/ffb300c2-1071-4714-978c-87d386d5dfd3.png" path="/" jsonLd={jsonLd}>
 
-  <section class="hero">
-    <div class="hero-text">
-      <h1>Pixels to Motors | 人とロボットの関わりをシミュレーションでデザインする</h1>
-      <p>29年のデザイナー経験を、いまロボティクスに応用しています。机の上のロボットアームでお手本のデータを集め、AIに学習させ、動かして確かめる。その環境を自宅で組み、誰でも同じ手順で始められる形で公開しています。基準は物理精度ではなく、人がロボットをどう感じ、どう関わるかという体験の成立。過程の失敗も含めて公開しています。</p>
-    </div>
-    <video class="hero-video" src={media("/media/hakobu_fv_voice_eleven.mp4") + "#t=0.01"} controls muted autoplay loop playsinline></video>
-  </section>
+  <!-- 最初の画面（2026-11-08 作り直し）。立ち位置の1文を主役に、いま進めている2つ（導入シミュレーション・研究室）をその証拠として並べる。
+       同じ1文をタイトル・説明文・AI 向けの案内（src/lib/llmsGuide.ts）にもそろえている（AI がこのサイトを説明するときの言葉になるため）。
+       前の FV はハコブくんの動画（media の hakobu_fv_voice_eleven.mp4・消さずに残してある） -->
+  <section class="hero-wrap"><div class="hero">
+    <div class="hero-head">
+      <h1>現場で人が受け入れて、<br>使い続けられるロボットを。</h1>
+      <p>そのために、いま2つを進めています。店に入れる前に何が起きるかを確かめることと、ロボットに動きを覚えさせること。前提・結果・コードは、すべて公開しています。</p>
+    </div>
+    <div class="hero-cards">
+      <a class="hcard" href="/series8" data-ev="FV:導入シミュレーション">
+        <img src="/site/series8-service-robot-unity.webp" alt="Unityで建てたファミレスを斜めから見たところ" width="1320" height="880" />
+        <span class="hc-meta"><span><span class="hc-kicker">入れる前に確かめる</span><span class="hc-title">サービスロボット<wbr>導入シミュレーション</span></span><i class="ms" aria-hidden="true">arrow_forward</i></span>
+      </a>
+      <a class="hcard" href="/series6" data-ev="FV:研究室">
+        <img class="hc-arm" src="/site/lab/run-poster.webp" alt="机の上のロボットアームと、赤いブロックと白い箱" width="1200" height="900" />
+        <span class="hc-meta"><span><span class="hc-kicker">動きを覚えさせる</span><span class="hc-title">フィジカルAI研究室</span></span><i class="ms" aria-hidden="true">arrow_forward</i></span>
+      </a>
+    </div>
+  </div></section>
@@ <style>
-  .hero { max-width: 964px; margin: 0 auto; padding: 104px 0 40px; display: flex; gap: 40px; align-items: flex-start; }
-  .hero-text { flex: 1 1 588px; min-width: 0; }
-  .hero h1 { margin: 0 0 16px; font: 600 29px/40.6px var(--sans); }
-  .hero p { margin: 0; font: 400 19px/1.6 'Noto Sans JP', sans-serif; color: #333; }
-  .hero-video { flex: 0 0 336px; width: 336px; height: 320px; background: #111; border-radius: 4px; object-fit: cover; }
+  /* 最初の画面：下の節のパネル（.sec の左右 80px＋.panel の 32px）と端をそろえる */
+  .hero-wrap { padding: 0 80px; }
+  .hero { max-width: 1280px; margin: 0 auto; box-sizing: border-box; padding: 112px 32px 48px; display: flex; flex-direction: column; gap: 44px; }
+  .hero-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
+  .hero h1 { margin: 0; font: 900 46px/1.4 'Noto Sans JP', sans-serif; letter-spacing: -0.005em; }
+  .hero-head p { flex: 0 1 440px; margin: 0 0 6px; font: 400 16px/1.85 'Noto Sans JP', sans-serif; color: #333; }
+  .hero-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
+  .hcard { display: flex; flex-direction: column; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 16px rgba(0,0,0,.08); color: var(--ink); }
+  .hcard img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #eceef2; transition: transform .3s; }
+  .hcard .hc-arm { object-position: center 40%; }
+  .hcard:hover img { transform: scale(1.02); }
+  .hc-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; position: relative; background: #fff; }
+  .hc-meta > span { display: flex; flex-direction: column; gap: 6px; }
+  .hc-kicker { font: 500 13px/1 'Noto Sans JP', sans-serif; color: #666; }
+  .hc-title { font: 600 22px/1.3 'Noto Sans JP', sans-serif; word-break: keep-all; overflow-wrap: anywhere; }
+  .hc-meta .ms { font-size: 24px; }
@@ @media (max-width: 1023px) {
-    .hero { padding: 88px 24px 32px; flex-direction: column; gap: 24px; }
-    /* 縦並びでは flex-basis の 588px が高さとして効き、文章と動画の間が大きく空いていた */
-    .hero-text { flex: none; }
-    .hero-video { width: 100%; flex-basis: auto; }
+    .hero-wrap { padding: 0 24px; }
+    .hero { padding: 96px 0 32px; gap: 32px; }
+    .hero-head { flex-direction: column; align-items: flex-start; gap: 20px; }
+    .hero-head p { flex: none; max-width: 640px; }
+    .hero-cards { gap: 20px; }
+    .hc-title { font-size: 18px; }
@@ @media (max-width: 599px) {
-    .hero { padding: 72px 24px 24px; }
-    .hero h1 { font-size: 24px; line-height: 1.5; }
-    .hero p { font-size: 16px; line-height: 1.75; }
+    .hero-wrap { padding: 0 16px; }
+    .hero { padding: 80px 0 24px; gap: 24px; }
+    .hero h1 { font-size: 26px; line-height: 1.5; }
+    .hero-head p { font-size: 15px; line-height: 1.8; }
+    .hero-cards { grid-template-columns: 1fr; gap: 16px; }
+    .hc-meta { padding: 14px 16px; }
+    .hc-title { font-size: 17px; }
```

### ビルドと実際の画面で見つけた2つのずれ

ビルド（`npm run build`、839ページ）が通ったあと、PC（1440×860）とスマホ（390×844）の画面を Playwright（ブラウザを自動で動かす道具）で撮って見た。2つ直した。

| ずれ | 原因 | 直し方 |
|---|---|---|
| PC で、カードの画像が縦に長くなり、カードの題名が最初の画面の外に出た | 画像の width・height の属性が効いて、aspect-ratio（16:9）より優先された | `.hcard img` に `height: auto` を足した |
| スマホで、見出しの「を。」だけが3行目に落ちた／カードの題名が「シミュレーシ／ョン」で割れた | 見出しの文字が大きすぎた／日本語は文字の間のどこでも改行される | 見出しを 28px → 26px に／題名に `<wbr>` と `word-break: keep-all` を入れ、「サービスロボット／導入シミュレーション」で改行するようにした |

#### 画面を撮ったスクリプト

```python
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
    b=p.chromium.launch()
    for w,h,n in [(1440,860,'pc'),(390,844,'sp')]:
        pg=b.new_page(viewport={'width':w,'height':h}, device_scale_factor=1 if n=='pc' else 2)
        pg.goto('http://localhost:4321/?p2m-notrack=1', wait_until='networkidle')
        pg.wait_for_timeout(800)
        pg.screenshot(path=f'/tmp/claude-0/top_{n}.png')
    b.close()
```

#### ビルドの出力（最後の5行）

```
21:43:15 ✓ Completed in 9.41s.

21:43:15 [@astrojs/sitemap] `sitemap-index.xml` created at `dist`
21:43:15 [build] 839 page(s) built in 24.01s
21:43:15 [build] Complete!
```

直したあとの最初の画面は次のとおり。PC では、2枚のカードと「このサイトの楽しみ方」までが最初の画面に入る。

【画像】LOG476_02_new_fv_pc.jpg 作り直したトップの最初の画面（PC・1440幅）。左に見出し「現場で人が受け入れて、使い続けられるロボットを。」、右に2つを進めている説明、その下にサービスロボット導入シミュレーション（Unity の店）とフィジカルAI研究室（机の上のアーム）のカード2枚、さらに下に「このサイトの楽しみ方」

【画像】LOG476_03_new_fv_phone.jpg 作り直したトップの最初の画面（スマホ・390幅）。見出し、2つを進めている説明、サービスロボット導入シミュレーションのカードが縦に並ぶ

AI が拾う4か所の言葉の前と後は、次の図で切り替えて見られる。

【図解】LOG476_four_places.html

### 公開

`git push` で main に入れ、21:45 に公開した（commit c2952e8）。4か所の言葉がそろったことは、ビルドした dist の index.html の title と、/llms.txt の書き出しで確かめた。

```
<title>Pixels to Motors ｜ 現場で人が受け入れて、使い続けられるロボットを
# Pixels to Motors

> ADAPT DESIGN（島津 栄一 / Eiichi Shimazu）による、フィジカルAI・ロボットの研究記録のサイト。目指すのは「現場で人が受け入れて、使い続けられるロボット」。…
```

### 事業所の本文に、目指す研究所の1文を足した

最初の画面には、研究所の行き先は入れなかった。見出しの1文で方向はもう言えていて、行き先まで足すと伝えることが2つになる。行き先はまだ絞る前の話なので、トップの下の「事業所について」の本文の書き出しに、目指していることとして1文を足した（22:03 公開・commit b80aebc）。

> フィジカルAIの技術で作られたロボットが、現場で使い続けられるためのサービスやプロダクトをつくる。そのための研究所を目指しています。

```
-        <p class="prop-text">29年にわたるデザイナーとしての知見を土台に、…
+        <p class="prop-text">フィジカルAIの技術で作られたロボットが、現場で使い続けられるためのサービスやプロダクトをつくる。そのための研究所を目指しています。29年にわたるデザイナーとしての知見を土台に、…
```

次は、2週間後（11月22日ごろ）に、トップの表示時間・半分まで読む割合・2つのシリーズへの移動を同じ道具で見る。もう1つ、直近30本のうち17本が研究の外側の記録だったので、次の作業は研究の側に戻す。