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

<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">縦長使い</font>」と「<font color="#800000">横長使い</font>」のいずれを基本とするか選ぶ必要があります．また，セクションが1画面では表示しきれない場合に「<font color="#800000">スクロール</font>」しながら読むのか製本された印刷文書と同様に「<font color="#800000">ページ送り</font>」しながら読むのかも読みやすさの重要な要素であり，ファイル形式の選び方にもかかわります．</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%; text-indent: 15; margin: 1 10"> 図解を取り入れやすいという点で「<font color="#800000">横長使い</font>」を基本としたページレイアウトを薦めます．10インチ画面の横使いは，実務文書で一般的なA4判縦使い判型を上下に二つ折した場合に相当します．行幅を広くとれレイアウトの自由度が高くなります．</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"> もちろん「縦長使い」も選択肢の一つです．15.6インチ画面のノートPCの左右いずれか半分でほぼ表示できます．ただし，10インチ画面（A5判相当）の「縦長使い」では左右の有効幅が125mm程度となりレイアウトに制約（行の折り返し，表幅など）を伴いやすくなります．</font></p> </li> </ul> <p style="line-height: 150%; margin-top:0; margin-bottom:15" align="center"> <img border="1" src="3005.jpg" vspace="10" width="432" height="324"></p> <p style="margin:1 10; line-height: 150%; text-indent:15"> 「リフロー（画面サイズ・縦横比に応じた文字列，オブジェクトの再配置）が可能なHTMLファイルあるいは電子書籍用のファイル形式を使えばよいではないか」とのご意見もあると思います．しかし，リフローによって執筆者が意図しない画面表示になりうるおそれが生じます（例：操作指示と注意指示が同じ画面に表示されない）．</p> <ul> <li> <p style="line-height: 150%; margin-top:0; margin-bottom:15"> <font color="#000080"> 「ワンソースマルチユース（前述）」および「リフロー」は電子文書の特徴的な機能ですが，機能は「作成しようとする文書の条件」にあってこそ有効です．「画面サイズを変えられる」機能も「変えたことによって段落と図を対比して見れない」あるいは「図も小さくなる（見誤りやすくなる）」では意味がありません．これらの機能を否定するつもりはありませんが，大切なのは「画面に必要かつ十分な情報を見やすく表せるか」です．</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%; text-indent: 15; margin: 1 10"> マニュアルでは，「<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"> スクロール操作をすべからく否定するつもりはありません．スクロールは本来「1行で完結する項目」が続く場合に適しています．電子新聞（Web版の新聞）のトップページから項目を探す際などには有効ですが，数行にわたる段落をスクロール操作を続けて読むのは負担となりかねません．</font></p> </li> <li> <p style="line-height: 150%; margin-top:0; margin-bottom:15"> <font color="#000080"> かく言う当サイトもスクロール操作によって読んでいただくことを前提にしています．ただし，19インチ程度の画面で読んだ際に「1見出しに対応する項目を表示域相当に収まる長さ」となるように構成しています．また，1セクションは2項目程度を基本にしています．</font></p> </li> </ul> <p style="line-height: 150%; margin: 1 10; text-indent:15" align="center"> <img border="1" src="3006.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"> HTML文書では1セクションに1ファイルを当てるのが一般的です．セクションが長くなる場合にはスクロール（上から下へ）操作をしながら読む必要があります．スクロールの際に読者は視野にとらえるべき対象を“目で追う”必要があります．</font>項目を探す程度にはスクロールもさして負担になりませんが，段落の先をスクロールで送って読もうとすると行の動きに目が追いつかない場合があります．<font color="#000080">この負担を避けるために「不要に長いHTML文書を作らない」あるいは「長くなる場合はファイルを分割する」のが一般的です．</font></p> </li> <li> <p style="line-height: 150%; margin-top:0; margin-bottom:15"> <font color="#000080">対して，PDF文書は「ページ（単ページあるいは複数ページ）」で構成される1ファイルです．印刷文書あるいは電子書籍用のファイル形式と同様に「ページを視野にとらえ，ページを読み終えたらページを送る（横書きでは右から左へ）」のが基本です．ただし，1画面に1ページが収まらない場合は多少のスクロール操作を伴います．</font></p> </li> <li> <p style="line-height: 150%; margin-top:0; margin-bottom:15"> <font color="#000080"> HTML文書もPDF文書も「ページアップ」ボタンもしくは「ページダウン」ボタンを使って定量を送り方法もありますが，ページが段落あるいは図の途中から始まることが多くけして読みやすくありません．</font></p> </li> </ul> <p style="line-height: 150%; margin: 1 10; text-indent:15"> 総じて，読む側にとってもっとも負担が少ないのは，「<font color="#800000">ページの大きさが固定され，かつ拡大・縮小することなくページ全体が視野に入る</font>」ことであり「<font color="#800000">当該のページ末で段落が終わり，ページを送ると次の段落（あるいは見出し）に続く</font>」スタイル，すなわち「<font color="#800000">固定ページ型</font>」の文書スタイルと言えます</p> <HR> <p> <A HREF="t2c1s1-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>