商品説明HTMLをCSVで更新するときの崩れやすいポイント

執筆者:

カテゴリ:

Shopifyの商品CSVにあるBody HTML列をスプレッドシートで開くと、改行がずれて列が崩れたり、HTMLタグが書き換わったりするトラブルがよく起こります。この記事では、どうして崩れるのか、どう防げばよいかを具体例つきで整理しました。

結論から言うと、Body HTML列をExcelやGoogleスプレッドシートで直接編集するのは避け、テキストエディタや専用ツールを使うのが一番安全です。それでもスプレッドシートを使いたい場合は、CSVではなくTSV形式で扱うか、インポート時に「テキストとして」読み込むことで大部分の崩れを防げます。

本記事の対象読者は、商品説明を一括で更新する担当者です。CSVの基本操作には触れますが、HTMLの基礎知識があることを前提としています。

Body HTML列の正体

Shopifyの商品CSVにはBody HTMLという列があり、ここに商品説明ページのHTMLがそのまま入っています。具体的には次のようなタグが含まれます。

  • <p> … 段落
  • <strong> … 太字
  • <ul> / <li> … 箇条書き
  • <a href="..."> … リンク
  • <img src="..."> … 画像埋め込み
  • <br /> … 改行

つまりBody HTML列の中身は生のHTMLコードであり、CSVの1セルに複数行のタグが詰め込まれています。これがトラブルの根本原因です。

CSV上ではどう見えるか

テキストエディタでCSVを開くと、Body HTML列の中身はダブルクォートで囲まれて1行に収まっています。

"Handle","Title","Body HTML",...
"my-product","商品名","<p>説明文</p><ul><li>項目1</li><li>項目2</li></ul>",...

このように、改行を含まない1行の文字列として保存されていれば正常です。しかしスプレッドシートで開いた瞬間に、この構造が壊れ始めます。

Excelで開いたときに起きる3つの崩れ

1. 改行による行ズレ

Body HTML内に <br /> や </p> の前後に改行文字が含まれていると、Excelはそれをセルの区切りではなく行の区切りとして解釈します。結果として、1つの商品のデータが複数行に分断され、列がずれてしまいます。

特に他のシステムからエクスポートしたCSVや、手作業で改行を入れたCSVで顕著に発生します。

2. HTMLタグの自動変換

Excelはセル内のテキストを自動判定するため、HTMLタグやエンティティを意図せず変換することがあります。

元の文字列 Excelでの変換結果 影響
&amp; & 再保存時に & だけになり、HTMLとして不正になる
&lt; < タグのエスケープが外れて表示崩れ
&gt; > 同上
&quot; " CSVの区切り文字と衝突して列崩れ
<br /> 実際の改行 行が分断される

この変換はセルの表示上だけの問題ではなく、CSVとして再保存した時点で元に戻らないことがあります。

3. リンクタグの切断

<a href="https://example.com">リンクテキスト</a> のようなタグは、URL内の特殊文字や改行の影響で簡単に壊れます。具体的には次のようなパターンがあります。

  • URLが途中で改行され、<a href="https://example. と com"> に分断される
  • クォート (") がExcelのCSV区切りと誤認され、タグ構造が壊れる
  • 埋め込み画像の src URLが同様に切断される

リンクが壊れた状態でインポートすると、商品ページ上でクリックできないリンクや、画像のリンク切れが発生します。

崩れパターン一覧表

よくある崩れとその原因をまとめました。更新前にこの表を確認しておくと、事故を減らせます。

症状 原因 発生しやすい状況
商品データが複数行に分かれる HTML内の改行が行区切りとして扱われた Excelで直接開いたとき
& だけが残る &amp; が自動変換された 再保存時
リンクがクリックできない <a> タグが切断された URLが長い、または改行を含む
画像が表示されない <img src> のURLが壊れた CDATAセクションや改行の影響
レイアウトが崩れた 閉じタグ (</ul> 等) が欠落した 手動編集時の誤削除
CSVインポートでエラー 列数が合わない 行ズレの結果、全体的に列がずれた
日本語が文字化け 文字コードの不一致 (UTF-8 vs Shift-JIS) Excelのデフォルト設定

安全な編集ワークフロー

崩れを防ぐための推奨手順を説明します。ここではExcelを使わない方法と、どうしてもExcelを使いたい場合の方法の両方を紹介します。

方法A：テキストエディタで直接編集（推奨）

  1. Shopify管理画面からCSVをエクスポート（管理画面 → 商品 → エクスポート）
  2. VS Codeやサクラエディタなどのテキストエディタで開く
    • UTF-8エンコーディングで開くことを確認
    • カンマ区切りのハイライトがあれば有効にする
  3. Body HTML列の該当箇所を検索して編集
    • 検索機能で Handle 値を探し、同じ行のBody HTML列を書き換える
    • 改行は n ではなく <br /> で表現する
    • タグの対応（開始タグと閉じタグ）を崩さない
  4. CSVの構造が壊れていないか確認
    • 各行のカンマ数がヘッダー行と同じか確認
    • ダブルクォートのペアが正しく閉じているか確認
  5. Shopify管理画面からインポート

テキストエディタを使えば、Excelによる自動変換が一切起きないため、最も安全です。

方法B：スプレッドシートを使う場合

やむを得ずExcelやGoogleスプレッドシートを使う場合は、次の手順で崩れを最小限に抑えます。

  1. CSVではなくTSV形式で扱う
    • Googleスプレッドシートにインポートする際、「テキストとして貼り付け」を選ぶ
    • Excelの場合は「データ」→「テキストから」でインポートし、各列を「テキスト」として指定する
  2. Body HTML列を一切編集しない
    • 商品名や価格など、HTMLを含まない列だけをスプレッドシートで編集する
    • Body HTML列の編集はテキストエディタに戻って行う
  3. エクスポート時にCSV形式を選ぶ
    • スプレッドシートから「CSVとしてダウンロード」する
    • 文字コードがUTF-8であることを確認する

チェックリスト：インポート前の確認項目

# 確認項目 方法
1 行数がエクスポート時と同じか テキストエディタで行数カウント
2 各列のカンマ数がヘッダー行と一致するか テキストエディタで確認
3 文字コードがUTF-8 (BOMなし) か テキストエディタのステータスバー
4 Body HTML内に未エスケープの " がないか 検索で確認
5 リンクのURLが途中で切れていないか href= を検索して目視確認
6 画像の src URLが有効か src= を検索して確認
7 閉じタグが欠落していないか タグの開閉ペアを数える

自動で検出できる問題と人間の目で確認すべき問題

HTMLの崩れには、ツールで自動検出できるものと、人間の判断が必要なものがあります。両方を組み合わせることで、見落としを大幅に減らせます。

自動チェックで対応できること

次の項目はスクリプトやオンラインツールで機械的に検出できます。

  • 閉じタグの有無：HTMLバリデータや正規表現で <ul> に対する </ul> などの存在を確認
  • HTMLエンティティの不正なデコード：& が &amp; として正しくエスケープされているか
  • URLの形式：href= や src= の値が https:// で始まる有効なURLか
  • CSVの構造整合性：各行の列数がヘッダー行と一致するか
  • 文字コードの確認：UTF-8であることの検証

これらは簡易スクリプト（PythonやPHP）で数百行も書かずにチェックできます。CSV更新を定期的に行うなら、専用のバリデーションスクリプトを用意しておくと安心です。

人間の目で確認すべきこと

一方で、次の項目は自動判定が難しく、実際の商品ページを見て確認する必要があります。

  • レイアウトの見え方：タグは正しくても、意図した見た目になっているかはブラウザで確認が必要
  • 画像の適切さ：画像URLは有効でも、正しい画像が表示されているかは人が判断する
  • リンクの遷移先：URLが正しくても、リンク先のページが意図したものかは確認が必要
  • 文章の自然さ：HTML構造は問題なくても、日本語として不自然な部分がないか
  • モバイルでの表示：PCでは問題なくても、モバイルで崩れていないか

自動チェックをパスしたCSVをインポートした後、最低でも3〜5商品をサンプリングして実際のページを開き、PCとモバイル両方で表示を確認することをおすすめします。

よくある質問

Googleスプレッドシートなら安全ですか？

いいえ、Googleスプレッドシートでも同様の崩れが起きます。スプレッドシートはセル内の改行を許容しますが、CSVとしてエクスポートする際に改行の扱いが変わるため、Excelと同じ問題が発生します。Body HTML列の編集はテキストエディタで行うのが確実です。

すでにExcelで開いて崩れてしまったCSVはどうすればいい？

崩れたCSVからの復元は難しいため、元のCSVを再度エクスポートし直すのが最も早いです。バックアップを取っていなければ、Shopify管理画面から再エクスポートしてください。その上でテキストエディタを使って編集し直します。

Body HTMLを丸ごと差し替えても大丈夫ですか？

構造上は可能ですが、既存の画像URLやリンクを失うリスクがあります。差し替え前に、現在のBody HTMLをバックアップとして別ファイルに保存しておくことを推奨します。

まとめ

Shopify商品CSVのBody HTML列を編集する際は、次の3点を押さえておけば大きなトラブルを防げます。

  1. スプレッドシートで直接開かない — 改行やHTMLエンティティの自動変換が原因で崩れる
  2. テキストエディタで編集する — UTF-8対応のエディタを使えば、HTML構造をそのまま維持できる
  3. インポート後にサンプリング確認する — 自動チェック＋目視確認の組み合わせで見落としを防ぐ

商品数が多い場合は、編集前に少数商品でテストインポートを行い、問題がないことを確認してから本番に反映すると安心です。

相談時に用意するとよい情報

商品CSVの更新でつまずいた際、次の情報があるとスムーズに状況を把握できます。

  • 崩れが出ている商品のHandle
  • どの部分が崩れているかの説明（レイアウト、文字化け、リンク切れなど）
  • 使用したエディタ
  • インポート時のエラーメッセージ（もしあれば）
  • Body HTML列の一部を伏せ字にした例（特定できない範囲で構いません）

初回相談では機密CSVやスクリーンショットの送付は不要です。商品名やHandleなど、テキストで伝えられる情報でご相談いただけます。必要になった場合に後からスクリーンショットを確認することがあります。

参考にした公式情報

この記事の内容で困っている方へ

Shopify CSV / 一括編集 まわりの作業整理、小さな自動化、簡易チェックツール化について相談できます。初回相談で機密CSVやスクリーンショットを送る必要はありません。

無料相談する

投稿をさらに読み込む