ユニバーサル・ウェブ
誰もが使いやすい，標準準拠のウェブを簡単に構築する方法

はじめに

このページでは，東京女子大学の学生への教材の形を借りて，誰もが使いやすい，ウェブの標準仕様に準拠したウェブサイトを，できるだけ簡単に構築する方法を解説します．具体的には，以下4つのポイントを押さえたウェブサイトを構築する方法を解説しようと目論んでいます．

ウェブの標準仕様：

コンテンツのアーキテクチャを検討し，コンテンツのデータ構造をXHTMLでマークアップし，コンテンツのプレゼンテーション（見せ方）をCSSで指定する．さらに，インターラクション（ユーザーが利用する際のページの振る舞い）をJavaScriptで提供する．

開発プロセス：

数ページ以上で構成されるウェブサイトを構築しようと思ったら，行き当たりばったりでは駄目です．企画，設計，制作・開発，検証，保守・運用という各段階をきちんと検討する必要があります．XHTMLページを作る前に情報を収集してそのアーキテクチャを検討することによって，その情報をどのようなページに分類し，どのようにXHTMLでマークアップすればよいかわかります．ポンチ絵でデザインして検討した上でCSSを使ってプレゼンテーション（見せ方）を考えることで，サイト全体の統一感が生まれます．制作したページを評価ツールでチェックすることで，文法の間違いを始めとするエラーをつぶすことができます．

ユーザビリティ：

設計段階がしっかりしていれば，利用者のニーズを反映できます．利用者のナビゲーションを考えて制作すれば，さらに使いやすくなるでしょう．このようにして，ユーザビリティ（使い勝手）がよく，使って楽しいサイトを構築できるようになります．また，ここで述べた3つのポイントを押さえることで，高齢者や障害者などの多様な利用者や，モバイル利用などの多様な利用環境においても使いやすくなります．

簡単：

XHTMLやCSSの詳しい知識をウェブ作成者が持っていなくても，賢いオーサリングツールが補助してくれる．（ただし，後述するように，初心者レベルを超えるためには，基本的なことを色々知っておく必要があります．それについても，この教材で説明します．）また，ナビゲーション用のメニュー，目次，レイアウト（ヘッダー，メインコンテンツ，左右ペイン，フッターなどの配置）も，典型的な(X)HTML及びCSSのコードやJavaScriptのライブラリを用いることで，専門的な知識がなくても使えるようにしたいと思います．

ユニバーサル・ウェブ

インターネットの普及とウェブの力

IT時代といわれる今日，コンピュータやインターネットなどの情報通信技術がますます我々の生活に浸透してきています．総務省の「平成16年 通信利用動向調査」によると，平成16年末には，世帯の8割がインターネットを利用し，利用者数は8千万人にのぼっています．

ウェブ (World Wide Web)は，CERN（欧州原子核研究機構）の研究者Tim Berners-Leeが考え出した仕組みです．CERNは国際的な共同研究施設なので，世界中から研究者がやってきます．しかし彼らは実験が終わるとそれぞれの所属組織に帰ってしまいます．というわけでCERNには，世界中の国からやってくる様々な研究者が作ったデータがあちこちに散在しているものの，それを再利用することは難しい状態でした．そこでインターネット上に散在しているデータを再利用する仕組みとしてウェブが作られました．ウェブではハイパーリンクという仕組みを使って他のデータを指し示すことができます．また文字データのみならず，画像や音などの様々な形式のデータをウェブブラウザで表示できるようになっていました．

ウェブにある情報（文章，画像，動画など）は電子データの形でサーバに置かれており，ネットワークにつながった世界中のコンピュータでその情報を利用できます．ウェブにある情報を利用するのは人間だけではなく，コンピュータが利用することもあります．皆さんがよく使うGoogleなどの検索エンジンは，検索プログラムがウェブ上にあるデータを検索して，人間に結果を教えてくれます．ウェブは，電子メールと並んで多いインターネットの利用形態です．ウェブを利用して新聞や天気予報や地図や電車の乗り換え情報を見たり，オンラインショッピングをしたりすることもできます．今や電子メールでさえ，ウェブで利用することもできるようになっています．ブログ，SNS (Social Network Service)，Ajaxなど，Web 2.0時代を迎え，ウェブは，ますます頻繁に使われるインターネット・アプリケーションになっていくでしょう．

ウェブはサイバー世界とも言われます．サイバー世界では，利用者に合わせて情報を自由に変身させることができます．皆さんが使っているウェブブラウザで「Ctrl」キーと「＋」キーを同時に押してみてください．文字が大きくなりませんか？「Ctrl」＋「－」を押すとどうなりますか？ このとき，画像も文字と同じように拡大・縮小するブラウザもあります．スクリーンリーダと呼ばれる読み上げソフトを使えば，ウェブページにあるデータを合成音声で読み上げさせることもできます．その際，リンクは女性の声で読んだり，見出しの間をスキップしたり，画像の代わりにその説明を読んだりすることもできます．このようにウェブ上のデータは，利用者に応じて変幻自在に変身できるのです．

今度は，ウェブブラウザのウィンドウ幅を変えてみてください．ウェブサイトによっては，ウィンドウ幅に応じてコンテンツの幅が狭くなったり広くなったりする物があります．でも，ウィンドウを広くしてもコンテンツ自体の幅は広がらないサイトや，ウィンドウを狭くしてもコンテンツの幅が変わらないので横にスクロールしないと使えなくなるサイトもあると思います．ウィンドウ幅に応じてコンテンツ幅が変わるサイトと変わらないサイトでは何が違うのでしょうか？ 皆さんはどちらの方が使いやすいですか？ 携帯やPDAではどちらが使いやすいと思いますか？ この授業で学ぶことをきちんと考慮すれば，ウィンドウ幅に応じてコンテンツ幅が変化するサイトを作ることもできるようになりますよ．

日本政府は，2005年2月に「IT政策パッケージ2005」として，ITの利用・活用をいっそう促進し，ITがもたらす問題点を克服することをあげています．IT政策パッケージには，電子政府や電子自治体の推進が取り上げられているので，今後，行政情報がインターネットで提供されるだけでなく，電子申請などのサービスがオンラインで行われることが見込まれます．そして，電子政府のこうしたサービスはウェブで行われるでしょう．行政情報はウェブで提供され，電子申請もウェブページから利用することになると思われます．

ユニバーサル・ウェブの重要性

新聞などで盛んに報道されているように，日本は前例のない高齢化社会に突入しつつあり，2015年には4人に1人以上が高齢者(65歳以上)になると予想されています．高齢になると，認知能力や身体能力が衰えてきます．また，視覚障害などの身体障害を生じる割合も増えます．このような社会で電子政府を推進するためには，高齢者を含む誰もが簡単にウェブを使える（ユニバーサルなウェブ利用ができる）ようにしておく必要があります．

ウェブの便宜を受けるのは健常者だけではありません．障害者のほうが，ウェブをはじめとするICT技術による貢献を受けているかもしれません．ウェブを使えれば，外出できなくても最新ニュースを読めますし，買い物もできます．電子メールで友人と手紙をやりとりすることもできます．逆に，画面が見えないなどの理由でウェブを利用することができないなら，そうした利用者はウェブの利便性を受けることができず，電子政府のサービスからも取り残されてしまいます．

私がこのウェブページ「簡単ユニバーサル・ウェブ」を書いたのは，高齢者や障害者を含む，誰もが簡単に利用できるわかりやすい（別の表現をすれば利用者に優しい，あるいはユーザビリティが高い，さらにアクセシビリティにも配慮している）ウェブサイトを構築する方法を，ウェブの初心者にもわかるように示したかったからです．しかも，ウェブに関する知識をできるだけ要求せずに，ウェブの標準に準拠したユニバーサルなウェブサイトを簡単に作る方法を示したいと思っています．（ユーザビリティとは使いやすさのことです．アクセシビリティとは，障害のあるなしなどの個人の状態に関わらず，誰でもが利用できるようにすることです．）

使いにくいWebの例

まだ何も学んでいない段階ですが，下記課題をやってみてください．この授業の後半で，もう一度同じ課題に取り組むと，自分の知識や理解が深まっていることが分かると思います．

課題：使いやすいWebと使いにくいWebを探す

皆さんが普段使うサイトで，「使いにくい」サイトはないですか？ 何が原因で使いにくいのでしょう？ 使いやすいサイトと使いにくいサイトをいくつか取り上げて、その理由を考えてみてください．本ページの「ウェブのユーザビリティ」を読んだり，「標準 ウェブユーザビリティ辞典」を参考にしたりすることをお薦めします．

使いやすいと思うサイトと使いにくいと思うサイトに対して皆さんが気づいた点を，「ISO 9241-151 ウェブのユーザビリティ」と比較してみてください．ほぼ一致していることに気づくと思います．最終課題でサイトを構築するとき，何に気をつければよいのか，これでわかりましたよね．（気づいていてもそれを実現するのは簡単ではないけれどね．）

デモ：視覚障害者のWeb利用

全盲の視覚障害者のWeb利用のデモとして，「NVDA（NonVisual Desktop Access）日本語版」というスクリーンリーダを使ってFirefoxというブラウザを音声で利用してみます．このデモでは，見た目は同じでも音声でも使えるサイトと使いにくいサイト，あるいは全く使えないサイトがあることをお見せします．

このデモで気付いて欲しいことを，「音声によるウェブ利用の特徴」にまとめました．

今日，デモしたサイトでは，見た目は似ているのに，音声表示で聞くと，ユーザビリティやアクセシビリティが全く違うサイトがあることに気付いたと思います．また，アクセシビリティに配慮したページは，ユーザビリティも高いことが多いです．Web標準に準拠し，少し配慮するだけで，ユーザビリティもアクセシビリティも高いサイトを制作できます．

Web標準，(X)HTML，CSS

ここでは，誰もが使いやすいウェブを作る際に重要なキーワードとなる「Web標準」，そしてそれに付随する技術である(X)HTMLとCSS2について簡単に説明します．

ウェブ標準

ウェブ標準とは，下記のようにサイトを作成（コーディング）することを言います．

• コンテンツの構造を(X)HTMLでマークアップし，そのデータの意味(semantics)をh1やtableなどのタグで示す．
• コンテンツの表現（どのように表示するか）はCSSで指定する．
• （コンテンツのインターラクションはJavaScriptで与える．）

今の時代のウェブサイトは，このウェブ標準に則って作成することが求められているし，クールな方法です．しかし，データ構造を(X)HTMLでマークアップし，データのプレゼンテーションをCSSで指定することをせずに，マークアップでデータの見せ方まで指定してしまっているウェブサイトが多いです．また，そのような間違った教え方をする人もたくさんいらっしゃいます．

(X)HTML

ウェブは，HTTP（HyperText Transfer Protocol）という手順に従って，ウェブブラウザ（User Agent）とウェブサーバがデータをやりとりします．やりとりされるデータは，HTML (HyperText Markup Language)又は XHTML (eXtensible HTML) という文法に則って記述されています．HTMLは，その名が示すように，ハイパーテキスト＋マークアップ言語です．

ハイパーテキスト：

ある情報が別の情報とリンクされていて，ひとつの情報から次から次へと関連する情報を呼び出せるような仕組み．HTMLならばリンクをクリックすると別のウェブページにジャンプしますが，これがインターネットにまたがったハイパーテキストの部分です．

マークアップ言語：

データの意味をタグという目印でマークすること．タグでマークアップすることで，データそのもの以外に，データの意味も記述できる．

データは(X)HTMLという文法に従って書くと言いましたが，(X)HTMLという文法に従ってデータ構造をマークアップ（タグ付け）すると言った方が適切かも知れません．たとえば<h1>タグで，そのデータが見出しであることをウェブブラウザに示すことができます．

マークアップの例

下記HTMLでマークアップの例を見てみましょう．

<html>
  <head>
    <title>初めての授業</title>
  </head>

  <body>
      <h1>初めての授業</h1>
        <p>今日<strong>はじめて</strong>，東京女子大学で授業をしました．</p>
  </body>
</html>

このデータは<html>というタグで始まって，</html>というタグで終わっています．htmlタグは，このデータがHTMLであることを示しています．

このデータは次に，<head>から</head>までのヘッダ（見出し）部分と，<body>から</body>までのボディ（本文）部分に分かれています．ヘッダ部分には，このHTMLページのタイトルを記述できます．ボディ部分に本文を書きます．

他にも色々なタグが使われていますが，最後に「<strong>はじめて</strong>」を説明しておきます．このstrongタグは，このタグで囲まれた部分を強調して表示することを示しています．

このように(X)HTMLでは，データそのもの以外に，（そのデータが何であるかという）データの意味（semantics）も記述することができます．

ここで注意すべきことは，strong要素は，タグで囲んだ部分を強調して表示して欲しいということだけを示しているだけで，どのように強調表示するかまでは定めていないということです．実際の強調表示方法は，htmlデータを表示するウェブブラウザによって異なります．画面に表示するブラウザはstrong要素を太文字で表示することが多いようです．音声ブラウザは，strong要素を太い声で読み上げることで強調表示するかも知れません．（strong要素をどう表現するかはスタイルシートで設定することができます．）

HTMLとワープロの違い

では図1を例にとって，この「マークアップ」の重要性と，それがいかに誤解されて又無視されているかについて述べます．

図1a)は，この一群のデータが箇条書きのリストであることを，箇条書きリストのタグ<ul>とリストの各要素を示すタグ<li>を使って示しています．

ワープロはこれとはまったく違います．図1b)に示すように，ワープロの場合は，中点で始まる文章を少し字下げして並べることで視覚的に箇条書きリストを表現しています．（Wordはもう少し賢いので，Wordのスタイルを適切に使えば，意味をある程度表すこともできます．）

図1 HTMLとワープロの違い

ウェブブラウザは図1a)のようなHTMLを元に，画面には図1b)のように表示します．ウェブブラウザが表示するHTMLページとワープロの画面は非常に似ていますが，HTMLに書かれているのはデータとその意味だけで，それをどういう風に視覚的にレイアウトして表示するかはウェブブラウザに任されています．ですから音声表示専用のウェブブラウザは，耳で聞いたときに分かりやすいように箇条書きを表示することが可能です．

HTMLとワープロの違いをわかっていただけましたか? ワープロは文字をレイアウトすることで視覚的にデータの意味を暗示しています．HTMLではデータをマークアップすることで，明示的にデータの意味を表現できます．そしてそのデータをどう表現するかはスタイルシートとウェブブラウザーに任されているのです．ところが世の中には，このことを無視してHTMLのタグを使ってレイアウトしてしまっているウェブページが未だ多いのです．

構造化の例

ウェブでは，(X)HTMLのマークアップによって，下記のような構造を表すことができます．

見出し：

卒論でいえば，h1要素が題目，h2要素が章，h3要素が節，h4要素が項に相当します．見出し要素を使うことで，長いページを意味のあるまとまりで階層的（章，節，項）に区切り，その内容の「見出し」をつけることができます．きちんと見出しが付いた文章は，晴眼者にとっても読みやすいと思います．見出しは大きな文字で表示されることが多いので，ページをざっと眺めるだけで，どこに何が書いてあるのかがつかめるし，目的の箇所に移動するのも簡単です．

後で説明する，FirefoxのDocumentMapを使えば，任意の見出しに簡単にジャンプできるようになります．この教材には，ページの最初に目次が付いています．あれは，見出し要素を拾い出して自動的に生成したものです．でも，DocumentMapのような機能がブラウザにあれば，目次を作らなくても，簡単にジャンプできるようになります．視覚障害者用のブラウザには，見出し間を簡単にジャンプする機能が付いていて，長いページの中から目的の箇所に移動したり，ページの概要を把握するのを容易にしています．

ページに見出しをマークアップすることで，あるサイトでは，晴眼者・視覚障害者とも，最大2倍早く情報を見つけることができることや，その効果が視覚障害者に対してより大きいことが分かっています．（T. Watanabe, "Experimental Evaluation of Usability and Accessibility of Heading Elements", W4A, (2007)）

表（テーブル）：

表は，2次元のデータの関係を表しています．画面で見れば縦横の関係がすぐ分かりますが，音声で聞くと，どの行のどの列かがわかりません．しかしtable要素でマークアップすれば，視覚障害者用の音声ブラウザは，どの行のどの列かも教えてくれるので，視覚障害者にも理解しやすくなります．

東京女子大学の学部構成

学部名	学科数	教員数（名）	学生数（名）
文理学部	7	93	2460
現代文化学部	3	42	1100

リスト：

箇条書き，順序付きリスト，定義リスト（ここで使っているのがこれ）は，それぞれ，ul要素，ol要素．dl要素でマークアップできます．適切な要素でマークアップすることで，お互いの関係がユーザーにわかりやすくなります．

CSS

(X)HTMLと並んで重要なのが CSS (Cascading Style Sheets)です．ウェブでは，データの見栄え（見せ方，表示方法，プレゼンテーション）は，(X)HTMLではなくてCSSなどのスタイル言語を用いて指定します．つまり，データ構造を(X)HTMLでマークアップし，データのプレゼンテーションをCSSで指定するのが，ウェブページの正しい（つまり，ウェブの標準に従った）作成方法です．

CSS2（Cascading Style Sheets, level 2）では，画面，印刷，スライド，音声といった表示メディアごとに表示スタイルを指定できます．この仕組みを使うと，ウェブページを画面で見るときはゴシックフォントで表示し，印刷して読むときは新聞などで使われている明朝体フォントで表示し，音声で表示するときは本文は一郎君の声でリンク部分は花子さんの声で読み上げるというように，表示メディアに適した表示スタイルを使い分けることができます．しかもCSS2では，ウェブページの製作者が指定した表示スタイルを置き換える形でユーザが指定した表示スタイルを使うことができます．たとえば弱視のユーザならば，フォントサイズを大きくしたり色のコントラストを明確にしたりした自分専用のスタイルシートを使って，ウェブを見ることができます．

［CSSの力］：スタイルシートを切り替えて表示を変える例

コミュニケーション学科サイトの画面右上にある文字サイズ切り替えボタン：

「文字を大きく」というリンクを切り替えると，スタイルシートが切り替わり，大きな文字で表示されるようになります．

ある研究会用に作成した発表資料 「ウェブ・アクセシビリティ向上の要件」：

このページの「表示切り替え」ボタンを押すか，アクセスキー+D とすると，プレゼンテーションを決めているスタイルシートがはずされて，素のテキスト表示になります．書いてある内容は同じなのに，スタイルシートのあるなしで，これだけ見栄えが異なることに驚くでしょう．

CSS Zen Garden：

非常に有名なサイトです．同じコンテンツなのに，CSSを切り替えることでクールなデザインに生まれ変わることに驚くと思います．

代替スタイルシートの利用：

この教材には，3種類の代替スタイルシートを用意してあります．Firefoxならば，「表示」メニューの下の「スタイルシート」を選択してください．すると，「Default」，「Large font」，「Small font」．「Simple style」の4つのスタイルシートがあって，今は「Default」を使っていることが分かると思います．試しに，他のスタイルシートを選んでみてください．コンテンツは全く同じなのに，文字が大きくなったり小さくなったり，シンプルなデザインになったりすることが分かると思います．

表示メディアごとにスタイルを変える例：

このページには，印刷用のスタイルシートを用意しました．画面表示と印刷がどう違うか確認してみてください．

(X)HTMLとスタイルシートを分離するメリットをわかっていただけましたでしょうか．スタイルシートを使わずに(X)HTMLの要素中に文字の色や大きさなどの属性を指定してしまうと，表示スタイルと(X)HTMLのデータを分離できなくなってしまいます．表示スタイルを指定したいときはスタイルシートを使うようにしましょう．

スタイルシートの例

以下のソースを理解するにはCSSの基礎知識が必要となりますが，それは後で説明することにして，CSSで何ができるかの具体例を書きます．

スタイルシートに下記のように書かれていたら，ウェブページは黒色の背景の上に白色の文字で表示されます．また，h1見出しは，1.7倍大きな太字で，センタリングして表示されます．

/* 初級編では，ここに書いてある内容を覚える必要はありません．*/

body {                /* body要素全体の表示スタイル指定 */
  color: #FFFFFF;         /* 文字色：白 */
  background: #000000;    /* 背景色：黒 */
}

h1 {                   /* h1要素共通の表示スタイル指定 */
  font-size:170%;         /* 文字サイズ：170% */
  font-weight:bold;       /* 文字太さ：太字 */
  text-align:center;      /* 中央揃え */
}

.red {                 /* red という修飾子で指定された要素だけの表示スタイル指定 */
  color: #FF0000;         /* 文字色：赤 */
}

.navi li {             /* naviという修飾子で指定された要素だけの表示スタイルを指定 */
  color: #FFFFFF;            /* 文字色 */
  background: #FF99FF;       /* 背景色 */
  width: 10em;               /* 箱の幅は10文字分 */
  text-align: center;        /* 文字はセンタリング */
  margin: 0px;               /* マージン(ボックスとボックスの間隔)を0にする */
  padding: 0.3em;            /* パディング(ボックス枠と文字との間隔)を0.3文字分空ける */
  border: 1px solid #CC3399; /* 枠線幅は1ピクセル，実線，色も指定 */
  display: block;            /* ブロックレベル要素として扱う */
  list-style: none;          /* リスト項目に中点などをつけない */
  float: left;               /* ボックス領域を左側に寄せる */

}

また，外部スタイルシート(example.css)を指定しているXHTMLページに下記の記述があったら，「ここは大事」だけが赤色で表示されます．

<span class="red" >ここは大事</span>

外部スタイルシート(example.css)を指定しているXHTMLページに下記の記述があったら，リスト要素を水平な箱の連結として表示できます．ページ幅が狭くなると，箱が自動的に折り返されて2列表示になります！

<div class="navi">
  <ul>
    <li><a href="http://www.google.co.jp/">Google</a></li>
    <li><a href="http://e-words.jp/">e-Words</a></li>
    <li><a href="http://ja.wikipedia.org/wiki/">Wikipedia</a></li>
    <li><a href="http://yahoo.co.jp/">Yahoo!</a></li>
  </ul>
</div>
　
<!-- 上記ul要素の直後で回り込みを解除しておく -->
<p style="clear: left;"> </p>

どうです．CSSを使いこなせばいろいろなことができるのがわかるでしょう!

HTMLの要素でレイアウトしてしまう間違い

ウェブ標準を無視して，あるいは無知なために，HTMLの要素でレイアウトしてしまう間違いを2例挙げます．

太文字にするためにstrong要素を使う間違い

strongは強調表示するための要素です．ほとんどのウェブブラウザはこの要素を太文字で表示しますが，太文字で表示するための要素ではありません．太文字を使いたいならば，後述するスタイルシートで，font-weight:bold;のように指定すべきです．

画面上にきれいにレイアウトしたいためにtable要素を使う間違い

下例に示すようにtableは表を作るための要素です．表では，縦方向や横方向に並んでいるデータにはお互いに関係があります．下記の例ならば，左側一列に並んでいるデータはコンピュータに関するデータで，右側の列は人間に関するデータです．横方向に見ても，各行ごとに両者で対照的な性質が書いてあります．

table要素を使うときれいに縦横にレイアウトできるので，table要素をレイアウトのためだけに用いているケースが多いです．たとえば，下図2のように，ページ上端に広告記事，左端に今日の天気と株価の表示，右上端に本文，右下端にその他の記事が表示されているようなニュースサイトは，table要素で簡単に実現できます．

<table width="200" border="0" cellpadding="5" cellspacing="5">
  <tr>
    <td colspan="2" class="LT_ad">広告記事</td>
  </tr>
  <tr>
    <td style="width:50; background-color:#EEEEEE;">今日の天気</td>
    <td style="width:100">トップ記事は目に付きやすい位置にレイアウトされます．</td>
  </tr>
  <tr>
    <td style="width:50; background-color:#EEEEEE;">株価</td>
    <td style="width:100">その他の記事</td>
  </tr>
</table>

でも，このページでは，左と右の同じ高さに並んでいる情報には何の関連もありません．これらの情報はレイアウト上同じ高さに来ているだけです．このようなページを音声表示すると，音声ブラウザは，たまたま同じ高さに並んでいる情報を続けて読み上げるので，音声で聞いている視覚障害者にはちんぷんかんぷんなことになってしまいかねません．レイアウトテーブルを読み上げるとどうなるかという例を図3に示します．

図3 table要素の誤用

ただし，音声ブラウザがテーブルをどういう順番で読み上げるかに配慮し，また，th要素やsummary属性などのテーブルの構造を表す要素を用いないようにすれば，table要素をレイアウト的に使っても問題があまり生じないようにできます．

図4にCSSのfloatプロパティを使ってレイアウトする例を示します．（このソースを理解するためには，XHTMLやCSSの基礎知識が必要になりますが，それは後で解説します．）

  
<div class="LTheader">（ヘッダ）</div>
<div class="LTnavigation">
  <ul class="LTnavi">
    <li>今日の天気</li>
    <li>株価</li>
    <li>購読</li>
    <li>サイトマップ</li>
  </ul>
</div>
<div class="LTcontent">ここが視覚的にもっとも目立つ位置なので，
                トップニュースなどの重要な情報がここに置かれる．</div>
<div class="LTfooter">（フッタ）</div>

.LTheader {
    background-color: #00CCFF;
}
.LTnavigation {
    float: left;
    background-color: #FFFF99;
}
.LTcontent {
    float: left;
}
.LTfooter {
    clear: both;
    background-color: #00CCFF;
}


ul.LTnavi {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

ul.LTnavi li {
    margin: 0px;
    padding: 0.5em;
    border: groove 1px #AAAAAA;
    background-color: #EEEEEE;
}

図5にCSSのpositionプロパティを使ってレイアウトする例を示します．

<div class="example">
  <div class="LT_TopNews">トップ記事は目に付きやすい位置にレイアウトされます．</div>
  <div class="LT_weather">今日の天気</div>
  <div class="LT_stock">株価</div>
  <div class="LT_top_line">広告記事</div>
</div>

.LT_TopNews {
	height: 10ex;
	width: 13em;
	position: relative;
	top: 4ex;
	left: 8em;
}

.LT_weather {
	height: 4ex;
	width: 7em;
    background-color: #EEEEEE;	
	position: relative;
	top: -6ex;
	left: 0px;
}

.LT_stock {
	height: 4ex;
	width: 7em;
    background-color: #EEEEEE;
	position: relative;
	top: -6ex;
}

.LT_top_line {
	height: 4ex;
	width: 21em;
    background-color: #00CCFF;
	text-align: center;
	position: relative;
	top: -19ex;
}

上記ソース例に示すように，HTMLソースに書いてある順番と画面に表示される順番を異なるようにすることもできます．音声ブラウザはHTMLソースに書かれている順番に読み上げるので，この性質を上手に使えば，トップ記事を画面上は右真ん中に表示し，音声では最初に表示されるようにすることもできます．

正しい仕様に準拠しない間違い

上記のほかに，HTML 3などの古い仕様でウェブページを書いている，あるいは HTML 4.01を使っていても古い仕様の考え方を引きずっているウェブページが多いです（図6）．授業などでも，こういう古い仕様が教えられているケースをよく見かけます．

ウェブが普及したとき，NetscapeとInternet Explorerのブラウザ戦争がありました．両ブラウザはシェア獲得を目指して，独自の機能を備えていきました．Internet Explorerのmarquee要素もこの一例です．このようににHTMLの機能が異なると，ブラウザごとにHTMLを用意しなければならず，ウェブの発展が阻害されてしまいます．このような背景の下で，ウェブの標準仕様を定めている国際コンソーシアムW3Cが1997年に公開したのが HTML 4です．HTML 4は，文書構造とプレゼンテーションを分離する考え方が取り入れられました．この結果，アクセシビリティにも配慮できるようになりました．HTML4をXMLの枠組みで捉えなおしたのが，XHTML 1.0です．現時点では，(HTML 4.01または)XHTML 1.0に従ってウェブページを作成するのが望ましい書き方です．

残念ながらHTML 4.01は，古いバージョンのHTMLの互換性のために，文書構造とプレゼンテーションを分離しない書き方も許容してしまいます．したがって，スタイルシートを一切使わなくても，HTMLの要素や属性で，プレゼンテーションを指定できてしまいます．

<body bgcolor="red" text="blue">
<p align="left">2005年8月4日<br>
<bold>鈴木一郎</bold>
</p>
...

ウェブブラウザがこのような古い考え方のページを問題なく表示できるから，CSSを使わない方が簡単だから，新しい仕様を覚えるのは面倒だから，そういう理由で古い方法を使い続けるのはやめましょう．文書構造をXHTMLでマークアップし，プレゼンテーション（データの表示方法）をCSSで指定するのが，現在の標準です．

Kompozerを用いたウェブサイト作成

では，ここから初級編として，Kompozerを用いたサイト作成の演習をします．（中級編では，XHTMLやCSSのソースを見ながら，Kompozerで作成したサイトの間違いを修正したり，ページデザインやナビゲーションを工夫することを学びます．）

XHTMLとCSSを分離したウェブページを作成する方法

今まで見た例でわかるかもしれませんが，XHTMLとCSSを別々のファイルで編集するのは，結構大変です．XHTMLファイルを書くときは，CSSファイルにどのようなスタイル要素があるのか知っておく必要があります．見栄えを変更したくなったら，CSSファイルを編集しなければなりません．それに，XHTMLやCSSの文法を知らなければ，このようなソースコードを書くことができません．このような作業を簡単にしてくれるのが，オーサリングツール（ウェブサイト作成支援ソフト）です．以下にオーサリングツールを3つ紹介します．

Dreamweaver

プロ用のオーサリングツール．WCAGやJIS X 8341-3などのウェブコンテンツ・アクセシビリティガイドラインの解説やチェックも可能．それ以外にもウェブサイト作成を大幅に楽にしてくれる有用な機能が満載．基本的な使い方を取得するのは難しくないし，エデュケーション版は値段も高くない (17,000円)．

Kompozer

無料ソフト．（2006年度のCompIIEの授業で使用していたNvuの後継版）WindowsでもMac OS Xでも利用できる．ソースを書く作業が不要になるようにデザインされているので，(X)HTMLやCSSの細かな文法を覚えていなくても，ウェブ標準に即したページを作成できる．（この授業では初級編で使用．）

Aptana Studio

無料ソフト．Ajaxなサイト（つまり，JavaScript）を作成するための統合開発環境だが，(X)HTMLやCSSを書くこともできる．Kompozerとは違い，ソースを書く機能に最適化されている．本家は英語だが，一部を日本語して使うこともできる．

上記のうち，DreamweaverとKompozerは，作者にXHTMLやCSSの知識がなくても，WYSIWYG（What You See Is What You Get）なGUIエディタでウェブサイトを構築できます．DreamweaverとAptanaは，自分で（XHTMLやCSSの）ソースコードを直接書いてサイトを作成できます．今回はKompozerを使いますが，後述するようにKompozerにはサイト作成の限界があるので，中級編以上やウェブの標準を勉強したい場合は，DreamweaverとAptana等を使って，ソースコードを自分で書いてみることも大事だと思います．

Kompozerのインストール，日本語化，初期設定

自分のWindowsパソコン（やMacパソコン）で Kompozer を使うときには，まず，下記手順で Kompozerをインストールしてください．東女の情報処理教室のMac OS XにはKompozer本体はインストール済みですので，日本語化作業だけが必要です（詳細は，下記注参照）．

1. 「KompoZer(Nvu)マニュアル」はKompozerの公式なサイトではありませんが，チュートリアルなどが書いてあるので役に立つと思います．
2. Kompozerの公式ダウンロードページからWindows用かMacOS X用のインストーラー（実行ファイル）をダウンロードする（2009年1月の最新版は 0.7.10．これより新バージョンもあるが構成が変わっていたりするので バージョン0.7.10をダウンロードすることをお勧めします．）
3. 次に，「Kompozerの language packs」のページから，日本語化パック(kpz-langpack-jaJP.xpi)をダウンロードする．（日本語化パックはKompozerのバージョンごとに違うものが用意されています．この日本語化パックはバージョン0.7.10用です．）
4. ダウンロードしたインストーラ（実行ファイル）を使って，パソコンにKompozerをインストール．（インストール画面は英語だが，怖じ気づかないこと） インストールの詳細は「KompoZerのインストール方法」が参考になる．（Windowsの場合は，インストールしなくても，ダウンロードしたZIPファイルをどこかに展開するだけで良い）
5. 「KompoZerを日本語化する」を参考にして，さきほどダウンロードした日本語化パッケージをインストールする．
6. 日本語化が完了したら，Kompozerの初期設定を変更します：Kompozerのメニューから「ツール」，「設定」とたどり，「新規ページ設定」タブをクリックして，「国際化関連」の言語をja，文字エンコードをUTF-8にする．次に「詳細」タブをクリックして，「マークアップ形式」の言語をXHTML 1，DTDをStrictにする．(図7参照)
7. また，「全般」タブのCSS編集が，「HTML要素・属性でなく、CSSによるスタイル付けを用いる」にチェックが入っていることを確認しておいてください．
8. また，「全般」タブの「ページの保存・公開時に，」を，「HTMLソースの体裁を整える」方にチェックを入れておいてください．この方がソースが見やすく整形されます．

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
  <title></title>
</head>
<body><br /></body>
</html>

図7 Kompozer（Nvu）の初期設定変更

Kompozerの使い方

Kompozerの解説

「Kompozer(Nvu)マニュアル」に， とてもわかりやすい説明があるので，まずはこれを見てください． まずは，各ツールバー（編集ツールバー，書式ツールバーの1行目と2行目）の各ボタンの意味を調べてみましょう．

Kompozerによる簡単なウェブページ作成

Kompozerによる簡単なウェブページ作成

習うより慣れろ．まずはKompozerを使って簡単なウェブページを作ってみます．

トップページを新規作成．雛形も指定する．

「ファイル」メニューの「新規作成」を選択すると，「新しい文書，又は文書の雛形となるファイルを作成します．」ダイアログボックスが 表示される．「文書(内容は空白)」の「XHTMLで文書を作成」と「Strictで文書を作成」の両方にチェックをいれる．（この設定は保存されるの で，次回以降は編集ツールバーの新規作成ボタンを利用してよい．）(この作業をすることで，新規文書のDTDが XHTML 1.0 Strict になる．DTDが何かなどは，下記注1参照．)

トップページを保存．保存時に，トップページのtitle要素を入力．

編集ツールバーの保存アイコンをクリックすると，ページタイトルの入力を求められる．（タイトルはウェブページのtitle要素に使わ れるもので，ウェブページを表示したときのウィンドウタイトルやブックマーク保存時の見出しに使われる．ページの内容を簡潔に表すタイトルにすること．ま た，複数のウェブページで同じタイトルにしないこと．）（タイトルとファイル名は違う物であることに注意．両者は異なっていても良い．）保存するファイル 名に日本語を使わないこと．（半角の英数字と一部の記号だけしか使わない．）

H1見出し作成

ページには見出しが必要です．もっとも大きな見出しがH1要素で，ひとつのウェブページに一つ，しかもページの先頭にあることが望まし いです．私は，H1要素とtitle要素の中身を同じにしています．卒論でいうと，題目に相当します．H1要素を作るには，まず，文字を書き，それを全部 選択してから，編集ツールバー1行目左端のドロップダウンメニュー(注2)から「見出し1」を選択する．（Kompozer真中画面左下のタブで「HTMLタブ」を選ぶと，コンテンツの要素名も表示してくれるのでわかりやすい．）

H2見出し作成

見出しにはH1からH6までのレベルがあります．ページの構造として美しいのは，一つのH1見出しの下に，H2，H3が順番に続くこと です．H2レベル以下の見出しは複数あっても構いません．卒論で言うと，章がH2で，節がH3で，項がH4でしょう．（私はH5以下の見出しは滅多に使い ません．) 編集ツールバー1行目左端のドロップダウンメニューから「見出し2」を選んでください．

文章入力

通常の文章は段落要素で囲みましょう．（H2見出しなどの後など，）最初のp要素を作るためには，編集ツールバーのドロップダウンリス トから「段落」を選ぶ必要がありますが，次の段落要素を始めるには，KompozerではENTERキーを押すだけです．ENTERキーを押すと自動的に新しいp要 素が作られ，Kompozerで入力した文字は，そのp要素の中に書き込まれます．Kompozerの「HTMLタグ」ビューを用いれば，入力した文字がどの要素になるのかが 一目瞭然でわかります．

表示方法を変えてみる

先ほども書きましたが，Kompozerではページを見る方法（View）が複数用意されています．それが画面真中のページ編集領域の下端に表示されている 「編集モードツールバー（タブ）」で，「通常」，「HTMLタグ」，「ソース」，「プレビュー」の4種類あります．「通常」表示は，ウェブブラウザの表示と近い表示になりますが，テーブルの外枠が表示されるなどの違いがあります．私は，要素名も表示される「HTMLタグ」表示が好きです．要素名をクリックすれば，要素の属性を編集することもできます．ただしHTML表示では背景画像は表示されません．「ソース」表示にすれば，XHTMLのソースを見ることができます．時々ソース表示にして，どのようになっているのか見てみると勉強になると思います．「プレビュー」表示は，ウェブブラウザでの表示にかなり近い表示になるはずです．

保存

作成中のファイルはこまめに保存するようにしましょう．編集メニューには「保存」，「名前を付けて保存」，「文字エンコードを指定して 保存」の3種類があり，ツールバーにも「保存」アイコンがあります．上書き保存するときは「保存」を使います．新規保存や名前を変更するときは「名前を付 けて保存」を使用し，文字コードまで変更したい時は「文字エンコードを指定して保存」を使います．

リスト要素を使ってみる

リスト要素は，順序付きと順序なし（箇条書き）と定義リストの3種類あります．定義リストの話は後回しにして，ここでは番号付きで表示 されるol (ordered list)要素と箇条書きになるul (unordered list)要素の作り方を説明します．番号付きリストは，1番目，2番目というように，リストの各項目(li要素)に順番があることを暗示しています．リスト要素を書くには，まずリスト項目を書きましょう．最初の項目を書いたら改行して，次の項目を書きます．項目を書き終わったら，全項目を選択して，書式ツールバー1行目のアイコン（順序付きリストか順序なしリストのどちらか）を選択してください．項目を追加したかったら，改行キーを押せば新しい項目が挿入されたり追加されたりします．改行によって新しい項目が追加されるのを止めるには，書式ツールバーのアイコンをもう一度クリックしてアイコンが選択されていない状態にしてください．

画像を挿入してみる

まず，画像を用意しましょう．また，画像を挿入する前に作成中のウェブページを保存しておきましょう．画像の場所は，ローカルにある ファイルでも良いし，インターネット上のファイルでも良いです．ただし，著作権を侵害しないように注意してください．（ウェブで公開しないならば，私的利用の範囲で使えるかも知れません．）ここでは，「コミュニケーション学科のロゴ」を挿入してみます．Kompozerの編集ツールバーから「画像」アイコンを選択すると，「画像のプロパティ」ダイアログボックスが表示されます．まず，「相対URLを使用する」にチェックを入れます．次に，「画像のURL」に画像ファイルのURLを入力するか「ファイルを選択」でローカルファイルを選択します．また，画像ファイルには「代替テキスト」(alt属性)を指定しておきましょう．代替テキストとは，画像が表示されないときに画像の代わりに表示される文字のことで，「コミュニケーション学科，－情報社会を主体的に生きる力を養う－」のように簡潔に書く必要があります(たぶんこのalt属性は長すぎる．)．意味のない装飾画像の場合は，「代替テキストなし」を選択してください．画像表示にはimg要素を使いますが，Kompozerは画像の大きさを自動判別して，img要素のwidth属性及びheight属性を自動的に入力してくれます．

<img style="width: 215px; height: 54px;" src="deptC-logoChars.png" 
 alt="コミュニケーション学科，－情報社会を主体的に生きる力を養う－" />

ウェブブラウザでプレビューしてみる

ある程度できたら自分が普段使っているブラウザーでどのように見えるかチェックしてみましょう．「編集」ツールバーの「閲覧」アイコンをクリック．（Windowsの場合，ファイル名やファイルを保存しているフォルダ名に日本語が含まれていると閲覧できません．また，拡張子がxhtmlになっているとファイルの関連づけができていないために自動的にブラウザが開きません．Windowsだけで作業するなら拡張子をhtmlに修正すれば問題は解決します．より正しい方法は，拡張子 xhtmlでもウェブブラウザが開くように関連づけることです．）

リンクを張ってみる

文字列をリンク要素にしたいときは，文字列を選択してから編集ツールバーの「リンク」を選択します．すると，「リンクのプロパティ」ダイアログボックスが現れるので，「リンク対象」にリンク先のURLを入力するか「ファイルを選択」からローカルにあるファイルを選択します．
画像にリンクを張りたい場合は，画像をクリックしてから編集ツールバーの「リンク」を選択すると，「画像のプロパティ」ダイアログボックスが表示されるので，「リンク対象のURL」にリンク先URLを入力すればよいです．画像リンクを使う場合は，画像に，リンク先がわかるような代替テキストを付与するのを忘れないこと．

表を作ってみる

表の作成も簡単です．「テーブル」ボタンを選択すると，「テーブルの挿入」ダイアログボックスが表示されるので，マウスでドラッグして表の大きさ（何行何列）を決めます．詳細設定タブを使うと，表の枠線の太さも指定できます．表ができた後，各セルをダブルクリックすれば，セルのプロパティを修正できます．修正はセル単位でも行単位あるいは列単位でもできます．セルには見出しセルと通常セルがあるので，（左端や上端などで）見出しの役割をしているセルは見出しセルに変更してください．セル内のテキストの配置も指定できます．また，マウスなどで隣りあったセルを複数選択してから右ボタンをクリックして，「選択されたセルを結合」とすると，セルが結合されます．
表は凝るといろいろ複雑な物を作成できますが，レイアウトテーブルに使わないことをお薦めします．また，レイアウトテーブルでなくても，表の中に別の表を入れるとややこしくなるので，表を使う場合はシンプルにすることをお薦めします．

定義リストを作ってみる

定義リスト(dl要素)は，定義項目(dt要素)と定義内容(dd要素)のペアで構成されます．今，皆さんが見ているこのリストも定義リストです．定義リストの作り方はいろいろな方法がありますが，たとえば，最初の定義項目を書いたらそれを選択し，「書式」メニュー，「リスト」，「定義項目」と選んでください．次に，（最初の定義項目がハイライトされているのをはずしてから）最初の定義項目の最後尾にカーソルを移動し，そこでEnterキーを押すと，自動的に定義内容(dd要素)を書き込む場所が作られます．定義内容を書いてからEnterキーを押すと，次の定義項目を書く場所が作られます．あるいは，最初に定義項目と定義内容を書いておいて，あとから各行を定義項目にしたり定義内容にしたりすることもできます．「HTMLタグ」表示モードで作業すると，要素の左側に要素名が表示されるのでわかりやすいと思います．

要素にアンカーを打って，ページ内リンクを張ってみる

ページ内の任意の要素にジャンプするようなページ内リンクを張ることもできます．まず，リンク先の要素にアンカーという固有の名前を付けます．次に，そのアンカーを指すようなリンクを張るわけです．アンカーを打つには，リンク先にしたい要素を選択してから編集ツールバーの「アンカー」を選択し，わかりやすい名前を付けます（Kompozerはname属性として，この名前を利用します）．次に，リンク元となる文字列を選択してから「リンク」ボタンを選択し，「リンク対象」のドロップダウンリストの中から先ほど付けた名前を探します．（名前の前に#が付いているはずです．）

Kompozerを使ってみよう（CSS編）

前章では，見栄えを全く指定しませんでした．今度は見栄えを指定してみましょう．Kompozerの「ツール」メニューから，CSSエディタを立ち上げれば，表示スタイルを指定できます．

CSS練習用のXHTMLファイル作成．

以下のCSS練習のために，h1要素とh2要素と，p要素があるXHTMLファイルを作っておく．

CSSエディタ起動

CSSエディタを起動する前にXHTMLファイルを保存する．次に，Kompozerの「ツール」メニューから，CSSエディタを選択すると，「CSSスタイルシート」ウィンドウが表示される．

外部スタイルシートの指定

「エクスパートモード」がチェックされているのを確認して，「新しいlink要素」を選択．するとウィンドウの右側に「link要素でのスタイルシート指定の新規作成」が現れるので，URLにスタイルシートの名前（たとえばnabe_article.css）を入れる．他の欄はそのままで良いので，「スタイルシートの作成」を選択すると，XHTMLファイルと同じディレクトリに，nabe_article.cssという名前のスタイルシートが新規作成され，XHTMLファイルには，このスタイルシートを指すlinkが挿入される．（注：CSSエディタ起動中は，Kompozer本体は操作できない．）

（確認）

XHTMLファイルからCSSにリンクが張られていることを確認するために，一度CSSエディタを閉じて，Kompozer本体のソース表示を見てみよう．
<link rel="stylesheet" href="nabe_article.css" type="text/css" />
とあるのが，外部スタイルシートを指定（リンク）している箇所である．

CSSエディタに戻る

もう一度CSSエディタを起動する．CSSエディタの左側に先ほど作成したCSSファイル名があるはずなので，それをクリックする． （つまり，このスタイルシートにいろいろなスタイルを書き込むようにする．）もし，左画面下の「新しい規則」がグレーアウトされていて選択できない状態になっている場合は，画面中央の「再読込み」ボタンをクリックすればよい．

新しいスタイル（見栄えを決めるルール）作成

CSSエディタで「新しい規則」をクリックすると，右側に「スタイル規則を新規作成」と表示される．（新規作成には，「名前付きスタイル（クラス名を下に入力）」，「指定された種類の全要素に適用されるスタイル（種類を下に入力）」，「次に指定するセレクタに該当する要素に適用されるスタイル」の3種類があるが，この意味については下記参照．）

スタイルセレクタ：CSSでは，要素ごとに表示スタイルを指定することもできるし，特定のclass属性をもった要素に対して表示スタイルを指定することもできる．KompozerのCSSエディタでいうと，

名前付きスタイル（クラス名を下に入力）：

同じ名前のclass属性を持った要素にだけ適用される．前に出した，文字を赤色で表示する例がこれを使っている．

<span class="red" >ここは大事</span>

書式ツールバー2行目左端のドロップダウンリストには，CSSエディタで作成した名前付きスタイルの一覧が表示される．

指定された種類の全要素に適用されるスタイル（種類を下に入力）：

h1要素とか，p要素とか，ある種類の要素全部に適用される．この教材で言うと，h2要素やh3要素で，これを使っている．

次に指定するセレクタに該当する要素に適用されるスタイル：

p要素の中のこれというように，適用範囲を細かく制御する．

H2見出しの色を変えてみる

h2見出し全部の見栄えを変更したいので，新規作成で，「指定された種類の全要素に適用されるスタイル（種類を下に入力）」をチェックし，下のテキスト入力エリアに「h2」と入力してから，「スタイル規則の作成」ボタンをクリックする．さらに，「テキスト」，「背景」，「枠線」，「ボックス」をクリックして，h2見出しの見栄えを決める．これらの意味は，次節の解説を参考にしてもらうとして，ここでは簡単な設定をしよう．まず，テキストで，前景色を赤色にしよう．さらにフォントウェイトを太字にしてみよう．次に，背景で，背景色を薄い水色にしてみる．また，枠線で，種類を実線，色をオレンジにしてみよう．これでできあがり．CSSエディタを終了して，Kompozerのh2要素がどう表示されているか見てみる．（Windowsの場合，Kompozer本体でh2要素が表示されている状態でCSSエディタを起動して作業すると，CSSエディタの設定がKompozer本体の表示にどう反映されるか確認できる．Mac OS XではCSSエディタがKompozer本体とかぶってしまうので，CSSがどう反映されたか見ることができない．）

h2見出しの見栄えを変更

h2見出しの見栄えを変更するには，もう一度CSSエディタを立ちあげて，画面左側のスタイルシートの「＋」（Mac OS Xだと三角印）をクリックする．すると，先ほど作成したh2の規則が表示されるので，規則名h2をクリックして選択してから，テキストなり何なりを変更すればよい．たとえば，テキストで行揃えを中央にすると，h2要素がセンタリングされて表示される．Kompozerエディタで他のh2要素を作ると，すべてのh2要素が同じ見栄えで表示されるのがわかると思う．

H1見出しをセンタリングし，背景色をつけてみる

では，h1要素の見栄えを変えてみよう．テキストをセンタリングし，適当な背景色をつけてみよう．それ以外にも，自分でいろいろ見栄えを指定しても良い．

文字を赤色で表示するためのスタイルを作成し，文章の一部に適用してみる．

今度は，特定のclass属性を持つ要素に適用される規則を作ってみる．今度は，まずCSSエディタで規則を作り，次にKompozerエディタで，文字列にその規則を適用するという順番で作業する．
（CSSエディタでスタイルシートを選択してから，）「新しい規則作成」で「名前付きスタイル（クラス名を下に入力）」をチェックし，テキスト入力エリアに「red」と入力してから，「スタイル規則の作成」をクリックすると，新しいスタイル規則「.red」が作成される．（規則名の先頭に ピリオドが付いていることに気づいたかな．）テキストタブで，前景色を赤にする．これでCSS側の作業は終了．
次に，Kompozerエディタに戻って，赤色にしたいところ（文字列）をマウスで選択する．そして，書式ツールバー2行目左端のクラスを選択ドロップダウンリストを開くと，アーラ不思議，CSSエディタで作成したredという名前が表示されているので，これを選ぶ．これで完了．文字色が赤色になっているはずである．

2種類のスタイルシートを作って，切り替えてみる

XHTMLファイルのhead要素内で代替スタイルシートを指定する方法

<link rel="stylesheet" type="text/css" href="nabe.css" title="Default" />
<link rel="alternate stylesheet" type="text/css" href="large.css" title="Large font" />

文字サイズを大きくする代替スタイルシートの例（large.css）

@import url(nabe.css);

body {
  font-size: x-large;
  }

メディアごとに表示スタイルを変えてみる

CSSファイルに印刷用CSSを挿入する例

@media print {

  body {
    font-size: 10.5pt;
    font-family:"ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3";
  }

  .TOCBackLink {
    display: none;
  }

  h2 {
    page-break-before: always;
  }

}

CSSの基礎

CSSエディタを使いこなすためには，CSSの基本知識が必要です．詳細は後で説明しますが，CSSエディタと関係するところだけ簡単に説明します．

全般

詳細に立ち入りたくないので，解説は省略．

テキスト

ワープロのフォントの書式指定と似たようなことができる．

背景

背景色や背景画像を指定できる．背景色の指定だけにとどめておくのが無難．

枠線

後述するボックスモデルを参考にして欲しい．上下左右すべてを同じように指定することもできるし，別々に指定することもできる．

ボックス

後述するボックスモデルを参考にして欲しい．いろいろな指定が可能だが，幅，高さ，マージン，パディングの指定だけにとどめておくのが無難．なお，幅などの指定は px (pixel)などの絶対単位ではなく，em （その要素で使われている font-sizeを基準とした大きさ．つまり，2emは font-size の2倍の大きさになる．）やex（その要素で使われているフォントxの高さを基準とした大きさ．2exだと，xという小文字フォントの2倍の高さになる．）や％（何倍かということ．）などの相対単位で指定するのが望ましい．なぜならば，利用者が画面表示に使うフォントサイズを大きくしても，px単位の大きさで指定しているところは大きさが変わらないが，emやexなどの相対単位で指定してあれば，レイアウトが崩れることがないからである．

リスト

リスト表示に使うマーカ（中点とか）の種類や，マーカの代わりに使う画像を選択できる．また，マーカをリスト項目の内側に入れることもできる．（実際に試してみれば，どういう意味かわかると思う．）

音声

（視覚障害者への音声表示方法を指定する機能だが，残念ながら，音声スタイルシートに対応しているウェブブラウザは皆無といってよいので，解説は省略．）

CSSで使う単位は大きく分けて2種類あります．絶対値を示す単位（cm，ppt，pxなど）と相対値を示す単位（%，emと，exなど）を比較すると，相対的な単位のほうが利用者の環境に応じて適切な値で表示されることを期待できます．（ただし，img要素などは画像ファイルの大きさがpxになるので，pxで指定する場合が多い．）

Validate

作成したウェブページが文法(DTD)通りにウェブページが書かれているかどうか，Validatorでチェックしてみましょう．Kompozerでページを保存してから「ツール」メニューの「HTMLの文法をチェック」を選択すると，W3CのMarkup Validation Serviceのサイトにソースが送られてチェックしてくれます．DTDの仕様と一致していたら"Passed validation"と表示されます．そして，XHTML 1.0に適合していることを示すマークをページに貼ることができます．

KompozerからW3C Validatorをうまく呼び出せない時は，HTML Validation Serviceをブラウザで開いて，ローカルにあるファイルを指定してください．

また，「Another HTML-lint gateway」も使ってみてください．非常に厳しく採点するので，最初は得点が負の値になるかも知れません．このサイトで満点を取るためには，ある程度の文法の知識を持ってソースを直接編集する技能が必要です．

ValidatorやHTML-lintなどの文法チェッカでチェックすると，もしかしたらかなりの数のエラーを指摘されるかも知れません．Kompozerは賢いので，注意深く使えばValidatorに指摘されるようなエラーは出ないはずなのですが，うっかり使うと，インライン要素である文字列がbody要素の下に書かれてしまったりしてエラーになることもあります．

ソース編集

Validatorで指摘されたエラーを修正する時は，ソースを直接編集した方が早い場合が多いと思います．また，Kompozerには限界があり，グラフィカル画面で編集するだけでは意図したとおりの(X)HTMLにならない場合もあるので，そういう場合もソース表示で編集する必要性に迫られると思います．ソースを直接編集する場合は，(X)HTMLの知識が（ある程度）あることが必要になってきます．

皆さんが普段見ているウェブページのソースは簡単に見ることができます．気になったページがあったら，(X)htmlファイルのソースやCSSファイルのソースを見てみると良いと思います．

でも，Kompozerを使えば，かなりのところまでソースを全く編集せずにウェブページを作ることができるのがわかったと思います．しかもそのウェブページは，標準に（かなりの程度）準拠した「正しい」ウェブページになっています．「Kompozerでは物足りないな，直接ソースを編集したいな．」と思ったあなたはもうウェブの初心者ではありません．今後はXHTML 1.0とCSS 2.1の仕様を勉強して，より高度で正確なウェブページを作成してください．また，そういうあなたは，Dreamweaverなどの本格的なオーサリングツールを使用することをお薦めします．

サイトの公開

今までは，作成したページを公開することを全然考えていませんでした．Wordなどの他のファイルと同じ場所に作成しても，自分以外の人はそのページを見ることはできません．しかし，作成したページを適切な場所（ウェブサーバが指定する場所）に置くと，世界中に公開できます．

「Kompozerサイトマネージャ」を利用すると，Kompozerで作成したファイルを，ウェブで公開できる場所に簡単に保存できます．

通常の環境では，自分のパソコンで作成したHTMLファイルやCSSファイルや画像データなどをウェブサーバと呼ばれる特殊な役割を持つコンピュータに転送して初めて，自分が作成したデータをウェブで公開することが出来ます．東女では，WWW (WWW-local)ディレクトリの下でファイルを作成すれば自動的にウェブで公開されるので，通常環境のような「公開」作業が不要ですが，以下では，自宅のパソコンで作成したデータを民間プロバイダのウェブサーバで公開する練習にもなるので，あえてWWW （WWW-local）ディレクトリ以外の場所でデータを作成し，それをWWWディレクトリに転送してみることにします．

1. Kompozerウィンドウ左側の「Kompozerサイトマネージャ」の「サイトを編集」を選択．
2. 「公開設定」というウィンドウが開くので，必要な情報を入れる．
   東女情報処理教室の環境で学内だけに公開する場合

   • サイト名：適当（たとえば TWCU-local）
   • サーバ情報：http://www-local.cis.twcu.ac.jp/~ユーザ名/
   • ログイン情報：「ディレクトリを選択」から，ホームディレクトリの下のWWW-localディレクトリを選ぶ．
   • ユーザ名，パスワードなどは不要．
   • 「OK」ボタンを押すと，公開サイトの設定終了．
3. 自分の書類フォルダーの下に「CompIIE」というフォルダーを作成して，その下でHTMLファイルを作成する．
4. Kompozerで作成したウェブページを保存するときに，「ファイル」メニューから，「名前を付けて公開」を選択．
5. すると，「ページの公開」ウィンドウが開くので，先ほど作成したサイト名を選択する．また，（もしまだついていなかったら，）適切なページタイトルとファイル名をつける．公開用ディレクトリの中にあらかじめサブディレクトリを作っておけば，「このページのサイト内でのサブディレクトリ」でそのディレクトを選択することにより，そのディレクトリの下に配置することもできる．「画像などの関連ファイルを含める」もチェックしておくと良い．（画像を配置する場所は，「ページと同じ位置」でもよいし，imagesなどの画像類専用のディレクトリを作成しておいて，そのサブディレクトリに配置させても良い．）
6. 「公開」ボタンを押せば，作成したページが公開用の場所に配置される．

Kompozerサイトマネージャで新しいディレクトリを作成し，その下に公開することもできます．

サイト作成の練習（小課題）

参考：最終課題の情報

初級から中級にステップアップ！

ここまでくると，Kompozerだけでは物足りなくなり，自分で直接ソースを編集したくなると思います．また，文法エラーの理由を理解するためには，(X)HTMLやCSSの技術仕様（文法）を勉強する必要が出てきます．つまり，文法などのの技術的知識をKompozerにおおまかせした初級段階が終わり，自分でも知識を持って詳細なウェブページを作成する中級段階に来たわけです．

文法エラーの解決法

Validatorで指摘されたerrorの理由を知りたい人は，以下の手順で修正すると良いかも知れません．ただし，ソースを直接編集する必要が生じます．

1. 「5.4 Validate」でエラーが出たら，文法チェッカ：Another HTML-lint gateway でチェックしてみる．
2. Another HTML-lint gateway を開いたら，「FILE」をチェックして，「参照...」ボタンで，エラーが出たファイルを指定する．
3. 「チェック」ボタンを押して文法チェック．
4. Validatorよりも詳細な結果が日本語で表示されるので，エラーメッセージなどを参考にしながら，Kompozerでソースを修正する．

ページ作成からサイト開発にステップアップ！

最終課題では，数ページで構成されるウェブ「サイト」を作ってもらいます．ウェブサイト開発では，1ページのウェブページを作成するのとは違った知識や技術が必要になります．以下，「ウェブのユーザビリティ」，「ウェブの開発プロセス」，「ナビゲーションの工夫」の章で，最終課題のために知っておいてほしいことを書きます．

基本技術

KompozerはWYSWYG (What You See is What You Get)エディタなので，XHTMLやCSSの仕様を知らなくても，ワープロ感覚で，ウェブの標準に準拠したウェブサイトを作成できます．とは言っても，基本的なことを知らないと，Kompozerを効率的にあるいは正しく使えません．

このサイトの目的の一つは「難しい知識なしにウェブサイトを構築」することだと述べましたが，初心者を超えるためには，ある程度，基本的なことを知っておく必要があります．ウェブサイト構築の専門家を目指すなら，(1) (X)HTML，CSS，JavaScriptなどの技術スキル，(2) ウェブのユーザビリティやアクセシビリティのガイドラインの知識，(3) ユーザニーズ収集，情報アーキテクチャーとサイト設計のスキル，(4) （テストツールやチェックリストやユーザ評価などの）サイト評価のスキルが必要になると思います．そこで，これらの技術や知識について，以下，大事なところだけをまとめておきます．

情報アーキテクチャ（ページの構造）

文書の構造

XHTMLで文書の構造をマークアップするためには，文章に構造がある必要があります．章，節，項のようなセクション構造，箇条書きのようなリスト構造，そういう構造があって初めて，タグでマークアップすることができるわけです．ということは，ウェブで情報を公開するためには，まず情報の構造を見つけて，次にその構造をマークアップすることになります．この「構造を見つける」という作業がとても重要です．

最初に，文章の題目を考えましょう．それがtitleとh1見出し になるはずです．次に，文章を適切な単位に分けましょう．いくつかの大グループに分け，次に各大グループを中グループに分けていきましょう．そしてグループ毎に，そのグループの中身を適切に示す見出しを考えましょう．その見出しが，h2やh3になります．heading要素やulやolなどリスト要素，またテーブル要素などを，適材適所で上手に使ってください．

また，ひとつのページが，本文以外に，ヘッダー（サイト内検索やグローバルナビゲーションなどが含まれる）とフッター（サイトポリシーや連絡先などが含まれる），あるいは左側や右側のカラム（メニューなどが含まれる）などの大きなブロックで構成されることが多いと思います．こうしたブロックは前ページに共通して配置され，ウェブサイトに一貫したデザインと操作性を提供します．こうしたブロックはdiv要素で囲い，ブロックごとに適切な深さの見出しを付けることをお薦めします．機能ごとにまとめたdivブロックには，そのブロックの機能を表すようなid属性をつけましょう．divブロックごとに見出しが見えることがどうしても嫌なら，CSSを使って（音声では表示されるけれど）画面表示から隠すこともできます．このようにデザインすると，class属性を持ったdivブロックの画面上の配置やプレゼンテーションをCSSで自由に指定すると共に，音声ユーザには見出し要素によるナビゲーションやコンテンツの把握を容易にさせることができます．

<div id="main">
  <h1>誰でもウェブ</h1>
    <p>.....</p>
  <h2>1章：...</h2>
    <p>...</p> 
</div>

<div id="header">
  <h2 class=hidden">ヘッダー</h2>
     <div id="search">
       <h3 class="hidden">サイト内検索</h3>
         <form>....</form>
     </div>
     <div id="global_navigation">     
        <h3 class="hidden">グローバルナビゲーション</h3>
           <ul class="navi">
              <li>ああ</li>
              <li>いい</li>
           </ul>
     </div>
</div>

<div id="footer">
  <h2 class=hidden">フッター</h2>
    <ul class="navi">
        <li><a href="...">連絡先</a></li>
        <li><a href="...">ポリシー</a></li>
    </ul>
</div>

最終課題をこのようなスタイルで作成する方法についても後でお話しします．

課題：構造の発見

いくつかのウェブページを調べて，どのような構造があるか見つけてください．見出し要素を使っていないサイトを取り上げるのが良いと思います．たとえば，東女のサイトにはどんな構造があるでしょうか？ その構造をどのようにマークアップするのが正しいのでしょう？

文字を使うか絵を使うか

デザイナは，文字のデザインや大きさ，画像と文字のバランスが変わることを嫌って，「画像文字」を使うことがあります．画像文字を使う場合，画像文字に絵で表現されている文字をalt属性で説明することが不可欠です．でも，本当に必要な場合にしか，画像文字を使わないでください．CSSを使いこなせば，そして最新のブラウザで表示すれば，画像文字を使わなくても，かなりのことができるのです．

CSS2

「Kompozerを使ってみよう（CSS編）」の補足を下記に書いておきます．

スタイルシートの指定方法

スタイルの指定方法には，外部スタイルシート，内部スタイルシート，インラインスタイルの3種類があります．

外部スタイルシートを使えば，複数のページで同じデザインを共有できるなどのメリットがあります．（XHTML文書のhead要素内の）link要素で外部スタイルシートのURLを指示することで，XHTMLファイルとCSSファイルを結びつけます．

<head>
  <link rel="stylesheet" type="text/css" href="http://www.foo.org/example.css" />
</head>

外部スタイルシートの場所として，上例のようにURLを用いても良いし，XHTMLファイルからの相対パスを用いても構いません．また，複数のスタイルシートを読み込んでも構いません．

内部（埋め込み）スタイルシートは，下記のように，head要素の中にstyle要素としてデザインのルールを書き込みます．他のページとデザインを共有できないので，そのページでしか使わない特殊なデザインをしているときにしか使うべきではないと思います．

<head>
  <!--
  <style type="text/css" >
　　　　/* ここにスタイルのルールを書く */
  </style>
  -->
</head>

インラインスタイルは，要素のstyle属性でデザインを指定する方法です．よい方法ではないので，もし使うとしても，table要素やimg要素など，その要素のその場所でしか使わない特殊なルールを指定する場合のみ使ってください．

<img src="foo.jpg" alt="適当" style="width: 100px; height: 50px;" />

CSSのルール

KompozerではGUI画面でCSSのルールを指定しましたが，実際のCSSファイルには下記のように書き込まれます．

/* 要素全体に適用するスタイル */
h1 {                   
  font-size:170%;         /* 文字サイズ：170% */
  text-align:center;      /* 中央揃え */
}
　
/* class属性が"red"である要素全体に適用するスタイル */
.red {                 
  color: #FF0000;         /* 文字色：赤 */
}
　
/* id属性が"TOC"である要素に適用するスタイル */
#TOC {
  background: red;
}
　
/* class属性が"nobullet"であるul要素の中のli要素全部に適用するスタイル */
ul.nobullet li {             
  list-style: none;          /* リスト項目に中点などをつけない */
}

上記の例で，"h1"とか".red"とか"#TOC"とか書いてあるのが「セレクタ」です．"h1"は要素セレクタ，".red"はクラスセレクタ，"#TOC"はIDセレクタに該当します．セレクタではもっと複雑な宣言もできますが詳細を知りたい人はCSSを勉強してください．

セレクタの後の"{"と"}"で囲まれた部分に「宣言」を書きます．各宣言の間は";"で区切ります．一つの宣言は"font-size: 170%;"のように，プロパティ"font-size"の値が"170%"と指定します．

"/* コメント */"はCSSのコメントです．

ボックスモデル

ウェブブラウザが，ウェブページに文字や画像などの要素をレイアウトする際，各要素が入る箱を左上から順番にウェブページに詰め込んでいくと考えてください．この箱（ボックス）は，内容，パディング，枠線，マージンという4つの部分から構成されています．CSSで枠線(border)に色を付けると，枠線が表示されます．内容と枠線の間の隙間がパディング(padding)です．枠線は箱の中に入っていますが，箱と枠線の隙間がマージン(margin)です．

もしmarginもpaddingも0にすると，隣り合った内容がぴったりくっついて表示されます．また，p要素に左マージンを取ると，少し下がって（段落全体がインデントされて）表示されるようになります．

この教材のh2見出しとh3見出しは，このボックスモデルを使って以下のようにCSSで見栄えを指定しています．

h2 {
	color: #003300;	                  /* 文字色：薄い緑系の色 */
	background: #FFFFCC;              /* 背景色 ：レモンイエロー系の色 */
	padding: 5pt;                     /* パディング（4方向とも同じ値を使う） */
	border-top: thin solid #003333;   /* 枠線の上側：細い実線で，色は#003333 */
	border-bottom: thin none #003333; /* 枠線の下側：線を描写しない */
	border-left: thick solid #006633; /* 枠線の左側：太い実線で，色は#006633 */
}

h3 {
	color: black;                         /* 文字色：黒 */
	background: #FFFFFF;                  /* 背景色：白 */
	padding: 2pt;                         /* パディング */
	margin-right: 100pt;                  /* 右側のマージンは100pt */
	border-bottom: medium dashed #006600; /* 枠線の下側：中太の波線，色は#006600 */
}

枠線はdefaultでは見えないけれど，CSSで borderを指定すると表示されるようになり，パディングやマージンを調整することで，いろいろアレンジできることがわかったでしょうか．

JavaScript

JavaScriptについて今まで全く説明してきませんでした．JavaScriptは，AjaxなどのWeb 2.0でよく使われる技術で，ウェブにダイナミックなインターラクションを与えます．上手に使えばユーザビリティが向上するけれども，下手に使えば使いにくいサイトになります．そして，いずれにしても（上手に使ったとしても）アクセシビリティを大きく損なうことが多い技術です．従って，JavaScriptを使うときは，ユーザビリティとアクセシビリティに対する配慮が重要です．

JavaScriptの例

JavaScriptの例として，マウスをかざすと大きくなるリンクを作ってみましょう．

JavaScript実習

Ajax用のLibraryを使ったデモもお見せしましょう．

• jQueryを使って目次を自動生成し，コンテンツをタブパネルで表示する
• jQueryを使ったMP3ファイル再生サイト
• Dojoを使ったタブパネル表示

JavaScriptを有効に使うといろいろなことができますが，話が難しくなるのでここでは省略します．（詳細を勉強したい人は大学院の授業を受けてほしい．）

ウェブのユーザビリティ

どんなに凝ったデザインのサイトでも，使いにくければユーザは利用してくれません．そのサイトが使いやすいかどうかは，ユーザの立場に立って考えなければわからないのです．つまり，「ユーザ中心の設計思想（Ucer Centered Design）」に立って，「ユーザビリティ（使いやすさ）」を考えることが重要です．高齢者や障害者をユーザとして考えると，ユーザビリティは必然的に「アクセシビリティ」につながっていきます．ウェブは新しいメディアなので，正しい作り方のルールが定まらないうちに普及してしまいました．今こそ，「ウェブサイトを正しく作る」ことが重要です．

ユーザビリティ

ISO 9241では，ユーザビリティを「特定のコンテキストにおいて，特定のユーザによって，ある製品が，特定の目標を達成するために用いられる際の，効果・効率・ユーザの満足度の度合い」と定義しています．つまりユーザビリティには，3つの下位概念があるわけです．

• 効果：ユーザが特定の目標を正確に完全に達成できること．
• 効率：効果を実現するために必要な資源が多いとか少ないとかいうこと．無駄がないこと．
• 満足：製品の使用に関して不快感が無くて肯定的な態度をもてること．

また，ヤコブ・ニールセンは，「ユーザビリティの特性」として5点を上げています．

• 学習しやすさ
• 効率性
• 記憶しやすさ
• エラー発生率
• 満足度

ISO 9241-151 ウェブのユーザビリティ

ISOでは，ウェブのユーザビリティを取り扱う規格（ガイドライン）として，ISO 9241-151 "Ergonomics of human-system interaction -Part 151: Guideance on World Wide Web user interface"を策定しました．ウェブ・ユーザビリティの要点がよく分かると思うので，ドラフト版の目次（一部）の荒訳（見出しだけを見て訳したので誤訳をしている可能性あり）を下記に示します．詳細は，ISO 9241-151を購入して勉強してください．

• 6 デザイン方針
  • 6.1 原則
  • 6.2 Webアプリケーションの目的を決定する
  • 6.3 ターゲットユーザグループを分析する
  • 6.4 ユーザのタスクを分析する
  • 6.5 アプリケーションの目的とユーザのゴール(意図）を一致させる
  • 6.6 Webアプリケーションの目的を認識する
  • 6.7 異なるデザインゴールに優先度を付ける
  • 6.8 Webコンテンツのアクセシビリティ規格を守る
  • 6.9 ソフトウェアのアクセシビリティ規格を守る
  • 6.10 サイトとその運営者をはっきりさせる
  • 6.11 サイト間の戦略を一貫する
• 7 コンテンツのデザイン
  • 7.1 コンテンツの概念モデル
    • 7.1.1 原則
    • 7.1.2 概念モデルをデザインする
    • 7.1.3 ターゲットグループとタスクに対してコンテンツが適切か
    • 7.1.4 コンテンツの完全性
    • 7.1.5 コンテンツを適切に構造化する
    • 7.1.6 コンテンツの粒度
  • 7.2 コンテンツの対象と機能
    • 7.2.1 原則
    • 7.2.2 コンテンツ，構造，表現の分離
    • 7.2.3 適切なメディアの選択
    • 7.2.4 最新版にメンテナンス
    • 7.2.5 最終更新日時を明記する
    • 7.2.6 サイトの運営者とコンタクトできるようにする
    • 7.2.7 オンラインでユーザからのフィードバックを受け付ける
    • 7.2.8プライバシーポリシーとビジネスポリシー
    • 7.2.9 個人に
• 8 ナビゲーションと検索
  • 8.1 はじめに
  • 8.2 全体的なガイダンスとナビゲーション
    • 8.2.1 ナビゲーションをユーザ主導（self-descriptive）にする
    • 8.2.2 ユーザに自分がいる場所を示す
    • 8.2.3 複数のナビゲーション方法を提供する
    • 8.2.4 別のナビゲーションパスを提供する
    • 8.2.5 ナビゲーションにかかる労力を最少にする
  • 8.3 ナビゲーションの構造
    • 8.3.1 原則
    • 8.3.2 適切なナビゲーション構造を選択する
    • 8.3.3 ナビゲーション構造の深さ対幅
    • 8.3.4 意味をなす方法でナビゲーションを体系化する
    • 8.3.5 タスクベースのナビゲーションを提供する
    • 8.3.6 複数のステップからなるタスクにおいて明確なナビゲーションを提供する
    • 8.3.7 異なるナビゲーション構造を重ねる
    • 8.3.8 有益なホームページ
    • 8.3.9 ホームページから重要な情報に直接アクセスできる
    • 8.3.10 Start (splash) screens
    • 8.3.11 新規ウィンドウを不必要に開かない
  • 8.4 ナビゲーションの構成要素
    • 8.4.1 原則
    • 8.4.2 ナビゲーションの概要を提供する
    • 8.4.3 ナビゲーション用リンクの可視性を保つ
    • 8.4.4 ナビゲーション要素とコンテンツの一貫性
    • 8.4.5 ナビゲーション要素の位置を一貫させる
    • 8.4.6 複数のレベルを可視化する
    • 8.4.7 ナビゲーションの概要を分離する
    • 8.4.8 サイトマップを提供する
    • 8.4.9 重要かもしれないコンテンツにはクロスリンクを張る
    • 8.4.10 動的なナビゲーション要素を明らかにする
    • 8.4.11 ホームページに戻るリンク
    • 8.4.12 上の階層に戻る
    • 8.4.13 「元に戻す」機能を提供する
    • 8.4.14 長いページを分割する
    • 8.4.15 はっきりとしたアクティベーション
    • 8.4.16 リンク切れ
  • 8.5 検索
    • 8.5.1 原則
    • 8.5.2 検索機能
    • 8.5.3 検索結果
    • 8.5.4 検索の利用
    • 8.5.5 再検索と絞り込み
• 9 コンテンツの表現
  • 9.1 はじめに
  • 9.2 人間の知覚に対する注意深い（Observing）？原則
  • 9.3 ページデザイン上の問題
    • 9.3.1 ページ全体の情報
    • 9.3.2 一貫したページレイアウト
    • 9.3.3 一貫したタイトル情報を付ける
    • 9.3.4 新規コンテンツを認識する
    • 9.3.5 一時的な状態を視覚化する
    • 9.3.6 ユーザの（想定）表示画面の大きさにコンテンツをフィットさせる
    • 9.3.7 重要な情報を見るためにスクロールさせない
    • 9.3.8 水平スクロールをしない
    • 9.3.9 色を用いる
    • 9.3.10 フレームは注意して用いる
    • 9.3.11 フレームを使うときは代替策も提供する
    • 9.3.12 関連したサイト間の一貫性
    • 9.3.13 ページレイアウトを決めるときは適切な技法を用いる
    • 9.3.14 サイトのすべてのページを識別する
    • 9.3.15 印刷版を提供する
    • 9.3.16 “white space”の使用
  • 9.4 リンクのデザイン
    • 9.4.1 原則
    • 9.4.2 リンクの識別
    • 9.4.3 隣接するリンクを区別できるようにする
    • 9.4.4 トランザクションとナビゲーションのリンクを区別する
    • 9.4.5 リンクの手がかり（cue）からリンクの目的(target)を推測する
    • 9.4.6 ナビゲーションリンクにはなじみがある用語を用いる
    • 9.4.7 リンクのラベルで説明されるようにする
    • 9.4.8 既読リンクはハイライトする
    • 9.4.9 特殊なターゲットへのリンクに印を付ける
    • 9.4.1 新規ウィンドウを開くリンクに印を付ける
    • 9.4.2 アクションをもたらすリンクとナビゲーションリンクを区別する
    • 9.4.3 ページ内リンクを区別できるようにする
    • 9.4.4 リンクの長さ
    • 9.4.5 冗長なリンク
    • 9.4.6 リンクのやり過ぎを避ける
    • 9.4.7 ブックマークとしてのページタイトル
  • 9.5 インターラクションのObjectを選択する
  • 9.6 テキストのデザイン
    • 9.6.1 テキストの読みやすさ
    • 9.6.2 斜め読みを支援する
    • 9.6.3 ライティングスタイル
    • 9.6.4 テキストの質
    • 9.6.5 情報単位/ページあたりのテキストの質
    • 9.6.6 用いる言語を明確にする
    • 9.6.7 テキストサイズをユーザが変更できるようにする
• 10 デザインに関する一般論
  • 10.1 文化的な多様性と多言語利用に対応してデザインする
    • 10.1.1 原則
    • 10.1.2 Showing relevant location information
    • 10.1.3 Identifying supported languages
    • 10.1.4 Using appropriate formats, units of measurement or currency
    • 10.1.5 Presenting text in different languages
  • 10.2 ヘルプを提供する
  • 10.3 エラーページ
  • 10.4 URLの命名
  • 10.5 許容できるダウンロード時間
  • 10.6 一般的に用いられている技術と標準を用いる
  • 10.7 Webのユーザインターフェースをロバスト（堅牢）にする
  • 10.8 入力デバイスに依存しないようにデザインする
  • 10.9 （ページに）埋め込まれたオブジェクトが利用できてアクセシブルであるようにする

ユーザビリティ向上のポイント

「使いやすいサイトと使いにくいサイトを探す」課題や上記の目次などから，使いやすいサイトを制作するにはいくつかのポイントがあること，そのうちのかなりの部分は皆さんでもできることがわかると思います．

• 表現のデザイン（配色，ページのデザイン）
• 情報のデザイン（分類，コンテンツの配置，適切な見出し，情報量，図や絵の量）
• ナビゲーションを助ける（トップページに戻る機能，グローバルメニュー，タスクベースのメニュー，パンくずリスト，検索機能）
• インターラクションを提供する
• アクセシビリティに配慮する
• 一貫性（デザイン，分類）
• ユーザ中心設計（ユーザが知りたい情報，ユーザが想像するであろうサイト構造やナビゲーションに合わせてデザインする）
• Flashはよく考えて（必要なところに）使う

最終課題に向けて，上記ポイントを実現するいくつかの実装技術も後で紹介します．

ユーザビリティ評価手法

サイトのユーザビリティを評価する方法はいろいろありますが，「標準 ウェブユーザビリティ辞典」（ソシオメディア編著，インプレス発行）の前半「基準編」では，ウェブ・ユーザビリティに必須の基準を100取り上げ，この100の基準を満たしているかどうかをチェックするだけで，サイトのユーザビリティを評価できるようにしています．これ以外の評価手法については，後で詳しく述べます．

「標準 ウェブユーザビリティ辞典」基準編のユーザビリティ原則100

基準編では，5分野に分かれた100個のユーザビリティ原則が上げられています．原則ごとに詳しい説明があるので，自分で学ぶことができます．たとえば，原則ごとに3段階あるいは5段階評価をして，分野ごとの得点を合計すれば，色々なサイトのユーザビリティを定量的に評価・比較することができます．また，足りないところがはっきりするはずです．

• アイデンティティ：サイトとその運営者の表現
• 情報アーキテクチャー：静的な構造とわかりやすさ
• インターラクション：動的な構造とわかりやすさ
• アクセシビリティ：様々な環境やユーザへの配慮
• コンテンツ：表現の最適化

ユーザビリティの仲間？たち

ユニバーサルデザイン

ユーザビリティとユニバーサルデザインの関係　

アクセシビリティ

アクセシビリティとの関係．ウェブのアクセシビリティについては，後で詳しく説明．

楽しいユーザ体験

楽しいユーザ体験とは何か，その重要性．

ウェブの開発プロセス

課題：各自で作成するサイトのテーマ決定

この授業では，最後に数ページ以上で構成されたウェブサイトを各自で作成してもらい，それを評価の対象とします．どんなサイトを作るのかを考え，コンテンツを集める作業を始めておいてください．

参考：最終課題の情報

はじめに

「標準 ウェブユーザビリティ辞典」（ソシオメディア編著，インプレス発行）の後半「プロセス編」では，ユーザビリティが高いサイトを作る上で欠かせない工程を，定義フェイズ，構造フェイズ，実装フェイズ，評価フェイズに分けて詳しく説明しています．以下，この本の後半を簡単にまとめておきますが，詳細はこの本を参考にしてください．

参考：2004年度の渡辺ゼミ3年次演習では，この本を元に「コミュニケーション学科サイト・リニューアル・プロジェクト」に取り組み，今の学科サイトを構築しました．

最終課題で，下記に書いたようなことを全てこなすのは無理だろうと思います．でも，出来る範囲でよいから，下記のようなことを考えて，実践して，最終課題のサイトを構築してみてください．

サイトの目的，ターゲットユーザ，ユーザ要求の決定

• 何のサイトを作りたいですか？ 趣味を紹介するサイト？，サークルのサイト？，授業で学んだことを整理するサイト？
• そのサイトの目的は何ですか？ この授業の最終課題で採点されるサイトである以外に，目的を決めましょう．サークルの情報交換？宣伝？ 趣味に関する情報を整理したい？みんなに知って欲しい？ 授業の復習のため？
• そのサイトは誰が使うサイトでしょうか？（ターゲットユーザ）．サイトの目的がサークルの部員集めなら，ターゲットユーザは部員以外の学生です．サイトの目的がサークル内の情報交換なら，ターゲットユーザは現部員です．（今回の場合，ターゲットユーザはあなた自身かも．つまり，サイトを構築すること自体が目的かもしれません．）ターゲットユーザは何種類あっても構いません．あなたは，ターゲットユーザのためにサイトを作るのだということを忘れないでください．
• あなたのサイトのターゲットユーザは，サイトにどんな情報や機能を求めているでしょうか？（ユーザ要求）．ターゲットユーザを観察したりインタビューしたりアンケートをとったり，あるいはターゲットユーザを何名か集めて話し合ってみたり，色々な方法でユーザ要求を調べることができます．

コンテンツの分類，サイト構造のデザイン，ナビゲーションの確認

• ターゲットユーザが求める情報が分かったら，その情報を揃えましょう．（KJ法を使うために）情報一点ごとに一枚のカード（付箋紙でもよいかも）を作ることをお薦めします．一枚のカードに複数の情報を書いてはいけません．サイトに何を載せればよいか分からなかったら，ブレインストーミングしてもよいと思います．時間をかけて，地道に情報（コンテンツ）を集めましょう．
• コンテンツには文字情報以外に，写真や図表もあるかもしれません．ウェブに適した大きさ（写真の縦横のサイズとファイル容量）の画像ファイルも用意しましょう．
• コンテンツが集まったら，コンテンツを分類しましょう．KJ法が役に立つと思います．仲間同士の情報を集め，グループ化します．小グループができたら，今度は中グループを考えます．最後に5グループくらいになるとよいと思います．どうしてもグループに入らない情報は仲間はずれのままで構いません．グループ化の過程で，そのグループを識別するラベルも自然と決まるはずです．
• コンテンツの中身に基づくグループ化と独立して，タスクに基づくコンテンツの分類をすることもできます．学科サイトなら，受験生が求める情報という視点で分類するわけです．あるいは，コンテンツの中身による分類をするときに，タスクによる分類という視点を混ぜてもよいかもしれません．
• ここまで来たら，サイトの大体の構造が自然と決まります．（トップページは別として）コンテンツをページごとに分類すれば，ページタイトルも自然と決まります．各ページ内のグループは，H2見出しやH3見出しの下に分類できるはずです．ここまで来たら，「コンテンツリスト」を作ってみましょう．しっくり来なかったら，分類からやり直しても良いし，足りない情報を集め直しても良いです．
• ターゲットユーザになったつもりで，欲しい情報に簡単にたどり着くことができるか，目的の情報が適切な分類の下にあるか．余分なパスを通らずにたどりつけるか，チェックしてください．
• 余力があったら，コンテンツ以外に，ページにナビゲーション機能を追加すると良いと思います．全てのページの左上に存在するロゴ（トップページ以外では，このロゴをクリックするとトップページに戻ることができる），全てのページの上部に存在する「グローバルナビゲーション」，パンくずリスト，目次，そういう部品を作ってみてください．Googleを利用してサイト内検索の機能をつけることもできます．
• コンテンツとは別に，どんなデザインのサイトにするかも考えてみましょう．サイトの色使いはどうしましょうか？ パステルカラー？ ピンク系？ 情報が密集した機能的なデザインがよいですか？ 楽しいデザインにしますか？ サイトのメインカラーと補助カラー(1-3色)を決めておいて，その色の範囲でサイトをデザインするようにするとサイトの統一感が生まれると思います．

プロトタイプ作成，XHTML＆CSS実装，評価，公開

• Kompozerで本物を作る前に，画用紙やパワーポイントでプロトタイプ（紙芝居）を作ってみましょう．全てのページのプロトタイプを作って，デザインやナビゲーションを確認すると良いと思います．
• いよいよサイトの作成です．適切なページタイトルや見出しをつけながら，用意したコンテンツをあなたのサイトに流し込んでいってください．見栄えはCSSで指定します．全てのページで同じCSSを使うことで，ページ間の統一性が生まれます．
• 完成したら，文法チェックや，自分を被験者としたユーザテストや，ユーザビリティのチェックをしてみてください．ターゲットユーザにテストしてもらうのも良いと思います．
• 最後に，サイトを公開しましょう．

ナビゲーションの工夫

皆さんが作成するサイトのユーザビリティを向上させるために「最終課題」に利用できる技術を紹介します．（アクセシビリティへの配慮もしてあります．）

目次の作成

Kompozerで目次作成

Kompozerには，目次作成機能があります．この機能を使うと，H1，H2．．．見出しを元に目次リンクを作成し，目次からページの各見出しに簡単にジャンプできるようになります．

まず，目次を挿入したい個所にカーソルを移動します．あらかじめ，「目次」と書いておいて，その直後にカーソルを移動しておけばよいと思います．次に，Kompozerの「挿入」メニューから「目次」，「挿入」と選択すると，目次ダイアログが表示されます．H2レベルまでの見出しのみを目次に含めたいときは，各レベルに対応するタグとしてh3以下が表示されている個所をはずします（つまり，「--」に変更する）．「目次内のすべての項目に番号を振る」チェックボックスは好みに応じて選択してください．（このほか，目次作成に利用する要素のClassを指定することなどもできます．）　最後に「OK」ボタンを押すと，目次が挿入されます．Kompozerは，目次を挿入する際，目次からジャンプする先の見出し要素に，"mozTocH*"というclass属性と"mozTocId*****"というユニークな値のname属性を持つアンカー要素を自動挿入します．そして目次では，そのアンカーに対してページ内リンクを張ります．また，目次のol要素にも"mozToc"というid属性を付けます．

<ol id="mozToc">
<!--mozToc h1 1 h2 2 h3 3 h4 4 h5 5 h6 6-->
  <li><a href="#mozTocId772585">H1見出し</a>
  <ol>
    <li><a href="#mozTocId982316">H2見出し1</a>
    <ol>
      <li><a href="#mozTocId700435">H3見出し1-1</a></li>
      <li><a href="#mozTocId216185">H3見出し1-2</a></li>
    </ol></li>
    <li><a href="#mozTocId313747">H2見出し2</a>
    <ol>
      <li><a href="#mozTocId483104">H3見出し2-1</a>
        <ol>
        <li><a href="#mozTocId929533">H4見出し2-1-1</a></li>
        </ol></li>
      <li><a href="#mozTocId361139">H3見出し2-2</a></li>
    </ol></li>
  </ol></li>
</ol>


<!-- 以下本文 -->

<h2><a class="mozTocH2" name="mozTocId982316" />H2見出し1</h2>

<h3><a class="mozTocH3" name="mozTocId700435" />H3見出し1-1</h3>

<h3><a class="mozTocH3" name="mozTocId216185" />H3見出し1-2</h3>

<h2><a class="mozTocH2" name="mozTocId313747" />H2見出し2</h2>

<h3><a class="mozTocH3" name="mozTocId483104" />H3見出し2-1</h3>

<h4><a class="mozTocH4" name="mozTocId929533" />H4見出し2-1-1</h4>

<h3><a class="mozTocH3" name="mozTocId361139" />H3見出し2-2</h3>

ここまで理解できたら，Kompozerが作成した目次を手で修正するのも簡単でしょう？ 余分なものが目次に含まれていたら，ol要素のリスト構造を壊さないように気をつけてそれを削除すればよいだけです．また，ページを修正して新しい見出しを作ったり見出しを消したりしたときは，自分で目次を修正してもよいし，いったん目次を消して新たに目次を作成してもよいです．

さらに，ページの中で「目次に戻る」リンクを付けたいときにどうすればよいかも分かるはずです．目次のid属性が"mozToc"であることを利用して，そこにリンクを張ればよいのです．（下記リンクにclass属性を付けているのは，CSSで色を付けたりするときに役に立つから．）

<a href="#mozToc" class="TOCBackLink">[目次]に戻る</a>

JavaScriptで目次作成

JavaScriptをページに埋め込むだけで，自動的に目次を作ることも出来ます．実はこのページは，その方法で（ページの読み込み時に動的に）目次を作っています．ウェブブラウザーでこのページのソースを見てください．ソースには目次のリンクがないでしょう！ jQueryを使って，ページをウェブブラウザに読み込むときに見出し要素を調べて，目次を自動生成しているのです．

ナビゲーションの工夫

サイトを作成すると，グローバルナビゲーションのメニューを作りたくなると思います．それも含めて，「最終課題」サイトの「レイアウト例」を元に，ユーザのナビゲーションを助ける仕組みをいくつか解説します．

レイアウト

「文書の構造」の「リスト10 機能ブロックごとにdivで分けて見出し要素をつける例」を具体的に説明します．ページ内の主要要素（ヘッダー，メインコンテンツ，フッター）をclass属性付きのdivブロックにすることで，CSSによって各ブロックをページ内に配置し，ブロックごとのデザインもやりやすくなります．

<!-- ここからヘッダ -->
<div class="LTheader">
  <div id="header">
    <a href="FinalAssignment.html"><img （ロゴ画像のimg要素） /></a>
  </div>
  <div class="navi">
     （グローバルメニュー）
   </div>
</div>
　
<!-- ここから目次 -->
<div class="LTnavi">
  <h2 id="TOC"><a class="mozTocH2" name="mozTocId11869"></a>目次</h2>
       （省略）
</div>
　
<!-- ここから本文 -->
<div class="LTcontent">
  <h1><a class="mozTocH1" name="mozTocId908689"></a>レイアウト例</h1>
    <div class="h2section">
      <h2><a class="mozTocH2" name="mozTocId294887"></a>このサイトで使っている工夫</h2>
            （省略）
    </div>
</div>
　
<!-- ここからフッタ -->
<div class="LTfooter">
  （省略）
</div>

.LTheader {
  background-color: #FFFFCC;
  margin: 0;
  padding: 0.5em;
  border: solid 1px #AAAAAA;
  width: 100%;
}
　
.LTnavi {
  float: left;
  width: 20%;
  margin: 0;
  padding: 0;
  border: 2px outset #AAAAAA;
  background-color: #EEEEEE;
}
　
.LTcontent {
  float: right;
  margin: 0;
  width: 77%;
  padding: 0.5em;
}
　
.LTfooter {
  clear: both;
  margin: 0px;
  padding: 0.5em;
  border: solid 1px #AAAAAA;
  background-color: #CDF9FE;
  text-align: center;
  height: 6ex;
  width: 100%;
}

上記CSSリストで強調表示した個所で，CSSのfloat（回り込み）プロパティを使って各コンテンツ（class属性によって対応するdivブロック）をページ内に配置しています．最後のclearプロパティはfloatプロパティによる回り込みを解除する指定です．（つまり，class属性がLTnaviの要素を左側に，その右側にLTcontentの要素を回り込ませ，LTfooterの要素は回り込みを解除してその前にあるコンテンツの下側に配置．ここまで説明すれば仕掛けの概要はわかると思いますが，より詳しいことを知りたい人は，自分でCSSの仕様や本を調べてください．）

上記のHTMLとCSSをコピペすれば，皆さんのサイトも「レイアウト例」と同じレイアウトになります．CSSの各セレクタ（.LTheaderとか）のwidthなどの値を調整すれば，自分好みのレイアウトになります．

ヘッダー部

ヘッダー部にあるロゴ画像とグローバルメニュー（ナビゲーションメニュー）について説明します．

ページの左上部にサイトのイメージやブランドを表すロゴ画像を表示して，どのページでもその画像をクリックするとサイトのトップページ（index.html）に戻れるようにするとよいと思います．

サイトのページごとにレイアウトなどのデザインを共通にしておいて，その各ページへのリンクをグローバルメニューに表示すれば，サイト内のページの移動が容易になります．ページのデザインが同じなので，違うページに移動してもメインコンテンツが変わるだけで，サイトの一体感が保たれます．下記にグローバルメニューのXHTMLとCSSソースを載せておきます．これを真似すれば，「レイアウト例」と同じものを作ることができます．ここでもfloatプロパティを使っているので，ナビゲーションメニューに使ったul要素の直後の要素で回り込みを解除する（その要素のCSSでclearプロパティを指定する）ことをお忘れなく．

<div class="navi">
  <ul>
    <li><a href="http://www.google.co.jp/">Google</a></li>
    <li><a href="http://e-words.jp/">e-Words</a></li>
    <li><a href="http://ja.wikipedia.org/wiki/">Wikipedia</a></li>
    <li><a href="http://yahoo.co.jp/">Yahoo!</a></li>
  </ul>
</div>
　�<!-- 上記ul要素の直後で回り込みを解除しておく -->
<p style="clear: left;"> </p>

.navi li {
  color: #FFFFFF;
  background: #FF99FF;
  width: 10em;
  text-align: center;
  margin: 0px;
  padding: 0.3em;
  border: 1px solid #CC3399;
  display: block;
  list-style: none;
  float: left;
}

検索

サイト内検索があると便利かもしれません．でも，HTMLはもちろんJavaScriptでも検索機能を提供することはできません（というか，できないことはないと思うけれど実用的ではない）．サイト内検索機能を提供するためには，自分が使っているウェブサーバに検索用のプログラム（サイト内の全ページを調べてどのページのどこにどんな単語が出現するかを記録し，検索に応じてその場所を表示する）をインストールする必要があります．

でも，Googleを使えば，サイト内検索に近い検索機能を提供できます．「Google：リンク，検索機能を追加」の「Google フリー検索 （ベーシック版）: ウェブ検索 + サイト検索」の通りにすれば，www.cis.twcu.ac.jpドメインに限定した検索機能を提供できます．（つまり，学生ごととかサイトごとではなく，大学全体が検索対象になる．） 見本を下記に載せます．

WWWを検索 | www.cis.twcu.ac.jpを検索

大サービスで，上記検索フォームのソースを下記に掲載します．(一行が長いので字を小さくしました．)

<!-- SiteSearch Google -->
<div>
<form method="get" action="http://www.google.co.jp/search">
<table>
  <tr valign="top">
    <td><a href="http://www.google.co.jp/">
      <img src="http://www.google.com/logos/Logo_40wht.gif" style="border: 0; align: absmiddle;" alt="グーグル検索" /></a>
    </td>
    <td>
      <input type="text" name="q" size="31" maxlength="255" value="" />
      <input type="hidden" name="ie" value="utf-8" />
      <input type="hidden" name="oe" value="utf-8" />
      <input type="hidden" name="hl" value="ja" />
      <input type="submit" name="btnG" value="Google 検索" />
      <div style="font-size: small;">
        <input type="hidden" name="domains" value="www.cis.twcu.ac.jp" />
        <p>
          <label for="global_search">WWWを検索</label>
            <input type="radio" name="sitesearch" id="global_search" value="" /> | 
          <label for="cis_search">www.cis.twcu.ac.jpを検索
            <label><input type="radio" name="sitesearch" id="cis_search" value="www.cis.twcu.ac.jp" checked="checked" />
        </p>
      </div>
    </td>
  </tr>
</table>
</form>
</div>
<!-- SiteSearch Google -->

タブ表示

最近，タブ表示でコンテンツを切り換えるサイトが多くなってきました．タブ表示は直感的なので（アクセシビリティに配慮する必要はあるけれど）ユーザにとっては使いやすい方法ではないかと思います．タブ表示を実装する方法はいろいろありますが，タブ表示の例として，「最終課題」の「その他」ページでタブ表示を使ってみました．

そのほかのナビゲーションの工夫

以上で紹介した機能以外にも，パン屑リストやサイトマップなども便利ですね．パン屑リストは，みなさんでも根性さえあれば，各ページに自分で挿入することもできます．サイトマップも同じです．（ふつうは根性で作るのではなくて，て，コンテンツ管理システムなどが，サイトのページ構成に応じて自動生成します．）

Ajaxライブラリの利用

Ajax用のLibraryを使うと，目次やタブパネルなどのナビゲーションに役立つ機能をはじめとして，写真を表示する際に有効な機能など，ユーザビリティを画期的に向上させるインターラクティブなサイトを構築することができますが，詳細は割愛します．下記にデモだけお見せします．

• jQueryを使って目次を自動生成し，コンテンツをタブパネルで表示する
• jQueryを使ったMP3ファイル再生サイト
• Dojoを使ったタブパネル表示

多様なユーザ

ユニバーサルデザインで考慮すべきユーザ

『ユニバーサルデザイン実践ガイドライン』（日本人間工学会編，共立出版）の表I-3-1「ユーザ分類表」では下記のように分類されています．

特別な配慮を必要としないユーザ

健康な成年男子などがここに該当しますね．

感覚機能に配慮すべきユーザ

• 視覚に頼れないユーザ
• 視力に配慮すべきユーザ
• 聴覚に頼れないユーザ
• 聴力に配慮すべきユーザ

運動機能や体格に配慮すべきユーザ

• 車椅子利用者
• 手が使えないユーザ
• 動作に配慮すべきユーザ
• 筋力の弱いユーザ
• 発話に配慮すべきユーザ
• 左利きユーザ
• 小さい／大きいユーザ

認知機能に配慮すべきユーザ

• 初心者／熟練者
• 理解が苦手なユーザ
• 日本語・外国語が読めないユーザ

そのほか

デモグラフィック（社会的）や文化的な差異に対して配慮すべき場合

ウェブページは障害者も利用できるメディアですから，上記すべてのユーザに配慮して制作することが大事になります．

障害の分類

世界保健機関（WHO）で採択された，人間の生活機能と障害の分類法であるICF（International Classification of Functioning, Disability and Health）では，障害者の生活に関して多面的なとらえ方をしています．（厚生労働省が作成した日本語版：「国際生活機能分類－国際障害分類改訂版－」） ICFでは，人間の生活機能と障害を，「心身機能・身体構造」「活動」「参加」の3つの次元に影響を及ぼす「環境因子」と「個人因子」の相互作用として多面的にとらえています．ICFより前にあった分類「ICIDH（WHO国際障害者分類）」が身体機能の障害による生活機能の障害（社会的不利）を分類していたのに対して，ICFでは，生活機能というプラス面から見ることができるように視点を変えました．ICFは障害者だけではなくすべての人の健康状態を扱っています．

WHOの国際分類では，障害を含む健康状態は「ICD-10 国際質病分類第10版」で病因論的に分類されていますが，ICFは健康状態に関する生活機能と障害を分類しています．

ウェブ・アクセシビリティは，ICFの要素の「心身機能・健康状態」による問題点（機能障害や利用制限）を解消するにはウェブをどう制作するべきか，を考えていると言ってよいと思います．ウェブ・アクセシビリティに配慮したコンテンツを増やすことによって，機能障害がある利用者でもウェブを利用できる，彼らの活動（学習，社会参加，コミュニケーション，商売など）を妨げないようにしようというわけです．

ウェブ・アクセシビリティを考える際，病因に焦点を当てたICD-10よりも，ICFの心身機能（Body Functions）に焦点を当てたほうが，ある（特定の）心身機能を持つ利用者のウェブ利用上の問題点を検討しやすいと思います．ICFでは心身機能だけでも極めて細かく分類していますが，ウェブ・アクセシビリティと関連が深そうなものを「国際生活機能分類－国際障害分類改訂版－」からピックアップします．

• 心身機能：

  第1章 精神機能

  全般的精神機能

  b110意識機能，b114見当識機能，b117知的機能，...

  個別的精神機能

  b140注意機能，b144記憶機能，b147精神運動機能，b152情動機能，b156知覚機能，b160思考機能，b164高次認知機能，b167言語に関する精神機能，b172計算機能，...

  第2章 感覚機能と痛み

  視覚および関連機能

  b210視覚機能，...

  聴覚と前庭の機能

  b230聴覚機能，...

  その他の感覚機能

  b265触角，...

  痛み

  ...

  第3章 音声と発話の機能

  b310音声機能，b320構音機能，b330発話の流暢性とリズムの機能，...

  第4章 心血管系・血液系・免疫系・呼吸器系の機能

  ...

  第5章 消化器系・代謝系・内分泌系の機能

  ...

  第6章 尿路・性・生殖の機能

  ...

  第7章 神経筋骨格と運動に関連する機能

  関節と骨の機能

  b710関節の可動性の機能，b715関節の安定性の機能，b720骨の可動性の機能，...

  筋の機能

  b735筋力の機能，b735筋緊張の機能，b740筋の持久性機能，...

  運動機能

  b750運動反射機能，b755不随意運動反応機能，b760随意運動の制御機能，b765不随意運動の機能，...

  第8章 皮膚および関連する構造の機能

  ...

ICFの心身機能の分類を見ることで，配慮すべきユーザを見落とすことを防げそうな気がします．

認知科学的な考え方

ICFの心身機能だけに注目すると，ウェブ・アクセシビリティの対象となるユーザを把握しきれません．「意図をもって行動する人間」のウェブ利用（情報取得や操作）にも注目しなければならないのです．そこで，今度は認知科学に焦点をあて，認知心理学者でもあるD.A.ノーマンの「行為の7段階理論」を紹介します．（参考：『誰のためのデザイン？』，D.A.ノーマン著，野島訳，新曜社）

何かをするときは，何をしたいかという漠然とした目標（ゴール）がある．そのゴールを実現するために人間は意図をもって何かを実行し，その結果が得られる．その結果が意図したものとなっているかどうか評価を行い，ゴールが達成されていればそれで終わる．具体例をあげると，

1. ゴールの形成：このサイトの障害者について書いてある内容を詳細化する．
2. 意図の形成：障害者の公式な分類を勉強しよう．
3. 行為の詳細化・行為の実行：ブラウザにフォーカスを移して，検索窓に「障害」と入れてENTERキーを押す．
4. 外界の状況の知覚：検索結果が表示された．
5. 外界の状況の解釈：検索結果を個別に調べる．
6. 結果の評価：ICFが使えそう．

となります．

あるいは，人間の情報処理過程に焦点を当てて考えると，以下のプロセスで表現できます．

1. 知覚システム：視覚・聴覚・触角などの知覚プロセッサが，それぞれ得た知覚情報を処理し，視覚イメージストアや聴覚イメージストアなどに一時的に情報を蓄える．
2. 認知システム：イメージストアに蓄えた情報の意味を解釈する．処理した情報は短期記憶や長期記憶に記憶される．また，意味の理解や判断なども行われる．
3. 運動システム：認知システムの処理の結果，意図をもって外界に働きかける．

ノーマンの「行為の7段階理論」よりも狭い範囲で人間の情報処理過程を詳細化していることが分かると思います．また，「外界の状況の解釈」や「認知システム」はかなり複雑な過程で，ユーザが持っている知識や経験やメンタルモデルによっても，結果が異なります．ここの判断を誤るとうまくいかず失敗するわけです．

ウェブ・アクセシビリティとの関連

このように考えると，ウェブ・アクセシビリティとは，身体機能の「知覚」障害を補う手段を提供すること，心身機能の「解釈」の問題を回避すること，身体機能の障害による「運動・操作」の問題を回避すること，であることがわかります．そしてこれが，WCAG 2.0の4原則の最初の3つ：知覚，理解，操作に対応しているわけです．でも実際のユーザは，ICFの心身機能にリストアップされているような多様な特性を持ち，複数の障害を持っている場合もあります．つまり，『ユニバーサルデザイン実践ガイドライン』のユーザ分類表にあるように，横軸に心身機能の特性，縦軸に人間の情報処理過程を並べたマトリックス（2次元の表）を作って，セルごとに，どのような問題が生じる可能性があり，どのように配慮すべきか，を検討する必要があります．

ウェブ・アクセシビリティへの対応が難しいのは，この横軸が排他的ではなく，ユーザによって複数の特性を持っていることがあります．たとえば，ユーザによって知識や経験が異なりますので，身体機能に障害があっても上手に問題を回避できるユーザもいれば失敗しやすいユーザもいます．また，同じウェブコンテンツであっても，ユーザによってその利用目的が異なるかもしれません．このように多様な要因が関係するので，「（障害を持つ）特定のユーザが，（支援技術をはじめとする）特定のユーザエージェントを使用して，特定のコンテンツを，特定の目的を持って利用する」ことをあらゆる場合に可能にしようというウェブ・アクセシビリティの達成を難しくしています．でも，すべての場合をカバーできなくても，（頻繁に生じる問題や致命的な問題などの）大事なところだけでも回避できていれば，ウェブ・アクセシビリティへの配慮に成功していると言えると思います．

なお，ここで高齢者について特に取り上げなかったのは，高齢者だから問題があるのではなく，高齢になると生じやすい心身機能の特性がウェブ利用の妨げになるからです．

ウェブのアクセシビリティ

『Webアクセシビリティ～ 標準準拠でアクセシブルなサイトを構築/管理するための考え方と実践～』（毎日コミュニケーションズ）が，ここに書いてあることを詳しく解説しています．本章では，この本の第1章「Webアクセシビリティを理解する」から，要点だけを取り上げます．第1章はウェブで公開しているので，皆さんも是非読んでみてください．

ウェブアクセシビリティの構成要素

ウェブのアクセシビリティを向上させるためには，どこに気をつければよいのでしょうか？ ウェブの制作者だけに責任があるのでしょうか？ それを考えるためにまず，ウェブアクセシビリティを構成する要素をまとめます．

Webアクセシビリティの各構成要素をカバーするW3C WAIのアクセシビリティガイドライン
（UAI研究会訳「Webアクセシビリティ」第1章の図1-12を引用）

障害者・高齢者が出会う問題

前章で述べたように，「横軸に心身機能の特性，縦軸に人間の情報処理過程を並べたマトリックス（2次元の表）を作って，セルごとに，どのような問題が生じる可能性があり，どのように配慮すべきか，を検討」しなければ，障害者や高齢者が出会う問題を網羅することはできません．でも，たとえばWCAG 2.0は，専門家が集まって議論することにより，これらの問題をすべて検討し，重要なものをガイドラインや達成基準として列挙しているはずです．ここでは，全盲のユーザのウェブ利用の特徴を紹介します．

全盲の視覚障害者の音声によるウェブ利用の特徴

支援技術

前章に書いたように，ウェブ・アクセシビリティとは，「（障害を持つ）特定のユーザが，（支援技術をはじめとする）特定のユーザエージェントを使用して，特定のコンテンツを，特定の目的を持って利用する」際に生じる問題を考えることなので，あるいは「ウェブアクセシビリティの構成要素」の一つに「（支援技術，ブラウザ，メディアプレーなどの）ユーザエージェント」があるので，ウェブ・アクセシビリティを考えるためには，ユーザが用いている技術について知る必要があります．

すべてを紹介することはできないし僕も知らないので，ウェブの音声利用を可能にする技術に焦点を当てます．

スクリーンリーダ，音声ブラウザ

PC Talkerと95Reader

...

JAWS

...

ホームページ・リーダー

...

Window-Eyes

...

NVDA

UAI研究会で日本語版NVDAを開発中

Fire Vox

詳細は，Univ-Webのサイト参照

その他の国産技術

...

ウェブの音声利用の特徴や，スクリーンリーダを音声利用する際に生じる問題を知るには，（制作者が）自分で使ってみることがとても有効です．オープンソースでもあるNVDAはインストールの敷居が低いと思いますので一度お試しあれ．

その他

ガイドライン

障害者や支援技術に詳しくなくても，ガイドラインを参考にし，ガイドラインが求めるポイントを満たすことで，ある程度アクセシブルなウェブサイトを構築できます．（ただし，ガイドラインに準拠しているだけでは，アクセシビリティを確保できないと思います．何らかの形のユーザテストが必須でしょう．）

W3C

世界的にはWCAG（Web Content Accessibility Guidelines）がデファクト・スタンダードになっています．

• Web Content Accessibility Guidelines (WCAG) 2.0 (WCAG 2.0 和訳)
• WCAG 2.0の解説書：Understanding WCAG 2.0 (Understanding WCAG 2.0 和訳)

また，少しバージョンが古いですが，「情報アクセシビリティ国際標準化セミナー「JIS X8341-3(ウェブコンテンツ)とW3C WCAG2.0 の協調 －最終草案に見るWCAG2.0の方向性－」（2006年11月27日）におけるWAI関係者の発表資料も参考になると思います．

• Judy Brewer: W3C が進める Web アクセシビリティ
• Shawn Henry: WCAG 2.0入門
• Michael Cooper: WCAG 2.0 の技術解説

JIS X 8341-3

JISは有料ですが，下記資料を見れば，JIS X 8341-3の個別要件の内容と，(X)HTMLやCSSでどう対応すべきかが分かると思います

JIS X 8341-3:2004「高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－ 第3部：ウェブコンテンツ」技術解説（委員会ワーキングドラフト，2005年7月22日）

JIS X 8341-3は，WCAG 2.0を取り込んだ形で改正作業が完了しました．2009年度第3四半期発行の予定です．

ISOや英国の規格・ガイドライン

• ISO 9241-151:2008"Ergonomics of human-system interaction -- Part 151: Guidance on World Wide Web user interfaces"（英語，有料）
• PAS78 "Guide to good practice in commissioning accessible websites"（英語，無料で利用可能）

サイトの評価

文法チェック

作成したウェブページが文法(DTD)通りにウェブページが書かれているかどうかチェックしてみましょう．

HTML Validation Serviceをブラウザで開いて，ローカルにあるファイルを指定してください． DTDの仕様と一致していたら"Passed validation"と表示されます．そして，XHTML 1.0に適合していることを示すマークをページに貼ることができます．

また，「Another HTML-lint gateway」も使ってみてください．非常に厳しく採点するので，最初は得点が負の値になるかも知れません．このサイトで満点を取るためには，ある程度の文法の知識を持ってソースを直接編集する技能が必要です．

評価ツール（テストツール，チェックツール）

「アクセシビリティなどのチェックツール類」参照

ガイドライン

「ガイドライン」参照

その他の，しかし重要な手法

文法チェックをはじめとするチェックツールは，誰でも簡単に用いることができますが，それだけではユーザビリティやアクセシビリティは計れません．これらのチェックツールを常時に併用しながら，チェックツールで測定できない箇所を他の方法で補うことが，とても重要です．

『ユーザ工学入門 －使い勝手を考える・ISO 13407への具体的アプローチ－』（黒須他，共立出版）の2.2節「分析と評価の技術」及び第3章「ユーザ分析の手法」と第4章「ユーザビリティ評価の手法」が，重要な手法について勉強するのに最適だと思いますが，特に下記が大事だろうと思います．

• チェックリストを併用したヒューリスティック評価
• ユーザテスト

ウェブの未来

Interactive Web

JavaScript（DHTML），Spry等のライブラリ

Flash，Flex

Semantic Web

まとめ

参考情報

ウェブブラウザ

WindowsではInternet Explorer，Mac OS Xでは，Safariが標準ウェブブラウザですが，これ以外にもNetscape，Mozilla，Firefox（これら3つは実は仲間），Opera，Google Chrome，lynx，w3m，などなど，たくさんのブラウザがあります．

私は，この中でも，軽くて使いやすく，ウェブ標準に準拠することを明言していて，先端のWebアクセシビリティ技術仕様に対応していて，アクセシビリティをはじめとする有用なツールが豊富に提供されていて，WindowsでもMac OS Xでも無料で利用できる，Firefoxをお薦めします．

Firefoxには，便利な拡張機能がたくさんあります．ちなみに私のお薦めは，Tab Mix Plus，IE View，All-in-one Gestures，DocumentMap，Web Developer，Firefox Accessibility Extension，Firebug，，などなどです．

オーサリングツール

ウェブサイトを作成するにはいくつかの方法がありますが，オーサリングツールと呼ばれるウェブサイト作成支援ソフトを使うことを推奨します．日本でよく使われるオーサリングツールを以下にリストしますが，DreamweaverとKompozerをお薦めします．

Macromedia Dreamweaver 8

プロ用とされているオーサリングツール．WCAGやJIS X 8341-3の解説やチェックも可能．それ以外にもウェブサイト作成を大幅に楽にしてくれる有用な機能が満載．基本的な使い方を取得するのは難しくないし，エデュケーション版は値段も高くない(17,000円)ので，一押しです．

IBMホームページビルダー

家庭用ソフトとして販売されている．「どこでも配置モード」を使うと，アクセシビリティにも利用の可搬性にも欠けたページになるので，「どこでも配置モード」を使ってはいけない．しかしこれ以外の場合では，HPBを上手に使えば，アクセシビリティに配慮したウェブページを作成できる．

Microsoft Frontpage

（ほとんど使っていないので評価できない）

Kompozer

無料ソフト．WindowsでもMac OS Xでも利用できる．ソースを書く作業が不要になるようにデザインされているので，(X)HTMLやCSSの細かな文法を覚えていなくても，ウェブの標準に 即したページを作成できる．CompIIDの授業では，これを用います．Kompozerのインストール方法や使い方などは，「Kompozerを用いたウェブ作成」を参照されたし．

HTML Project2

Dreamweaverに近い機能を持った安い又は無料のソフトはないかと探していて見つけたソフト．「強力なキー入力支援、カスタマイズ機能、HTMLファイルのプロジェクト管理機能、およびCSS2に完全対応したスタイル設定機能を特徴とするタグ挿入型エディタ」（HTML Project2の ウェブサイトから引用）．私自身は使ったことはないが，ウェブサイトを見てみると，(X)HTMLとCSS2を用いた標準準拠のウェブサイト作成に対する 意識が作者にあることが感じられる．無料のソフトなので，Dreamweaverを購入できない人は使ってみると良いかもしれない．

作者に(X)HTML及びCSS2の知識がある場合，オーサリングツールを使わなくても，標準に準拠したウェブサイトを作成できます．また，ウェブの標準を勉強したい場合は，オーサリングツールに頼らずに，エディタを使って自分で書いてみることも大事だと思います．

WZエディタ＋XHTMLプラグイン

(X)HTML及びCSS2の編集に対応したテキストエディタ．「WZエディタとXHTMLプラグインは、テキストエディタとしてできる HTML文書作成のための自動化や補助を、徹底的に追及したツールです。DTDに準拠したタグ属性を間違いなく書くための手助け、段落のフォーマットを素 早く整えるタグの補完、文章を推敲して練り上げるための見出しのアウトラインツリー表示、見出しを抽出して目次を生成するなど、思考を妨げないサポートを 徹底しておこないます。『余計なお世話』とは絶対に言わせない、手に馴染む筆記具。それがWZエディタが目指す姿勢です。XHTMLプラグインは、 HTMLやスタイルシートの基礎を学ぶ人から文法の正しさにまで気を使うHTMLに熟達した人まで、研鑚されたユーザインターフェイスでサポートいたしま す。」(XHTMLプラグインのウェブサイトから引用)．
WZエディタのダウンロードから30日間体験版をダウンロードしたり，製品版（6800円）をダウンロード購入したりできる．（Dreamweaverを使う前は，これとEmacsの両方で私はHTMLの編集をしていました．）

秀丸エディタ

コミュニケーション学科推奨ノートPCにインストールされているエディタ．アカデミック利用では無料で使用できる．HTMLに対応した表示ができることは知っているが，(X)HTML及びCSS2に対応した編集や入力支援ができるかどうかは確認していない．

アクセシビリティなどのチェックツール類

以下のツール類をそろえておく（ダウンロード，ブックマーク，購入）ことをお薦めします．ほとんどのツールはFirefoxでしか使えないのでFirefoxも必須です．

富士通アクセシビリティ・アシスタンス

Javaで動作する無料のツール．WindowsでもMac OS X でも利用可能．

• WebInspector：JIS X 8341-3「高齢者・障害者等配慮設計指針-情報通信における機器、ソフトウェア及びサービス-第3部：ウェブコンテンツ」に対応したチェックが可能であるそうです．癖があるので注意して使うこと．
• ColorSelector：視認性の高い背景色と文字色の組み合わせをリアルタイムに確認可能なツールです．（色関係のチェックに便利なのでお薦めです）
• ColorDoctor：色覚特性に応じた見え方をシミュレートするツールです．

Web Developper (Firefox版)

テーブル枠の表示，id属性とclass属性の表示，CSS編集など、便利な機能が多く含まれているツール．必須ツールですよ．

WAVE Toolbar (Firefox版)

英語版しかないけれどページの構造を視覚化して見せてくれるのでとても便利．お薦めです．

HTML Validator (Firefox版)

HTML文法チェッカーのFirefox用アドオン．便利です．

FireBug (Firefox版)

Ajaxなサイトの解析に必須です．

Firefox Accessibility Extension

リンク一覧，見出し一覧，アクセスキー一覧を見たり，画像やCSSを切り替えたり，いろいろと便利なことができるツール． WAI-ARIAに関連したチェックも可能．

IBM aDesigner

Javaで動作するツール．アカデミックライセンスの条件下では無料で利用できる．WebページやFlashで視覚障害者が体験する問題を，晴眼者にもわかりやすく視覚化してくれる．ソフト自体は日本語化されている．英語で書かれているACTFプロジェクトのダウンロードページにあるZIPファイルのリンクをクリックしてダウンロードし，パソコンで解凍すればWindowsで利用できる．

NVDA (Non Visual Desktop Access)

オープンソースのスクリーンリーダ．Firefox3と使うことにより高機能を発揮する．日本語版も開発中．

Fire Vox

Firefoxを音声化するアドオン．日本語でも使える．

文法チェッカAnother HTML-lint gateway

(X)HTMLの仕様はアクセシビリティに配慮して作成されているので，(X)HTMLの文法を遵守するだけでも，アクセシビリティは向上します．

W3C Validator

上記文法チェッカと同様，(X)HTMLに即しているかどうかを検証してくれる．

W3C CSS検証ツール

CSSが正しいかどうか検証してくれる．

参考文献

益子他：「現場のプロから学ぶXHTML+CSS」毎日コミュニケーションズ．

この授業の初級編の一部と中級編で使用します．

Thatcher他著，UAI研究会訳，渡辺他監修「Webアクセシビリティ -標準準拠でアクセシブルなサイトを構築/管理するための考え方と実践」，毎日コミュニケーションズ．

標準準拠でアクセシブルなサイトを構築・管理するための考え方と具体的な技術例や実践例が満載された本．ウェブアクセシビリティの専門家は必読．「1章：Webアクセシビリティを理解する」はWebで公開しています．

ソシオメディア編著：「標準 ウェブユーザビリティ辞典」，インプレス発行

本サイトでも頻繁に引用しました．とても良い本だと思います．

富士通株式会社 総合デザインセンター著：「よくわかる Webアクセシビリティ＆ユーザビリティ」，FOM出版

ウェブのユーザビリティとアクセシビリティに関して，わかりやすく書いてある．富士通のチェックツールも同梱されているので，初心者には適していると思う．ただし，JIS X 8341-3とは少し内容がずれている．

「HTML&XHTML」，C. Musciano, B. Kennedy著，原訳，オライリー・ジャパン．

(X)HTMLの文法について詳しく書いてある．

「CSS完全ガイド」，，オライリー・ジャパン．

CSSの仕様について詳しく書いてある．

(X)HTMLやCSSの解説書．

たとえば，「スタイルシート辞典」，(株)アンク著，翔泳社．

「ユニバーサルHTML/XHTML」，神崎正英著，MYCOM．

図書館にあるので，ユニバーサル・ウェブに関心を持った人は，一度読んでみてください.

ウェブの仕様書

W3Cにある仕様書がウェブの標準技術の原典となります．

• XHTML 1.0: The Extensible HyperText Markup Language (XHTML 1.0 和訳 例)
• HTML 4.01 Specification (HTML 4.01 和訳 例)
• Cascading Style Sheets, level 2 Specification (和訳 例)
• Web Content Accessibility Guidelines (WCAG) 2.0 (WCAG 2.0 和訳)

リンク集

• W3Cのウェブサイト；W3C
• W3Cの誰もが使いやすいWWWの活動；WAI (Web Accessibility Initiative)
• W3Cのガイドラインの日本語訳集；W3Cの仕様書等の文書の日本語訳集
• W3CにあるHTMLのチェックサイト；HTML Validation Service
• W3CにあるCSSのチェックサイト；W3C CSS 検証サービス
• HTMLのアクセシビリティチェックサイト；Bobby
• HTMLの文法チェックサイト；Another HTML-lint gateway
• 情報バリアフリーのための情報提供サイト
• infoaxia：インフォアクシアは，Webアクセシビリティを理解して実践するためのポータルサイトです．
• AAO：A.A.O. (Allied-Brains Accessibility Online) は，アライド・ブレインズ株式会社が運営するアクセシブルなウェブをめざす提供者と利用者のための実用サイトです．
• The Web Kanzaki「簡単なHTMLの説明」：（アクセシビリティにも配慮した）HTMLの説明を具体例で示しています．
• JIS X 8341-3 技術解説ワーキングドラフト
• UAI（Universal Access to the Internet）研究会
• 渡辺のホームページ
• Universal Web

このページのスタイルシート(nabe_article.css)やJavaScript(SmartDoc.js)はSmartDocをベースにしています．

© 2005-2009, Takayuki Watanabe