テーブルブロック
見本テーブルの作り方を解説
カラム数と行数を入力します。今回カラム数6、行数８です。
説明アイコンカラム数も行数も、後で追加・削除が可能なのでここで間違えても問題ありません。行数は、中身の行数です。
・デフォルトで表のセル幅を固定がonになっているのでoffに変更します。
・ヘッダーセクションをonにします。そのあとヘッダーカラーを選択します。
SP＆PCを選択し、1列目を左端に固定するに✔
説明アイコン編集画面では、左端が固定されていませんが、プレビューで確認してください。ちゃんと固定されているはずです。
説明アイコンテーブルを「横スクロールなし」で作ると、スマホの場合かなり見ずらいし、崩れやすい印象です。
今回は横スクロールあり、左端を固定して注文コードがいつでも見える状態にしました。
テーブル（表）の使いどころと限界
WordPressで一覧性を出したいとき、テーブル（表）はとても有用です。
サイズ・型番・価格などを一覧で比較できるため、
「どれが近いか」「候補を絞る」用途には向いています。
ただし、テーブルには明確な弱点があります。
- 項目が多いと横に長くなりがち
- スマホでは横スクロールが必須
- 右端までスクロールすると
「今、何の項目を見ているんだっけ？」 となりやすい
特に、列固定ができない場合は
視認性が一気に下がるのが正直なところです。
それでも
- 一覧で見たい
- 数値をざっくり比較したい
という場面では、テーブルは今でも有効です。
「一覧」と「詳細確認」は役割を分ける
そこで今回考えたのが、
- テーブル：ざっくり比較・候補探し
- カード（画像）：詳細確認
という役割分担です。
テーブルで
「このサイズ、近いかも？」
「この型番、候補かな？」
と目星をつけ、
詳細は
カード＋写真で確認する。
この組み合わせにすることで、
- テーブルの弱点を補い
- 写真の情報量を活かす
ことができます。
テーブルには写真を入れられない問題
WordPressのテーブルには制限があります。
- テーブル内には 基本的にテキストしか入れられない
- 写真をそのまま配置するのは不向き
そのため今回は、
- テーブル内は テキストのみ
- そのテキストに 画像へのリンクを設定
という方法を採りました。
リンク先の画像は、
- Canvaなどで自由に作成
- サイズ比較用の図
- 写真＋簡単な説明
など、用途に合わせて作れば十分です。
「テキストリンクだけ」ではユーザーが迷う
しかし、
単純にテキストリンクで画像を開くだけだと問題があります。
- 新しい画面が開く
- 戻る方法が分かりにくい
- ×ボタンがなく、操作に迷う
特にスマホでは、
「どうやって元の画面に戻るの？」
と感じるユーザーが出やすくなります。
そこでポップアップ表示（プラグイン）を使う
そこで今回は、
画像をポップアップ表示できるプラグインを使いました。
このプラグインを使うと、
- クリックした画像がその場で拡大表示
- ×ボタンで元の画面に戻れる
- スライドショー表示も可能
- 不要ならスライドはオフにできる
といったメリットがあります。
ユーザーは
- テーブルで候補を探す
- クリックして画像で確認
- ×ボタンで一覧に戻る
という、迷わない導線で閲覧できます。
テーブルは「ざっくり確認」に向いている
テーブルは、
スマホで見ると確かに見にくい部分もあります。
ただし、
- サイズ感
- 数値の違い
- 種類の多さ
をざっくり把握する用途には向いています。
そこに
- 写真カード
- ポップアップ表示
を組み合わせることで、
- 一覧性
- 視覚的な分かりやすさ
の両立が可能になります。
まとめ：テーブル＋画像の併用が現実的
今回紹介した方法は、
- テーブルを捨てるのではなく
- テーブルの弱点を補う
という考え方です。
- 一覧はテーブルで
- 詳細は画像で
- 操作はポップアップで
この組み合わせにより、
- スマホでも迷いにくく
- 情報量の多いページでも見やすい
構成にすることができます。
説明アイコンテーブルは、横スクロールを設定しないと
スマホでは文字が縦に並んだり、
レイアウトが崩れやすくなります。
作成時は、必ずスマホ画面も確認しながら
進めるのがおすすめです。
なお、横スクロールを使わない場合は、
「各列に最低限必要な幅」を設定するとうまくいくこともあります。
WordPressのテーブルは
Excelのように列幅をドラッグで調整できないため、
文字量が多いと想定外に崩れることがあります。
コメント