見やすいアウトプットのつくりかたを紹介します。かなり基本をベースにしていますが、参考になれば幸いです。作者はユーザビリティ視点でのデザイン学を大学で専攻していたので、ややそちら寄りになっています。

1. 見やすいアウトプットのつくりかた
twitter
@fkj_
1

2. 0. プロフィール
2

3. 0. プロフィール
Twitter
@fkj_
大学では情報デザインを専攻し、ユーザーの目線に立ったデザイン学として、UI/UXを学びまし
た。現在は、浅草下町でIT関連企業に勤務。プログラマー、システムエンジニアという立ち位置で
ユーザビリティを考慮したシステム提案を行なっています。
3

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

5. 1. アウトプットはなぜ必要か？
仕事はアウトプットに満ちている。
・要件定義書
・詳細設計書
・テーブル定義書
・単体テスト仕様書
・結合テスト仕様書
・メール
・日報
・その他もろもろ
5

6. 1. アウトプットはなぜ必要か？
そもそも、アウトプットをつくって何がしたい？
・メンバーと情報を共有したい
・顧客に情報を伝達したい
・スムーズに作業を引き継ぎたい
・作業の証拠として明示化したい（訴訟対策も）
・その他もろもろ
6

7. 1. アウトプットはなぜ必要か？
アウトプットの目的を認識することは当然重要。
（例）要件定義書
WHAT
何の情報を持っている？
・要件化されたものの情報
WHO
誰に向けてのアウトプット？
・顧客に対して、要望が要件化されているかの確認
・開発者に対して、詳細設計を行う為の要件を明確化
WHEN
いつ使うアウトプット？
・顧客や開発者との要件確認打合せ
HOW
どう使うアウトプット？
・印刷、プロジェクタースクリーン
7

8. 1. アウトプットはなぜ必要か？
見やすいアウトプットは、目的の達成度を高めます。
アウトプットは自分が伝えたい情報を具現化したもの。
具現化できていない...
B?
伝えたい情報
A
A’
具現化できている！
A
A’
8

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

10. 2. 見やすいアウトプットのためのハック
アウトプットをつくるまで、主に３つのプロセスを踏む。
収集 / Collection
整理 / Arrangement
組立 / Reconstruction
漏れが無いように情報をリストアップ
集まった情報の優先付けや分類を行
整理した情報を明示化するために、
して洗い出します。
ないます。
必要に応じて装飾したり表やグラフに
します。
この資料では主に、後半の「整理、組立」について共有したいと思います。
10

11. 2. 見やすいアウトプットのためのハック
整理するときは、組織化の「SLIP」。
S
L
I
P
分類 / Sort
箇条書きにして情報を分ける。
命名 / Label
分類された情報に見出しをつけたり、タイトル下にサブタイトルを設ける。
統合 / Integrate
関連する情報はできるだけ近づける。
優先順位 / Prioritize
情報の伝えたい順序で並べる。
11

12. 2. 見やすいアウトプットのためのハック
組立するときは、細かいハックがある。
・文字の装飾
・色
・レイアウト
・コンテキスト
・比率
12

13. 2. 見やすいアウトプットのためのハック
文字の装飾｜下線 / 斜字 / 太字 / 枠
文字や文章の読みやすさは可読性/視認性/判読性の３要素があります。これらの要素に注意し
ながらも、単語単位で簡単に装飾することで情報を命名化することができます。
・下線はリンクと間違われることもあるので最近では推奨できない。
・斜字や太字は可読性が悪くなる点が注意。目立たせる意図であれば良いが、
正確に読んでもらいたい文字に対しては太字にしないほうが良い。
あいうえお あいうえお あいうえお あいうえお あいうえお
13

14. 2. 見やすいアウトプットのためのハック
色｜文字色 / 背景色
補足事項に薄い色を使用したり、注意事項を赤色にしたり、重要なことを青色にしたり。色はそ
の色彩と配色によって、情報を伝えやすくする効果があります。
・必要以上に多くの色を使わない。
・色をつけるときは意味を持たせること（カッコイイから、カワイイからはNG）。
題名
題名
見出し
見出し
内容内容内容内容
内容内容内容内容
内容内容内容内容
内容内容内容内容
補足
補足
14

15. 2. 見やすいアウトプットのためのハック
レイアウト｜インデント / 段落 / 余白
普段から気をつけていれば、無意識の中でも情報を整理して表示することできます。
・中央揃えより、視認性を考慮して左揃えを。
・各種コンテンツを”等間隔”にすることが基本。
15

16. 2. 見やすいアウトプットのためのハック
コンテキスト
人がコンテンツを読む動線として、Fの法則とZの法則というものがあります。これを参考にコンテ
ンツの動線を考えるとよいとされます。
16

17. 2. 見やすいアウトプットのためのハック
比率
自然界でたびたび出現し、美しいとされている黄金比（1:1.618）がありますが、黄金比の中で更
に黄金比を引く、という考え方を覚えておくと、綺麗な図形を描けるコツがついてきます。（黄金比
にこだわる必要はない）
17

18. 3. 余談
18

19. 3. 余談
Microsoft Excelに関して。
・エクセルって、そもそも表計算ツールじゃないかという問題。
・最近はTracやWikiを活用して定義書をまとめる事例もある様子。
・図形の拡大縮小時は「Altキー＋ドラッグ」で綺麗に描けるよ。
・ROW関数を使うと自動連番できるよ。
19

20. 4. 参考文献
20

21. 4. 参考文献
伝わるデザイン[Webサイト]
http://tsutawarudesign.web.fc2.com/
シンプリシティの法則 [書籍]
デジタル時代のドキュメント企画と設計 [書籍]
21