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

<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="line-height: 150%; text-indent:15; margin-left:10; margin-right:10; margin-top:10; margin-bottom:1"> 前セクションで述べた要件と手法を取り入れた「<font color="#800000">見ると読むが両立した動画マニュアル</font>（ビデオを取り入れたHTML形式を想定）」のモデルを示します．また，発展<span style="font-weight: 400">形として<font color="#800000">“マニュアルならでは”のインタラクティビティを備えてた「メタ電子マニュアル」</font>を提唱します．電子化によって，マニュアルは「理解し，操作方法を知る」ばかりでなく，ユーザに応じた使用条件さらには機器・システムの操作そのものを取り込めると考えます．</span></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">タブレット端末の画面サイズに合わせた（もしくは合わせうるサイズ）HTMLファイル</font>です．これに「<font color="#800000">セクションの見出し</font>」，「<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> <li> <p style="line-height: 150%; margin-top:0; margin-bottom:15"> <font color="#000080"> 見出し構成の考え方は，「文書スタイルの電子版図解マニュアル」と同様に「不要に見出しを細分せず見出しランクを2階層（章－節）に抑える」のが適当です．</font></p> </li> </ul> <hr color="#000000" width="35%" size="1" align="left"> <h4 style="line-height: 150%; margin-top:0; margin-bottom:15"> <font color="#008080">構成要素1</font>：セクションの<font color="#800000">見出し</font></h4> <p style="line-height: 150%; margin: 1 10; text-indent:15"> 動画マニュアルでも見出しで<font color="#800000">主題（この項目で何を理解するのか／達成するのか）</font>を明確に示す必要があります．ユーザにとって「何の手順であるのか」あるいは「誤って手順を選んでいないか」の確認になります．また，ページ送りでセクションを探す際にも大きく明確に表示された見出しが有効です．</p> <hr color="#000000" width="35%" size="1" align="left"> <h4 style="line-height: 150%; margin-top:0; margin-bottom:15"> <font color="#008080">構成要素2：</font>工程の<font color="#800000">告知</font></h4> <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"> 「閲覧中の工程と他の工程を明暗で表示仕分ける」あるいは「各工程に要する時間の目安を表示する」，「最初の閲覧時は確認事項をスキップして手順に進めない」などの工夫も有効です．</font></p> </li> </ul> <p style="line-height: 150%; margin-top:0; margin-bottom:15" align="center"> <img border="1" src="3015.jpg" vspace="10" width="432" height="324"></p> <hr color="#000000" width="35%" size="1" align="left"> <h4 style="line-height: 150%; margin-top:0; margin-bottom:15"> <font color="#008080">構成要素3：</font><font color="#800000">付帯的重要事項</font>を伴ったビデオ（もしくは図解）</h4> <p style="line-height: 150%; margin: 1 10; text-indent:15"> 付帯的重要事項（“読む”による理解と確認が必要な事項）は，その“かかり先（何に付帯するのか）”により「<font color="#800000">セクション全体および作業に先立つ付帯的重要事項</font>」，「<font color="#800000">1工程に伴う付帯的重要事項</font>」および「<font color="#800000">1操作に伴う付帯的重要事項</font>」に区分して扱うのが適当です．</p> <ul> <li> <p style="line-height: 150%; margin-top:0; margin-bottom:15"> <font color="#000080"> 「セクション全体および作業に先立つ付帯的重要事項」は，1工程と同じ位置付けで扱います．作業に応じ，その有効性・必要性あるいは作業に先立つ知識・条件などを図解で示します．</font></p> </li> </ul> <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"> 「1操作に伴う付帯的重要事項」は動画中のキャプション扱いとし「対象（目的語-を）と操作（動詞：-する）」に加え，必要に応じ「条件（補語：いつ／どこに／どのように／どこから／どこまで／何で）」および「結果（-される）」を簡潔な文で示します．</font></p> </li> </ul> <hr> <h2 style="line-height: 150%; margin-top: 0; margin-bottom: 0"><span style="font-weight: 400">動画マニュアルの<font color="#800000">発展形<br> </font>－“<font color="#800000">マニュアルならでは</font>”<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>」あるいは「マニュアルを読みつつ実機を操作するのはなく，<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"> 上記で述べた「<font color="#800000">作業構成を見通し，作業ステップを選ぶ</font>」表示部と「<font color="#800000">動画と付帯的重要事項を見る・読む</font>」表示部に加え，目的に応じて多様に表示形態を変えられる表示部（“<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"> 16：9の画面を用いれば，上記のページレイアウトの右側に「第三の表示部（補助的な表示部）」を設けられます．</font></p> </li> </ul> <hr color="#000000" width="35%" size="1" align="left"> <h4 style="line-height: 150%; margin-top:0; margin-bottom:15"> <font color="#008080">応用形1：</font><font color="#800000">使用条件あるいは仕様に応じたマニュアル</font>の自動編集</h4> <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> <hr color="#000000" width="35%" size="1" align="left"> <h4 style="line-height: 150%; margin-top:0; margin-bottom:15"> <font color="#008080">応用形2：</font>操作の<font color="#800000">シミュレーション</font></h4> <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">たとえば，「動画と付帯的重要事項を見る・読む」表示部の操作に沿って，第三の表示部にその結果が表示される機能が考えられます．「操作盤の操作に伴う動作部の動き」あるいは「操作ボタンの操作に伴うパネルの表示」などをシミュレーションできます．</font></p> </li> </ul> <p style="line-height: 150%; margin-top:0; margin-bottom:15" align="center"> <img border="1" src="3016.jpg" vspace="10" width="432" height="324"></p> <hr color="#000000" width="35%" size="1" align="left"> <h4 style="line-height: 150%; margin-top:0; margin-bottom:15"> <font color="#008080">応用形3：</font>「<font color="#800000">プログラムの開発</font>」あるいは「<font color="#800000">実機の操作</font>」</h4> <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> <HR> <p style="line-height: 150%; margin-top: 0; margin-bottom: 15"> <A HREF="t2-epr-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>