情報システム技術論’02 ＃ 2
久野靖∗

2002.6.6

はじめに

12.2

□ 「Web では印刷用の文章の 50%以下に」□ 前回の感想…

• 計算機屋が作る Web はださい→もっとデザイン指向にしたい• 画面上で読む速度は印刷したものより 25%低下する• 複数ブラウザ対応は苦しい、CSS2 もフルサポートではない• 速度が 25%ダウンでも、さらに読みづらさも増す→• 自分の常識が常識でないことが分かった• 読み手はスクロールするのを嫌うから• 今まであまり気にしていなかったことが分かった• それだけかな…

(ホント?)(実験?)50%以下に• (高解像度になってもあまり良くならないかも…)□ 今回の内容…

□ 簡潔にするとしても個性は重要• コンテンツデザイン (第 2 章)

□ 裏付けを与えるのにリンクが使える→真実を伝える姿勢• 第 1 章〜第 2 章の内容に関するページの紹介、議論が大切• CSS を使ってみる□ 誇張やデマを並べても読み手に拒否される□ スペルチェック、校正ははとても重要

コンテンツデザイン

2

簡潔な文章

□ スペルチェック、校正はとても重要□ ユーザが目指すものは最終的にはコンテンツ• このため (と文体をチェックするため) にエディタを雇うことも有意義• デザインはコンテンツにうまく導く手段• しかし大学院生ならそういう間違いはないように書• じゃあ、よいコンテンツってどういうもの?

けるはず…

□ 面白い→アタリマエ。どうすれば面白い?

• でもエディタのスキルと院生のスキルは違うかも…

□ ターゲットとなる読み手を絞る→絞った対象にアピールしやすい

2.3□ ざっと見て面白いと思える→そうでなければ「よそへ行ってしまう」

斜め読み□ 斜め読みで済むようにするべし←多くの読み手がそうしている

2.1

ライティング手法• 長い段落を作らない• 見出しで適宜分ける□ つまりどんな文章がいいかということ。

• 箇条書きを使う□ 3 つのガイドライン→「簡潔」「斜め読み」「分割」□ p92 の 5 種類のサンプルをよく見てみること□ なぜ斜め読みするのか?
□ なぜ斜め読みするのか?

∗ 筑波大学大学院経営システム科学専攻1• 最初の画面で面白そうなリンクがあればまずそっち• 目が印刷物よりも疲れる

へ行く• 25%も遅くなるから• 「どんどん先へ進みたい」メディアだから←ユーザ □ ナビゲーションページがスクロールを必要とするのは主導 cf. TV
最低• 無数の競争相手→どれがベストか読み手は不安• 「どこへ行こうか」判断するのに見比べられない• 情報の洪水→ゆっくり読む時間を取れない□ 内容ページについてはもう少し緩くてよい (が、長過ぎ• ほかに?

ればやっぱり読んでもらえない)□ 斜め読みに適した文章とは?

□ ページ内リンクはやめよう□ 大見出し、中見出しを使う (「場合によっては」小見出し)• 読み手はリンクは「よそへジャンプするもの」と思っ□ 気取った見出しでなく内容の分かる見出している□ 箇条書きの活用• それを裏切るページ内リンクは最低□ 重要な言葉→太字などで目立たせる• 「戻る」で戻れないと困惑する• 自動スクロールして見せるといいかも?

2.4

分かりやすい言葉づかいページタイトル□ 結論から先に書こう←日本人は苦手とされている

2.6□ 1 つの段落にテーマは 1 つ□ <title>...</title>→ページタイトル→実は重要なコンテンツ• 読み手は段落の先頭の文章しか読まない←数語という節も…

• ブックマーク (しおり)(お気に入り?) 等に現われる→意味のあるものを• 速読法…?

• 長過ぎて読めないのでは意味がない□ たとえ話はよくない「浦島太郎が亀を助けて褒美をも• 40〜60 文字くらい可能 (そんなに長いのはありならったという故事があるように…(?)」本題をさっさとの?)言え!

□ ユーモアや皮肉も注意。
「××は大変すばらしいことに…」 □ 複数ページに同じタイトルをつけてはいけない
そうか、すばらしいのか!

□ 簡潔なキャッチフレースのようなものがよい• p97 のエラーメッセージがダメというのは相当つらい?

2.7
2.5

ページの分割見出し□ 印刷物 (新聞や雑誌) の見出しとは違う→どう違う?

□ 文章を減らす手段は「削る」ではなく「分けて 1 ページ□ 印刷物との違い…

あたりの文章を少なくする」• 内容と離れたところで使われることが多い→例:検索• 詳細はリンク先に掲載→そうすれば、印刷物より深エンジン

くできる• 本文と一緒でも、見出しだけしか見ない読者が多い• 単純に分割するのはダメ。テーマごとに分ける/詳細□ 従って、独立した文章になっているのがよいを分ける• 例: Subject: (主題?
ルはどうしてる?

□ 逆ピラミッド型 (結論を示す文章から書く)□ 1994〜1995 の調査「スクロールしたことがあるユーザ

件名?) が適切でないメー□ よい見出しの指針

は 10%」!

• コンテンツの短い概要とする• 現在はもうすこしマシだが…
2• 分かりやすい用語。ユーモアや独創はいらない• 誘い文句は不可。読者はそんなものを選んでくれない□ 見た目をひくが、使いすぎないこと• 冠詞は省略、最初の語を意味のあるものに

2.8

マルチメディア2.10□ 待ち時間 10 秒〜なら、形式とサイズを明記• 事前に内容を伝える (動画なら 2 画面くらいの静止画など)

可読性□ いくつかの基本ルール□ 画像は減らすべき、しかし画像は有効• 文字色と背景色のコントラストを強める。白地に黒が最強• サムネイルがリンク→選択すると大きい画像• 背景画像は単色か薄い色。でないと文字が読みづらくなる• サムネイルはトリミングと縮小を組み合わせるとよい• 大きい文字を使う。

アニメーション

2.11• 文字は固定する。動く/点滅/大きさ変化などは読みづらくなる□ 動くものはすごく注意を引く→用心して使うべき□ 左揃えが基本• 静止画像で伝えられるなら動画はいらない• 動くテキスト、<marquee>...</marquee>は評判最• 段落すべてを右揃え/中央揃えしないこと

低、「読まない」人が多い□ 小さい文字はセリフ (ひげ) 無し (つまりゴシック系) を□ では、どういう場合にならアニメーションがいいのか?

• 印刷物では解像度が高いのでセリフつきでも大丈夫□ 連続的な変化→状態の間の移り変わりを理解させる場合□ small cap とかは避ける

2.9□ 方向の変化→ページをめくる、上や下への連続移動、クロースアップやパンオンラインドキュメント (ヘルプ)□ 時間による変化→成長のようすなど□ ユーザインタフェースの理想→説明書 (ヘルプ) なしで□ 複合的→クリックするとメニューが出るようすなど使えること□ 表現を豊かに→「ただの箱」が「消しゴム」に• 久野はまた「場合による」と思うが…

□ 3 次元を見せる→ぐるぐる動いてみせれば 3 次元的に見• 少なくとも Web では読み手はすべて初心者だから上記に賛成える□ 注意を引く→注目点をそこだけ/一時的に動かす (ずっ□ イントラネット/エクストラネットは別と動かしていてはだめ)• 読み手が初心者でない、繰り返し使う→ヘルプがあってよい

2.12□ とにかく「人は説明書を読みたがらない」

ビデオ□ 品質や容量/長さに制限がある (最近はだいぶ違ってき• 「読むのはトラブルがあった時だけ」ている)• Web ではトラブルがあったらもう 2 度と来ない□ 用途…

□ オンラインドキュメントの指針• TV 番組や映画などの CM• 問題がある時に探す→探せるように• 講演者の個性 (しかし普通の人は俳優ではない…)• 豊富な事例を掲載する←ユーザの強い要望←だが…

• 動きを見せる (スポーツ)• 機能別でなく目的別に分類、操作方法を順に説明□ ナレーションのアクセシビリティに注意• 全体的な概念図はあるとよい• リンクは「異なる話題」の場合に使う• 話し言葉は書かれているものよりも理解しづらい• 説明は簡潔に、前置きは短く
3• 正確さが必要なら図面の方がいいかも□ ストリーミングで画質が悪いならダウンロード版も用意□ 再生しかできないなら 1 分が限度

□ 楽しむためのもの (ゲーム)• 30 分の講演を全部動画にしないように• テキストにおこす、エディタに編集してもらいクリッ

2.16

プ化

□ コンテンツこそ重要、それが主でありデザインは従□ 読み手にコントロールしているという感覚を持ってもら• ユーザのじゃまをしないように、目的地に速やかにつけるように

うには→• こまぎれにしてそれぞれを選べるようにする□ アテンションエコノミー• 従来のメディアでは「よそへ行く」コストが大きい

オーディオ

2.13

「コンテンツデザイン」まとめ(金、時間) →読み手をとどまらせてくれる力に□ 最大の利点→目とは別のチャネルが使えるようになる• Web では「よそへ行く」コストはまったくゼロ• だから「絶えず」「すぐに」利益を提供し続ける必要

• 音楽
• 効果音
• 発音を教える□ よい音があると画像がよくなったかのように感じる3

各自が選んだページについて発表

4

実践編• しかしジャマな場合もある→音は絶対出すなという□ やはりお話だけ、見物だけでは面白くないので、できる人も範囲でいろいろ実践して (いじって) 体験して行きたい• ここを選択すると音が出る、ということを明示したと思います。

上で□ とりあえず、今回はひな型になるページはすべて用意し2.14て差し上げています。これを「手直しして」みませう。

アクセシビリティ□ 演習方法:□ 標準の HTML →それなりのアクセシビリティを確保• 「cd」でホームディレクトリに行く□ 聞こえない人→ビデオに字幕、文章での説明• 「tar xvpf /u1a/kuno/work/ist02.tar」を実行□ 見えない人→読み上げできる説明文 (干渉に注意)• すると各自のディレクトリ WWW の下に「ist02」と□ 見えにくい人→大きい静止画を用意等いうディレクトリができ、ここにひな型のファイル(以下に説明するもの) がまとめて作られる

2.15• ブラウザは Mozilla を使うこと前提でやります

3 次元グラフィクス• 「http://w3in/〜ユーザ/ist02/sample01.html」□ 3 次元は 2 次元よりずっといいが…

等の URI で見られる• 画面は平ら→真の 3 次元ではない• 順次見て確認• 操作が難しい (マウスによるドラグ等で)• 演習内容によっては Emacs 等で開いて手直し→ブラウザの「reload」で再読み込みして変化を確認• 通常の操作と 3 次元の操作を併用させるのは負担• 解像度が問題となりやすい

4.1□ 結局、必要となる場合にのみ使う方がよい→どういうページ内リンクを何とかする□ ページ内リンクのあるページの例

場合?
□ 立体的なモデル (患者の体内、機械装置、分子構造、建築、…)

4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head><title>Momo Taro</title><style type="text/css">
body { color: rgb(0,0,0);
background-color: rgb(255,255,255); }</style></head><body><h1>桃太郎</h1><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head><title>intra-page link</title></head><body><h1 id="top">ページ内リンク</h1><p><a href="#bottom">最後へ行く</a></p><p>これは内容です</p><p>これは内容です</p>...
<p>これは内容です</p><p id="bottom">これは内容です</p><p><a href="#top">先頭へ行く</a></p></body></html><p>昔むかし、おじいさんとおばあさんが住んでいました。</p></body></html>• rgb(0,0,0) → R/G/B ともなし→真っ黒□ 確かに唐突にジャンプする• rgb(255,255,255) → R/G/B とも最大→真っ白□ JavaScript を使って徐々にスクロールさせる• 演習: 配色を変更してみる、どんなのが見やすいか考える<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head><title>intra-page link</title><script type="text/javascript">
var step, last;
function scrl(n) {step = n; last = window.pageYOffset;
window.scrollBy(0, step); setTimeout(cont, 50);}
function cont() {if(last == window.pageYOffset) return;window.scrollBy(0, step); setTimeout(cont, 50);}</script></head><body><h1 id="top">ページ内リンク</h1><p><a href="javascript: scrl(70)">最後へ行
く</a></p><p>これは内容です</p><p>これは内容です</p>...
<p>これは内容です</p><p id="bottom">これは内容です</p><p><a href="javascript: scrl(-70)">先 頭 へ 行
く</a></p></body></html>□ 演習:□ 背景画像だと…
□ 次のように直しただけ
body { color: rgb(0,0,0);
background-image: url(sample04.gif) }□ 演習:

xpaint でこのファイルを読み込み、もっとまともなものに変更してみる。

4.3□ 字下げ、マージン、飾り、揃えなど<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head><title>Momo Taro</title><style type="text/css">
h1.s1 { text-decoration: underline; text-align: center }p.s2 { text-indent: 1ex; margin-left: 2ex;
margin-right: 2ex }.important { text-decoration: blink }</style></head><h1 class="s1">桃太郎</h1>

ページの内容 (特に長さ) をいじって見て効果<p class="s2">むかしむかし、あるところにおじいさんとおばあさんが住んでいました。おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に行きました。</p>

を確認
□ 演習:

スクロールする速度を調整してみてどれくらい<p class="s2">おばあさんが洗濯をしていると、<spanclass="important">川の上流から大きな桃が「どんぶらこっこ、どんぶらこっこ」と流れて来ました。</span></p><body></body></html>がいいか検討4.2

テキストの可読性

背景色と文字色□ 背景色と文字色を変えてみる5• 点滅はいかにイヤなものか…
□ 演習:

点滅個所をもっと別な方法で強調してみる (点滅を狭くしてもよい)□ 演習:

もっと読みやすいスタイルに調整できるかやってみる

4.4

リンクの使い方□ 色づかい、前後の文章、…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head><title>list of pages</title><style type="text/css">
a:link { color: maroon }a:visited { color: black }a:hover { color: green }a:active { color: white }</style></head><body><h1>サンプルに選んだページ</h1><h3>柳井さん</h3><p><a href="http://www.amazon.co.jp/">
http://www.amazon.co.jp/</a></p>(中略)</body></html>□ 演習:

リンクの各色を変更してみる□ 演習:

文章をきちんと入れた説明にしてみる (自分のところの担当だけでよい)

5

次回までの課題□ 3 章「サイトザイン」読んでくる□ 最終的に「簡単なサイト」(10 ページ程度) を作成していただくので、自分が作ってみたいと思うテーマで材料集めをしてください。
□ さらに、そのサイトのデザインを「絵コンテで」用意してくる。

• 10 ページだったら 10 ページぶんのスケッチ。同一構成のページが複数あるならそれはまとめてよい。しかしすべて同一構成ということはこの科目のここまでの内容を理解していればあり得ないはず。

• 色鉛筆で彩色するなどしてもいいと思います。

6