テーブル・表レイアウトをClaude Designで正確に指定するコツ——罫線・ヘッダー・セル幅が毎回ブレる問題

表組みは、料金ページ・仕様比較・スケジュール管理・レポートと、ありとあらゆるビジネス資料に登場する。ところがClaude Designで表のデザインを指示すると、何回やっても「なんかズレる」「ヘッダーが目立たない」「罫線が多すぎる・少なすぎる」という問題が出続けた。

このページは、そのあたりの失敗パターンと、今の自分の解決策をまとめたものだ。

やらかした失敗パターン3選

1. 罫線が全セルに入って見づらい

「表を作って」と言うだけでお任せにすると、Excelのデフォルトみたいな全セル罫線のデザインが出てくる。情報量が多い表に全罫線は重くなる。

最初は「シンプルにして」と追加指示を重ねていたが、それだと毎回同じ試行錯誤をしていた。

解決策: 罫線スタイルを最初から明示する。

罫線ルール:
- 外枠: なし
- ヘッダー下: 2px solid #1a1a1a
- 行間: 1px solid #e5e5e5
- 縦罫線: なし

これを書くと一発で意図通りに出てきた。

2. 各列の幅が自動分割されて崩れる

5列の表を作ると、デフォルトでは全列が均等幅になる。「プラン名」「月額」「ユーザー数」「ストレージ」「サポート」なら、当然「プラン名」が一番幅を必要としない。均等幅だと間延びして見える。

カラム幅の目安:
- プラン名: 20%
- 月額: 15%
- ユーザー数: 20%
- ストレージ: 20%
- サポート: 25%

パーセンテージで渡すのがいちばん安定している。「広め」「狭め」という曖昧な言い方はブレる。

3. ヘッダー行が本文と区別できない

色指定をしないと、ヘッダーが本文と同じ見た目で出てくることがある。「ヘッダー行を強調して」という曖昧な指示だと、フォントが太くなるだけだったり、背景色がついたり、毎回違う。

ヘッダー行:
- 背景色: #f0f4ff
- テキスト: 14px bold #1a1a1a
- 高さ: 48px
データ行:
- 背景色: 偶数行 #fafafa / 奇数行 white（ゼブラストライプ）
- テキスト: 14px regular #333333
- 高さ: 44px

ゼブラストライプを指定しておくと、データ行が多くても視線が追いやすい表になった。

「おすすめ列」の強調を指示する方法

料金比較表でよくある「このプランがおすすめ」という列に視覚的な強調を入れるには、こう書く。

「スタンダードプラン」列を以下で強調:
- 背景色: #3b82f6
- テキスト: white
- 上部に「人気No.1」バッジ（青背景・白テキスト・角丸4px）
- 外枠: 2px solid #2563eb
- 他の列より4px上下に突き出たデザイン

「目立たせて」だけだと色が変わるだけで突き出しなどの立体的な表現は出なかった。細かく書くほど意図が通る。

データを直接渡す書き方

表の内容を指示に含める場合、テキストで表構造を渡すのが確実だ。

以下のデータで料金比較表を作成:

| プラン | 月額 | ユーザー数 | ストレージ | サポート |
|--------|------|----------|----------|---------|
| フリー | 無料 | 1名 | 1GB | なし |
| スタンダード | ¥2,980 | 5名まで | 20GB | メール |
| プロ | ¥9,800 | 無制限 | 200GB | 優先対応 |

Markdownの表形式で渡すと、データが正確に反映された。CSV形式よりMarkdownのほうが安定している印象がある。

まとめ: 表指示のチェックリスト

表デザインを指示するときに確認しているポイント:

• 罫線スタイル（外枠・横線・縦線それぞれ明示）
• カラム幅（%で指定）
• ヘッダー行の見た目（背景色・フォント・高さ）
• データ行のゼブラストライプ
• 強調列がある場合は詳細に指定
• データはMarkdown表形式で直接渡す

表は「なんとなく作って」が一番失敗しやすい要素だった。最初にスペックを書き切るのが結局最短ルートだと気づいた。