# 課題地図を9秒で去る人に1つ読ませたい ― 最初の画面を写真つきの3課題に - 記録: LOG507（ひとり研究所の裏側） - 公開: 2026/11/14 - 記事のページ: https://pixelstomotors.com/record/issues-map-first-screen-top-three - サイト: Pixels to Motors（ADAPT DESIGN / 島津 栄一） https://pixelstomotors.com/ - 要約: pixelstomotors.com の課題地図は、人が21回開いても表示時間の中央値が9秒で、課題のページへ進んだのは1回ほどだった。最初の画面を、緊急度と深刻度が最も高い3課題の写真つきカードとボタン1つに変えた。 > AI が読むための記事の全文です（コード・実行ログを含む）。引用するときは上の「記事のページ」の住所を使ってください。 --- **pixelstomotors.com の課題地図（/issues）は、2026年10月26日から11月14日までに人が21回開いたが、表示時間の真ん中の値は9秒で、25%より下まで進んだのは1回、課題地図の中のリンクを押したのも1回だった。** そこで最初の画面を、42件の課題のうち緊急度と深刻度が最も高い3件を写真つきのカードで並べ、ボタンを「42件すべてを見る」の1つにする形に変えた。 この直しで、次のことが変わりました。 - 開いた人が、最初の画面で「まず何を読めばいいか」を3つの課題として受け取れるようになった。前は、見出しと長い説明文と数字5つのあとに、ボタンが2つ並んでいた - 同じ42件の課題の名前が、分類の箱と一覧で2回並ぶことがなくなった。目立たせる印（42件中26件に付いていた）もなくなった - サイトのトップにあった課題地図のバナーは「36件」のまま古くなっていた。課題のデータから件数を数える形に作り直し、トップの下のほうから上から5分の1ほどの位置へ上げた - かかった時間は、改修案を出してから課題地図の公開まで約40分（08:41〜09:20ごろ）、トップのバナーが約5分（09:31〜09:35）。エイイチが手を動かしたのは、方向を選ぶ・写真を選ぶ・Studio.Stock にログインする・写真の切り抜き方を指示する、の4つ。効いたかどうかは、課題地図から課題ごとのページへ進んだ回数で、この先の人の表示が30回を超えてから確かめる（下の作業ログの「効いたかの見方」） 課題地図は、フィジカルAI（現実の物を動かす AI）とロボットが社会で使われる前に解いておかないといけない課題を、技術・制度・体験の3つの視点で42件に整理したページです。週に1回、各課題に関わる新しい動きを出典つきで足しています。このサイトの中では、研究の記録と並ぶもう1つの柱のつもりで作ってきました。 ところが、週の分析でサイトの計測（ページごとに、人がどこまで下に進んだか・何秒いたか・どこを押したかを数える自前の仕組み）を見ると、課題地図は「開いて、9秒ほど見て、離れる」使われ方をしていました。TOP（40回）に次いで、GPU を買うか借りるかのページと並んで2番目に多く開かれているのに、中身はほとんど読まれていません。 | やったこと | なぜ | 結果 | |---|---|---| | 週の3つの数字とページごとの読まれ方を見た | 週の分析 | 課題地図は21回開かれ、25%より下まで進んだのは1回 | | 課題地図から次にどこへ移ったかを見た | 中を回っているかを確かめるため | 21回のうち、次の行き先の記録があるのは4回。課題ごとのページの表示は合わせて4回ほど | | 改修の方向を3つ出した | 何を主役にするかを先に決めるため | エイイチが「まず読む3つ」を選んだ | | カードの印を、番号 → アイコン → 写真と替えた | アイコンだけでは物足りないとエイイチが判断したため | Studio.Stock の AI で作られた写真3枚に決めた | | 課題地図を直して公開した | 最初の画面で1つ開かせるため | 3課題のカード・ボタン1つ・分類の箱から名前の一覧を外した | | トップの課題地図のバナーを作り直した | 「36件」のまま古くなっていたため | 件数を自動で数え、位置を上げた | [図解: LOG507_issues_first_screen.html](https://pixelstomotors.com/embeds/LOG507_issues_first_screen.html) ## 作業ログ ― 週の分析から課題地図とトップのバナーの公開まで ここから下は、作業の順に、取った数字・決めたこと・コードを全部残す。効果の数字は、測った値と見込みを分けて書く。直した後の数字はまだ取れていないので、「見込める効果」は見込み。 ### 11/9の週の3つの数字：AI の依頼読みは40、人の表示は68（6日分） このサイトで主に見る3つの数字は、AI の利用者の依頼で読みに来た数（ChatGPT・Claude・Perplexity などが、だれかに頼まれてページを取りに来た回数）、AI のサービスのリンクから来た人の数、サイト名で検索して来た人の数。11月14日の朝に、計測をつないだ道具（MCP の kpi・site_usage・crawler_visits）で取った。下の表は記事を書くときに取り直した数（09:38）で、11/9 の週の AI の依頼読みは、朝の39から40に1つ増えている。 | 週（月曜はじまり） | AI の依頼読み | AI のリンクから来た人 | サイト名の検索 | 人の表示 | |---|---|---|---|---| | 10/26〜11/1 | 55 | 0 | 0 | 164 | | 11/2〜11/8 | 61 | 3 | 0（途中の数） | 136 | | 11/9〜11/14（6日） | 40 | 1 | まだ記録していない | 68 | この週に、AI の依頼読みの中に初めて Perplexity-User（Perplexity の利用者の依頼で読む仕組みの名乗り）が5件出た。1件ずつの時刻を出すと、11月13日 05:03 の1秒の間に `/settings`・`/manage/env`・`/__debug__/` など、設定や秘密の値の置き場所を探す住所を取りに来ていた。同じ時刻帯に、GPTBot・ClaudeBot・Googlebot など20種ほどの名乗りを順に使って、`/.aws/credentials`・`/gcp-key.json`・`/.git/config` のような住所を探す記録が並んでいた。**AI の名乗りを借りて、秘密のファイルを探して回る機械だった。** どれもサイトにはない住所で、すべて404（ページがない）を返している。この5件を除くと、この週の AI の依頼読みは35になる。ChatGPT-User を名乗った同じ種類の4件は、Cloudflare が本物ではないと判定していて、もともと数に入っていなかった。 もう1つ見つかったのは、ページの中で組み立てる前のプログラムの書きかけ（`{s.img.startsWith('/')`）を、GPTBot と ClaudeBot がリンクの行き先と読んで取りに来ていた記録。これはサイトに実在しない住所の404で、前に「コードの中の文字列を住所と読んだ404は直さない」と決めた種類のもの（LOG411）。 人の表示が11/11 から急に減っている件は、LOG494 で調べて、原因はまだ決められないとしたまま。Search Console（Google の検索での表示回数を見る道具）の数が出そろうのを待っている。 ### ページごとの読まれ方：TOP と並んで、課題地図と GPU のページが多く開かれていた 人の表示だけを、ページごとに数えた（10/26〜11/14）。 | ページ | 人の表示 | 表示時間（真ん中の値） | 25%まで | 50%まで | 75%まで | 下まで | |---|---|---|---|---|---|---| | TOP（/） | 40 | 15秒 | 70% | 48% | 28% | 18% | | GPU は買うか借りるか（/gpu-buy-or-rent） | 21 | 11秒 | 52% | 52% | 10% | 0% | | 課題地図（/issues） | 21 | 9秒 | 5% | 0% | 0% | 0% | | 4コマの一覧（/manga-archive） | 14 | 9秒 | 21% | 7% | 7% | 0% | | 導入シミュレーションのシリーズ（/series8） | 12 | 15秒 | 17% | 17% | 17% | 8% | | DAY18（Figma のバリアブルとスタイル） | 11 | 53秒 | 91% | 64% | 27% | 9% | | メッセージ（/message） | 11 | 10秒 | 100% | 100% | 91% | 9% | | DAY17（4コママンガの SNS 投稿術） | 7 | 30秒 | 86% | 86% | 43% | 0% | | DAY12（ハコブくんの管理画面の UI デザイン） | 6 | 39秒 | 100% | 67% | 50% | 33% | 最後まで読まれているのは、初期の DAY の記事（12・17・18）だった。3本とも「薬剤搬送ロボット」のシリーズの中で書いた、Figma の色の管理や管理画面のデザインの解説で、ロボットの研究そのものより、29年のデザイナー経験から書いた内容になる。ページごとにどこから来たかは今回は取っていないので、検索から来ているかは確かめていない。 GPU のページは、10/28 の改善（改善 No.01）で最初の画面に結論を出した。そのとき「結論を読んで前半で離れるのは失敗ではない」と決めているので、75%まで進むのが1割という形は狙いどおりになる。見るべきなのは計算機（#calc）が押されるかで、こちらはまだ0回。 課題地図は、表示は GPU のページと同じ21回なのに、25%より下まで進んだのが1回だけだった。 ### 課題地図から次にどこへ移ったか：21回のうち、課題地図の中を回ったのは1回 計測は、ページからページへの移り方も記録している。課題地図にかかわる移り方を抜き出した。 | 移り方 | 回数 | |---|---| | 課題地図 → 4コマの一覧（/manga-archive） | 2 | | 課題地図 → 課題地図の更新履歴（/issues/updates） | 1 | | 更新履歴 → 4コマの一覧 | 1 | | 記事（配膳ロボットの隠れた待ち）→ 課題地図 | 1 | | TOP → 課題地図 | 1 | | 記事（DAY126）→ 課題地図 | 1 | | 課題「動作のポータビリティ」→ ロボティクスの単語帳の記事 | 1 | 課題地図を開いた21回のうち、次の行き先の記録があるのは4回で、残りの17回はそのページで閉じたか、前のページに戻ったと考えられる。課題ごとのページの表示は、責任の分け方（/issues/liability-demarcation）が2回、シミュレーションと実機の差（/issues/sim2real-gap）が1回、動きの持ち運び（/issues/motion-portability）が1回だった。課題地図への入り口は、ヘッダーのメニューの「課題地図」が5回押されていた。メニューを順に見て回る人が、中身を読まずに次へ移っている形に見える。 エイイチは、ここまでで十分と判断した。 > いやもう十分でしょ。改修案を考えてください。 Claude は直前に、どのページも人の表示が30回に届いていないので、直しても効いたかは判断できない見込みだと伝えていた（Web の改善の決まりで、対象の数が30未満なら「判断できない」とする）。11/5 には「次に直すのは TOP。11/16 の分析で決める」とも決めていた。エイイチはそれを踏まえて、課題地図を先に直すことにした。 ### 課題地図の中身を確かめた：同じ42件が2回並び、印は42件中26件に付いていた 課題地図のトップ（p2m-site の `src/pages/issues.astro`）の並びは次のとおりだった。 1. 最初の画面：見出し、長い説明文（「個別のデモ動画や製品発表ではなく、放置すればフィジカルAIの社会実装そのものが頓挫する——」）、数字5つ（42課題・9分類・9規制・50出典・17件の最近の動き）、ボタン2つ（課題一覧を見る・関連でたどる課題マップ） 2. 最近の動き（6件） 3. 9つの分類：分類ごとの箱の中に、その分類の課題の名前を全部並べている（合わせて42件） 4. 社会実装で論点となる規制・制度 5. すべての課題：42件のカード（2回目） 6. この課題地図について ![直す前の課題地図の最初の画面。見出しと長い説明文、数字5つ、ボタン2つが並ぶ](https://pixelstomotors.com/media/LOG507_01_issues_before_pc.png) ![直す前の「9つの分類」。分類ごとの箱の中に課題の名前が全部並び、緊急度と深刻度がどちらも4以上の課題は濃い字になっている](https://pixelstomotors.com/media/LOG507_02_issues_before_categories.png) 「9つの分類」の箱の中では、緊急度と深刻度がどちらも4以上の課題を濃い字にしていた。数えると、42件のうち26件がこれにあたる。半分以上に付いた印は、どれが大事かを伝えられない。 ### 改修の方向を3つ出した：エイイチは「まず読む3つ」を選んだ 案は、並べ方の違いではなく、何をページの主役にするかの違いで出す（デザインの進め方の決まり）。 | 方向 | 主役 | よい所 | 弱い所 | |---|---|---|---| | A：「まず読む3つ」 | 緊急度と深刻度が最も高い3課題 | 9秒で離れる人に、1つでも課題を開かせる | 3つ以外の課題は、下まで進まないと見えない | | B：「今週の動き」 | 今週わかった動き3件（出典つき） | 週1回の更新が見え、また来る理由になる | 動きが少ない週は、最初の画面が弱くなる | | C：「地図」 | 課題どうしのつながりの図（今の /issues/map） | 名前のとおりで、見た目の印象が強い | スマホでは図が小さく押しにくい。作り直す量がいちばん多い | どの方向でも、最初の画面のボタンは1つにする（2つあると迷う）。エイイチは A を選んだ。 緊急度と深刻度がどちらも満点（5と5）の課題は5件ある。並べ方の決まり（深刻度 → 緊急度 → 番号の順）で上から3件を取ると、介護現場へのロボット導入の壁（1番）、実機データの圧倒的不足（5番）、動作のポータビリティ不在（17番）になった。残りの2件は、人とロボットの共存安全基準（21番）と、物理を持つAIのセキュリティ（28番）。上の3件はどれも、このサイトでやっている研究（病院や店のロボットの試算、実機での学習、Motion UX）に近い。 ### 最初の画面だけを先に作った：説明文を1文にし、3課題のカードとボタン1つ デザインの進め方の決まりどおり、最初の画面1枚だけを先に仕上げて見せた。説明文を「放っておくと、ロボットが現場に入る前に止まってしまう課題を42件に整理しました。まず読むなら、この3つです。」の1文にした。数字5つは、ボタンの下の小さい1行（9分類・50出典・最近の動きを最後に調べた日）にまとめた。課題マップへのボタンは外し、42件の一覧の説明文の中の文字リンクに移した。上のタブからも行ける。 最初の案では、カードの頭に「01・02・03」の番号を置いた。エイイチから、番号より写真かアイコンのほうがよいのでは、と言われ、サイトで使っているアイコン（Material Symbols）に替えた。介護は歩く高齢者の人、実機データはデータベース、動きの持ち運びは左右の矢印。アイコンにした画面を見たエイイチの判断は「アイコンだけでは物足りない」だった。 写真が3枚そろうまではアイコンのままにし、そろったら写真に替わる作りにした。1枚だけ写真になると、そろって見えないため。 ### 写真を Studio.Stock で探した：ロボットの写真はなく、人と現場の写真から選んだ エイイチから、無料の写真の置き場所として [Studio.Stock](https://stock.studio.design/) を教えてもらった。Studio.Stock は、Web 制作の道具 Studio が出している写真の置き場所で、写真はすべて AI で作られたもの。Studio のヘルプでは、商用利用ができ、クレジットの表記もいらないとされている（[Studio.Stock のヘルプ](https://help.studio.design/en/articles/12761189-studio-stock)）。ダウンロードには Studio のアカウントでのログインがいる。 ページは開いてから中身を組み立てる作りで、外から取るだけでは検索の結果が読めなかった。そこでデスクトップアプリの中のブラウザで開き、英語の言葉で検索した結果から、写真の名前と番号を抜き出した。 | 検索の言葉 | 出てきたもの | |---|---| | robot arm | 腕を鍛える人、肩の骨の模型、生姜 など（ロボットはなし） | | robot | モーションキャプチャーの服の人、工場の作業者、金属部品を見る技術者 など | | elderly care | 介護職員と高齢者の写真 8枚 | | motion capture | ダンスの動き・光の線 など | | factory machine | 工場の作業者・金属部品を測る人 など | | technology lab | 研究者が動きのデータを見ている写真 など | | caregiver hospital | 介護職員が高齢者を手伝う写真 6枚 | **ロボットが写った写真は1枚もなかった。** 課題に近い人と現場の写真を11枚選び、並べてエイイチに見せた。 ![Studio.Stock で選んだ候補11枚。介護A〜D、データA〜C、動作A〜D](https://pixelstomotors.com/media/LOG507_06_studio_stock_candidates.jpg) Claude は介護B（車いすを押す介護職員の後ろ姿）とデータB（研究者2人が人の動きの骨組みを画面で見ている）を勧め、3枚目は合う写真がないので、Studio.Stock のプロンプト編集（文字の指示で写真を直す機能）か ChatGPT で作ることを勧めた。エイイチが選んだのは、介護A（笑顔の介護職員）・データB・動作D（工場の技術者）だった。カードに入れた画面を見て、3枚目を動作A（工場の通路を書類を持って歩く作業者）に替え、さらに顔は見せなくてよいと指示があったので、胸から下で切り抜いた。 写真は、Mac の上で Studio.Stock の置き場所から元の大きさのまま取り、iCloud の `PixelstoMotors/issues_images/top3_original/` に置いた。そこからカード用に 16:10・1200×750 の jpg に切り抜いた（顔の位置に合わせて、縦長の写真は上下の切り抜く位置を変えた）。公開用は Cloudflare R2（このサイトの画像と動画の置き場所）に `issues-top3-*.jpg` の名前で入れた。置き場所は MASTER の保存先の表に1行足した。 - ねらい：9秒で離れる人に、最初の画面で課題を1つ開かせる - 変わったこと：最初の画面が「見出し・長い説明文・数字5つ・ボタン2つ」から「見出し・1文・写真つきの3課題・ボタン1つ」になった - 見込める効果：課題地図から課題ごとのページへ進む回数が増える（直す前は21回のうち1回ほど）。見込みで、まだ測っていない ### スマホでは写真を左の正方形にした：1枚目のカードで画面が埋まったため 写真をカードの上に横長で入れると、スマホでは1枚目のカードだけで画面が埋まり、2枚目以降が見えなくなった。スマホのときだけ、写真を左の96px の正方形にし、課題の名前と要約を右に並べる形にした。これで最初の画面で2枚目のカードの頭まで見える。 ![直した後の課題地図の最初の画面（PC）。写真つきの3課題のカードと、ボタン「42件すべてを見る」](https://pixelstomotors.com/media/LOG507_03_issues_after_pc.png) ![直した後の課題地図の最初の画面（スマホ）。写真を左の正方形にし、2枚目のカードの頭まで見える](https://pixelstomotors.com/media/LOG507_04_issues_after_sp.png) 公開したあと、エイイチから説明文の改行の指示があった。「…課題を42件に整理しました。」と「まず読むなら、この3つです。」の間で改行し、PC で「3つです。」だけが次の行に落ちないようにした。 ### 分類の箱から課題の名前の一覧を外した：42件が2回並ばないように 「9つの分類」の箱には、分類の名前・件数・説明だけを残した。課題の名前は、下の「すべての課題」のカードで1回だけ見える。箱の中の濃い字（目立たせる印）も、一覧と一緒になくなった。 ![直した後の「9つの分類」。箱には分類の名前・件数・説明だけが残る](https://pixelstomotors.com/media/LOG507_05_issues_after_categories.png) ### トップの課題地図のバナーを作り直した：「36件」のまま古くなっていた 課題地図を公開したあと、エイイチから「TOPのバナーが古いので新しくしてください」と指示があった。トップの「記録」の一覧の下に置いていたバナー（`public/embeds/top-banner.html` を iframe で読むもの）は、課題が36件だったころの「PHYSICAL AI — 36 ISSUES TO SOLVE」と、36個の丸の図のままだった。字も、サイトの今の字（Inter と Noto Sans JP）ではなく、前の IBM Plex Mono だった。 ![直す前のトップの課題地図のバナー。36件のころの英字と丸の図のまま](https://pixelstomotors.com/media/LOG507_07_top_banner_before.png) この部品は、公開済みの記事（LOG343・LOG344）がコードの中に載せているので、消さずに残した。代わりに、トップのページの中に直接組む部品（`src/components/IssuesBanner.astro`）を新しく作った。件数は課題のデータから数えるので、課題が増えても「42件・9分類」が自動で合う。右には課題地図と同じ写真3枚を、課題の名前つきで並べた。形は、すぐ上の「1年の記録」のバナーにそろえた（白いカード・左に文字・右に写真・ボタン1つ）。 作り直している途中で、エイイチから、バナーのページの中での位置ももっと上に、と指示があった。トップは、25%の深さまで進むのが7割、半分までが5割しか読まれていない（上の表）。「記録」の一覧の下（ページの上から約8割の所）から、「Pixels to Motors の1年」のすぐ下（上から約5分の1の所）へ上げ、「課題地図 | Issues」の見出しを付けた。見出しと同じ「課題地図」の小さなラベルは、カードの中から外した。 ![直した後のトップの課題地図のバナー。写真3枚と、課題のデータから数えた「42件・9分類」](https://pixelstomotors.com/media/LOG507_08_top_banner_after.png) - ねらい：トップから課題地図へ来る人を増やす - 変わったこと：バナーの位置がトップの上から約8割 → 約5分の1になり、件数が36件 → 42件（自動）になった - 見込める効果：トップから課題地図への移り方（今は TOP → 課題地図が1回）が増える。見込みで、まだ測っていない。バナーには `data-ev="TOP:課題地図"` を付けたので、押された数は計測の「押したもの」に出る ### 効いたかの見方：課題地図から課題ごとのページへ進んだ回数 直す前の課題地図は、人の表示21回のうち、課題地図の中のリンクを押したのが1回、課題ごとのページの表示が合わせて4回ほどだった。直した後は、次の2つを見る。 | 見るもの | 直す前（10/26〜11/14） | 取れる場所 | |---|---|---| | 課題地図 → 課題ごとのページへの移り方 | ほぼ0（課題地図 → 更新履歴の1回だけ） | 計測の移り方（site_usage の moves） | | 「まず読む3つ」のカードが押された回数 | なし（カードがなかった） | 計測の押したもの | | トップのバナーが押された回数 | 記録なし（iframe の中だったため数えていない） | 計測の押したもの（TOP:課題地図） | 課題地図の人の表示は、この3週間で21回。30回に届くまでは「判断できない」とする。11/16 の週の分析で途中の数を見て、Web の改善の記録（web_improvement_trial.md）に改善 No.04 として書く。 ## 作業ログ ― コード・データ・手順 ここから下は、公開したコードの変更と、分析に使った数字の元データを全部載せる。数字の元データは、記事を書くときに取り直したもの（2026-11-14 09:38 JST に、Mac から計測の表を鍵つきで取った）。来た所（referrers）のうち、住んでいる場所が分かる自治体のサイトの名前は `<自治体のサイト>` に置き換えた。 ### 課題地図のトップの変更（commit cf784da・src/pages/issues.astro） 最初の画面を「まず読む3つ」とボタン1つにし、分類の箱から課題名の一覧を外した変更。写真がそろうまではアイコンで出す作りも入っている。 ```diff commit cf784daf271e9ddb269ba57d042df6d602d55951 Author: Claude Date: Sat Nov 14 09:19:30 2026 +0900 課題地図のトップ：最初の画面を「まず読む3つ」（写真つき）とボタン1つに。分類の箱から課題名の一覧を外した Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01LevEXS2w3GWf5pnT1ChrKx diff --git a/src/pages/issues.astro b/src/pages/issues.astro index 917dc69..f291d9e 100644 --- a/src/pages/issues.astro +++ b/src/pages/issues.astro @@ -3,11 +3,25 @@ import IssuesLayout from '../layouts/IssuesLayout.astro'; import IssueCard from '../components/issues/IssueCard.astro'; import NewsList from '../components/issues/NewsList.astro'; -import { allIssues, bySeverity, CATEGORIES, REGULATIONS, SOURCES, NEWS, LAST_CHECKED, ISSUES_TITLE, jdate } from '../lib/issues'; +import { allIssues, CATEGORIES, REGULATIONS, SOURCES, NEWS, LAST_CHECKED, ISSUES_TITLE, jdate } from '../lib/issues'; import { SITE, PUBLISHER } from '../lib/seo'; const issues = await allIssues(); const title = Object.fromEntries(issues.map((i) => [i.data.slug, i.data.title])); +const top3 = issues.slice(0, 3); +// 「まず読む3つ」のアイコン（Material Symbols）。課題を入れ替えたらここも直す +const ICON: Record = { + 'caregiving-robot-adoption': 'elderly', + 'real-robot-data-scarcity': 'database', + 'motion-portability': 'sync_alt', +}; +// 「まず読む3つ」の写真（R2 の住所）。3枚そろったら3つとも入れる。1つでも空ならアイコンで出す +const PHOTO: Record = { + 'caregiving-robot-adoption': '/media/issues-top3-caregiving.jpg', + 'real-robot-data-scarcity': '/media/issues-top3-data.jpg', + 'motion-portability': '/media/issues-top3-motion.jpg', +}; +const usePhoto = top3.every((i) => PHOTO[i.data.slug]); const nSources = SOURCES.reduce((n, g) => n + g.items.length, 0); const description = '放置すればフィジカルAI・ロボティクスの社会実装そのものが頓挫する構造的な課題を、技術・制度・体験の3つの視点を横断して抽出・整理した課題地図。週1回、最近の動きを出典つきで更新しています。'; const jsonLd = { @@ -20,19 +34,25 @@ const jsonLd = {

課題地図

{ISSUES_TITLE}

-

個別のデモ動画や製品発表ではなく、放置すればフィジカルAIの社会実装そのものが頓挫する——いま向き合うべき構造的な課題を、技術・制度・体験の3つの視点を横断して抽出・整理しました。

-
    -
  • {issues.length}課題
    • -
  • {CATEGORIES.length}分類
    • -
  • {REGULATIONS.length}規制・制度
    • -
  • {nSources}出典
    • -
  • {NEWS.length}件の最近の動き
    • -
+

放っておくと、ロボットが現場に入る前に止まってしまう課題を{issues.length}件に整理しました。まず読むなら、この3つです。

+
    + {top3.map((i) => ( +
  1. + + {usePhoto + ? + : {ICON[i.data.slug] ?? 'help'}} + {i.data.title} + {i.data.summary} + 緊急度 {i.data.urgency}・深刻度 {i.data.severity}arrow_forward + +
    2. + ))} +
- 課題一覧を見るarrow_downward - 関連でたどる課題マップarrow_forward + {issues.length}件すべてを見るarrow_downward
-

{LAST_CHECKED ? `最後に最近の動きを調べた日：${jdate(LAST_CHECKED)}（週1回）` : '最近の動きは週1回調べて更新します'}

+

{CATEGORIES.length}分類・{nSources}出典。{LAST_CHECKED ? `最近の動きを最後に調べた日：${jdate(LAST_CHECKED)}（週1回）` : '最近の動きは週1回調べて更新します'}

@@ -48,12 +68,11 @@ const jsonLd = {

社会実装を一つのシステムとして見て、課題を9つの分類に分けています。

{CATEGORIES.map((c) => { - const list = issues.filter((i) => i.data.category_slug === c.slug).sort(bySeverity); + const n = issues.filter((i) => i.data.category_slug === c.slug).length; return ( -

{c.name}{list.length}件

+

{c.name}{n}件

{c.desc}

-
    {list.map((i) =>
  • = 4 && i.data.severity >= 4 ? 'hot' : ''}>{i.data.title}緊{i.data.urgency}・深{i.data.severity}
    • )}
 ); })} @@ -77,7 +96,7 @@ const jsonLd = {

すべての課題（{issues.length}件）

-

深刻度・緊急度の高い順に並べています。カードの点数はどちらも5段階です。

+

深刻度・緊急度の高い順に並べています。カードの点数はどちらも5段階です。課題どうしのつながりは課題マップでたどれます。

{issues.map((i) => )}
@@ -97,10 +116,23 @@ const jsonLd = { .ihero-k { margin: 0; font: 500 13px/20px var(--sans); color: var(--ink-3); } .ihero-h { margin: 8px 0 16px; font: 600 36px/1.4 var(--sans); max-width: 900px; } .ihero-lead { margin: 0; font: 400 17px/2 var(--sans); max-width: 820px; } - .ihero-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 24px 0 0; padding: 0; font: 400 13px/20px var(--sans); color: var(--ink-2); } - .ihero-stats b { font: 500 24px/28px var(--sans); color: var(--ink); margin-right: 4px; } .ihero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .ihero-upd { margin: 16px 0 0; font: 400 12px/18px var(--sans); color: var(--ink-3); } + .top3 { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 32px 0 0; padding: 0; } + .t3 { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 24px; background: #fff; border-radius: 8px; + box-shadow: 0 8px 16px rgba(0,0,0,.08); transition: box-shadow .15s; } + .t3:hover { box-shadow: 0 8px 24px rgba(0,0,0,.16); } + .t3:hover .t3-title { text-decoration: underline; } + .t3-ph { display: block; margin: -24px -24px 6px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px 8px 0 0; background: #eee; } + .t3-ph img { width: 100%; height: 100%; object-fit: cover; display: block; } + .t3-ic { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 8px; background: var(--dark, #222); } + .t3-ic .ms { font-size: 28px; color: #fff; } + .t3-title { font: 600 20px/1.5 var(--sans); color: var(--ink); } + .t3-sum { font: 400 14px/1.8 var(--sans); color: var(--ink-2); } + .t3-meta { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 12px; border-top: 1px solid #eee; + font: 400 12px/20px var(--sans); color: var(--ink-3); } + .t3-meta .ms { font-size: 20px; color: var(--ink); } + .ilink { text-decoration: underline; color: var(--ink); } .more { margin: 24px 0 0; } .empty { margin: 0; padding: 20px; border-radius: 8px; background: #f5f5f5; font: 400 14px/1.8 var(--sans); color: var(--ink-3); } @@ -108,11 +140,7 @@ const jsonLd = { .cbox:hover { border-color: var(--ink); } .cbox h3 { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 6px; font: 600 16px/1.5 var(--sans); } .cbox h3 span { font: 400 12px/24px var(--sans); color: var(--ink-3); white-space: nowrap; } - .cbox p { margin: 0 0 12px; font: 400 13px/1.7 var(--sans); color: var(--ink-2); } - .cbox ul { list-style: none; margin: auto 0 0; padding: 0; border-top: 1px solid #eee; } - .cbox li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f2f2f2; font: 400 13px/1.6 var(--sans); color: var(--ink-2); } - .cbox li.hot span { color: var(--ink); font-weight: 500; } - .cbox li small { font-size: 11px; color: var(--ink-3); white-space: nowrap; } + .cbox p { margin: 0; font: 400 13px/1.7 var(--sans); color: var(--ink-2); } .regs { display: flex; flex-direction: column; gap: 16px; } .reg { padding: 20px; border: 1px solid #e3e3e3; border-radius: 8px; } @@ -129,9 +157,23 @@ const jsonLd = { .about li { margin: 0 0 12px; font: 400 15px/1.9 var(--sans); color: var(--ink-2); } .about b { color: var(--ink); font-weight: 600; } .about a { text-decoration: underline; } + @media (max-width: 899px) and (min-width: 600px) { + .top3 { grid-template-columns: 1fr; } + } @media (max-width: 599px) { .ihero { padding-top: 32px; } .ihero-h { font-size: 26px; } .ihero-lead { font-size: 15px; } + .top3 { grid-template-columns: 1fr; } + .t3 { padding: 18px 20px; gap: 6px; } + .t3-ph + .t3-title { margin-top: 0; } + .t3:has(.t3-ph) { display: grid; grid-template-columns: 96px 1fr; column-gap: 14px; row-gap: 4px; padding: 14px; align-items: start; } + .t3:has(.t3-ph) .t3-ph { grid-row: 1 / span 3; margin: 0; width: 96px; aspect-ratio: 1; border-radius: 6px; } + .t3:has(.t3-ph) .t3-meta { grid-column: 2; padding-top: 8px; } + .t3-ic { width: 40px; height: 40px; } + .t3-ic .ms { font-size: 24px; } + .t3-title { font-size: 17px; } + .t3-sum { font-size: 13px; line-height: 1.7; } + .top3 { gap: 12px; margin-top: 24px; } } ``` ### 説明文の改行（commit 58f31c9） ```diff commit 58f31c91dd61fe60adfc5e34ce03412566187ef2 Author: Claude Date: Sat Nov 14 09:24:31 2026 +0900 課題地図のトップ：説明文を「整理しました。」で改行 Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01LevEXS2w3GWf5pnT1ChrKx diff --git a/src/pages/issues.astro b/src/pages/issues.astro index f291d9e..aa814a6 100644 --- a/src/pages/issues.astro +++ b/src/pages/issues.astro @@ -34,7 +34,7 @@ const jsonLd = {

課題地図

{ISSUES_TITLE}

-

放っておくと、ロボットが現場に入る前に止まってしまう課題を{issues.length}件に整理しました。まず読むなら、この3つです。

+

放っておくと、ロボットが現場に入る前に止まってしまう課題を{issues.length}件に整理しました。
まず読むなら、この3つです。

    {top3.map((i) => (
  1. ``` ### 課題地図のトップの全文（公開後の src/pages/issues.astro） ```astro --- // 課題地図のトップ（/issues） import IssuesLayout from '../layouts/IssuesLayout.astro'; import IssueCard from '../components/issues/IssueCard.astro'; import NewsList from '../components/issues/NewsList.astro'; import { allIssues, CATEGORIES, REGULATIONS, SOURCES, NEWS, LAST_CHECKED, ISSUES_TITLE, jdate } from '../lib/issues'; import { SITE, PUBLISHER } from '../lib/seo'; const issues = await allIssues(); const title = Object.fromEntries(issues.map((i) => [i.data.slug, i.data.title])); const top3 = issues.slice(0, 3); // 「まず読む3つ」のアイコン（Material Symbols）。課題を入れ替えたらここも直す const ICON: Record = { 'caregiving-robot-adoption': 'elderly', 'real-robot-data-scarcity': 'database', 'motion-portability': 'sync_alt', }; // 「まず読む3つ」の写真（R2 の住所）。3枚そろったら3つとも入れる。1つでも空ならアイコンで出す const PHOTO: Record = { 'caregiving-robot-adoption': '/media/issues-top3-caregiving.jpg', 'real-robot-data-scarcity': '/media/issues-top3-data.jpg', 'motion-portability': '/media/issues-top3-motion.jpg', }; const usePhoto = top3.every((i) => PHOTO[i.data.slug]); const nSources = SOURCES.reduce((n, g) => n + g.items.length, 0); const description = '放置すればフィジカルAI・ロボティクスの社会実装そのものが頓挫する構造的な課題を、技術・制度・体験の3つの視点を横断して抽出・整理した課題地図。週1回、最近の動きを出典つきで更新しています。'; const jsonLd = { '@context': 'https://schema.org', '@type': 'CollectionPage', name: ISSUES_TITLE, description, url: SITE + '/issues', inLanguage: 'ja', publisher: PUBLISHER, hasPart: issues.map((i) => ({ '@type': 'Article', headline: i.data.title, url: `${SITE}/issues/${i.data.slug}` })), }; ---

    課題地図

    {ISSUES_TITLE}

    放っておくと、ロボットが現場に入る前に止まってしまう課題を{issues.length}件に整理しました。
    まず読むなら、この3つです。

      {top3.map((i) => (
    1. {usePhoto ? : {ICON[i.data.slug] ?? 'help'}} {i.data.title} {i.data.summary} 緊急度 {i.data.urgency}・深刻度 {i.data.severity}arrow_forward
      2. ))}
    {issues.length}件すべてを見るarrow_downward

    {CATEGORIES.length}分類・{nSources}出典。{LAST_CHECKED ? `最近の動きを最後に調べた日：${jdate(LAST_CHECKED)}（週1回）` : '最近の動きは週1回調べて更新します'}

    最近の動き

    各課題に関わる規制・研究・事業の新しい動きを、週1回、出典つきで足しています。要約は出典の言い回しを使わずに書いています。

    {NEWS.length > 0 ? <>

    すべての動きと更新履歴arrow_forward

    :

    最初の調査の結果を待っています。見つかった動きはここに載ります。

    }

    9つの分類

    社会実装を一つのシステムとして見て、課題を9つの分類に分けています。

    {CATEGORIES.map((c) => { const n = issues.filter((i) => i.data.category_slug === c.slug).length; return (

    {c.name}{n}件

    {c.desc}

     ); })}

    社会実装で論点となる規制・制度

    構造課題の背景で、改正・整備の是非が議論されている主な規制・制度を、中立に整理した索引です。詳しい論点は関連する課題のページをご覧ください。

    {REGULATIONS.map((r) => (

    {r.name}

    {r.status}{r.needs_check && 要確認}

    {r.desc}

    関連課題{r.issues.map((s) => {title[s] ?? s})}

    出典{r.source}

    ))}

    すべての課題（{issues.length}件）

    深刻度・緊急度の高い順に並べています。カードの点数はどちらも5段階です。課題どうしのつながりは課題マップでたどれます。

    {issues.map((i) => )}

    この課題地図について

    • 生成AIによる制作・評価版です。本文・図・ページのもとになるデータは生成AIが作成し、人が点検しています。誤りや古い情報を含む可能性があります。
    • 特定のメーカー・エコシステムの立場はとりません。「人とロボットが共存する社会の持続可能性と体験の質を、長期にわたって維持・向上できるか」を判断軸に課題を選び、緊急度と深刻度で優先度を示しています。賛否が分かれる論点は結論を断定せず、対立軸と出典を併記します。
    • 中立を志向しますが、完全な無偏りは保証できません。事実・解釈・提案を分け、トレードオフや反対論も併記するよう努めています。
    • 週1回、自動で調べています。最近の動き（出典つき）はそのまま追加し、点数・規制の状態・本文の書き換えは人が確認してから反映します。経緯は更新履歴に残しています。
     ``` ### トップの課題地図のバナー（新しい部品 src/components/IssuesBanner.astro） ```astro --- // 課題地図（/issues）への入口。TOP の「記録」の下に置く（2026-11-14） // 前は public/embeds/top-banner.html（36件のドット地図・iframe）。LOG343・LOG344 が同じ部品を載せているので、その部品は消さずに残してある // 件数は課題のデータから数える。写真は課題地図のトップの「まず読む3つ」と同じ（R2 の issues-top3-*.jpg） import { allIssues, CATEGORIES } from '../lib/issues'; const n = (await allIssues()).length; const photos = [ ['/media/issues-top3-caregiving.jpg', '介護現場へのロボット導入の壁'], ['/media/issues-top3-data.jpg', '実機データの圧倒的不足'], ['/media/issues-top3-motion.jpg', '動作のポータビリティ不在'], ]; --- フィジカルAIが社会実装される前に解くべき課題 放っておくと、ロボットが現場に入る前に止まってしまう課題を{n}件・{CATEGORIES.length}分類に整理しました。週1回、最近の動きを出典つきで足しています。 課題地図を見るarrow_forward ``` ### トップのページへの組み込み（commit 611ff96・src/pages/index.astro） 「記録」の下の iframe（top-banner.html）を外し、1年の記録の次に「課題地図 | Issues」の節を足した。 ```diff commit 611ff9639037faf87669748989d1eddd70c509e0 Author: Claude Date: Sat Nov 14 09:35:11 2026 +0900 TOP：課題地図のバナーを新しくした（件数を課題のデータから数え、写真3枚）。位置を「記録」の下から1年の記録の次へ上げた 元の public/embeds/top-banner.html は LOG343・LOG344 が載せているので残した Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01LevEXS2w3GWf5pnT1ChrKx diff --git a/src/pages/index.astro b/src/pages/index.astro index d3db8eb..7a87a3c 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -14,6 +14,7 @@ import LoadMore from '../components/LoadMore.astro'; import GuideCards from '../components/GuideCards.astro'; import ThinkingBanner from '../components/ThinkingBanner.astro'; import OneYearBanner from '../components/OneYearBanner.astro'; +import IssuesBanner from '../components/IssuesBanner.astro'; import TopAiGuide from '../components/TopAiGuide.astro'; import BrowserSimTest from '../components/BrowserSimTest.astro'; import { allManga } from '../lib/records'; @@ -132,6 +133,13 @@ const jsonLd = [
+ +
+

課題地図 | Issues

+ +
+

導入前ガイド | Guide

@@ -174,7 +182,6 @@ const jsonLd = [

記録 | Record

{records.map((c) => )} -