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

<BODY BGCOLOR="#ffffff"> <DL> <DT> <IMG SRC="../gif/gb-bar-2.gif" ALT="テクニカルライティングセミナーの概要" ALIGN=BOTTOM width="540" height="26"><BR> <DT> <IMG SRC="../gif/tw2.gif" ALT="わかりやすい文書が誰にでも作れる" ALIGN=BOTTOM width="570" height="120"></DL> <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"> 高精細化とともにさまざまな技術の導入が進みつつあるとはいえ，タブレット端末の精細度（例：132dpi）は印刷物に比べ「見やすさ・読みやすさ」の点でまだ改良の途上にあると言えます．基本となる文字の書体・大きさを適切に選ぶとともに，ページを構成するそれぞれの要素に的確に視線が誘導される工夫が必要です．</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"> セクション（章-節構成の節に相当）の先頭ページを開いた際，当該のページを構成する<font color="#800000">要素（見出し，段落，注記など）の関係を容易に把握</font>できかつ<font color="#800000">重要度（あるいは順序性）に沿って視線が誘導される</font>ページレイアウトが望まれます．</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="3011.jpg" vspace="10" width="432" height="324"></p> <p style="margin:1 10; line-height: 150%; text-indent:15"> なお，タブレット端末用の文書ではページ余白を小さく設定して差し支えありません．印刷物では20mm程度のページ余白（印刷機器の都合と手にした際に指が行にかからないための余白）をとりますが，タブレット端末ではベゼル部（液晶画面を取り巻く部分）がページ余白にもなります．タッチ操作に影響しないならば，10mm程度もしくはそれ以下としても差し支えありません．</p> <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="3012.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> <li> <p style="line-height: 150%; margin-top:0; margin-bottom:15"> 視<font color="#000080">線の誘導には，ページレイアウトの上側および左側に色を用いるのが有効です．加えて色の箇所からけい線が伸びていると，けい線に沿って視線が動きやすくなります．</font></p> </li> </ul> <HR> <p> <A HREF="t2c2s2-f.htm" TARGET="_parent"> <IMG SRC="../t1/nxt.gif" ALT="" ALIGN=BOTTOM width="37" height="37"></A> <B>次ページに進む（ボタンをクリックしてください）</B></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 width="282" height="24" hspace="2" vspace="2"></a><a TARGET="_blank" href="../t-smnr-trf/smnr-trf02.pdf"><IMG SRC="../gif/tsub-trf.gif" ALT="セミナー基本料金［抜粋PDF版］" ALIGN=bottom BORDER=0 width="282" height="24" hspace="2" vspace="2"></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> <B>テクニカルドキュメント・ビジネスドキュメントためのテクニカルライティングセミナー</B><BR> <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>