貧しいテーブル。 さて、彼らの何が問題なのでしょうか？
Webの歴史の初めに、テーブルは情報を表示するための基礎でした。 時間が経つにつれて、開発者は新しい、よりファッショナブルなデータ表示方法を発見し、テーブルは背景に消えていきました。 今日、テーブルの使用頻度ははるかに低くなっていますが、それでも毎日出会う大量の情報を収集して整理しています。
ここに、私がすべてのテーブルのテーブルと呼ぶ例があります：3,550ページ以上の統一された米国運賃 。 「男性用と子供用のコート、ショートコート、ラップ、ジャケット、アノラック（スキースーツを含む）、ウィンドチーター、および類似製品（断熱ベストを含む）」などのエキサイティングなアイテムなど、米国に輸入できる各製品の説明が含まれています。
ショートコートとは何ですか？
無学なデザインのテーブルは見苦しい。 表の中心に設計があります。正しく行われると、複雑なデータを簡単に表示して比較できます。 設計が正しくない場合、情報は理解できなくなります。
それを正しく行う方法を見てみましょう。
数字を追跡する
すべての数字が同じというわけではありません。 π（Pi）と∞（パーティーで言及しますが）を意味するわけではありませんが、私は、極小またはメイスキュラス、および比例または表に分かれた数字を表示することについて話しています。
奇形とメイスキュラー
小文字の数字は、小文字の文字のサイズとインデントに対応する文で見栄えがします。 Mayuskulnyeの数値はより均一であり、フラットテーブル構造に対応しています。
比例図と表形式図の違いはそれほど明白ではありません。
比例および表の数
フォントの書体の色相（全体のサイズとインデントに一致する）を伝えるために比例した番号が作成されます。 表形式の数値は互いに比例しているため、列を数値に揃えることができます。 1行または2行の例の違いはそれほど明白ではありませんが、テーブルの数字を使用すると、大きなテーブルを表示しやすくなり、読み取りエラーの可能性が低くなります。
表形式のMayusculal番号に関するテクニカルノート
設計段階で、使用する数値が自分に適していることを確認する必要があります（通常、表とマヤスクレの配置はデフォルトでオフになっています）。 アドビ製品には、数字が正しく設定されているopentypeパネルが含まれています。 対応するプロパティをCSSに含めるには、 少しわかりにくい構文を理解する必要があります 。 それはともかく、Googleへのいくつかのリクエストが本当の道を案内してくれるでしょう。
悪いニュース：すべてのフォントヘッドセットで表形式のMayusculal番号を使用できるわけではありません。 それらを含むヘッドセットは通常高価です。 いくつかの例外があります。たとえば、優れたWork Sansは、表形式のMayusculal番号を持つ無料のフォントです。
適切なフォントヘッドセットを見つけることが困難な場合は、代替-等幅フォントを使用してください。 コードのように見えますが、表に数値を表示するのに常に適しています。 Appleの新しいシステムデフォルトフォントであるSan Franciscoには、小さなサイズで適切に表示される表形式のMayusculine番号が含まれていることを追加する価値があります。
揃えることを忘れないでください
3½ルールに従います。
1. 数値データは右側に揃えられます。
2. テキストデータは左揃えになります。
3. 見出しは、データと同じ方法で配置されます。
3½。 中央揃えを使用しないでください。
歴史的な人口による米国の州のリスト- ウィキペディア
数値は右から左に読み取られます-数値を比較するときは、最初に単位を調べ、次に数十、数百などを調べます。 これは人々が算術を学ぶのと同じ方法です-彼らは右から始めて左に移動し、道に沿って数字を集めてグループ化します[1] 。 したがって、表では数値データを右に揃える必要があります。
テキスト（ロシア語）は左から右に読みます。 通常、テキストはアルファベット順に比較されます：2行が1文字で始まる場合、次の行が比較され、以下同様に、左側に配置されていないテキストをすばやく調べようとするのは非常に困難です。
見出しはそれぞれのデータの整合性を維持する必要があります。 この場合、テーブルの縦線はきれいに見え、データはシームレスで一貫性があります。
中央に配置すると、表の行は「ギザギザ」になり、内容を表示するのが難しくなります。 これにより、多くの場合、テーブルに区切り文字とグラフィック要素を追加する必要があります。
一貫した有効数字=適切なアライメント
適切な整列を維持する簡単な方法は有効数字の書き込みで均一性を維持することです。 これは通常、各列内で、数字の小数点以下の桁数が同じであることを意味します。 有効数字は別の記事のトピックなので、ここでは簡単なヒントを残しておきます。有効数字が少ないほど良いです。
簡潔で明確な署名
データに付随する署名は特に重要です。 補助コンテキストのこれらの要素により、テーブルをより多くの読者に、より異なる状況で読むことができます。
ミシシッピ州の洪水予測-NOAA
役職
これは当然のことのように聞こえますが、短く明確なタイトルは、残りのデザインと同様にテーブルにとって重要です。 優れたタイトルを使用すると、テーブルはモバイルになります-多くの異なるコンテキストに転送でき、外部ソースから簡単に参照できます。
単位
テーブルで使用される最も一般的な署名はデータ単位です。 通常、テーブルの個々のセルで繰り返されます。 繰り返しを避けるには、各列の最初の行に署名を含めるだけです。
見出し
ヘッダーはできるだけ短くしてください。 テーブルの設計はデータに焦点を当てる必要があります。 長い見出しはこれを妨げ、視覚空間の大きな部分を占めます。
できるだけ少ないインク
テーブル内のグラフィック要素のスタイルを決定するときは、常に構造を失うことなくテーブルの彩度を下げるようにしてください。 できるだけ「インク」を使用しないようにしてください。つまり、可能な場合に要素をスタイル設定しないでください。
ナショナルリーグバッティング統計2016- 野球
定規
テーブル内のデータを正しく配置した場合、ルーラーを使用しても意味がありません。 定規の主な利点は、要素間の距離を縮めると同時に、要素を互いに分離できることです。 ルーラーを使用する場合でも、目立たないようにして、クイックルックを妨げないようにします。
最も便利な水平定規。 長いテーブルの高さを大幅に削減し、大量のデータの比較を高速化したり、変更の傾向に気付くことができます。
私は定規についても個人的な意見を持っています ： ゼブラストライプを使用しないでください 。 これは悪い習慣です。 しかし、あなたが私に同意するかどうかはあなた次第です。
背景
背景は、データのさまざまな領域（たとえば、部分的な値から合計または平均値への遷移）を強調するのに最適です。
背景を使用せずに多くの要素を区別できます：値の強調表示、データへの追加のコンテキスト、以前の期間と比較した値の変更。 ✻、†（お気に入りの1つ）、,などのグラフィック要素を使用します。
これに加えて、テーブルはモノクロにする必要があります。 組織的な目的で、または付加価値を付けるために色を使用すると、誤解やエラーの可能性が高くなり、視覚障害のある人に問題を引き起こします。
おわりに
テーブルは退屈かもしれませんが、情報豊富なドキュメントの主要な要素の1つであるため、設計者はテーブルを軽視しないでください。 効果的で透過的な読み取り可能なテーブルは、大量のデータを認識するという困難なプロセスを大幅に促進します。
さらに読むとインスピレーション
FiveThirtyEightは常に優れたインスピレーションの源となっています。小さなスペースで大きなデータセットを表示するように特別に設計されたDecima Monoヘッドセットは、数値データの表示に使用されます。
ButterickのPractical Typographyは、すべてのタイポグラフィの問題のガイドです。 これは、あなたがたくさんのリンクを持っているリソースのタイプです-非常に多くの有用な記事があります！
そして最後に、 Edward Tufteの記事がなければ、データ設計の記事は完成しません。 彼のデザインレターは、単にかけがえのないものです。
算術の他の興味深いアプローチについて学びたい場合は、日本の子供たちがそろばんをどのように使用するか、または格子乗算がどのように機能するかをご覧ください。
オリジナル：MatthewStrömによるDesign Better Data Tables 。
翻訳： aalexeev 、 改訂者 ：Yana Kriklivaya、Seagull Chursina。