ハイパーメディアのためのレトリック
プロフェッショナルなレベルのテキストにするには
プロフェッショナルなレベルのグラフィックにするには
配色
チャート（グラフ）の色の編集のためのガイドライン
画面の演出効果
Human Interface Design Principle
日本視聴覚教育協会/国立教育会館
目次
ハイパーメディアのためのレトリック
プロフェッショナルなレベルのテキストにするには
プロフェッショナルなレベルのグラフィックにするには
配色
チャート（グラフ）の色の編集のためのガイドライン
画面の演出効果
Human Interface Design Principle
～ 作成と評価のための一般的な手引 ～
1. ハイパーメディアにおけるリンクは、利用者や学習者がリンクされた情報間の有意味で重要な関連性を予測し、また、利用者等が期待感を持つものでなければならない。
2. ハイパーメディアにおける情報のリンクは、利用者等が、物事を関連づけて考えるように刺激し、また、そのような思考を促進することに重点がおかれなければならない。
3. ハイパーメディアのシステムは、利用者等がドキュメント間の意味のある関連を予測するものでなければならない。しかし、利用者等の目には、これらのドキュメントは予測に反して、とりわけ、支離滅裂で無意味なように映るはずである。
4. ハイパーメディア教材の設計者は、利用者等が考え、かつ探索できるような刺激を与えるよう、工夫しなければならない。
5. ハイパーメディアの設計者は、利用者等が教材を簡単に、そして楽しくナビゲートすることができるように、画面構成等１）２）３）４）の工夫をしなければならない。
6. ナビゲーションの支援は、利用者等が、(a)無構造な情報の海の中で、自分の現在の状態の位置を確認すること、(b)現在の状態や位置と、他の情報との関連について検討をつけ、今後どのような方向性をもって進むべきかを考えること、(c)今後の方向性も見失い、もう一度、初期の段階からナビゲートすることを望むときには出発点に戻れること、そして、(d)直接的にリンクされていない、つまり利用者等にとっては、さまざまな構造や関連性が直接に見えない情報の中を探索し、その中で、やがて自分自身で関連性を見つけることができるように、工夫されなければならない。
そのため、ドキュメントの全体像を明示する方法としては、次の６つがある：
1)概念地図、2)進路を示唆するフローチャート、3)タイムライン、4)自然物、5)アウトライン、6)それ自身の全体像を記述したテキスト
7. 設計者は、ドキュメント上で迷子になってしまった利用者等を支援するために、容易にアクセスできるような、情報の構造を反映した全体図の使用を考えるべきである。
8. リンクマーカーを、付加されるテキストや映像に関わりなく位置づけてはならない。
9. リンクを作ったり、リンクの存在を示すリンクマーカーを位置づける時には、すべてのリンクは双方向でなければならない。
10. 単語や句へのリンクは避けるべきである。つまり、こうしたリンクは適切な到達点へ導くことはできるが、利用者等にそのリンクが出発点へも導かれることを示唆するものではないからである。
11. リンクマーカーは、そのリンクによってどのような情報へと進むことができるのかという示唆を利用者等に与えるために、予想されるリンク先の情報の特質を示すテキストに極めて接近させて配置する必要がある。
12. ドキュメントを作成する際に、利用者等に課題認識を持たせ、次のリンク先を決定するためのきっかけを分かりやすい形で与えるため、表現方法に工夫を凝らしたり、時には、利用者に対して問いを投げかけてみるなどの支援策を組み込むとよい。
13. 場合によっては、直接注意を喚起することによって、リンク先についての特別な情報を与えるようにすべきである。
14. リンクされたグラフィックの情報は、利用者が出発点と到達点の間の関係を成立させることを可能にするように、付加されたテキストとともに表示されなければならない。
15. テキスト全体の導入としては、最初の１、２文だけではなく、むしろ、視覚的な情報が役に立つ。
16. 付加的な情報を伴うテキストには、利用者等が手に入れることが望ましいと設計者が望む、すべての適切な情報を明示しなければならない。つまり、関連の存在を十分に強調すべきである。
その理由を以下に示す。
17. テキストは、情報を与えるだけではなく、リンクは重要な関連を具体的に表現していることを利用者等に示し安心させるとともに、いくつかのヒントを与えることになる。しかし、利用者等に対して情報間の関連をどのように、構造化することができるのかということについては何等の示唆も与えてはならない。
18. ハイパーメディアのドキュメントを制作するとき、ハイパーメディアのリンク機能の最大の長所を引き出すために、テキストの構成単位を、簡潔な一節と考えるべきである。
19. 書物作成の技術にしたがって制作されたドキュメントをハイパーメディアの提示に適応するためには、原作の構成を尊重すべきである。しかし、原書のテキストが段落に分かれているときには、これらをテキストのブロックの基幹に据えるべきである。つまり、ハイパーメディアの仕様は、原作の構成の意図を損なわないように、前後の段落との間のリンクを含まなければならない。
(Ref: Landow, George P., 1990, The Rhetoric of Hypermedia: Some Rules for
Authors, The MIT Press.)
①テキストは、簡潔に。要点を明確にすることを心がける。テキストを読みやすくするには、空白や空間を上手に利用する。読みやすいように、見出しの行間を増やすなどの工夫をする。画面で６０％以上のテキストの使用は避けるべきである。
②１枚の画面に対し、３つから５つの見出しを使い、見出しを１行のテキストに収める。長い情報は似通ったアイディアをグループ化して、複数の画面や見出しに分ける。
③能動的で、意味の分かりやすい動詞を使い、要点を強調しテキストを短くする。例えば、“あなたの人生を変えることのできる３つの方法があります”に対して、“３つの方法であなたの人生を変える”とする。
④メッセージは短くし、個性を持たせる。
⑤グラフィックを使って、要点をより効果的に表示する。
ただし、画面に過度のテキストを挿入したり、必要以上のグラフィック、図形、図表、チャート、クリップアートなどを配置しないようにすべきである。
⑥校正は常に他の人に依頼する。
⑦書式の使い方に注意する。
テキストを強調すると読みづらくなるため、重要な情報に、色、太字、斜体などを適用する。専門用語や雑誌標題などは斜体を指定し、強調には太字を指定する。下線は通常付けない。
なお、ＭＳ明朝は通常のテキストに、ＭＳゴシックは見出しテキストやタイトルなどに向いている。
⑧左寄せのテキストにする。
左の余白に合わせ、左端を揃えたテキストの方が、両端揃えや、中央揃えされたテキストより読みやすい。
人は、視覚的なものから５０％、文脈から４０％、テキストから１０％の情報を、それぞれ捕らえるといわれている。
①単純で、インパクトの強いグラフィックを使う。視覚的なバランスを保つため、グラフィックの構成要素は、画面の端との関連を考慮しながら、中央（利用者の注目を集めたいところ）に配置する。
②画面を補う程度のグラフィックを使う。一般に、広いスペースの小さなオブジェクトは、狭いスペースの大きなオブジェクトよりも注目を引く。
③画面の背景は、グラフィックが引き立つようにシンプルなデザインがよい。
④背景には、（常に）グラデーション（２つ以上の色を少しずつ混ぜ合わせて段階的に色調を変えること）、模様、純色のいずれか一つが適用されることが望ましい。２つを同時に適用することは避ける。
なお、グラデーションにより、奥行きのある、立体的な印象が生まれる。
配色はプレゼンテーションにおける重要な要素の一つ。選択した配色は、メッセージを読みやすくしたり、メッセージに奥行きを与えたりする。
一般的に視界の中心に青があると認識しにくいため、青いテキストはとても見づらくなる。青は背景の色のため、と考えたほうがよい。
色は感情に訴える。
一般的に知られる色の意味は以下のようになっている。
一般的に知られる色の意味
色... 意味...
白 純潔、単純、正直
灰色 上品、モダン、エレガント
黒 強烈、ダイナミック、勇敢
赤 祭、力強い、精力的
橙 幻惑、愉快、豊富
黄 若さ、不安定、柑橘類
茶色 素朴、保守的、現実的
緑 自然、生き生きした、華麗
青 新鮮、透明、清潔
紫 王位、豪華、現代
パステル 若さ、柔軟、敏感
チャート 配色のガイドライン
面 濃い色をグラフの底辺部（X軸に沿って）に割り当て、上に移るにしたがって薄い色にする。
横棒 濃い色を底辺部に割り当て、上に移るにしたがって薄い色にす る。積み重ね棒グラフでは、濃い色を左端側に割り当て、右に
移るにしたがって薄い色にする。
縦棒 濃い色を一番左の列に割り当て、右に移るにしたがって薄い色 にする。積み重ね縦棒グラフでは、濃い色を底辺部に割り当て、
上に移るにしたがって薄い色にする。
円 円グラフは時計であると仮定して、濃い色を１２時に割り当て、 右まわりに次第に薄い色にする。
ただし、データの大きな領域が明るい色の場合、違った配色をする。また、チャートの立体化は円グラフのみ。
画面の移行時に、単に次の画面を表示するだけではなく、いったん画面を覆い隠してから次の画面を見せるようにする「ブラインド」とよばれる演出効果、「フェードアウト」「フェードイン」などの演出効果がある。
Human Interface Design Principles
(1)具体的なメタファーを用いること
日常生活にある具体的なメタファーを用い、利用者自身の経験から理解できるようにする。
(2)利用者自身がコントロールしているという実感を持たせること
利用者が自主的に操作しているのだという感覚を与える必要がある。利用者の操作に対しても、素早いレスポンスを返せるようにすべきである。
(3)目で見て選ぶこと
事前にマニュアルを読んだりして、できること、できないことを知っていなければ使えないようなものであってはならない。画面上ですべての操作、選択ができるようにデザインする必要がある。
(4)一貫性を持たせること
作品中の１つのまとまり（「スタック」ということがある）の中で、カードによってボタンの位置が違ったり、同じデザインのボタンで違った機能を持たせたりすると、利用者は混乱する。つまり、１つのスタックの中では、操作性は一貫していなければならない。
(5)WYSIWYG（画面で見た通り）を十分配慮すること
意味不明のコマンドやボタンを作らないこと。ボタンの意味と操作した結果は、一致していなければならない。
(6)利用者に主導権を渡すこと
できるだけ利用者がやりたいようにやらせる環境を設けるべきである。そのためには、利用者が間違った時の対応を用意しておく必要がある。
(7)過ちは許すこと
「人間は間違いをするものだ」という視点に立って制作することが重要である。つまり、画面上で何を選択するのかを明確にし、適切なメッセージを表示していれば、大きな、問題は発生しない。利用者がスタックの中で混乱したり、トラブルが多いとすれば設計そのものに問題があると考えるべきである。
(8)安定感を与えること
デザインのスタイルやユーザーインターフェイスに一貫性があると、スタックには安定感があることになり、利用者は安心して使えることになる。
(9)美観を大切にすること
ビジュアルを大切にすることである。繁雑なゴチャゴチャした画面では、利用者の興味と関心が薄れてしまったり、離れてしまうことになるからである。
To
Home of Educational Technology Research Laboratory (Japanese)
To
Home of Educational Technology Research Laboratory (English)