設備表の台数を直しただけで幅が変わり、行を増やすと注記の位置までずれてしまう。会社サイトの表を自社で更新するなら、値の変更、行の追加、列の変更を分け、普段の担当者が触る部分を絞りましょう。Excelのファイルをそのまま載せる以外にも、ページ内の表を編集する案や、設備名・台数などの専用入力欄を作る案があります。
ここでは、堺市の加工会社が、設備名、台数、対応範囲を載せる表を更新する場面を仮定します。社内の設備台帳はExcelで管理していますが、公開するのはその一部です。読者が見る表と、担当者が入力する元の情報を分けて考えます。
崩れる時の操作を、三つに分ける
「表を直す」という一言でも、セルの文字だけを変える場合と、項目の構成を変える場合では影響が違います。今の表を見ながら、担当者が行う操作と、その後に確認する表示を書き出します。この会社なら、次の三つを分けて試せます。
| 変更する操作 | 社内で行いたい範囲 | 表示で確かめること |
|---|---|---|
| セルの値を直す | 設備名、台数、対応範囲を変更する | 単位と注記、長い名前の折り返し |
| 設備を一行増やす | 同じ三項目で追加・並べ替えする | 列の対応、順番、行ごとの注記 |
| 項目の列を増やす | 新たに「加工寸法」などを載せる | 全設備の入力と、狭い画面の構成を再検討 |
台数を直したいだけなのに、毎回セルの幅や装飾まで整えているなら、値の入力と見せ方が混ざっている可能性があります。崩れた画面だけでなく、変更前の表と、直そうとした箇所を制作会社へ渡すと、文字の長さ、行の操作、表の構造のどこを調べるかが明確になります。
本文の表と、専用の入力欄を比べる
本文の中で表を編集する案は、その場で文字や行を直す操作を試します。例えばWordPressの表ブロックには、行や列を追加・削除する機能があります。ただし、機能があるだけで今の担当者が迷わず更新できるとは限りません。通常使う変更を、実際の権限と編集画面で確かめます。
項目が毎回同じなら、設備名、台数、対応範囲を一件分の入力欄にし、掲載する表へ組み立てる案も比較できます。担当者は値を入力し、列幅や文字の装飾は表示側で整える設計です。こうした専用欄は、必要な制作や追加機能を調べて用意するもので、どのサイトでも標準で使えるとは限りません。
単位を入力欄の横へ固定するなら、担当者が数字だけを入れることを画面で分かるようにします。対応範囲には条件や例外が必要か、未確認の情報を空欄のまま出すかも決めます。「空欄」と「対応しない」を同じ意味にせず、社内で確認した情報に合う表示を相談します。
Excelから取り込む案は、更新元と上書きを確かめる
Excelの元データがあるからといって、その書式のままWebへ移せるとは限りません。取り込みを検討するなら、公開する列、設備を識別する項目、追加と訂正をどう見分けるかを決めます。社内だけで使う管理番号やメモを、掲載内容へ混ぜないことも確認します。
例えば表から一行消えた時、Webの設備も削除するのか、取り込み対象外として残すのかで結果が違います。また、Web側だけで直した注記が、次の取り込みで前の内容に戻る可能性もあります。ExcelとWebのどちらを変更元にするか、取り込み前に変更点を確認できるか、失敗時に戻せるかを相談します。
項目数が少なく、変更も一件ずつなら、専用欄へ入力する方が担当者の仕事に合うかもしれません。件数が多くても、公開用のデータを整える手間が大きいなら、自動化だけで負担が減るとは言えません。ファイルを添付して読者に開いてもらう案と、値を取り込んでページ内に表示する案も、別の方式として比べます。
一行追加した後の読み方まで試す
完成見本には、短い設備名だけでなく、長い名称と注記を含む一件を加えます。パソコンで一覧として比べられるか、スマートフォンで各値がどの設備と項目に対応するかを見ます。横に動かす表にするなら操作の分かりやすさを、縦並びにするなら項目名と順序を確認します。
W3Cの表の解説でも、見出しとデータの関係を構造で示すことが説明されています。見た目の罫線や色をそろえるだけでなく、読み上げなどでも対応を伝えられる作りにすることを、制作側の確認範囲に含めます。入力欄を用意しただけで表示確認を終えないことが大切です。
設備表の台数変更と、一行の追加を自社で行いたいです。設備名・台数・対応範囲は同じ項目で、列を増やす時は相談する想定です。本文の表を編集する案と専用の入力欄、Excelから取り込む案を比べたいです。長い設備名と注記を入れ、スマートフォンの表示まで試したいです。
みやあじよでは、事業のお話を伺い、ホームページの内容や構成・デザインを整理するところから制作をご相談いただけます。堺市で、表の自社更新とホームページ改修を相談するから、今の表と変えたい箇所をお聞かせください。元データがなくても、分かる範囲からご相談いただけます。入力方法、表示、確認作業を含め、必要な改修の対応範囲・費用を確認します。
参考資料
- WordPress.org「Table block」（行・列の追加や削除の機能を確認）
- W3C WAI「Tables Tutorial」（表の見出しとデータの関係を構造で示す考え方を確認）
