実践テクニカルライティングセミナー－マニュアル作成の進め方とわかりやすいマニュアルのポイント－

<BODY BGCOLOR="#ffffff" LINK="#ffffff" VLINK="#ffffff"> <P> <img border="0" src="../gif/sec5.gif" alt="執筆の知識" width="540" height="26"><BR> <IMG SRC="../gif/tw2-4.gif" ALT="文書書式の選び方と執筆のルール化" width="570" height="150"><hr> <H1> <span style="font-weight: 400"><font color="#800000">Webマニュアル</font>の書式</span></H1> <blockquote> <blockquote> <table border="0" cellspacing="0" width="75%" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0"> <tr> <td width="10" bordercolor="#000000" bgcolor="#008080" bordercolorlight="#FFFFFF" bordercolordark="#FFFFFF">　</td> <td bordercolor="#000000" bgcolor="#FFFFFF" bordercolorlight="#FFFFFF" bordercolordark="#FFFFFF"> <p style="line-height: 150%; margin-top: 2; margin-bottom: 0; margin-left:10; margin-right:10; text-indent:15"> ワープロ文書に比べ、HTML文書（HTMLドキュメント）はより視認性に配慮する必要があります。解像度がさほど高くないあるいは表示領域が小さいモニタでの閲覧を考慮した書式にする必要があります。</p> </td> </tr> </table> </blockquote> </blockquote> <HR> <h2><span style="font-weight: 400">HTML文書の<font color="#800000">ポイント</font></span></h2> <p style="line-height: 150%; text-indent: 15; margin: 1 10"> 書式以前にHTML文書で考えておくべきは、HTML文書では「<font color="#800000">短めの段落にする</font>」とともに「<font color="#800000">読むを視覚的に表す</font>」ことです。いかの書式を設定しても、行が連なる（例：5行以上）段落では読みづらくなります。</p> <ul> <li> <p style="line-height: 150%; margin-top: 0; margin-bottom: 15"> <font color="#000080"> ワープロ文書では「2文ないし3文で構成される150～200字程度」が段落の基本です。HTML文書ではその7割程度あるいは半分に抑えるのが目安と言えます。</font></p> </li> </ul> <p style="line-height: 150%; margin: 1 10; text-indent:15"> ワープロ文書の「2文ないし3文で構成される150～200字程度」を HTML文書に変換する際は、このうちの1ないし2文で段落を構成し、残りを副本文（あるいは注記）にする手法が効果的です。</P> <ul> <li> <p style="line-height: 150%; margin-top: 0; margin-bottom: 15"> <font color="#000080"> 「主文と補足文」で構成される1段落を「主文と副本文」に分割して表すと、それぞれの文章が独立し視線が集中しやすくなります。</font></p> </li> <li> <p style="line-height: 150%; margin-top: 0; margin-bottom: 15"> <font color="#000080">この際、段落の要点が補足文の後にならないように見出しの直後に置く必要があります。第2部の「</font><A HREF="../../../yri-hp2-R3/yrihp/tgb-02/tgb-02-01f.htm" TARGET="_parent"><FONT COLOR="#000080">段落構成の考え方</FONT></A><font color="#000080">」で述べた「主文－補足文」構成は、HTML文書でとくに有効な手法と言えます。</font></p> </li> </ul> <p style="line-height: 150%; margin: 1 10; text-indent:15"> 加えて、段落と副本文に0.5行相当の余白を設定すると読みやすくなります。余白があると、それぞれが明確に区切られいずれかに視線が誘導されます。</P> <ul> <li> <p style="line-height: 150%; margin-top: 0; margin-bottom: 15"> <font color="#000080"> 加えて色文字で段落と副本文で見わけられる工夫も適当です。</font></p> </li> </ul> <hr> <h4><font color="#0080C0">[補足]　当コーナーの書式</font></h4> <p style="margin:1 10; line-height: 150%; "> 当コーナーも「主文－補足文」構成を基本にして表しています。第1文を見出しに対応した主文（要点）と位置付けていますが、必要に応じ導入文を述べ続けて主文を配置しています。</p> <ul> <li> <p style="line-height: 150%; margin-top:0; margin-bottom:15"> <font color="#000080"> 見出しに対して2段落程度で構成していますが、第1段落を「主たる段落」と位置付けています。第1段落で要点を述べ、第2段落以降でさらに要点を展開する構成を心掛けています。</font></p> </li> </ul> <p style="margin:1 10; line-height: 150%; "> また、段落が長くなった際、文の主従関係を視覚的に表すために「副本文（冒頭に記号を付した補足）」の手法を用いています。</p> <ul> <li> <p style="line-height: 150%; margin-top:0; margin-bottom:15"> <font color="#000080"> 画面上で読むのが基本のHTML文書には、印刷文書以上に“視覚的なめりはり”が必要です。記号を付しかつ色文字にすることにより「従」の位置付けを表すことを意図しています。段落（主文－補足文）を数行でお読みいただき、副本文で段落を別な視点でさらにご理解いただくことをねらいにしています。</font></p> </li> </ul> <hr> <h2><span style="font-weight: 400"><FONT COLOR="#800000">段落</FONT>の書式</span></h2> <p style="line-height: 150%; margin: 1 10; text-indent:15"> ワープロ文書では10ポイント・明朝体が基本なのに対し、HTML文書では<font color="#800000">11ポイントもしくは12ポイントのゴシック体</font>が一般的です。</P> <ul> <li> <p style="line-height: 150%; margin-top: 0; margin-bottom: 15"> <font color="#000080"> モニタの解像度によっては12ポイントでは文字が大きい印象を与える場合があるため、11ポイントを標準の設定に用いる例もあります。</font></p> </li> </ul> <p style="line-height: 150%; margin: 1 10; text-indent:15"> HTML文書でも適切な行間の設定する必要があります。しばしば、HTML文書で段落の行間がほとんど設定されていない例を見かけます。段落が数行に及ぶ場合、読みづらさの原因となります。</P> <ul> <li> <p style="line-height: 150%; margin-top: 0; margin-bottom: 15"><FONT COLOR="#000080">HTML文書の行と行の基本スペースはもともと欧文書体用に設定されています。欧文書体は大文字と小文字の高さの差が実質的に行間に加わるため、本来の行間が30％程度でも適度な“見かけの行間”が生じます。</FONT></p> </li> <li> <p style="line-height: 150%; margin-top: 0; margin-bottom: 15"><FONT COLOR="#000080"> 一方、日本語書体には大文字・小文字はありません。したがって、行間を適切に設定しないと行と行が干渉して読みづらくなってしまいます。</FONT></p> </li> </ul> <p style="line-height: 150%; margin: 1 10" align="center"> <img border="1" src="1157.jpg" vspace="10" width="384" height="288"></P> <HR> <p> <A HREF="t-2-4abs05fa.htm" TARGET="_parent"> <IMG SRC="../gif/0000.gif" ALIGN=bottom width="37" height="37"></A> <B>次ページに進む</B><FONT COLOR="#008080"><B>（ボタンをクリックしてください）</B></FONT></p> <HR> <DIV ALIGN=CENTER> <p style="margin:1 10; line-height:150%; text-indent:15"> <img border="0" src="../gif/trp-000.gif" alt="山之内総合研究所の出張開催セミナー" width="300" height="20"></DIV> <DIV ALIGN=CENTER> <p style="margin:1 10; "> <a target="_parent" href="../t6-1st/gb-smnr-1st.htm"> <img border="0" src="../gif/trp-1st-a.gif" hspace="2" vspace="2" width="282" height="24"></a><a target="_parent" href="../t6/gb-smnr.htm"><img border="0" src="../gif/trp-gb-a.gif" hspace="2" vspace="2" width="282" height="24"></a></DIV> <DIV ALIGN=CENTER> <p style="margin:1 10; "> <a target="_parent" href="../t7/mn-smnr.htm"> <img border="0" src="../gif/trp-mn-a.gif" hspace="2" vspace="2" width="282" height="24"></a><a target="_parent" href="../t5a/tp-smnr.htm"><img border="0" src="../gif/trp-tp-a.gif" hspace="2" vspace="2" width="282" height="24"></a></DIV> <DIV ALIGN=CENTER> <p style="margin:1 10; "> <a TARGET="_parent" href="../t-smnr-faq/faq-101f.htm"> <IMG SRC="../gif/tsub-faq.gif" ALT="セミナー／コンサルティングFAQ" ALIGN=bottom BORDER=0 hspace="2" vspace="2" width="282" height="24"></a><a TARGET="_blank" href="../t-smnr-trf/smnr-trf02.pdf"><IMG SRC="../gif/tsub-trf.gif" ALT="セミナー基本料金［抜粋PDF版］" ALIGN=bottom BORDER=0 hspace="2" vspace="2" width="282" height="24"></a></DIV> <hr> <p align="center" style="margin-top: 0; margin-bottom: 0"><A HREF="../../index.htm" TARGET="_parent"> <IMG SRC="../gif/modoru.gif" ALT="" ALIGN=BOTTOM width="180" height="50"></A></p> <hr> <p> <font color="#000066"><b>実践テクニカルライティングセミナー</b></font><font color="#008000"><BR> </font> <b>マニュアル作成の進め方とわかりやすいマニュアルのポイント</b><BR> Copyright:Takaaki-YAMANOUCHI/2002-2010<BR> 山之内孝明／有限会社　山之内総合研究所<BR> Takaaki Yamanouchi/ Yamanouchi Research Institute,Ltd.<BR> <IMG SRC="../gif/email.gif" ALT="" ALIGN=BOTTOM width="23" height="13"><FONT SIZE=4 COLOR="#000080">　</FONT><A HREF="mailto:takaaki@yamanouchi-yri.com"><FONT SIZE=4 COLOR="#000080">takaaki@yamanouchi-yri.com</FONT></A></p> </BODY>