このレッスンではWebページ内でにある詳細情報を整理して表示する、リストとテーブルの使い方や実例を紹介します。
前回、ページの隅から隅まで文字をじっくりと読み込むユーザーは少ないと紹介しました。見出しで興味を持ってもらうだけではなく、ページ内にある情報を分かりやすく整理して、読みやすいページを作りましょう。
リストとは
リストは情報を見やすく整理して表現する方法の一つです。 箇条書きで、並列な情報を複数並べる際によく利用されます。
中でもよく利用される形式は大きく２つあります。
①は並列列挙リスト(ul) ②は順序付きリスト(ol) という種類です。それぞれの特徴を見ていきましょう。
①並列列挙リスト（ul）
項目の順序があまり大きな意味を持たず、並列的に項目を並べる時に使用します。 項目の先頭にはリストマークと呼ばれる装飾が入ることが多いですが、内容やデザインによってはcssで非表示にする場合もあります。
下記は「TOYOTA」のサイトマップページです。
オーソドックスな形のリスト<ul>形式が使われていますね。
https://global.toyota/jp/sitemap/
リストはcssと組み合わせることで見せ方を変えることも出来ます。 「LINE」セキュリティ＆プライバシーのページで使われているリストを見てみましょう。
https://linecorp.com/ja/security/
また、並列列挙リストはナビゲーションの設計にも使用します。
例えば下の「Web Design Clip」もグローバルナビゲーション部分はul > liという設計になっています。
SKILL HUBのレッスンや課題でもナビゲーションは<ul>タグで囲いましたよね。
https://www.webdesignclip.com/
並列列挙リスト（<ul>タイプ）のリストは使い勝手が良く、伝えたいことを箇条書きで簡潔に記す以外にも色々な個所に利用されています。
②順序付きリスト（ol）
項目の順序が意味を持つ場合、あるいは項目を参照するために番号を付ける場合に使用します。項目の先頭には順序を表す数字が入る形がオーソドックスです。 並列列挙リストと同様に、CSSで文字を装飾することもできます。
リスト設置時の注意点
文字が改行され複数行になる場合は、先頭の装飾（もしくは数字）からインデントした位置に文字が来るようにしましょう。
テーブルとは
テーブルとは、縦横の行・列で区切られた表組のことを指します。 表組は会社概要など複数の単一情報を伝える際、長い文章よりも内容を素早く把握してもらえるというメリットがあります。
企業概要のページでは多くのWEBサイトがテーブルを使って情報を整理しています。
https://modshair.co.jp/company/
その他に製品スペックの紹介・料金表なども、テーブルを使用することで見やすくなりますね。例えば価格ドットコムではスペックをグループごとにテーブル化しています。
https://kakaku.com/keitai/smartphone/model/M0000000778/
これが全て文章で書かれていたら、読む気を無くしてしまったり、画面サイズを知りたいのにどこに書いてあるかわからない…という状態になってしまいますよね。
ユーザーが簡単に見たい情報を探しやすいように、関連性のある情報が複数ある場合はテーブル(表)にまとめてみると良いでしょう。
◆実習
1：フォームの注意書きを入れる
前回作成したフォームの送信ボタン下に、３つの注意書きをリスト形式で配置します。
【注意事項】
①各種メール設定（迷惑メール設定・受信拒否設定）等によりメールがお届けできないケースが発生しております。事前に「xxxx@n-salin.com」を受信できる様に設定してください。
②ご相談が殺到した場合やご質問の内容および諸般の事情により、回答を差し上げるまでに時間を要する場合がございます。
③お客様の個人情報につきましては、お客様への対応以外の目的には使用いたしません。個人情報の取扱いに関しましては、プライバシーポリシーをご覧ください。
2：問い合わせページ用にクロージングを調整
ホーム、詳細、カテゴリの３ページで使用していたクロージングはWEB/TEL両方でのお問い合わせが記載されていました。 問い合わせページに同じものを配置すると、また問い合わせページを開いてしまうことになります。
ですので、お問い合わせページでは番号部分のみを表示するようにします。 パソコン操作が苦手なユーザーや、お急ぎの方は電話も使えたほうが良いですよね。
3：フッターを作成
ページの最下部に配置するフッターを作ります。 このヘアサロンサイトは小規模サイトで、フッターに入れる内容も少なめです。
- フッターナビゲーション
- 店舗地図と住所
- SNS（twitter,facebook,instagram,line）
- コピーライト
それぞれのグループを配置していきます。
【パソコン幅】
スマートフォン幅でも、フッターナビゲーションは格納せず、そのまま使います。
それぞれのページ分、複製して配置します。
全体的に大きな配置のズレなどが無いかを確認します。 これでワイヤーフレームは完成です。 素材タブに見本をアップロードしていますので、確認用にご利用ください。
まとめ
ユーザーに知って欲しい情報をWEBサイトにただ掲載するのではなく、簡潔に整理した状態で提示することで利便性が高まります。 情報の整理に役立つリストやテーブルを適切に使用して、訪れた人が簡単に「答え」「要点」などを発見できるようにしましょう。