生成AIが作った料金表・会社概要の「表」が、Studioに持ち込むと列がそろわない理由と対処

生成AIに「サロンのサイトを作って」と頼むと、料金表や会社概要が、きれいな表（table）で返ってきます。ブラウザで見る限りは問題がないのに、Studioに持ち込むと、列の位置が行ごとにずれてしまう——この相談は少なくありません。

原因は、Studioのデザインエディタに「表」の部品が無いことにあります。この記事では、そのしくみと、列をそろえて持ち込むための作り方、最初に伝える指示、表のまま使える場面を整理します。

Studioには、表をそのまま入れる部品が無い

Studioの公式ヘルプには、エディタ上で表を直接追加することは現在できない、と書かれています。左の「追加」パネルにも、Section・Box・Image・Textなどの部品は並んでいますが、表の部品はありません。

公式ヘルプが案内している表の作り方は、次の4つです。

持ち込むと、列がずれて見える理由

ページのデザインエディタには、AIが書いた表をそのまま受け取れる部品がありません。そのため、SHITAJIのような変換ツールを通すと、表の「行」は横並びの行として写せますが、「列の幅を行どうしでそろえる」仕組みまでは再現できません。行ごとに、中身の長さに合わせて列の位置が決まるため、行をまたいで列がずれます。

崩れている状態

直った状態

列をそろえて持ち込む作り方

ボックスで表を組むときの、基本の考え方は1つです。「同じ列のセルには、すべての行で同じ幅を与える」。次の手順で、AIに作ってもらえます。

1. 表の1行を、横に並べた行（横並びのボックス）として作る
2. 1列目のセルに「幅180px」のように、固定の幅を決める
3. 2列目以降のセルも、それぞれ固定の幅を決める
4. すべての行で、同じ列には同じ幅を使う
5. 見出しの行も、同じ幅の組み合わせで作る
6. スマホ幅では、幅の合計が画面に収まるか確認する。収まらなければ、1行を縦に積む作りに変える

最初の指示で、表の作り方を決めておく

あとから直すよりも、最初に作り方を指定しておくほうが手戻りが少なくなります。次の一文を、最初の指示に添えてください。

料金表や会社概要などの表は、HTMLのtable要素を使わず、div要素を横に並べた行で作ってください。同じ列のセルには、すべての行で同じ固定の幅を指定してください。スマートフォン幅では、1行を縦に積んでください。

表の「意味づけ」も、失われやすい

HTMLの表は、見出しのセル（th）とデータのセルを区別して書けます。スクリーンリーダー（画面を読み上げるソフト）は、この区別を使って、「この金額は、どのコースのものか」を読み上げます。MDNの解説でも、見出しとデータの対応づけをマークアップで表すことが説明されています。

ボックスで組んだ表には、この意味づけが付きません。読み上げでも内容が伝わるように、1つのセルの中に「ベーシック 60分 6,600円」のように、見出しの意味を含めた文章にしておく方法もあります。アクセシビリティの全体像はStudioのアクセシビリティの基本へ。

表のまま使える場面もある

• CMSの記事本文の表：Studioの公式ヘルプでは、本文の「＋」から「Table」を選ぶと、見出しの行つきの表を入れられます。スプレッドシートやNotionで作った表を、コピーして貼ることもできます。比較表をブログ記事の中に置くなら、この方法が向いています
• 表を画像にして置く：最も手間がなく、見た目が崩れません。ただし、文字は検索にもスクリーンリーダーにも伝わりにくくなり、金額を直すたびに画像を作り直すことになります。頻繁に変わらない表に限るのが安全です

よくある質問

まとめ

Studioには表の部品が無いため、AIが作った表は、そのままでは列がずれます。「表はtableを使わず、同じ列に同じ固定の幅を与えた横並びの行で作る」と最初に指示しておけば、取り込んだあとの手直しが減ります。記事の中の比較表ならCMSの表を、頻繁に変わらない表なら画像を、と使い分ける方法もあります。

頼み方の基本はChatGPT・Claude・GeminiにWebサイトの下書きを作らせるプロンプトのコツ5つ、取り込んだあとに編集しやすい形を保つ考え方は生成AIで作ったサイトの文章・画像を、あとから自分で直せるようにしておくコツにまとめています。