information-hierarchy

情報の階層

読者が最初に目にするものから答えを得られ、さらに詳しく知りたいときにだけ深い情報にたどり着けるようにします。ここに書かれたほかのことは、すべてこの考えに基づいています。文章の各要素には最も伝わりやすい形式を選び、最も重要なことを先に示し、内容に合ったシンプルな媒体を使います。

答えや結論を先に示す

読者は文章をざっと読みます。結論そのものから始めれば、30秒で要点が伝わります。同じ考え方は、あらゆる規模で当てはまります。セクションの最初の文にはその答えを、スライドのタイトルには要点を示します（「パフォーマンス」ではなく「キャッシュミスで p99 が2倍に」）。UI ラベルだけで意味が完結するようにします。

答えの後には深掘り情報（理由、根拠、例外）が続き、その後に出典が続きます。大半の読者が読み飛ばすような深掘り情報も残しつつ、後のセクションやリンク先のページ、脚注に移動させます。出典は末尾に配置します。

アイデアに合った形式を選ぶ

基本は文章ですが、別の形式のほうがアイデアをうまく伝えられる場合は、そちらを選びます。具体例を使えば、説明を増やすよりも抽象的な主張を早く理解できます。文章では埋もれてしまう、列挙できる事実は表にまとめます。文では述べることしかできない傾向は、グラフで示します。読者が想像する必要のあるレイアウトは、モックアップで見せます。

パイプラインや関係性は図を先に示します。 内容がパイプライン、依存関係グラフ、ステートマシンなど、要素間の関係が難しいポイントとなる構造の場合は、冒頭に図を置きます。まず一文で要点を示し、次に図を置いてから、詳しい文章を続けます。図を先に示し、文章で説明を補います。文章だけでは全体像が埋もれてしまいます。インライン図はノードを少数に絞り、大きな構造には詳しく見られるビューを用意します。図を検証してください（/creative-writing-skills:md-validationを参照）。

各要素で何を伝えたいかを考え、その目的に合った形式を使います。説明には段落、比較には表を使います。それぞれの形式は、本来の役割の中で最もよく伝わります。説明の代わりに図を使っても、段落で説明するより伝わりにくくなります。

媒体に合った階層にする

どの媒体でも、次のことを問いかけます。読者が求めるまで、内容を隠しておけるでしょうか。チャット、メール、通常の文書はすべてを一度に見せるため、そこでの階層化は情報の密度と順序が鍵になります。冒頭の文はどれも読む価値があり、深掘り情報はリンク先に置きます。HTML、アプリ、展開や移動ができるものなど、内容を隠せる媒体では、折りたたみセクション、ポップオーバー、子ページに深掘り情報を配置できます。読者が実際に必要とする深掘り情報に限って、操作要素を設けます。

構成はどの媒体でも、ざっと読む読者の助けになります。単独でも論旨がわかる見出し、本文の流れを妨げずに背景を補足する囲み、全体の把握が必要な長さの文章には目次を用意します。こうした構成要素は見た目を整理するものです。答えを先に示すのは、あくまで文章そのものの役割です。

それぞれの要素を適切に伝えられる、最もシンプルな媒体を選びます。同じことを伝えられるなら、HTML サイトより簡潔な返信が適しています。HTML を使う価値がある場合は、スマートフォンを優先して構築し、/creative-writing-skills:structured-artifactを使います。

出典

• How Users Read on the Web (NN/g): ざっと読む方法と、要点を最初に置くべき理由。
• Progressive Disclosure (NN/g): 二次的なコンテンツは、二次画面に回します。