このワイヤーの特徴
探したい項目に、目で直接たどり着ける
項目が文章の中に埋もれていると、読み手は所在地や電話番号を探して全体を読むことになります。項目名を左の列にそろえ、背景色で内容と分けて、縦に目を走らせるだけで探せるようにしています。
項目と内容の対応が、読み上げでも伝わる
見た目で左右に並べただけでは、読み上げを使う人に項目と内容の関係が伝わりにくくなります。項目名を行の見出し（th scope=”row”）として組み、項目と内容の対応を表の構造で示しています。
1行に1つの項目にそろえる
1つのセルに住所と電話番号をまとめると、探しにくく、あとから直すときにも崩れやすくなります。1行に1つの項目だけを書き、行の高さを内容に合わせています。
SPでは、項目名を内容の上に積む
SPで左右に並べたままにすると、内容の列が狭くなり、住所や事業内容が細かく折り返します。SPでは項目名を内容の上に積み、内容の幅を確保しています。
制作時のよくある失敗
項目名の列が広すぎて、内容が細く折り返す
項目名の列を表の半分近くまで広げると、内容の列が狭くなり、長い内容が何行にも折り返します。
項目名の列は、いちばん長い項目名が収まる程度の幅にします。
項目を「その他」「備考」にまとめる
「その他」にまとめた情報は、探しに来た読み手が見つけられません。
項目を分けるか、中身が分かる項目名を付けます。
関係のない情報まで、表に入れる
見た目をそろえるために、項目と内容の関係がない文章まで表に入れると、表の意味が伝わりにくくなります。
表は項目と内容が対応する情報だけに使い、それ以外は見出しと本文で書きます。
表を画像で載せる
表を画像にすると、文字の拡大や読み上げ、検索ができず、内容を直すたびに作り直しが必要になります。
表はHTMLの表で組みます。
よくある質問
表ではなく、定義リスト（dl）で組んでもよいですか?
項目名と内容の組を並べるだけなら、定義リストでも意味は伝わります。
表で組むと行の見出しとして扱われ、見た目の調整もしやすいため、このワイヤーでは表にしています。
どちらを使うかは、サイトの中でそろえるとよいと考えられます。
項目の数が多い場合は、どうすればよいですか?
関係の近い項目ごとに表を分け、それぞれに見出しを付ける方法があります。
1つの表に20以上の項目が並ぶと、探しにくくなる傾向があります。
電話番号は、リンクにしたほうがよいですか?
電話番号は文字で表示したうえで、発信できる環境では tel: のリンクにすると、そのまま連絡できます。
SPだけに限らず、同じ書き方にそろえます。
