コンポーネント

レイアウト4コンポーネント

Document

数百件の中から目的の一件を探すための、密度の高いドキュメントレイアウト。

レポート

結論・根拠・限界が一目でわかる、余白を活かしたレポートレイアウト。

Publication

表紙、ナビゲーション、節見出し、作例を囲む枠を再利用できます。

Composition

図版・キャプション・注釈を、一続きの読む順序に組みます。

一覧とデータ5コンポーネント

WordPressカタログ：3つのテーブルとSQL文の件数
Table	SQL文
{$}cache_data	13
{$}items	7
{$}posts	3

Table

値を列で揃え、項目を覚えておかなくても比較できるようにします。

Listing

短い項目と長い項目を同じリズムで並べ、目的の一件を見つけやすくします。

Chip

種別や状態を示す小さなラベル。意味と見た目を別々に指定します。

Card

リンク先の内容と、そこで何がわかるかを示します。

Facts

バージョン・範囲・出典など、一つの対象の属性を短く示す定義リスト。

図とグラフ9コンポーネント

Meter

未解決の部分も含め、割合を忠実に示します。

Graph

依存関係を示す、生成SVG図のためのスタイル。

Bar chart

名前・正確な値・共通のゼロ基準を揃え、カテゴリの量を比較します。

Comparison plot

両端の値と分母を見せながら、変更前後の差を同じ軸で比較します。

Line plot

欠測や観測範囲を明示し、時間や位置に沿った値の変化をたどります。

Histogram

空の区間や標本数も含め、数値区間ごとの観測値の分布を示します。

Drawing

図を構成する線と面、その配置寸法を揃え、紙面に馴染む図版を組みます。

Annotate

図の部分に番号を付け、説明を下に置きます。説明文を文字として読み、図を図として見られます。

Flow graph

判断・分岐・結果を、色に頼らず読めるようにします。

文章6種類

二値情報源における不確実性

要旨

エントロピーと正規化分散は、端点と最大値が一致しても、中間の値は異なります。

定義

二値エントロピーは不確実性をビットで表します。確定的な両端点ではゼロとなり、二つの結果が等確率のときに一ビットとなります。

正規化分散も等確率のときに一となります。共通の数値範囲で形を比較できますが、分散に「ビット」という単位が付くわけではありません。

等確率のときの計算値。

確率 p	エントロピー H [bit]	正規化分散 V [1]
0.5	1	1

解釈

最大値が共通でも、二つの関数は同じものではありません。図表を解釈するには、定義と単位の確認が必要です。

これらの値は既知の理論関数を表します。実測標本から不確実性を推定したり、圧縮性能を示したりするものではありません。

論文

要旨、本文、数式、参考文献を、レポート用の読みやすい型スケールで組みます。

Prose

段落・見出し・リスト・引用を読みやすく組むためのタイポグラフィ。

Callout

前提条件や注意点、結果の解釈に必要な但し書きを、読む流れの中に置きます。

Quote

引用と出典を一緒に置き、周囲の議論と区別します。

Definitions

カタログ全体の用語を定義し、ラベルの意味を共有します。

出典

本文から番号で出典を指し、読者が確認できる出典の一覧を用意します。

コードと変更5コンポーネント

SELECT id, title
FROM posts
WHERE status = 'published'

Code

SQL・シグネチャ・ソースの抜粋を、未解決の部分も含めて明快に示します。

Symbol

APIの宣言・引数・戻り値・メンバーを示します。

- public function build(): string
+ public function build(): Statement
~ @throws QueryException

Diff

追加・削除・変更を、色と明示的な記号の両方で示します。

Terminal

コマンドと出力をまとめて表示し、プロンプトをコピー対象から外します。

File tree

パスを並べるだけでなく、ファイルとディレクトリの階層を示します。

ナビゲーション10コンポーネント

Tree

展開できる階層で、名前空間やカテゴリをたどります。

Control

文書に必要な少数の操作を、控えめで一貫した見た目に揃えます。

Facets

種別と状態を組み合わせ、ページを離れずに大量の項目を絞り込みます。

Search

文書内の現在地を保ちながら、目的の項目に移動します。

Sidebar

現在地と文書全体の構成を、すぐ手の届く場所に置きます。

Topbar

パンくず、テーマ操作、モバイルのナビゲーション切り替えを、一つのヘッダーにまとめます。

Tabs

同じ対象の表示を切り替えます。JavaScriptなしでは、すべての内容を表示します。

Disclosure

補足情報を折りたたみ、何が入っているかを明示します。

Pagination

クリックする前に、次の移動先がわかるようにします。

Keys

このページで使えるキーと、その操作を対応させて示します。

状態とフィードバック6コンポーネント

Notice

ページ全体の解釈に関わる制限や条件を説明します。

Banner

保存済みバージョンや比較表示など、文書の状態をページ全体に知らせます。

Empty

検索結果なし、絞り込み不一致、特定できなかった情報を区別します。

Stat

問いに答える数字に、ラベルと解釈に必要な条件を添えます。

Timeline

出来事の順序、結果、処理がどこまで進んだかを示します。

Tooltip

略語や短いラベルの詳しい説明を補う、CSSによるヒント。