いま考えていることを、言葉だけで伝える ― 縦書きのページを作った

このサイトには、研究の記録が370本ほど並んでいます。ロボットアームの関節の角度、学習の数字、試算のコード。記録としてはそろっていますが、初めて来た人が「この人は何を考えて、何をしようとしているのか」を知るには、どれから読めばいいのか分かりません。そこで、2026年2月から10月までに書いた考察記事66本を読み直し、いま考えていることと目指すことを、1ページにまとめました。pixelstomotors.com/thinking です。

このページには、ロボットの写真も動画も、図も入れていません。言葉だけで伝わるかを試すページなので、文字の組み方（書体・大きさ・行の間・余白）だけで読ませるように作り、最後は縦書きにしました。経歴（何年の経験、どこに住んでいる、前の仕事）も書いていません。履歴書のような事実より、いま何を考えていて、何を目指しているかのほうが、読む人にとって大事だと考えたためです。

もう一つ気をつけたのは、本人が言っていないことを、本人の考えとして書かないことです。考察記事の多くは、AI（Claude）との対話をまとめたものです。記事の中には、本人の発言と、AI が書いた説明が混ざっています。そのまま抜き出すと、AI の説明が「本人の考え」としてページに載ってしまいます。そこで、かぎかっこ「」で引くのは、対話の中で本人が実際に言った言葉だけと決めました。さらに、まとめた文が記事の本文で言えるかを、別の AI（codex）に反論するつもりで3回確かめてもらいました。1回目は「直してから」という判定で、強い指摘が11件ありました。

ページができたあとは、入口を作りました。TOP と考察記事の一覧（/series5）に入口を置き、同じ並びに、ほかの2つの案内ページ（ロボットAIの学習用GPUを買うか借りるか・配膳ロボットの導入前シミュレーション）への入口も、カード2枚にして置きました。TOP のどこに置くかは、サイトのアクセスの記録で決めました。TOP を開いた人のうち、ページの4分の1の深さまで読んだ人は42%しかいませんでした。一番下に置くと、ほとんどの人に届きません。

この記事の効果の書き方について先に断っておきます。入口を置いた効果は、公開したばかりなので、まだ測れていません。ここに書く効果は見込みで、来週のアクセスの記録で確かめます。アクセスの数字は、2026年10月24日の13時台に取った値です。

作業ログ ― 考察記事から、考えのページを作り、入口を置くまで

最初の依頼：LP ではなく、考えや気持ちを抜き出すページ

依頼は次のとおりでした。

https://pixelstomotors.com/series5 考察記事をベースにエイイチ本人が何を考え、どんな意図で、ロボティクスやロボット、AIを使うことによってどんなことが可能になったり、技術向上が目指せるのかを伝える記事を作りたい。LPとは違くて、考察記事から考えや、思考、感情、意思を抜き出してわかりやすく伝えるためのページを作ることを意図としています。どんな構成にするべきかまずはベースから考えてみてください。

最初に出した構成案には、「29年のデザイナー経験」「秋田でひとりで研究している」「ラジコンの製造、アパレルで遠くの工場が実行できる仕様書を書いてきた経験」のような経歴の行が入っていました。これに対する指摘です。

事実ベースの履歴書みたいなのはノイズ。今何を考えていて何を目指すのかの方が重要度が高いため。

経歴の行はすべて外しました。ページに載せるのは、いま考えていること、考えの軸、考えが変わったこと、まだ分からないこと、目指すこと、の5つです。

66本を3つに分けて読み、本人の言葉と AI の文を分けた

考察記事は LOG53 から LOG336 までの66本で、本文を合わせると約120万バイトありました。1回で読み切れないので、前期・中期・後期の22本ずつに分け、3つの作業に分けて全文を読みました。各記事から、主張・本人の言葉（最大3つ）・現状の見方・目指すこと・迷いを抜き出しています。

抜き出すときに、言葉ごとに次の印を付けました。

この分け方で、引ける言葉はかなり減りました。たとえば LOG174・181・187・207 は全文が一人称の文章で、【本人】と分かる行が1つもありませんでした。考えとしては大事でも、「」で引くことはしていません。

codex に3回、反論するつもりで確かめてもらった

下書きができるたびに、codex（OpenAI のコードと文章を扱う AI。Mac のターミナルで動かした）に、「この下書きを論破するつもりで」検証を頼みました。出典として、66本の本文をすべて1つのファイルにまとめて渡し、本文で確かめられないことは「未確認」と書くように頼んでいます。

3回目は、各軸に「なぜそう考えるか」と本人の言葉を足し、「考えが変わったこと」の節を新しく作ったあとの検証です。足した文に、また強い指摘が8件付きました。直した例を並べます。

ねらい・変わったこと・見込める効果

• ねらい：本人が言っていないこと・やっていないことを、本人の考えや実績としてページに載せない。
• 変わったこと：強い指摘は1回目11件・2回目0件・3回目8件で、すべて直すか外した。「」の引用は、すべて本文と一字一句同じ発言から取った。
• 見込める効果：ページを読んだ人が元の記事を開いても、書いてあることが食い違わない。各段落の横に元の記事の LOG 番号を置いたので、確かめたい人はたどれる（読まれたかは、公開後のアクセスの記録で見る）。

3回分の検証結果は、この記事の終わりに全文を載せています。

ページの中身：5つの考えの軸と、考えが変わったこと

ページは次の順に並べました。

各軸は、気づいた場面 → 本人の言葉 → なぜそう考えるか → 本人の言葉 → やりたいこと → 元の記事、の順です。本人の考えは「〜だと思う」と言い切り、効果やできることは「〜したい」と書きました。まだ確かめていないことを、できたことのように書かないためです。

ページの日付は「2026年10月までの考察記事から」にしました。最初は「考察記事66本から」と本数を書いていましたが、記事が増えると数字が古くなります。

「66本」をどう書くかは…「2026年10月までの考察記事から」 本数が記事が増えていくごとに動的に変わるならそのままでもいいよ

本数を自動で数え直す方法もありましたが、ページの文は codex で確かめた66本から書いたものです。本数だけが増えると、中身と数字が合わなくなります。そのため、日付で書く形にしました。

「」は本人の言葉だけにした

途中の版では、まとめた文の中に「」が多く入っていました。概念を強調するための「」と、本人の言葉の「」が混ざると、どれが本人の発言か分かりません。

無駄な「」書きは無くすように注意してください。「」つけるなら意図を教えてください。

「」は俺の言葉という意図かな？

そのとおりで、「」を残したのは本人の発言の引用だけです。まとめた文の中の強調の「」はすべて外しました。引用は、縦書きの独立した段落にして、地の文（まとめた文）と見た目でも分けています。

言葉だけのページのデザイン：横組みと縦書きの2案

ロボットの絵や動画がなくても伝わるくらい言葉に特化したページにしてください。LPではありません。

デザインも現行サイトや、今作っているLPとは変える必要があります。言葉に特化したサイトを徹底的にチェックしてみてください。

言葉が主役のサイトを24件開いて、最初の画面と、少しスクロールした画面を撮って見比べました。英語の読み物（Paul Graham・Craig Mod・iA・Ink & Switch・Stripe Press・Linear の Method・Frank Chimero・Robin Sloan・Bret Victor・Butterick’s Practical Typography）、日本語の読み物と理念のページ（アジャイルソフトウェア開発宣言の日本語訳・ほぼ日・中川政七商店・ソニー・SmartHR・Takram・青空文庫・note・暮しの手帖・良品計画・メルカリ・サイボウズ・岩波書店）などです。見えたのは次のことでした。

• 色はほぼ使わない。白に近い地と、黒に近い文字だけ
• 1行の長さを短く保つ（日本語で30〜40字くらい）
• 行の間を広く取る（文字の大きさの1.8〜2倍）
• 飾りの線や囲みを使わず、余白だけで区切る
• 日本語の理念のページには縦書きが多い

1. 横組みの読み物…2. 縦書き…この二つを作って比較したいので進めてください。黒や白の色、余白など、文字、行間、文字間など、文章だけに特化しているので大事なのは派手なビジュアルとは別の部分です。それらを徹底的に考え抜いて提案してください。

横組みと縦書きの2案を、同じ文・同じ決まりで作りました。決めた値は次のとおりです。

文の折り返しには、ブラウザの word-break: auto-phrase（日本語を文節の切れ目で折り返す）と text-wrap: pretty（最後の行に1〜2字だけ残るのを避ける）を使いました。

比べた結果、エイイチが縦書きを選びました。

縦書きの英字と数字を、組版の決まりに合わせた

縦書きの英字ってこういう書き方だっけ？いろんなページを調査して見直してください。

最初の版は、英字をすべて横に倒していました。W3C の「日本語組版処理の要件」（JLREQ）と、縦書きの新聞・書籍のサイトを見直し、次の決まりにしました。

縦中横の「2D」は、そのままだと行の真ん中から少しずれて見えました。2字を半分の幅の字形に切り替える指定（font-feature-settings: "hwid" 1）を足して、真ん中にそろえています。

縦書きの引用の折り返しも手で決めました。縦書きでは、ブラウザに任せると文節の途中で折れることがありました。文節で区切る仕組み（BudouX）も試しましたが、「方向性」を「方」と「向性」に分けたため使っていません。折り返す位置を「／」で書いた一覧（TATE_BREAKS）を作り、ビルドのときに、一覧の文から「／」を除いたものが元の引用と一字でも違えば止まるようにしました。引用を写し間違えたまま公開されることはありません。

縦書きですが、縦に早く読むので、もう少しコンテンツ幅が狭い方が良さそうです。

タイトルと説明文、本文のジャンプ率をもう少しだけ上げてください（もしくはタイトルは太く？）

横のテキストと縦のテキストのマージンが少ない。もっと余白を

縦書きのページの横組みの列を36字から28字に狭めました。題名を太くし（700）、説明文を 1.375rem に上げて、本文との大きさの差を広げました。縦書きの引用の上下の余白は、本文1行の高さの3倍（スマホは2.2倍）にしています。

文を増やした：なぜそう考えるか・考えが変わったこと

文章だけで見せるならもっと内容が充実していても良さそうです。

写真がない分、文が少ないと、ページがすぐに終わってしまいます。足したのは3つです。各軸の「なぜそう考えるか」の段落、各軸の本人の言葉を1〜2つ、「考えが変わったこと」の節です。足した文は、上の codex の3回目で確かめ、指摘された8件を直してから載せました。考えが変わったことの候補は3つありましたが、順番を取り違えていた深度カメラの話を外し、2つ（LOG264・LOG286）を残しています。

公開と入口：TOP・/series5 に置き、検索に載せた

これで一旦いいです。これをTOPや考察記事の一覧ページを掲載することを考えてください。他にもサービスロボット導入シミュレーションLPのバナーなんかも入ります。フィジカルAI研究所のバナーと合わせたセクションを考えてください。

TOP に2つのセクションを作りました。

• 導入前ガイド：GPU を買うか借りるかのページと、配膳ロボットの導入前シミュレーションのページへの入口を、カード2枚にして横に並べる
• いまの考え：考えのページへの入口。紙の色の地に、縦書きの問いと説明を置く

考察記事の一覧（/series5）の説明の下にも、同じ入口を置きました。どちらのページも、確認のあいだは検索に出ない設定（noindex）にし、サイトマップからも外していました。公開に合わせて、両方とも外しています。

TOP の導入前ガイド：2枚のカードを見分けられるようにした

最初は2枚を同じ形（黒い地に写真と文字）にしていました。

バナーが同じデザインでどっちがどっちなのかわかりません。サービスロボット導入バナーは違うデザインに変更

GPU のカードは黒い地のまま、配膳ロボットのカードを明るい灰色の地に変え、左に文字、右に絵を置きました。カードの高さは、最初は約520pxありました。

バナーの高さ下げたい別アイデア出して（大きすぎ！）

高さを決め打ちせず、中身で決まるようにして約330pxにしました。ほかのセクションのカードと同じ角丸（8px）と影も付けています。

配膳ロボットのカードの絵は、何度か作り直しました。

3のあと、手元にある画像から候補を6つ並べました。

右の画像は色味があるやつがいいね。何か他に候補はないですか？一度にいくつも作ってください。候補がないとわからないです。

イメージを作って提案して！

手元の画像ではなく、新しく絵を作りました。試算と同じ店の図（plan-p1.svg）から、席・キッチン・レジの位置を読み出し、6通りに描き分けています。色は配膳ロボットの LP で使っている色（オレンジ #f2600c・黄色 #f2c230・青 #2f5bd8・濃い灰色）だけにしました。

エイイチが選んだのは案2の立体の絵です。斜め上から見た形にするため、平面の座標を斜めから見た座標に置き換え、席やキッチンを高さのある箱として描いています。奥にある箱から先に描かないと、手前の箱が奥の箱に隠れるので、描く順番を決める処理を入れました。この絵を作るスクリプト（tools/make_cta_iso.py）は、この記事の終わりに全文を載せています。ロボットの通り道の点線は、通路の真ん中を通るように描いた見せ方の線で、試算の結果ではありません。

カードに入れていた「47/99条件で、2台入れても人が減らない」という数字は外しました。

これノイズに見えるから削除してバナーの高さ変えたら？

この数字は配膳ロボットの試算の結果ですが、カードの中だけでは何の条件の何の数なのかが分かりません。

カードの組み方を、画面の幅ではなくカードの幅で切り替えた

絵を大きくしようとして、文字と絵の間を詰めたところで、次の指摘がありました。

テキストが押し返しするくらい間を詰めたらダメだよ？ コンテンツ幅が狭くなったらレイアウト変更する必要あるんじゃない？どこで区切ってる？

イラスト切り抜かないとコンテンツ幅が狭くなった時にテキスト見切れるよ

区切りは画面の幅 899px の1か所だけでした。それより広いと、文字と絵を必ず横に並べていました。ところが2枚並びのカードは、画面が900〜1300pxくらいだと幅が450〜600pxしかありません。そこに文字と絵を並べたので、文字の列が細くなり、絵に押されて文字が切れていました。

区切りを、画面の幅ではなくカードの幅で決めるようにしました（CSS のコンテナクエリ。親の要素の幅で見た目を切り替える仕組み）。横に並べるのは、ガイドの枠が1180px以上（カード1枚が約580px以上）のときだけです。文字の列は300pxより狭くしません。それより狭いときは、絵を上、文字を下に置きます。

ねらい・変わったこと・見込める効果

• ねらい：どの画面の幅でも、題名と説明が細かく折り返したり、絵に隠れたりしないようにする。
• 変わったこと：画面の幅 900〜1440px の間で、文字の列が約200pxまで細くなっていたのが、300px以上か、カードの幅いっぱいになった。幅 1440・1340・1200・1024・920・390px で表示し、文字が切れていないことを確かめた。
• 見込める効果：ノートPCのように画面が狭いときも、カードの題名が読める。押されたかは、来週のアクセスの記録のクリックの数で確かめる。

アクセスの記録を見て、「いまの考え」の位置を決めた

最初は、「いまの考え」を TOP の一番下、事業所の説明のすぐ上に置いていました。

今の考え、一番下だとそこまで行かない可能性が高いのでもう少し上にセクション位置を移動。サイトのアクセス分析してみて

サイトのアクセスの記録（ページを開いた数、どこまで読んだか、どこから来たか、を自分のサイトで数えている仕組み）を見ました。

TOP を開いた人の約6割は、ページの4分の1の深さに届く前に、帰るか別のページへ移っています。一番下まで読んだのは3人に1人です。

どこから来たかは、直接（ブックマーク・URL の入力・アプリの中のリンクなど）が770、Google が89、サイトの中から44、Yahoo が6でした。この週（10月19日〜25日）の開いた数は897ですが、滞在の中央値が6秒、スマホからが4%しかありません。機械による巡回か、自分での確認がかなり混ざっていると見ています。メッセージのフォームからの送信は、この週は0件で、前の週に2件届いています。

いまの考えを、最初の画面のすぐ下に移しました。

いやFV下は流石に上すぎじゃね？

シリーズと4コママンガの間でいいよ

いまの TOP の並びは、最初の画面 → 解説動画 → 導入前ガイド → 4コマ → いまの考え → シリーズ → 記録 → 事業所について、です。

ねらい・変わったこと・見込める効果

• ねらい：TOP を開いた人のうち、考えのページの入口を見る人を増やす。
• 変わったこと：入口の位置を、一番下の事業所の説明の上から、4コマとシリーズの間に上げた。
• 見込める効果：一番下に置いたままなら、入口まで届くのは3人に1人程度（一番下まで読んだ33%）。上げた位置は、幅1440pxの画面で入口が見え始めるのがスクロールの約21%の所（スマホでも約21%）で、25%の深さまで読んだ42%の人には届く見込み。実際の数は、来週のアクセスの記録で /thinking の開いた数と入口のクリックの数を見て確かめる。いまの時点では /thinking と配膳ロボットの LP は記録にまだ出ていない（0件）。

/series8 にも配膳ロボットの LP への入口を置いた

サービスロボット導入シミュレーションにLPへの遷移バナー作らないと

サービスロボット導入シミュレーションのシリーズのページ（/series8）は、試算と記録を並べたページで、店舗の人に向けた LP への入口がありませんでした。説明文の下に、TOP のカードと同じ明るい面と立体の絵で、横長の入口を置きました。説明文は「このシリーズの試算を、店舗で使える形にまとめたページです」で始め、記録から LP へ移る理由が分かるようにしています。組み方は TOP のカードと同じく入口の幅で切り替え、720px より狭いときは絵を上に置きます。

コミットの一覧（p2m-site・2026-10-24）

考えのページと入口に関係するコミットだけを、新しい順に並べます。配膳ロボットの LP そのものの作り直しは LOG371 に書いています。

840945c 13:49 /series8 に配膳ロボットの導入前シミュレーション（LP）への入口を置く
fab5068 13:47 TOP: 配膳ロボットのカードを、カードの幅で組み方を切り替える
a7438d1 13:41 TOP: 配膳ロボットのカードの絵を大きくし、文字との間を詰める
f69f502 13:36 TOP: 配膳ロボットのカードの絵を、同じ店を斜め上から見た立体の絵に変更
4a3cb37 13:28 TOP: いまの考えを4コマとシリーズの間へ移動
d961c7d 13:24 TOP: 配膳ロボットのカードから「○/99条件」の数字を外し、カードの高さを下げる
934a6e8 13:20 TOP: いまの考えを最初の画面の直下へ移動、配膳カードの図を店の全体が見える平面図に変更
2a1ccb9 13:09 TOP の導入前ガイドのカードと、考えのページの入口に、ほかのセクションのカードと同じ角丸（8px）と影を付ける
e9c807b 12:58 TOP の導入前ガイド：カードの高さを中身で決めて約520px→約330pxに。GPU は背景の写真の上に文字をそのまま、配膳ロボットは文字を左・平面図を右に置く
6db191a 12:54 TOP の導入前ガイド：配膳ロボットのカードの画像を、粗い 3D の録画から店の平面図（SVG・LP の最後と同じ図）に替える
09f9211 12:52 考えのページ：軸2の「気づいた場面」の MicroFactory に公式サイトへのリンクを付ける（横組みの文だけ）
1a181bc 12:50 TOP の導入前ガイド：配膳ロボットのカードを明るい面に替え、3D の店の画像を上に分けて置く（GPU の黒いカードとひと目で見分けられるように）
8f37f44 12:39 考えのページを /thinking（縦書き）で公開。TOP に「導入前ガイド」（GPU・配膳ロボットの LP 2つを横に並べる）と「いまの考え」を置き、/series5 に考えのページの入口を置く。配膳ロボットの LP と考えのページを検索・サイトマップに載せる。縦中横の 2D を行の真ん中にそろえる
b4bdbbf 12:23 考察記事のページの試作：各軸に「なぜそう考えるか」と本人の言葉を足し、「考えが変わったこと」を新設（codex 3回目の指摘を反映）。日付を「2026年10月までの考察記事から」に。縦書きの「」の上下の余白を広げる
4e48d9e 11:49 考察記事のページの試作（縦書き）：横組みの列を28字に狭める。「」の縦書きを文節で折り返す（改行位置を手で決め、元の言葉と違えばビルドで止める）
9620a50 11:18 考察記事のページの試作：タイトル・説明文・本文の大きさの差を上げる。「」は本人の言葉だけに。縦書きの欧字を組版の決まりに合わせる
5ede467 11:09 考察記事から考えを伝えるページの試作：横組みと縦書きの2つ（noindex・サイトマップに載せない）

アクセスの記録（2026-10-24 13:59 に取得した値・必要な部分）

{"取得":"2026-10-24 13:59（日本時間）・/api/ev-stats?format=json から必要な部分だけ",
 "total": 919,
 "byWeek": [
  {"week":"2026-10-19","label":"2026-10-19 〜 10-25","views":897,"medianSeconds":6,"read75Pct":78,"spPct":4,"backViews":19,"outClicks":0,"deadClicks":69,"rageClicks":1,"messageViews":3,"formStarts":0,"formSubmits":0,"formSubmitsValid":0,"messagesReceived":0},
  {"week":"2026-10-12","label":"2026-10-12 〜 10-18","views":22,"medianSeconds":17,"read75Pct":5,"spPct":36,"backViews":0,"outClicks":0,"deadClicks":1,"rageClicks":0,"messageViews":0,"formStarts":0,"formSubmits":0,"formSubmitsValid":0,"messagesReceived":2}],
 "byPage（TOP と関係するページ）": [
  {"path":"/","views":100,"medianSeconds":21,"read25Pct":42,"read50Pct":37,"read75Pct":36,"read100Pct":33,"deadClicks":2,"rageClicks":0,"copies":0,"videoPlays":45,"outClicks":0},
  {"path":"/series8","views":7,"medianSeconds":18,"read25Pct":29,"read50Pct":29,"read75Pct":14,"read100Pct":0,"deadClicks":0,"rageClicks":0,"copies":0,"videoPlays":0,"outClicks":0},
  {"path":"/gpu-buy-or-rent","views":3,"medianSeconds":9,"read25Pct":67,"read50Pct":67,"read75Pct":33,"read100Pct":0,"deadClicks":0,"rageClicks":0,"copies":0,"videoPlays":0,"outClicks":0}],
 "referrers": [
  {"from":"（直接・不明）","count":770},{"from":"www.google.com","count":89},{"from":"（サイト内）","count":44},{"from":"search.yahoo.co.jp","count":6},{"from":"app.raindrop.io","count":2},{"from":"www.linkedin.com","count":2},{"from":"gemini.google.com","count":1},{"from":"pixelstomotors.github.io","count":1},{"from":"www.city.oga.akita.jp","count":1},{"from":"websearch.excite.co.jp","count":1},{"from":"com.linkedin.android","count":1},{"from":"www.youtube.com","count":1}],
 "areas": [
  {"area":"本文","count":42},{"area":"ページの中身","count":22},{"area":"ヘッダー","count":15},{"area":"目次","count":7},{"area":"sim","count":7},{"area":"フッター","count":3},{"area":"前後の記事","count":2},{"area":"関連記事","count":2},{"area":"その他","count":1},{"area":"現在地","count":1}],
 "clicks（多い順の10件）": [
  {"target":"/｜ヘッダー","count":4},{"target":"btn:シリーズ｜ヘッダー","count":4},{"target":"iframe:/embeds/day126-F4igYhgG.html｜本文","count":2},{"target":"/issues｜ヘッダー","count":2},{"target":"/series6｜ヘッダー","count":2},{"target":"#index_R7T_TlUx｜目次","count":2},{"target":"/series8｜本文","count":2},{"target":"/record/drag-teach-waypoint-replay｜その他","count":1},{"target":"#index_dLFWrz7T｜目次","count":1},{"target":"/record/day19｜前後の記事","count":1}]
}

コードとデータの全量

ページの文の正は src/data/thinking.ts です。縦書きのページは src/components/ThinkingPage.astro が組み、src/pages/thinking.astro が /thinking として出します。

src/data/thinking.ts（ページの文・引用・縦書きの折り返し位置）

// 考察記事から、いま考えていることと目指すことを伝えるページの文（試作）
// 文の正：iCloud の 記事/考えのページ/下書き_考えのページ_3版.md（codex で2回検証）
// 「」の引用は、対話形式の記事の中の本人の発言だけ（原文と一字一句同じ）

export type Log = { n: string; slug: string };
const L = (n: number, slug: string): Log => ({ n: `LOG${n}`, slug });

export const LOGS = {

src/components/ThinkingPage.astro（横組みと縦書きの組み方・組版の値）

---
// 考察記事から、いま考えていることと目指すことを伝えるページ（試作）
// v="yoko"：全部を横組みの読み物に。出典・見出しの番号・ラベルは左の余白に置く
// v="tate"：最初の画面と本人の言葉（「」）を縦書きに。説明の文は横組み
import { TOP, NOW, AXES, CHANGES, OPEN, AIM, TATE_BREAKS, type Log } from '../data/thinking';
import V from './ThinkingVoice.astro';
interface Props { v: 'yoko' | 'tate' }
const { v } = Astro.props;

src/components/ThinkingVoice.astro（本人の言葉1つ分）

---
// 考察記事のページ（試作）：本人の言葉を1つ置く。左の余白に出典の LOG
// 「」は、本人が対話の中で言った言葉を一字一句変えずに載せた、という印（ページの中でここだけに付ける）
import type { Voice } from '../data/thinking';
interface Props { q: Voice; tate: boolean; html?: string; big?: boolean; when?: string }
const { q, tate, html, big = false, when } = Astro.props;
---
<figure class={`row voice${big ? ' big' : ''}`}>
  <figcaption class="note mono"><a href={`/record/${q.log.slug}`}>{q.log.n}</a>{when && <span class="when">{when}</span>}</figcaption>
  <blockquote class="txt">{tate ? <p set:html={html} /> : <p>{q.t}</p>}</blockquote>
</figure>

src/pages/thinking.astro（/thinking のページ）

---
// 考察記事から、いま考えていることと目指すことを伝えるページ（縦書き）
// 言葉だけで伝えるページ。写真・動画・ロボットの絵は使わない。LP ではない
// 文の正は src/data/thinking.ts（codex で3回検証）。入口は TOP と /series5（ThinkingBanner）
import Base from '../layouts/Base.astro';
import ThinkingPage from '../components/ThinkingPage.astro';
import { SITE, AUTHOR, PUBLISHER } from '../lib/seo';
const path = '/thinking';
const url = SITE + path;
const title = 'ロボットに、何を任せればいいのか ― 考察記事から、いま考えていること';
const description = '動かすことと、現場で使われることは違う。2026年10月までの考察記事から、いま考えていること・考えの軸・考えが変わったこと・まだ分からないこと・目指すことを、本人の言葉と一緒に言葉だけでまとめたページ。';
const published = '2026-10-24';
const jsonLd = [
  {
    '@context': 'https://schema.org', '@type': 'Article', headline: title, description, url, mainEntityOfPage: url,
    image: [SITE + '/og/thinking.jpg'], inLanguage: 'ja', datePublished: published, dateModified: published,
    author: AUTHOR, publisher: PUBLISHER,
    isPartOf: { '@type': 'CollectionPage', name: '考察記事（Deep Dive）', url: SITE + '/series5' },
    about: [{ '@type': 'Thing', name: 'フィジカルAI' }, { '@type': 'Thing', name: 'ロボットの社会実装' }],
  },
  {
    '@context': 'https://schema.org', '@type': 'BreadcrumbList',
    itemListElement: [
      { '@type': 'ListItem', position: 1, name: 'Pixels to Motors', item: SITE + '/' },
      { '@type': 'ListItem', position: 2, name: '考察記事', item: SITE + '/series5' },
      { '@type': 'ListItem', position: 3, name: 'ロボットに、何を任せればいいのか', item: url },
    ],
  },
];
---
<Base title={`${title} | Pixels to Motors`} description={description} path={path} ogImage="/og/thinking.jpg" ogType="article" published={published} modified={published} jsonLd={jsonLd}>
  <link slot="head" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" />
  <ThinkingPage v="tate" />
</Base>

src/components/ThinkingBanner.astro（TOP と /series5 の入口）

---
// 考えのページ（/thinking）への入口。TOP と /series5 に置く
// LP のバナー（黒い面・写真・差し色）とは分け、考えのページと同じ紙の色と明朝で、問いを縦に置く
---
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap" />
<a class="tbn" href="/thinking" data-ev="考えのページへ">
  <span class="tbn-q" aria-hidden="true">ロボットに、<br />何を任せればいいのか。</span>
  <span class="tbn-text">
    <span class="tbn-label">2026年10月までの考察記事から、いま考えていること</span>
    <span class="tbn-title">ロボットに、何を任せればいいのか。</span>
    <span class="tbn-lead">動かすことと、現場で使われることは違う。その間を、実機を触りながら考えています。考察記事から、考えの軸と、まだ分からないこと、目指すことを言葉だけでまとめました。</span>
    <span class="tbn-go">読む<i class="ms">arrow_forward</i></span>
  </span>
</a>
<style>
  .tbn { display: grid; grid-template-columns: minmax(0, 30em) auto; justify-content: center; align-items: center; gap: 72px; padding: 48px 48px; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,.08); background: #f5f3ee; color: #22201c; text-decoration: none;
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; }
  .tbn:focus-visible { outline: 2px solid #121418; outline-offset: 3px; }
  .tbn-q { grid-column: 2; grid-row: 1; writing-mode: vertical-rl; white-space: nowrap; font-size: 28px; line-height: 1.7; letter-spacing: .08em; font-weight: 700; }
  .tbn-text { grid-column: 1; grid-row: 1; display: grid; gap: 14px; }
  .tbn-label { font-size: 12px; line-height: 1.8; letter-spacing: .06em; color: #696459; }
  .tbn-title { display: none; }
  .tbn-lead { font-size: 15px; line-height: 2; letter-spacing: .04em; text-wrap: pretty; }
  .tbn-go { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 20px; border-radius: 4px; background: #22201c; color: #f5f3ee;
    font: 700 14px/1 var(--sans); transition: background .15s; }
  .tbn:hover .tbn-go { background: #000; }
  .tbn-go .ms { font-size: 18px; transition: transform .2s; }
  .tbn:hover .tbn-go .ms { transform: translateX(3px); }
  @media (max-width: 699px) {
    .tbn { grid-template-columns: 1fr; justify-content: stretch; gap: 20px; padding: 28px 20px; }
    .tbn-q { display: none; }
    .tbn-title { display: block; font-size: 22px; line-height: 1.5; font-weight: 700; word-break: auto-phrase; }
    .tbn-text { grid-column: 1; }
  }
</style>

src/components/GuideCards.astro（TOP の導入前ガイドのカード2枚）

---
// TOP の「導入前ガイド」：LP 2つ（GPU を買うか借りるか・配膳ロボットの導入前シミュレーション）への入口を横に並べる
// GPU は黒い面で、背景の写真の上に文字をそのまま置く。配膳ロボットは明るい面に、文字を左・店の立体の絵（SVG・試算と同じ店）を右に置く
// 3D の店の録画は高さ 720px までしかなく粗く見えたため、どの大きさでも粗くならない線の図にした。
// 縦に切り抜くと何の図か分からず、白黒の平面図は色味がなかったので、同じ店を斜め上から見た立体の絵（tools/make_cta_iso.py で作る）を切らずに置く
// 配膳ロボットの数字（○/99条件）は、ここだけでは意味が分からずノイズに見えたので載せない（2026-10-24）
// 2枚がひと目で別のものと分かるように、面の色と組み方を変える（中身の順番はそろえる）。/series6 は GuideBanner（1本）のまま
const cards = [

src/components/ServingBanner.astro（/series8 の配膳ロボットの LP への入口）

---
// 配膳ロボットの導入前シミュレーション（LP・/serving-robot-one-less-staff）への入口。/series8 の説明の下に置く
// TOP の導入前ガイドの配膳ロボットのカードと同じ見た目（明るい面・左に文字・右に同じ店の立体の絵 cta-iso.svg）を、横長の帯にしたもの
// 組み方はバナーの幅で切り替える（画面の幅ではない）。720px 未満では絵を上・文字を下に置き、文字が絵に押されて細くならないようにする
---
<div class="sv-wrap">
  <a class="sv-bn" href="/serving-robot-one-less-staff" data-ev="series8:配膳ロボットLP">
    <span class="sv-img"><img src="/site/srl/cta-iso.svg" alt="店の立体図（席・キッチン・配膳ロボットの通り道）" width="1400" height="900" loading="lazy" /></span>
    <span class="sv-text">
      <span class="sv-label">導入前シミュレーション</span>
      <span class="sv-title">配膳ロボットを、導入前に自分の店舗でシミュレーション</span>
      <span class="sv-sub">このシリーズの試算を、店舗で使える形にまとめたページです。店舗の図面と人数から、何人で回るか・どこで止まるか・月いくらかかるかを出します。</span>
      <span class="sv-go">読む<i class="ms">arrow_forward</i></span>
    </span>
  </a>
</div>
<style>
  .sv-wrap { container-type: inline-size; }
  .sv-bn { display: grid; grid-template-columns: 1fr; overflow: hidden; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,.08); background: #eceef1; color: #121418; text-decoration: none; }
  .sv-bn:focus-visible { outline: 2px solid #121418; outline-offset: 3px; }
  .sv-img { position: relative; display: block; height: 220px; overflow: hidden; }
  .sv-img img { position: absolute; top: 12px; left: 12px; display: block; width: calc(100% - 24px); height: calc(100% - 24px); object-fit: contain; object-position: 50% 50%; transition: transform .6s ease; }
  .sv-bn:hover .sv-img img { transform: scale(1.03); }
  .sv-text { display: grid; align-content: center; gap: 10px; padding: 24px 20px 28px; word-break: auto-phrase; text-wrap: pretty; }
  .sv-label { font: 700 12px/18px var(--sans); color: #5c616b; letter-spacing: .08em; }
  .sv-title { margin-top: 4px; font: 900 22px/1.45 var(--sans); }
  .sv-sub { font: 400 14px/1.7 var(--sans); color: #4a4f58; max-width: 40em; }
  .sv-go { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 44px; margin-top: 6px; padding: 0 20px; border-radius: 4px;
    background: #f2600c; color: #fff; font: 700 14px/1 var(--sans); white-space: nowrap; transition: background .15s, color .15s; }
  .sv-bn:hover .sv-go { background: #121418; color: #fff; }
  .sv-go .ms { font-size: 18px; transition: transform .2s; }
  .sv-bn:hover .sv-go .ms { transform: translateX(3px); }
  /* 広いときは文字を左・絵を右に。文字の列は 360〜600px、残りの幅に絵を真ん中に置く */
  @container (min-width: 720px) {
    .sv-bn { grid-template-columns: minmax(360px, 600px) minmax(0, 1fr); }
    .sv-img { grid-column: 2; grid-row: 1; height: auto; min-height: 260px; }
    .sv-img img { top: 16px; left: 0; width: calc(100% - 24px); height: calc(100% - 32px); object-position: 50% 50%; }
    .sv-text { grid-column: 1; grid-row: 1; padding: 36px 24px 36px 36px; }
  }
</style>

tools/make_cta_iso.py（配膳ロボットのカードの立体の絵を作るスクリプト）

"""TOP の導入前ガイド・配膳ロボットのカードの絵（public/site/srl/cta-iso.svg）を作る。
試算と同じ店（plan-p1.svg：席・キッチン・レジの位置）を、斜め上から見た立体の絵にする。
色は配膳ロボットの LP で使っている色だけ（オレンジ #f2600c・黄色 #f2c230・青 #2f5bd8・濃い灰色）。
ロボットの通り道は、通路の中心を通る見せ方の線で、試算の結果ではない。
使い方：python3 tools/make_cta_iso.py
"""
import re, math
import os

src/pages/index.astro（TOP。セクションの並び）

---
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';

codex の検証結果 1回目（codex_検証結果_1回目.md）

判定は **「直してから」** です。主な問題は引用の誤字ではなく、仮説を実績に変えていること、条件付きの考えを一般化していること、研究・発信と導入事業の目的が混ざっていることです。

指定された9箇所の引用は、すべて出典中に一字一句一致する部分があり、本人の発言と確認できました。ただし、部分引用の前後関係には問題があります。また、指定外の **P029のかぎ括弧内は出典と一致しません。**

以下、重大なものから並べます。根拠欄では、本人の発言と、AIの応答・地の文を区別します。

---

codex の検証結果 2回目（codex_検証結果_2回目.md）

判定は **「直してから」** です。1回目の原因断定や効果の保証は修正されています。残るのは、引用の条件、評価軸の対象、過去の未解決事項を現在の状態として扱う書き方です。

指定の引用10箇所（P004・P007・P012・P017・P022・P023・P027・P030・P031・P033）は、**すべて出典と一字一句一致し、本人の独立した発言として確認できました。** 以下は、文字の誤りではなく、使う文脈への指摘です。

---

**[⚠️ 要注意] P021・P022**

codex の検証結果 3回目（codex_検証結果_3回目.md）

結論は **直してから** です。主な問題は、引用の捏造ではなく、**計画を実績に変えたこと、AI側の説明を本人の認識や経験に移したこと、一度の判断を現在の習慣に広げたこと**です。

[出典本文](</Users/shimazueiichi/Library/Mobile Documents/com~apple~CloudDocs/デスクトップ/ADAPT DESIGN/じぶんの/PixelstoMotors/デジタルツイン学習R2R2R/記事/考えのページ/出典_考察記事66本.md>)と照合しました。確認済みの旧文は再判定していません。

**[❌ NG] N15 — 計画を実施済みにし、異なる数字を同じ単位にした**

問題：100万は学習データの操作エピソード数で、100万回の試行ではありません。また、本文には10エピソードを実施した記録がなく、始めましたとは書けません。