Chrome をヘッドレスで動かし、--window-size の幅を375にして撮ったスクショが、右端で切れていた

ページのレイアウトは崩れていませんでした。切れていたのは撮り方の側です。2026年10月13日に手元で同じ指定を試すと、ページは幅500で描かれ、スクショにはその左の375だけが写りました。

時点: 2026年8月29日・Google Chrome をヘッドレス（画面を出さずに動かす形）で起動し、--window-size で幅を指定して撮ったスクショ（このときの Chrome の版は記録に残っていません）。手元で試し直したのは2026年10月13日（Google Chrome 155。比べに使った Playwright（ブラウザを動かすライブラリ）は 1.60.0、中のブラウザの Chromium は 148）。公式の説明は2026年10月13日に読みました（ページの更新日は2024年10月21日）。

症状

2026年8月29日、ツールの候補を1画面に並べる内部のボードを作りました。作った日のことは「AIに反対されたが、半日で作った」に書きました。

スマホで開いたときの形を見るために、作業役の AI（Claude Code）が、ヘッドレスの Chrome に --window-size で幅375を指定して、スクショを撮りました。写ったのは、見出しの文字とカードの中の文が、右端で途中から切れた画面でした。作業の記録には、これを「レイアウト崩れ」と取り違えた、と残っています。

その前、2026年8月10日のメモにも、AI が送ってきたスマホの幅のスクショで、375の指定が切り抜きになっていた、と残っています。どの AI が送ってきたものか、どのページのスクショだったかは残っていません。

原因

確かめたこと（8月29日）: ページは375の幅に収まっていました。ブラウザのスマホの画面をまねる機能（記録には「モバイルエミュレーション」とあります）で幅375にして開き直すと、ページの横幅の実測（scrollWidth）は375で、表示も正常でした。

確かめたこと（10月13日）: 手元の Mac の Chrome で、幅375・高さ400を指定して、試しのページを撮りました。スクショの幅は375でしたが、ページが描かれた幅（innerWidth）は500でした。幅500で描いたページの、左の375だけが写っていたことになります。幅の指定を変えて描かれた幅を読むと、499でも500、500で500、501で501でした。この Mac の Chrome 155 では、試した375・412・499の指定は、どれも幅500で描かれました。375より狭い指定は試していません。

見立て: 8月29日も、同じように指定より広い幅で描かれたと見ていますが、確かめていません。8月29日の記録には「最小幅制約」とだけあり、そのときの Chrome の版も、下限がいくつだったかも残っていません。試したのは手元の Mac だけで、Linux では試していません。

公式の説明（Chrome Headless command-line reference の --screenshot の節）には、--screenshot と --window-size を組み合わせる例があり、幅は412でした。公式の例の412でも、描かれた幅は500でした。指定できる幅に下限があることは、書いてありませんでした。

直し方（ぼくの場合）

スマホの幅の確かめに、--window-size で撮ったスクショを使うのをやめた（8月29日）
代わりに、ブラウザのスマホの画面をまねる機能で、画面の幅を375にして開いた（8月29日）
開いたページで scrollWidth を読み、指定した幅を超えていないかを数で見た（8月29日は375）
2026年9月25日からは、サイトのスマホの幅の点検を、Playwright で画面の幅を390にして開く形にした。点検では、scrollWidth が innerWidth を超えていないかも数で見ている
2026年10月14日からは、点検のたびに、指定した幅と innerWidth が違えば点検の結果に、幅が合わないと1行で出す形にした

確かめ方

10月13日に、8月29日のボードではなく、写しが残っているこのサイトの8月10日の時点のトップページを手元で組み立てて、撮り方を変えて比べました。

撮り方	写しの幅	描かれた幅（innerWidth）	右端
10月13日・ヘッドレスの Chrome・`--window-size` の幅375	375	500	切れた
10月13日・Playwright・画面の幅375	375	375	収まった（scrollWidth 375）

写しの幅は、2つとも375です。写しの大きさだけでは、切れているかどうかを見分けられませんでした。見分けられたのは、ページの中で読んだ innerWidth でした。

ヘッドレスで撮った写しは、幅375で開いた写しと、本文の改行の位置が違いました。写しの大きさが同じでも、改行の位置を比べると見分けがつきました。

出所

Chrome for Developers「Chrome Headless command-line reference」の「--screenshot」の節（2026年10月13日に読んだ・更新日 2024年10月21日）。--window-size の幅に下限があることは、書いていなかった
ぼくの作業の記録（2026年8月10日のメモ・2026年8月29日の作業の記録と写し）
2026年10月13日の試し（打ったコマンドと出力・写しの記録は手元にある）

追記（2026年10月23日）: 「確かめ方」の初めの段落で、8月10日の時点のトップページで試したことを2つの文で言っていたので、1つの文にまとめました。内容は変えていません。