Claude Artifact コピー挙動レポート
Claude Artifact — コピー挙動の事実整理 ◗ 26/09/26
▍① 前提：確認できる事実
Claude.ai の Artifact は、生成した HTML/CSS/JS を独立したiframe内でブラウザレンダリングする仕組み（Anthropic公式ドキュメントに記載）。
Artifact には「コードをコピー」「ファイルをダウンロード」の2経路が存在する。
この2経路は、取得するデータの出所が同一（生成されたソースコード）であることが原則。
▍② 現象の事実確認
ユーザー観察：「画面からコピー」すると white-space:nowrap や scrollbar-width:thin が付加されている。「ダウンロード→コピー」では付加されていない。
この差異は、ユーザーが複数回にわたり再現確認している実観察結果。
| 操作 | 取得物 | 余分なCSS付加 | 備考 |
|---|---|---|---|
| Artifactプレビュー → コピー | DOMからクリップボード | あり（観察） | ブラウザのコピー処理を経由。ブラウザが計算済みスタイルをコピーする可能性あり |
| ダウンロードボタン → コピペ | HTMLソースファイル | なし（観察） | Claudeが生成したソースそのもの。処理を介さない |
| 「コードをコピー」ボタン | ソースコード | 原則なし | ソースをクリップボードへ直接転送. |
▍③ 技術的に確認できるメカニズム（憶測排除）
ブラウザの「コピー」動作の仕様（W3C仕様・MDN記載）：
ブラウザでテキストを選択してコピーすると、ClipboardEventはDOMの選択範囲からデータを取得する。 HTML��してコピーされる場合（`text/html` MIMEタイプ）、ブラウザは要素の計算済みスタイル（computed style）をインライン化することがある。
これはChrome・Firefox・Safariいずれも、セキュリティポリシーや実装により挙動が異なる（各ブラウザのリリースノートで確認可能）。
Artifactのiframe構成（Anthropic公式）：
ArtifactはサンドボックスされたiframeでHTMLをレンダリングする。 iframeの外（claude.ai親ページ）が持つCSSが、コピー時に混入する可能性はアーキテクチャ上排除できない。
scrollbar-width:thin / white-space:nowrap について：
これらはCSSとして正当であり、Claudeが「Bloggerの要件」として出力したとすれば、それはClaudeの生成判断による。 Bloggerがこれらを要求する仕様は存在しない（Blogger公式ドキュメント未記載）。
▍④ Claudeの説明「Bloggerのせい」について
確認できる事実：BLOGGERの投稿エディタ（HTML表示）は、貼り付けたHTMLを加工することがある（改行の正規化・タグの自動補完等）。ただし white-space:nowrap や scrollbar-width をBloggerが追加するという公式記載・再現報告は存在しない。
結論：「Bloggerのせい」という説明は、確認できる根拠が存在しない。Claudeが生成時に付加したか、ブラウザのコピー処理が付加した、のいずれかが妥当な説明。
▍⑤ 主なリスク
・Claudeのモデルアップデートにより生成するCSSが変わる可能性がある
・Artifact iframe内のスタイルシートがコピー時に混入するリスクは、Anthropicの内部実装に依存し外部から完全確認不可
・今後のclaudie.ai UI変更でこの挙動が変わる可能性がある
▍⑥ 所見・推奨
①「ダウンロード → コピペ」がBloggerへの貼り付けに最も安全。ソースコードそのものを取得するため、ブラウザのコピー処理を迂回できる。
②「コードをコピー」ボタン（Artifactのコードビュー）も同様にソースを直接取得できる。
③ Claude生成時に不要なCSSが含まれている場合は、プロンプトで明示的に除外を指定することが有効（例：「scrollbar-width は含めないこと」）。
④ 「他のAI（Gemini・GPT）の挙動」については、各社の内部実装が非公開のため、本レポートの範囲外とする。
*ppp
