電子マニュアルの考え方とタブレット端末で読める電子版図解マニュアルの作り方

<BODY BGCOLOR="#ffffff"> <P style="margin-top: 0; margin-bottom: 0"> <IMG SRC="../gif/sec4c2.gif" ALT="テクニカルライティングの応用" ALIGN=BOTTOM width="540" height="26"><P style="margin-top: 0; margin-bottom: 0"> <IMG SRC="../gif/tw3.gif" ALT="電子マニュアルの考え方とタブレット端末で読める電子版図解マニュアルの作り方" width="570" height="150"><hr> <H1> <span style="font-weight: 400">「<font color="#800000">読みやすい書式</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="margin:1 10; line-height: 150%; text-indent:15"> 高精細化が進みつつあるとはいえ、タブレット端末に表示される文字の精細度（例：132ppi）は印刷物に比べ「見やすさ・読みやすさ」の点でまだ改良の途上にあると言えます。基本となる書体・大きさを適切に選ぶとともに、ページを構成するそれぞれの要素に的確に視線が誘導される工夫が必要です。</p> </td> </tr> </table> </blockquote> </blockquote> <hr> <h2><span style="font-weight: 400">電子版図解マニュアルの<font color="#800000">ページレイアウト</font>と<font color="#800000">書式</font></span></h2> <p style="line-height: 150%; margin: 1 10; text-indent:15"> セクションの先頭ページを開いた際、当該のページを構成する「アイテム（見出し、段落、注記など文書を構成する要素）」の関係を容易に把握できかつ重要度（あるいは順序性）に沿って視線が誘導されるページレイアウトが望まれます。</p> <ul> <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; text-indent:15"> 電子マニュアルでは本文書体を12ポイント程度のゴシック体とし、これを基調として見出しあるいは補足に用いる文字を選ぶのが適当です。印刷文書（10ポイント・明朝体）に比べ、多少大きくかつ画面の精細度の影響を受けにくい文字を選ぶ必要があります。</p> <ul> <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-top:0; margin-bottom:15" align="center"> <img border="1" src="t311.jpg" vspace="10" width="432" height="324"></p> <p style="margin:1 10; line-height: 150%; text-indent:15"> なお、タブレット端末用の文書ではページ余白を小さく設定して差し支えありません。印刷物では20mm程度のページ余白（印刷機器の都合と手にした際に指が行にかからないための余白）をとりますが、タブレット端末ではベゼル部（液晶画面を取り巻く部分）がページ余白にもなります。</p> <ul> <li> <p style="line-height: 150%; margin-top:0; margin-bottom:15"> <font color="#000080">タッチ操作に影響しないならば、10mm程度もしくはそれ以下としても差し支えありません。</font></p> </li> </ul> <hr> <h2><span style="font-weight: 400"><font color="#800000">見やすさ</font>の工夫－仕切りと色使いによる<font color="#800000">視線の誘導</font>－</span></h2> <p style="line-height: 150%; margin: 1 10; text-indent:15" align="left"> 人の「読む／読まない」あるいは「見る／見ない」は、対象に視線（意識）が誘導されるかが一つの要因です。意識が傾注されれば、主体的に対象を理解しようとします。</p> <ul> <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; text-indent:15" align="left"> 複数のアイテムで構成された文書を読む際、アイテムを仕切る要素がないと視線が散漫になりがちです。対象が仕切りけい線によって区切られていれば、対象が一つの要素化と認識され視線が誘導されます。</p> <ul> <li> <p style="line-height: 150%; margin-top:0; margin-bottom:15"> <font color="#000080"> 要素の四方を囲むだけが区切りではありません。上下あるいは左右を囲む手法も有効です。また、上側と左側を仕切ると左上に交点が生じ、そこに視線が向かいやすくなります。</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-top:0; margin-bottom:15" align="center"> <img border="1" src="t312.jpg" vspace="10" width="432" height="324"></p> <p style="margin:1 10; line-height: 150%; text-indent:15" align="left"> 色使いも視線の誘導に有効です。印刷物では印刷コストなどの理由で色を使いづらい場合もありますが、電子文書ではその制約はありません。</p> <ul> <li> <p style="line-height: 150%; margin-top:0; margin-bottom:15"> <font color="#000080"> 色使いの際は、面の塗りつぶしは「淡色」、線と文字は「濃色」が基本です。また、重要事項には暖色（とりわけ、注意事項には黄色系の注意色）を用い、補足事項には寒色を用いるのが適当です。</font></p> </li> </ul> <p style="margin:1 10; line-height: 150%; text-indent:15" align="left"> 視線の誘導には、ページレイアウトの上側および左側に色を用いるのが有効です。加えてけい線があると、けい線に沿って視線が動きやすくなります。</p> <HR> <p> <A HREF="t3c3s2-f.htm" TARGET="_parent"> <IMG SRC="../t1/nxt.gif" ALT="" ALIGN=BOTTOM width="37" height="37"></A> <B>次ページに進む（ボタンをクリックしてください）</B></p> <HR> <DIV ALIGN=CENTER><A HREF="../../index.htm" TARGET="_parent"> <IMG SRC="../gif/modoru.gif" ALT="" ALIGN=BOTTOM width="180" height="50"></A></DIV> <HR> <p> <font color="#000066"><b>実践テクニカルライティングセミナー</b></font><font color="#008000"><BR> </font> <b>マニュアル作成の進め方とわかりやすいマニュアルのポイント</b><BR> Copyright:Takaaki-YAMANOUCHI/2002-2011<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>