ロボットに関わる人に、何を作れるかを伝える ― 研究サイトのトップに相手ごとの困りごとを並べた

ロボットに関わる人に、個人の研究で何を解決できるかを伝えるには、スキルを並べるより、相手ごとの困りごとと、そこに向けて作れるものを、公開済みの記録で裏づけて並べる方が伝わる。 ロボットの研究記録サイト Pixels to Motors（pixelstomotors.com ）のトップに、ロボット会社・ロボットを入れる店や病院・ロボットに AI で動きを覚えさせる人・ロボットの横で働く人の4者に向けた節を足し、その下の事業所についてに、立ち位置の1文と仕事の進め方3つを足した。

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

• トップを下まで見た人が、だれのどんな困りごとに、何を作れるのかを、4枚のカードで見られる。前のトップには、何をしているか（Unity のシミュレーション、実機のアーム、借りた GPU での学習）は書いてあったが、だれの役に立つのかは書いていなかった
• どのカードにも、裏づけになる公開済みの記録（LOG）へのリンクが2本ずつ付いた。自分で言うだけでなく、やった記録をそのまま読める
• 相談を受けてから最初の公開までは15分（14:53 に相談、15:08 に公開）。そのあと公開した画面を見て3回直し、15:28 に今の形になった。前にプロフィールを書き直したときの時間は測っていない
• 効果（トップから記録への移動、AI がこのサイトを紹介するときの言い方）は、まだ測っていない。2週間後に、サイトの計測の数字で見る

Pixels to Motors は、フィジカルAI（AI がロボットなどの体を通して現実に作用する技術）の研究記録のサイトで、記事の大半は作業ログだ。だれが書いていて、その人に何を頼めるのかは、トップの一番下の事業所についての節にしか書いていなかった。しかもその節は、使っている道具の名前と、29年のデザイナー経験の話で終わっていた。

始まりは、この相談だった。

自分のスキルや仕事を進める上での考え方やできることなどを整理して自分のプロフィールに掲載するのはどう思いますか？

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

次の段落からが作業ログで、使ったコードは変更の差分とファイルの全文で載せている。

作業ログ ― スキルの一覧ではなく、考え方を記録で裏づける形にした

前の事業所についての節は、何をしているかだけを書いていた

最初の答えとして、スキルを並べる形ではなく、考え方を軸にして、それぞれを裏づける記録を添える形を勧めた。前の本文は、何をしているかは伝わる。ただ、エイイチが自分の強みと考えている部分、つまりロボットが今後どんな立ち位置になるかを見極めて、今の時点で運用に耐える落とし所へ持っていく、という見方はほとんど書かれていなかった。道具の名前はいずれ誰でも使えるようになるので、差がつくのは考え方の方だと考えた。

できることを一覧にすると、サービスのメニューに見えやすい。このサイトの決まり（研究の進め方の文書 MASTER）では、トップに相談の窓口を出さないことにしている。相談は研究の副産物として受け、窓口は記事とメッセージのフォームに限るためだ。なので、できることは並べず、考え方と記録で示す形にした。

仕事の進め方3つと、裏づけの LOG を選んだ

公開済みの記事の題名と書き出しを読み、考え方ごとに、それを実際にやった記録を2本ずつ選んだ。

LOG481 はロボットが安くなっても現場に入れる手間は残るという考察、LOG389 はロボットを広げるのは性能より現場で扱えるかだったという考察。LOG477 は病院の搬送ロボットで外来の廊下を避けて問題を4割減らした回、LOG404 は導入前に配膳ロボットの詰まりを動画で見比べた回。LOG492 は mechArm 270 を人が直す時間を測った回、LOG490 は mechArm 270 の待ちを測って Claude Fable 5.2 の使い所を決めた回だ。

3つ目の締めには、最初は前職の経験の話を入れていた。ほかの自己紹介でも何度も使っている話で、読む人には新しくないとエイイチが外すよう求めたので、測った結果で何が変わったかで締める文にした。

事業所についての3案は、主役が違う

デザインは、並べ方の違いではなく、何を主役にするかの違いで3案を出した（デザインの進め方の決まり）。どの案も、今の本文はそのまま残し、その下に足す形にした。

作業ログ ― ロボットに関わる人へ、相手ごとの困りごとと作れるものを足した

何を解決でき、何を作れるかも伝える

3案を作っている途中で、もう一つの指示が来た。

あともっとロボット企業やロボットに関わる人たちにスキルを活かして何を解決したり、何を作れるかも伝えた方がいいね。

事業所についての節は、だれが書いているかを伝える場所だ。そこに相手ごとの話まで入れると、1つの節で伝えることが2つになる。なので、別の節にした。相手は、ロボットを作る人、売る人、入れる人、横で働く人の4者に分けた。どれも、すでに公開している記録で裏づけられる相手に限った。

この節にも、相談のボタンは置いていない。読む先は記録へのリンクだけにした。

案Bと、その手前の節で公開した

エイイチが選んだのは、事業所についてを案B（立ち位置の1文が主役）にし、その手前にロボットに関わる人への節を置く形だった。トップの index.astro（下の使った道具の節で説明）に2つの節を組み、ビルドと実際の画面で確かめてから 15:08 に公開した。

• ねらい：トップを下まで見た人に、だれに何を作れるのかと、どう考えて進めるのかを、この順で伝える
• 変わったこと：事業所についての手前に4者向けの節が入り、事業所についての中に立ち位置の1文と仕事の進め方3つが入った
• 見込める効果：トップから記録（LOG）へ移る人が増える。AI がこのサイトを紹介するときに、何を作れるのかまで言えるようになる。どちらも見込みで、2週間後にサイトの計測の数字で確かめる

作業ログ ― 公開した画面を見て、3回直した

公開した画面を見たエイイチからの指示は、どれも短かった。直した順に、どこがどう変わったかを図にまとめた。

写真の下の隙間をなくし、プロフィールをひとまとめにした

公開した画面を見たエイイチから、写真の右の列をひとまとめにし、写真の下（左側）の空きをなくすよう指示があった。黒い帯と考え方3つは、写真の右の列の中に入っていたので、写真の下が空いていた。写真・見出し・本文・事業所名などの概要・SNS を1つのかたまりにし、黒い帯と考え方3つはその下に横幅いっぱいで置いた（15:14 公開）。

仕事の進め方の文から、細かい数値を外した

この内容具体的な数値とかあっても意味なくない？

3つ目の文には、キーボードで直すと1回43.2秒、ゲームパッドに替えると14.5秒、という数字を入れていた。読む人がほしいのは秒数ではなく、測ってから決めるという進め方の方だ。3つとも、数値と細かい例を外して、何をどう決めるかだけを短く書いた。

4者のカードに、小さな写真を見出しの横に足した

LP的アイコンか写真があった方がいいかも。いまいち頭に入ってこないね

カードは文字だけで、どの現場の話かが一目で分からなかった。写真を上に大きく置く案（A）と、アイコンを左上に置く案（B）を、同じ節で組んで並べた。写真はサイトにすでにあるものを使った（Unity で建てた店、病院の搬送ロボット、机の上の mechArm 270、配膳ロボットと店員）。アイコンは、サイトですでに使っている Material Symbols の4つ（見積もり・病院・ロボットアーム・ヘッドセット）にした。

写真を新しく作るなら ChatGPT に頼む、という申し出もあったが、手元の写真で合うかを先に見た。

2案を見たエイイチの指摘は、写真はもっと小さくていい、アイコンは右側が空いて見える、の2つだった。写真の案は1枚が大きすぎて、カードの半分を写真が占めていた。アイコンの案は、アイコンの右が空いていた。そこで、写真を 120×90px に小さくして見出しの左に置き、見出しを写真の右に並べた（スマホでは 84×84px）。写真の横に見出しが入るので、右の空きもなくなる（15:28 公開）。

• ねらい：カードを見た瞬間に、どの現場の話かが分かるようにする
• 変わったこと：4枚のカードの見出しの左に、現場の小さな写真が入った。写真の大きさはカードの高さを増やさない程度にした
• 見込める効果：4枚のうち自分に関係のあるカードに目が止まりやすくなる。見込みで、記録へのリンクが押された数で確かめる

1枚目の Unity の店の画面だけ、人が写っていないので、ほかの3枚より少し浮いて見える。差し替えるなら ChatGPT で作る。

作業ログ ― 使った道具とコード

Astro は、ページの部品と記事の Markdown からサイトを書き出す道具

Astro は、ページの部品（.astro のファイル）と記事の Markdown から、サイトの HTML を書き出す道具。pixelstomotors.com は Astro で作り、GitHub の main に push すると約1分で公開される。

案を見比べるときは、公開しない確認用のページ（src/pages/preview/ の下）に案を並べて組み、画面写真で見てもらった。確認用のページは公開する前に消し、GitHub には入れていない。画面写真は、ブラウザを自動で動かす Playwright で、PC（幅1440px）とスマホ（幅390px）の2つの幅で撮った。サイトにあるお知らせの吹き出しやハコブくんの絵は、画面に固定で出るので、撮るときだけ隠した。

コミット 889da18：ロボットに関わる人への節と、仕事の進め方を足した

commit 889da18
2026-11-12 15:08:07 +0900

トップ：ロボットに関わる人への節を足し、事業所についてに仕事の進め方（立ち位置の1文と考え方3つ）を足した

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LevEXUNCxhaiqKmAnsEaNK

コミット ed8da04：プロフィールをひとまとめにし、仕事の進め方を横幅いっぱいに置いた

commit ed8da04
2026-11-12 15:14:06 +0900

トップ：事業所についての写真・本文・概要をひとまとめにし、仕事の進め方をその下に全幅で置いた（写真の下の隙間をなくした）

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LevEXUNCxhaiqKmAnsEaNK


diff --git a/src/pages/index.astro b/src/pages/index.astro
index 508da77..f25f5cf 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -187,19 +187,6 @@ const jsonLd = [
       <div class="prop-body">
         <p class="prop-lead">画面（Pixels）のデザインから、動き（Motors）のデザインへ</p>
         <p class="prop-text">フィジカルAIの技術で作られたロボットが、現場で使い続けられるためのサービスやプロダクトをつくる。そのための研究所を目指しています。<br><br>29年にわたるデザイナーとしての知見を土台に、人とロボットの関わり（HRI）と、ロボットが学習できる環境づくりに取り組むデザイン事務所です。Unityでのシミュレーション、実機のロボットアーム、借りたGPUでの学習・推論までを自分の手で回し、AIエージェント（Claude Code）を設計と実装の相棒にしています。基準は物理精度ではなく体験の成立。画面上の「Pixels（デジタル）」の設計を、現実の「Motors（モーター）」へ——その過程を公開しています。</p>
-        <!-- 仕事の進め方（2026-11-12）。立ち位置の1文を黒い面に、その下に考え方3つ -->
-        <div class="ways">
-          <p class="ways-stance">現場ごとに違う導入の手間を、<br>決まった見積もりと手順に変える。</p>
-          <div class="ways-cols">
-            {WAYS.map((w) => (
-              <div class="way">
-                <p class="way-h">{w.h}</p>
-                <p class="way-t">{w.t}</p>
-                <a class="way-link" href={`/record/${byLog(w.log).slug}`}>LOG{w.log} を読む<i class="ms" aria-hidden="true">arrow_forward</i></a>
-              </div>
-            ))}
-          </div>
-        </div>
         <dl class="prop-facts">
           <div><dt>事業所名</dt><dd>ADAPT DESIGN</dd></div>
           <div><dt>設立</dt><dd>2021年10月</dd></div>
@@ -213,6 +200,19 @@ const jsonLd = [
         </dl>
       </div>
     </div>
+    <!-- 仕事の進め方（2026-11-12）。立ち位置の1文を黒い面に、その下に考え方3つ。写真の下に隙間ができないよう、プロフィールの外に全幅で置く -->
+    <div class="ways">
+      <p class="ways-stance">現場ごとに違う導入の手間を、<br>決まった見積もりと手順に変える。</p>
+      <div class="ways-cols">
+        {WAYS.map((w) => (
+          <div class="way">
+            <p class="way-h">{w.h}</p>
+            <p class="way-t">{w.t}</p>
+            <a class="way-link" href={`/record/${byLog(w.log).slug}`}>LOG{w.log} を読む<i class="ms" aria-hidden="true">arrow_forward</i></a>
+          </div>
+        ))}
+      </div>
+    </div>
   </div></section>
 </Base>
 
@@ -264,7 +264,7 @@ const jsonLd = [
   .prop-facts dt { font: 300 12px/15.6px var(--sans); color: #888; }
   .prop-facts dd { margin: 4px 0 0; font: 400 14px/1.5 var(--sans); }
   /* 仕事の進め方：黒い面に立ち位置の1文、その下に考え方3つ */
-  .ways { margin-top: 12px; border-radius: 8px; overflow: hidden; }
+  .ways { margin-top: 32px; border-radius: 8px; overflow: hidden; }
   .ways-stance { margin: 0; padding: 32px; background: var(--ink); color: #fff; font: 600 26px/1.5 var(--sans); }
   .ways-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #f7f7f7; }
   .way { padding: 24px; display: flex; flex-direction: column; gap: 8px; }

コミット fd321de：カードに小さな写真を足し、仕事の進め方の文から数値を外した

commit fd321de
2026-11-12 15:28:48 +0900

トップ：ロボットに関わる人へのカードに小さな写真を見出しの横に足し、仕事の進め方の文から細かい数値を外した

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LevEXUNCxhaiqKmAnsEaNK

index.astro の全文（fd321de の時点）

---
import Base from '../layouts/Base.astro';
import RecordCard from '../components/RecordCard.astro';
import { ymd } from '../lib/format';
import { media } from '../lib/media';
// SNS アイコン（Font Awesome Free 6.7.2・CC BY 4.0。ライセンス表記は各 SVG の中に残している）
import icGithub from '../icons/github.svg?raw';
import icLinkedin from '../icons/linkedin.svg?raw';

作業ログ ― 公開後に表紙と引用を直し、引用の決まりを足した

表紙に、直す前と後の画面と時刻の流れを入れた

最初の表紙は、英字の見出しと、ロボットに関わる人への節の画面写真1枚と、数字3つだけだった。エイイチから、シンプルすぎるので直すよう指示があった。作り直した表紙には、直す前の事業所についての画面、直した後の2つの節の画面（4者のカードと、黒い帯の1文と考え方3つ）、4者の札、相談から公開までの時刻の流れ（14:53・15:08・15:14・15:26・15:28）を入れた。表紙の画像は R2 に新しい名前（LOG493_cover_v2.jpg）で入れた。同じ名前の画像は上書きしない作りになっているためだ。

意図の分からない短い発言を、引用から地の文に置き換えた

最初に公開した版では、画面写真を見ながら出た短い指示を、そのまま引用で載せていた。エイイチの指摘はこうだった。

全文入れるだけど、流石に意味がこれではよくわからないし、意図がはっきりしない言葉も全部入れる必要はないよ。

引用にしていたのは、ひとまとめにする指示、左の隙間をなくす指示、前職の話はいらないという指示、案Bを選んだ発言、写真は小さくていいという指示、アイコンの右が空いて見えるという指摘の6つだった。どれも、どこを指しているかが前後を読まないと分からない。6つとも地の文に書き換え、何をどう直すよう求められたかを書いた。それだけで意図が読める4つ（最初の相談、何を作れるかも伝えたいという指示、数値は意味がないという指摘、写真かアイコンがほしいという指摘）は引用のまま残した。横にはみ出していた考え方の表は、LOG を番号だけにし、それぞれの LOG が何の回かを表の下の段落に書いた。

記事の決まりに、引用は意図が分かるものに限ると足した

同じことを次の記事で繰り返さないように、記事の決まり（article_rules.md）の対話の全量掲載の節に、次の決まりを足した。

• ねらい：記事を1本だけ開いた人が、引用を読んで何が起きたかを追えるようにする
• 変わったこと：記事の中の引用が、それだけで意図が読めるものだけになる。短い指示は、何をどう直したかの地の文になる
• 見込める効果：作業ログの節が、引用の前後を読み返さずに読める。見込みで、次に記事にするときに引用を見直す手間が減ったかで確かめる

作業ログ ― 効果は2週間後にサイトの計測で見る

効果はまだ測っていない。書いた効果はすべて見込み。2週間後に、トップから記録（LOG）への移動と、AI が利用者の依頼でこのサイトを読んだ回数・AI のリンクから来た人の数（サイトの計測の主な数字）を見て、前の2週間と比べる。AI がこのサイトをどう紹介するかは、同じ問いを ChatGPT と Claude に聞いて、作れるものまで言うかを確かめる。