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

<BODY BGCOLOR="#ffffff"> <DL> <DT> <IMG SRC="../gif/gb-bar-2.gif" ALT="技術文書・ビジネス文書に役立つ知識" ALIGN=bottom width="540" height="26"><DT> <img border="0" src="../gif/t2.gif" alt="電子マニュアルの考え方とタブレット端末で読める電子版図解マニュアルの作り方" width="570" height="150"></DL> <HR> <H1> <span style="font-weight: 400"><font color="#800000">見出し構成</font>と<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"> 画面が狭いタブレット端末で閲覧する電子マニュアルの場合，不要に見出しを細分せず<font color="#800000">見出しランクを2階層（章－節）に抑える</font>のが適当です．見出しを細分すると，「目次が複雑になり，必要な項目を見つけづらい」あるいは「セクションが長くなり，理解に負担がかかりやすい」などの弊害を生じます．</p> </td> </tr> </table> </blockquote> </blockquote> <hr> <h2><span style="font-weight: 400"><font color="#800000">見出し構成</font>の考え方</span></h2> <p style="line-height: 150%; margin: 1 10; text-indent:15"> 見出しの細分（階層化）を避けることにより，利用者は1ないし2操作で必要なセクションにたどりつけます（言い換えれば「アクセスルート」が短くなります）．</p> <ul> <li> <p style="line-height: 150%; margin-top:0; margin-bottom:15"> <font color="#000080"> 必要以上の階層化は文書構成が複雑ととなるため印刷文書でも避けるべきですが， 50ページ以上の印刷物で提供されるマニュアルでは3段階（章-節-項）もしくはこれにさらに1段階が加わった階層的な見出し構成を用いる場合があります． </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; text-indent:15"> 見出しランクを2階層に抑えるには，節見出しの下位に並列な項見出しを置かず，「<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"> 2階層では，機能の構成あるいはさまざまなケース事例を体系的に表せないと思われるかもしれませんが，いわゆる「図解パソコン参考書」の多くは上記の手法を取り入れた2階層の構成が基本です．</font></p> </li> </ul> <p style="line-height: 150%; margin: 1 10; text-indent:15" align="center"> <img border="1" src="3009.jpg" vspace="10" width="432" height="324"></p> <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">検索ワードと検索結果が1対1（多くとも1対3件程度）に対応するほどの精度ならば，検索機能も有効かもしれません．しかし，いくつもの検索結果（場合によっては重複あるいは回答とならない結果を含む）から読者が選らばなければならないのではかえってわずらわしさにつながります．</font></li> <li> <p style="line-height: 150%; margin-top: 0; margin-bottom: 15"> <font color="#000080"> また，「検索ワードを入力」し「いくつかの検索結果から選択」し「別の画面に視線を移動」しまた「元の画面に戻る」必要があります．検索結果が思わしくなければ検索ワードを考え直さなければなりません．ときには，利用者が検索ワード自体を知らない可能性もあります．</font></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"> 前項で述べたように，セクション内（章‐節構成では節ランクに相当）では見出しを細分しないのが適当です．前項で述べた手法に加え「<font color="#800000">セクションの概要あるいは手順に先立つ条件・注意は見出しに続く導入段落の扱い</font>」とすると見出しを細分せずにすみます．</p> <ul> <li> <p style="line-height: 150%; margin-top: 0; margin-bottom: 15"> <font color="#000080"> 手順に先立つ条件・注意を導入段落にすれば，手順主体の明解な構成になります．手順の途中の注意事項も手順に組み込むか「手順番号を付けた確認指示」もしくは「手順の1項目分を使った注意指示」とすれば見落としがありません．</font></li> </ul> <p style="line-height: 150%; margin-top:0; margin-bottom:15" align="center"> <img border="1" src="3010.jpg" vspace="10" width="432" height="324"></p> <p style="line-height: 150%; margin: 1 10; text-indent:15"> 1セクションが複数ページで構成される場合，ページの関係性（セクションの最初-途中-最後）を明確にする必要があります．セクションの見出し（先頭ページ）を強調し，以降のページは見出しをヘッダ（余白への補足的な見出しの表記）扱いとするのが適当です．</p> <ul> <li> <p style="line-height: 150%; margin-top: 0; margin-bottom: 15"> <font color="#000080"> 手順の最後はあるいは「手順終了」と表記するか「太いけい線」で締めるのが適当です．</font></li> <li> <p style="line-height: 150%; margin-top: 0; margin-bottom: 15"> <font color="#000080"> また，「手順が終了した後に注意事項（あるいは参考事項，参照先）を入れる」あるいは「手順の後に参考事項を列挙して当該の項目と参照番号で関連付ける」と見落とされるおそれがあります．導入段落あるいは手順の一部に組み入れるのが適当です．</font></li> </ul> <HR> <p> <A HREF="t2c2s1-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>