レイアウト
2007.7.3

マニュアルライティング（2007 年度）

本日の内容• レイアウトの前に• 基本的な知識• 文書の体裁を整える



連絡事項
• 出席状況確認リストをサイボウズにて掲示中• 第 3 回レポート課題提示中（〆切：7/10）

レイアウトの前に（1/3）
可読性を向上させる要素• 視線の動きに対する配慮• テキストの視覚処理• 情報構造の表現→見出し処理→情報構成要素の表現レイアウトの前に（2/3）
情報の構造化が必要• 見出し、本文、サブ情報への分割• リスト（箇条書き）化→箇条書き、番号箇条書き、定義リスト• 構造化マークアップにつながる→ Web 標準その他• 記載すべきことは何か？の枠組みを考慮する
レイアウトの前に（3/3）
基本として紙メディアのルールを理解しておく• メディアによって実現方法が異なる• 紙メディアには歴史的のノウハウの蓄積がある• Web サイトには制御のための仕組みが不足している→現状の CSS の実装状況では…

基本的な知識テキストの視覚表現を構成する要素• 書体• 文字の大きさ
• 行長
• 行送り
• 色



書体（1/2）
マニュアルにおいてはゴシック系が中心• 長文主体であれば（一般的には）明朝系の方が可読性が高い• 文字の太さのバリエーションを利用したい場合
は、同一書体のウェイト違いで→多数の書体を混在させない• 重要情報を区別するため、見出しと手順文はウェイトの大きいゴシック系が使用される


書体（2/2）
ウェイトの違いと、書体の違い• 書体の違い（AXIS Std UL）• 書体の違い（AXIS Std L）• 書体の違い（AXIS Std M）• 書体の違い（AXIS Std B）• 書体の違い（AXIS Std H）• 書体の違い（ヒラギノ角ゴ W6）• 書体の違い（ヒラギノ丸ゴ W4）



文字の大きさ本文は 8.5 〜 10pt 程度• 基準は仮想ボディ• 1pt ＝ 0.3514mm• 1Q（H）＝ 0.25mm• 見出しは階層感を明確に• 判型にも依存• 電子媒体の場合は？

講

仮想ボディ

10

行長（1/3）
長すぎても短すぎても可読性が落ちる• 一般的には 35 〜 40 字（本文、一段組横組みの場合）• 版面全部を使用するのは避ける• 電子媒体の場合は？

11

行長（2/3）
マニュアルとは、利用者に必要な情報を簡潔かつ正確に伝えるための文書である。良いマニュアルを作成するためには表面的な表現技巧よりも、利用者の特性を正確に把握したり、理解しやすい情報構造を設計するなどの事前準備が重要である。
（1行30字）マニュアルとは、利用者に必要な情報を簡潔かつ正確に伝えるための文書である。良いマニュアルを作成するためには表面的な表現技巧よりも、利用者の特性を正確に把握したり、理解しやすい情報構造を設計するなどの事前準備が重要である。（1行25字）
12

行長（3/3）
マニュアルとは、利用者に必要な情報を簡潔かつ正確に伝えるためマニュアルとは、利用者に必要な情報を簡潔かつ正確の文書である。良いマニュアルを作成するためには表面的な表現技に伝えるための文書である。
良いマニュアルを作成する

巧よりも、利用者の特性を正確に把握したり、理解しやすい情報構造を設計するなどの事前準備が重要である。（1行15字）

ためには表面的な表現技巧よりも、利用者の特性を正確に把握したり、理解しやすい情報構造を設計するなどの事前準備が重要である。
（1行12字）13

行送り（1/5）
基本は 150%〜 175%
• 仮想ボディ上端から次行の仮想ボディ上端まで• 行長／文字サイズ／書体により最適値は異なる• 電子媒体の場合は？

行送り

マニュアル

ライティング14

行送り（2/5）
マニュアルとは、利用者に必要な情報を簡潔かつ正確に伝えるための文書である。良いマニュアルを作成するためには表面的な表現技巧よりも、利用者の特性を正確に把握したり、理解しやすい情報構造を設計するなどの事前準備が重要である。
（12pt/18pt）
マニュアルとは、利用者に必要な情報を簡潔かつ正確に伝えるための文書である。良いマニュアルを作成するためには表面的な表現技巧よりも、利用者の特性を正確に把握したり、理解しやすい情報構造を設計するなどの事前準備が重要である。
（12pt/21pt）
15

行送り（3/5）
マニュアルとは、利用者に必要な情報を簡潔かつ正確に伝えるための文書である。良いマニュアルを作成するためには表面的な表現技巧よりも、利用者の特性を正確に把握したり、理解しやすい情報構造を設計するなどの事前準備が重要である。
（12pt/18pt）

マニュアルとは、利用者に必要な情報を簡潔かつ正確に伝えるための文書である。良いマニュアルを作成するためには表面的な表現技巧よりも、利用者の特性を正確に把握したり、理解しやすい情報構造を設計するなどの事前準備が重要である。
（12pt/21pt）
16

行送り（4/5）
マニュアルとは、利用者に必要な情報を簡潔かつ正確に伝えるための文書である。良いマニュアルを作成するためには表面的な表現技巧よりも、利用者の特性を正確に把握したり、理解しやすい情報構造を設計するなどの事前準備が重要である。（12pt/18pt）

マニュアルとは、利用者に必要な情報を簡潔かつ正確に伝えるための文書である。良いマニュアルを作成するためには表面的な表現技巧よりも、利用者の特性を正確に把握したり、理解しやすい情報構造を設計するなどの事前準備が重要である。（12pt/21pt）

17

行送り（5/5）
マニュアルとは、利用者に必要な情報を簡潔かつ正確に伝えるための文書である。良いマニュアルを作成するためには表面的な表現技巧よりも、利用者の特性を正確に把握したり、理解しやすい情報構造を設計するなどの事前準備が重要である。（12pt/18pt）

マニュアルとは、利用者に必要な情報を簡潔かつ正確に伝えるための文書である。良いマニュアルを作成するためには表面的な表現技巧よりも、利用者の特性を正確に把握したり、理解しやすい情報構造を設計するなどの事前準備が重要である。（12pt/21pt）
18

色（1/2）
1 色、または 2 色（1 ＋ 1 色）を基本に•「フルカラーにすればわかりやすくなる」とは限らない• 少ない色数で強調表現・差別化できるように• コスト要因19

色（2/2）1 色でも濃度を変えれば…
100%
60%
40%
20%
20

文書の体裁を整える
視覚表現を構成する要素• 版面設計• 階層の表現• スタイル設定• 文字間隔（カーニング）• 視線の動きへの配慮

21

版面設計（1/6）
版面とは？
講義要綱（マニュアルライティング）

講義内容

講義要綱（マニュアルライティング）

講義内容

科目の概要

科目の概要

マニュアルとは、利用者に必要な情報を簡潔かつ正確に伝えるための文書であマニュアルとは、利用者に必要な情報を簡潔かつ正確に伝えるための文書である。良いマニュアルを作成するためには表面的な表現技巧よりも、利用者の特性る。良いマニュアルを作成するためには表面的な表現技巧よりも、利用者の特性を正確に把握したり、理解しやすい情報構造を設計するなどの事前準備が重要を正確に把握したり、理解しやすい情報構造を設計するなどの事前準備が重要である。その点で、マニュアルライティングは一般的なライティング（文章作成である。その点で、マニュアルライティングは一般的なライティング（文章作成法）とは異なる。

法）とは異なる。

説明対象が複雑化・専門化する一方の現代社会においては、このようなスキルを説明対象が複雑化・専門化する一方の現代社会においては、このようなスキルを早い段階で習得しておくことが望ましい。実習やレポート課題に対して意欲的早い段階で習得しておくことが望ましい。実習やレポート課題に対して意欲的に参加し、マニュアルライティングに留まらず、マニュアルという存在そのものに参加し、マニュアルライティングに留まらず、マニュアルという存在そのものに対しても理解を深めることを希望する。

に対しても理解を深めることを希望する。

学習・教育目標

学習・教育目標

文書を用いて他人に情報を伝えるために必要な考えかた・表現方法の基礎を、マ文書を用いて他人に情報を伝えるために必要な考えかた・表現方法の基礎を、マニュアルという題材を利用して習得することを目標とする。題材の具体例としニュアルという題材を利用して習得することを目標とする。題材の具体例としては取扱説明書を中心にしつつ、業務手順書や仕様書、各種説明資料など、マては取扱説明書を中心にしつつ、業務手順書や仕様書、各種説明資料など、マニュアルライティングのスキルが応用できる様々な文書も取り上げる。狭義のニュアルライティングのスキルが応用できる様々な文書も取り上げる。狭義のマニュアルライティング（テクニカルライティング）の領域についても、業界事マニュアルライティング（テクニカルライティング）の領域についても、業界事情などを取り上げる予定である。

情などを取り上げる予定である。

授業計画

授業計画

1.オリエンテーション

1.オリエンテーション

2.良いマニュアルとは？
（1）

2.良いマニュアルとは？
（1）

3.良いマニュアルとは？
（2）

3.良いマニュアルとは？
（2）

4.企画構成（1）4.企画構成（1）

5.企画構成（2）5.企画構成（2）

6.テキスト表現（1）6.テキスト表現（1）

7.実習（1）

7.実習（1）

8.テキスト表現（2）8.テキスト表現（2）

9.ビジュアル表現

9.ビジュアル表現

10.実習（2）

10.実習
（2）

11.電子マニュアル

11.電子マニュアル

12.周辺の話題

12.周辺の話題

13.まとめ13.まとめ100

100

22版面設計（2/6）
テキストスペースの事前設計• 本文ベタ組み＋均等配置を前提に設計する• 文字サイズ×文字数• 版面率に留意する→単行本系は低め（60 〜 70%）
→雑誌や業務系は高め（75 〜 80％）
版面率の出典：版面率で印象が決まる（第一資料印刷株式会社）
http://www.dsp-blog.jp/periodical/archives/001122.html
23

版面設計（3/6）
1文字の大きさ×文字数□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

行送り× □□□□□□□□□□□□□□□□□□□□
行数 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
24

版面設計（4/6）
マージンの取りかた

天• 一般的には、「ノド＜天＜小口＜地」の順に大きく
講義要綱（マニュアルライティング）

講義内容

科目の概要

科目の概要

マニュアルとは、利用者に必要な情報を簡潔かつ正確に伝えるための文書であマニュアルとは、利用者に必要な情報を簡潔かつ正確に伝えるための文書である。良いマニュアルを作成するためには表面的な表現技巧よりも、利用者の特性る。良いマニュアルを作成するためには表面的な表現技巧よりも、利用者の特性を正確に把握したり、理解しやすい情報構造を設計するなどの事前準備が重要を正確に把握したり、理解しやすい情報構造を設計するなどの事前準備が重要である。その点で、マニュアルライティングは一般的なライティング（文章作成である。その点で、マニュアルライティングは一般的なライティング（文章作成法）とは異なる。

法）とは異なる。

説明対象が複雑化・専門化する一方の現代社会においては、このようなスキルを説明対象が複雑化・専門化する一方の現代社会においては、このようなスキルを早い段階で習得しておくことが望ましい。実習やレポート課題に対して意欲的早い段階で習得しておくことが望ましい。実習やレポート課題に対して意欲的• 分厚い冊子では、製本後の物理的な可読性を考慮してノドを大きめに取るに参加し、マニュアルライティングに留まらず、マニュアルという存在そのものに参加し、マニュアルライティングに留まらず、マニュアルという存在そのものに対しても理解を深めることを希望する。

に対しても理解を深めることを希望する。

学習・教育目標

文書を用いて他人に情報を伝えるために必要な考えかた・表現方法の基礎を、マニュアルという題材を利用して習得することを目標とする。題材の具体例としノド学習・教育目標
文書を用いて他人に情報を伝えるために必要な考えかた・表現方法の基礎を、マニュアルという題材を利用して習得することを目標とする。題材の具体例としては取扱説明書を中心にしつつ、業務手順書や仕様書、各種説明資料など、マては取扱説明書を中心にしつつ、業務手順書や仕様書、各種説明資料など、マ

ニュアルライティングのスキルが応用できる様々な文書も取り上げる。狭義のニュアルライティングのスキルが応用できる様々な文書も取り上げる。狭義のマニュアルライティング（テクニカルライティング）の領域についても、業界事マニュアルライティング（テクニカルライティング）の領域についても、業界事情などを取り上げる予定である。

情などを取り上げる予定である。

授業計画

授業計画

1.オリエンテーション

1.オリエンテーション

2.良いマニュアルとは？
（1）

2.良いマニュアルとは？
（1）

3.良いマニュアルとは？
（2）

3.良いマニュアルとは？
（2）

4.企画構成（1）

4.企画構成（1）• プリンタ出力を前提とする
場合は、印刷範囲に注意
100

講義要綱（マニュアルライティング）

講義内容

5.企画構成（2）

5.企画構成（2）

6.テキスト表現（1）

6.テキスト表現
（1）

7.実習
（1）

7.実習
（1）

8.テキスト表現（2）

8.テキスト表現（2）

9.ビジュアル表現

9.ビジュアル表現

10.実習
（2）

10.実習
（2）

11.電子マニュアル

11.電子マニュアル

12.周辺の話題

12.周辺の話題

13.まとめ13.まとめ地小口10025

作業課題（1/3）
以下の設計の場合、テキストスペースに何文字入る？
• 判型：B5（縦 257 ×横 182mm）• マージン：天 18mm、地 29mm、小口 23mm、ノド 15.5mm• 本文サイズ：10pt 弱（3.5mm で計算）
• 行送り：15pt 弱（約 5.25mm で計算、150％）• 余裕があれば版面率も計算してみよう
26

作業課題（2/3）
正解：1640 字• 判型：B5（縦 257 ×横 182mm）• マージン：天 18mm、地 29mm、小口 23mm、ノド 15.5mm→テキストスペースは 210 × 143.5mm• 本文サイズ：10pt 弱（3.5mm で計算）
• 行送り：15pt 弱（約 5.25mm で計算、150％）→行長 41 字× 40 行（版面率 64.4％）27

作業課題（3/3）
ネットワーク情報学部（マニュアルライティング）

ネットワーク情報学部（マニュアルライティング）

講義内容＜科目の概要＞講義内容＜科目の概要＞マニュアルとは、利用者に必要な情報を簡潔かつ正確に伝えるための文書である。良いマニュアルを作成するためには表面的な表現技巧よりも、利用者の特性を正確に把握したり、理解しやすい情報構造を設計するなどの事前準備が重要である。その点で、マニュアルライティ
ングは一般的なライティング（文章作成法）とは異なる。

マニュアルとは、利用者に必要な情報を簡潔かつ正確に伝えるための文書である。良いマニュアルを作成するためには表面的な表現技巧よりも、利用者の特性を正確に把握したり、理解しやすい情報構造を設計するなどの事前準備が重要である。その点で、マニュアルライティングは一般的なライティング（文章説明対象が複雑化・専門化する一方の現代社会においては、このようなスキルを早い段階で習得しておくことが望ましい。実習やレポート課題に対して意欲的に参加し、マニュアルライティングに留まらず、マニュアルという存在そのものに対しても理解を深めることを希望する。

作成法）とは異なる。
説明対象が複雑化・専門化する一方の現代社会においては、このようなスキルを早い段階で習得しておくことが望ましい。実習やレポート課題に対して意欲的に参加し、マニュアルライティングに留まらず、マニュアルという存在そのものに対しても理解を深めることを希望する。

＜学習・教育目標＞
文書を用いて他人に情報を伝えるために必要な考えかた・表現方法の基礎を、マニュアルという題材を利用して習得することを目標とする。題材の具体例としては取扱説明書を中心に＜学習・教育目標＞
文書を用いて他人に情報を伝えるために必要な考えかた・表現方法の基礎を、しつつ、業務手順書や仕様書、各種説明資料など、マニュアルライティングのスキルが応用できる様々な文書も取り上げる。狭義のマニュアルライティング（テクニカルライティング）の領域についても、業界事情などを取り上げる予定である。

マニュアルという題材を利用して習得することを目標とする。題材の具体例としては取扱説明書を中心にしつつ、業務手順書や仕様書、各種説明資料など、マニュアルライティングのスキルが応用できる様々な文書も取り上げる。狭義のマニュアルライティング（テクニカルライティング）の領域についても、業＜授業計画＞
1. オリエンテーション
2. 良いマニュアルとは？（1）3. 良いマニュアルとは？（2）

界事情などを取り上げる予定である。
＜授業計画＞

4. 企画構成（1）

1. オリエンテーション

2. 良いマニュアルとは？（1）5. 企画構成（2）6. テキスト表現（1）3. 良いマニュアルとは？（2）4. 企画構成（1）7. 実習（1）
8. テキスト表現（2）5. 企画構成（2）6. テキスト表現（1）9. ビジュアル表現

7. 実習（1）

10. 実習（2）11. 電子マニュアル

8. テキスト表現（2）9. ビジュアル表現

12. 周辺の話題

10. 実習（2）13. まとめ

11. 電子マニュアル
12. 周辺の話題＜テキスト・参考文献＞
テキストは使用しない。講義中に参考文献・参考 Web サイトを随時紹介する。

13. まとめ＜テキスト・参考文献＞

成績評価の方法
講義ごとの作業課題：40%、レポート課題（4 回を予定）：40％、実習：20%

テキストは使用しない。講義中に参考文献・参考 Web サイトを随時紹介する。

成績評価の方法

履修上の留意点

講義ごとの作業課題：40%、レポート課題（4 回を予定）：40％、実習：

2007 年度講義概要

41 字 ×40 行

125

2007 年度講義概要

41（35）字 ×40 行

125

28

版面設計（5/6）
参考：グリッドシステム（1）29版面設計（6/6）
参考：グリッドシステム（2）30階層の表現（1/7）
階層表現に必要な要素• 見出しの表現• 階層の表現31階層の表現（2/7）
各種の見出し処理• 文字サイズ
• 色
• 網掛け
• 罫線
• 画像

32

階層の表現（3/7）
科目の概要
マニュアルとは、利用者に必要な情報を簡潔かつ正確に伝えるための文書である。良いマ

科目の概要
マニュアルとは、利用者に必要な情報を簡潔かつ正確に伝えニュアルを作成するためにはるための文書である。良いマニュアルを作成するためには科目の概要
マニュアルとは、利用者に必要な情報を簡潔かつ正確に伝え科目の概要
マニュアルとは、利用者に必要な情報を簡潔かつ正確に伝えるための文書である。良いマ
ニュアルを作成するためにはるための文書である。良いマ
ニュアルを作成するためには
33

階層の表現（4/7）
アイコン化による見出し処理の例

Hnnh34

階層の表現（5/7）
情報構造の表現• 情報のブロック• 階層構造• 差別化する方法→罫線→背景→インデント

35

階層の表現（6/7）
講義内容
科目の概要
マニュアルとは、利用者に必要な情報を簡潔かつ正確に伝えるための文書である。良いマニュアルを作成するためには表面的な表現技巧よりも、利用者の特性を正確に把握したり、理解しやすい情報構造を設計するなどの事前準備が重要である。
その点で、マニュアルライティングは一般的なライティング（文章作成法）とは異なる。
説明対象が複雑化・専門化する一方の現代社会においては、このようなスキルを早い段階で習得しておくことが望ましい。
実習やレポー
ト課題に対して意欲的に参加し、マニュアルライティングに留まら
36

階層の表現（7/7）
情報構造の表現にあたって留意すべき点• 視覚処理による階層表現は 4 階層程度が限度• 視覚処理に依存せず、大元の情報構造を見直す
視点を忘れずに• 多段インデントは避ける→改ページの時点で構造がわからなくなる• 箇条書きは 2 階層が限度
37

スタイルの設定
Web サイトにおける CSS と考え方は同じ• 視覚処理の統一感維持、管理負荷軽減のために• 論理構造ごとにスタイルを定義する•（時々崩壊するものの）Word でもスタイル設定は利用できる→段落スタイル（＝ div 要素）のみ• DTP 用のソフトウェアでは文字スタイル（＝span 要素）も利用できる38

（1/4）
文字間隔（カーニング）
基本はベタ組み（＝カーニング処理なし）• 漢字とカナの「濃淡の差」により可読性が高まる• 欧文系は濃淡が均一であることが良い→カーニング処理をすることが前提• 見出しはカーニング処理• 均等間隔の文字詰めとカーニング処理の違い• 電子媒体の場合は？
39

（2/4）
文字間隔（カーニング）40

（3/4）
文字間隔（カーニング）41

（4/4）
文字間隔（カーニング）
マニュアルとは、利用者に必要な情報を簡潔かつ正確に伝えるための文書である。良いマニュアルを作成するためには表面的な表現技巧よりも、利用者の特性を正確に把握したり、理解しやすい情報構造を設計するなどの事前準備が重要である。
（12pt/21pt、ベタ組み）
マニュアルとは、利用者に必要な情報を簡潔かつ正確に伝えるための文書である。良いマニュアルを作成するためには表面的な表現技
巧よりも、利用者の特性を正確に把握したり、理解しやすい情報構造を設計するなどの事前準備が重要である。
（12pt/21pt、「オプティカル」詰め有効）42視線の動きへの配慮（1/3）
どう読めばいいのか悩ませない43

視線の動きへの配慮（2/3）
一定の規則に従って配置する

14 53

12

23 4 544

視線の動きへの配慮（3/3）
アイトラッキングによる分析• 主に Web サイト上の分析に使用される手法• 軌跡分析・注目率分析• 注目度が高いのは「F」を描く領域

45

もっと詳しく知りたい？
関連リソース（主に DTP 系）• DTP 関係書籍
• ページネーションマニュアル
http://www.jpc.gr.jp/jpc/download/pdf/
page0006QX41.pdf• JIS X 4051( 日本語文書の組版方法 )• CSS の各種解説書と比較してみよう
46

次回の予定実習• 講義全体の復習を兼ねて47