1

見やすいアウトプットのつくりかた

twitter

@fkj_

2

0. プロフィール

3

Twitter

@fkj_

大学では情報デザインを専攻し、ユーザーの目線に立ったデザイン学として、UI/UXを学びまし

た。現在は、浅草下町でIT関連企業に勤務。プログラマー、システムエンジニアという立ち位置で

ユーザビリティを考慮したシステム提案を行なっています。

0. プロフィール

4

1. アウトプットはなぜ必要か？

5

仕事はアウトプットに満ちている。

・要件定義書

・詳細設計書

・テーブル定義書

・単体テスト仕様書

・結合テスト仕様書

・メール

・日報

・その他もろもろ

1. アウトプットはなぜ必要か？

6

そもそも、アウトプットをつくって何がしたい？

・メンバーと情報を共有したい

・顧客に情報を伝達したい

・スムーズに作業を引き継ぎたい

・作業の証拠として明示化したい（訴訟対策も）

・その他もろもろ

1. アウトプットはなぜ必要か？

7

アウトプットの目的を認識することは当然重要。

（例）要件定義書

WHAT 何の情報を持っている？

・要件化されたものの情報

WHO 誰に向けてのアウトプット？

・顧客に対して、要望が要件化されているかの確認

・開発者に対して、詳細設計を行う為の要件を明確化

WHEN いつ使うアウトプット？

・顧客や開発者との要件確認打合せ

HOW どう使うアウトプット？

・印刷、プロジェクタースクリーン

1. アウトプットはなぜ必要か？

8

見やすいアウトプットは、目的の達成度を高めます。

アウトプットは自分が伝えたい情報を具現化したもの。

1. アウトプットはなぜ必要か？

A’

A’ 伝えたい情報

具現化できていない...

具現化できている！ A

A

B?

9

2. 見やすいアウトプットのためのハック

10

アウトプットをつくるまで、主に３つのプロセスを踏む。

2. 見やすいアウトプットのためのハック

収集 / Collection

漏れが無いように情報をリストアップ

して洗い出します。

整理 / Arrangement

集まった情報の優先付けや分類を行

ないます。

組立 / Reconstruction

整理した情報を明示化するために、

必要に応じて装飾したり表やグラフに

します。

この資料では主に、後半の「整理、組立」について共有したいと思います。

11

整理するときは、組織化の「SLIP」。

2. 見やすいアウトプットのためのハック

S

L

I

P

分類 / Sort

箇条書きにして情報を分ける。

命名 / Label

分類された情報に見出しをつけたり、タイトル下にサブタイトルを設ける。

統合 / Integrate

関連する情報はできるだけ近づける。

優先順位 / Prioritize

情報の伝えたい順序で並べる。

12

組立するときは、細かいハックがある。

・文字の装飾

・色

・レイアウト

・コンテキスト

・比率

2. 見やすいアウトプットのためのハック

13

文字の装飾｜下線 / 斜字 / 太字 / 枠

文字や文章の読みやすさは可読性/視認性/判読性の３要素があります。これらの要素に注意し

ながらも、単語単位で簡単に装飾することで情報を命名化することができます。

・下線はリンクと間違われることもあるので最近では推奨できない。

・斜字や太字は可読性が悪くなる点が注意。目立たせる意図であれば良いが、

正確に読んでもらいたい文字に対しては太字にしないほうが良い。

2. 見やすいアウトプットのためのハック

あいうえお あいうえお あいうえお あいうえお あいうえお

14

色｜文字色 / 背景色

補足事項に薄い色を使用したり、注意事項を赤色にしたり、重要なことを青色にしたり。色はそ

の色彩と配色によって、情報を伝えやすくする効果があります。

・必要以上に多くの色を使わない。

・色をつけるときは意味を持たせること（カッコイイから、カワイイからはNG）。

2. 見やすいアウトプットのためのハック

題名

見出し

内容内容内容内容

内容内容内容内容

補足

題名

見出し

内容内容内容内容

内容内容内容内容

補足

15

レイアウト｜インデント / 段落 / 余白

普段から気をつけていれば、無意識の中でも情報を整理して表示することできます。

・中央揃えより、視認性を考慮して左揃えを。

・各種コンテンツを”等間隔”にすることが基本。

2. 見やすいアウトプットのためのハック

16

コンテキスト

人がコンテンツを読む動線として、Fの法則とZの法則というものがあります。これを参考にコンテ

ンツの動線を考えるとよいとされます。

2. 見やすいアウトプットのためのハック

17

比率

自然界でたびたび出現し、美しいとされている黄金比（1:1.618）がありますが、黄金比の中で更

に黄金比を引く、という考え方を覚えておくと、綺麗な図形を描けるコツがついてきます。（黄金比

にこだわる必要はない）

2. 見やすいアウトプットのためのハック

18

3. 余談

19

3. 余談

Microsoft Excelに関して。

・エクセルって、そもそも表計算ツールじゃないかという問題。

・最近はTracやWikiを活用して定義書をまとめる事例もある様子。

・図形の拡大縮小時は「Altキー＋ドラッグ」で綺麗に描けるよ。

・ROW関数を使うと自動連番できるよ。

20

4. 参考文献

21

4. 参考文献

伝わるデザイン[Webサイト]

http://tsutawarudesign.web.fc2.com/

シンプリシティの法則 [書籍]

デジタル時代のドキュメント企画と設計 [書籍]