202 INTERNET magazine 2000/11

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

Calligraphy:Hiroko Shiokara

サ
イ
ト
が
で
き
る
︒

け
れ
ば
︑
あ
ら
ゆ
る
人
に
喜
ば
れ
る

正
し
い
Ｈ
Ｔ
Ｍ
Ｌ
の
作
法
を
身
に
付

し
よ
う
︒

ば
な
ら
な
い
ポ
イ
ン
ト
を
総
ざ
ら
い

作
成
す
る
と
き
に
気
を
付
け
な
け
れ

う
人
の
た
め
に
︑
ウ
ェ
ブ
サ
イ
ト
を

け
ば
い
い
の
か
わ
か
ら
な
い
﹂
と
い

ト
は
揃
え
た
け
ど
︑
実
際
に
ど
う
書

こ
の
特
集
で
は
︑
﹁
入
門
書
や
ソ
フ

方
が
必
要
な
の
だ
︒

り
入
れ
た
適
切
な
Ｈ
Ｔ
Ｍ
Ｌ
の
書
き

シ
ビ
リ
テ
ィ
ー
﹂
と
い
う
考
え
を
取

﹁
ユ
ー
ザ
ビ
リ
テ
ィ
ー
﹂
と
﹁
ア
ク
セ

手
に
作
る
わ
け
に
は
い
か
な
い
︒

の
ホ
ー
ム
ペ
ー
ジ
の
よ
う
に
好
き
勝

ト
の
作
成
を
任
さ
れ
た
人
は
︑
個
人

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

こ え ウ つ 会
う る ェ の 社
し ︒ ブ は や
は 当 役
た
公 た 所
時
的 り が
代
な 前 ウ
に
メ に ェ
は
デ な ブ
︑
ィ っ サ
ウ
ア た イ
ェ
だ 現 ト
ブ
と 在 を
サ
イ
言
持
︑
INTERNET magazine 2000/11

203ユーザビリティー＆アクセシビリティーの発想を取り入れよ！
私たちの生活や仕事の玄関としての役割を担おうとしているウェブサイト。
その姿を根底からくつがえすようなムーブメントが、ウェブ先進国の米国を中心に世界に広がろうとしている。
今まさに日本にもその波が押し寄せようとしている「ユーザビリティー」と「アクセシビリティー」の発想。
これをベースにしたウェブサイトのデザインや構築方法について考えてみよう。（篠原稔和）! ユーザビリティー 〜利用者の反応を取り入れる「ユーザビリティー」（Usability）とは、日ために欠かすことのできない活動なのだ。

ブ・ユーザビリティ』の著者であるヤコブ・

本語に訳すと「使い勝手、使いやすさ、わかユーザビリティーの権威で、全米でベスト

りやすさ」となる。ユーザビリティーは、さ

セラーとなり先頃日本でも出版された『ウェニールセンは、ユーザビリティーの特性を5つにまとめている。

まざまな製品を利用者にとって使い勝手のよ
いものにするために、利用者の反応や意見を●ユーザビリティーの特性

デザインワークに取り入れていく活動そのも□「学習しやすさ」のだ。そもそもは、ハードウェアやソフトウェ□ 「効率性」

アの製品開発や評価の現場で長年にわたって□ 「記憶しやすさ」

培われてきたもので、たとえば切符の自動発□ 「エラー」

券機や銀行のATM などの公共的な機械を少□ 「主観的満足度」

すぐに使って簡単に学習できるかどうか。

一度使うと高い生産性を上げられるようになるかどうか。
しばらく使わなくても再び使うときに覚え直さなくても済むかどうか。

エラーが少なく、たとえエラーが起こっても簡単に回復できるかどうか。
個人的に満足できて、使うことが楽しくなるようになっているかどうか。

しでも利用者にとって使いやすいものにする! ユーザビリティーを実践する2つの方法
ウェブサイトに対しても使い勝手を向上さをチェックしていく方法。ニールセンの書籍を友達に声を出してもらいながら操作してもせるために「ユーザビリティー」の考え方がや、ウェブサイト上で公開されているデザイ

らうだけで、改善のためのヒントを得られる

積極的に応用され始めている。ユーザビリテ

ンガイドライン（たとえばイエール大学のもこともある。

ィーの発想を取り入れたウェブサイトは、情のWeb Style Guide

報を発信する側の考えを優先するのではなく、とが有効だろう。

）を参考に、ポイントを確認するこ

使い手の立場に立ってデザインし、構築して2 実際に利用者の声をいくことになる。たとえば、使い手の操作環引き出す「ユーザビリティ

境に配慮した表現方法を選択したり、利用ーテスト」を実施するこ者の立場にたった情報の並べ方や見せ方などと。これは、さまざまな角を考えたりしていくのだ。これを実践するに度から検討された質問をは、おもに2つの方法がある。

利用者に投げたり、利用

1 さまざまな製品で試みられてきたテスト者が発する声を聞いたりしの結果や黄金原則、ウェブサイトのユーザビながら、その内容や分析

リティーテストで発見された数多くの法則やの結果をデザインに反映さ方法論、それらをまとめたガイドラインなど

せていくことだ。たとえば、に従って、自分のデザインしたウェブサイト

自分のデザインしたサイト

204 INTERNET magazine 2000/11

info.med.yale.edu/caim/manual/●これまでのウェブデザイン

製作者の意図●ユーザビリティーを考慮したウェブデザイン

ユーザーの視点
製作者の意図インターネットマガジン／株式会社インプレスR&D

ウェブサイト：あるウェブサーバー上に公開されている企業や個人のページをまとめたもの。
「ホームページ」と呼ばれることが多いが、本来ホームページとはブラウザーを起動したときに表示されるページや、ウェブサイトの入り口ページを指す。
©1994-2007 Impress R&D

! アクセシビリティー 〜すべての人が利用できるページ作り
ユーザビリティーに加えて、最近では「アクデザインを目指す運動）と連動しており、これセシビリティー」（Accessibility）もウェブのデからのデザイナーや制作者にとって欠かすことのザインと構築の際に欠かすことのできない視点とできない視点なのだ。

なっている。アクセシビリティーとは、ウェブのアクセシビリティーは障害を持つ人たちだけをコンテンツが障害を持つ人たちにとってもアクセ対象にしているわけではない。さまざまなバージ

スしやすいものになるように配慮することを意味

ョンのブラウザーや異なし、そのガイドラインがW3C によって策定される環境下での操作性にている（215 ページ参照）。

も関連する問題だ。新

W3C のガイドラインには、グラフィカルなブ

たなインターネットのプ

ラウザーを対象としたコンテンツには代替手段をラットフォームとして爆必ず用意することや、色、言語、ナビゲーショ

発的に普及しているi モ

ンなどの問題、文章表現にわたるまで、コンテードなどの携帯端末に向ンツをアクセスしやすくするためのルールが記載

けたサイト作りにも役立されている。世界中のウェブサイトがこれを準拠つだろう。

●アクセシビリティーを考慮したウェブデザイン

視覚的なブラウザー
音声読み上げ画像、プラグイン
代替テキスト<HTML>---------------------------------</HTML>すべきルールとして採用する動きにある。この動コンパクトな内容

携帯端末

きは、製品における「ユニバーサルデザイン」（身体障害者や高齢者などすべての人にやさしい! 顧客を逃がすな！
今欧米では、ユーザビリティーやアクセシ「Alert box」でユーザビリティーのトレンドを知るは、『ウェブ・ユーザビ

ニールセン氏は全米を中心に数多くのイベ

ビリティーに配慮したウェブサイトでなけれ

リティ』の著者でニールセン・ノーマ

ントでのキーノートスピーチを務めている。

ば、顧客が逃げてしまい、時間を費やす価値

ン・グループ（NNG）の代表を務めるヤコ

来年2 月には、NNG のワールドツアーの一のないものとして葬られ、これを理解できな

ブ・ニールセン氏が隔週で連載するウェブ

環で、ドナルド・ノーマン氏をはじめとしいデザイナーは職を失ってしまうとまで言わサイト上のコラムだ。毎回インターネット

た同グループのメンバーとともに来日するれている。数多くのウェブサイトが誕生し、やウェブサイトに関するさまざまなトピック

予定だ。

仕事や生活の一部として使われるようになっを取り上げ、利用者中心のインターフェイてきた日本も、すでに同じ状況を迎えようとスの実現に向けて、まさに鋭い「警鐘」

しているに違いない。ユーザビリティーやアク（Alertbox）を鳴らし続けている。

セシビリティーのマインドを持つことができれ

このコラムは、1995年5月以来5年間にわば、ウェブサイトの未来をしっかりと捉える

たって100 回を超える連載となっており、ことができるだろう。

最近では1 コラムにつき約21 万ページビュ「Alertbox」

ーを獲得するという、世界が注目するウェ
ブの金言集となっている。これまでで一番
人 気 の あ っ た コ ラ ム は 、「 Top ten
mistakes of Web design」（ウェブサイトの間違いトップ10）。現在でも月間4 万ペ

篠原稔和（しのはら・としかず）
ソシオメディア
代表。情報デザインやユーザビリティーを実践 するコンサルティング、
講演、執筆に従事。訳書・監訳書に『情報アーキテクチャ入門』（オライリー・ジャパン刊）、『ウェブ・ユーザビリティ』（MdN 刊）ほか多数。
www.sociomedia.com

Alertbox

ージビューを獲得し続けている。この10 原則は、ウェブにおけるユーザビリティーのガ
イドラインとして利用されており、ウェブ

www.useit.com/alertbox/

ウェブ・ユーザビリティ（MdN 刊、定価 2,800 円）

デザイナー必見のルールとなっている。

インターネットマガジン／株式会社インプレスR&D

www.mdn.co.jp/Books/

W3C（ダブル・スリー・シー／ World Wide Web Consortium）：WWWの発展との相互運用性の確保のために、企業や研究所、大学をメンバーとして設立された世界的な組織。
HTMLやCSS、XMLの仕様書を勧告として公開している。
©1994-2007 Impress R&D

INTERNET magazine 2000/11

205

H T
ML

ユーザビリティーのチェックポイントはこれだ

使いやすさで訪問者の心をつかめ！
ウェブサイトの基本は利用者の視点に立ったユーザビリティー。せっかく苦労していい内容のものを作っても、使いづらいページではユーザーは逃げていく。ロゴや背景画像ばかりに凝ったりしないで、まず「上手に伝える」ことに気を使おう。（神崎正英）

1 ユーザビリティーは全体の設計から
ユーザビリティーに優れたサイトを作る

作ろうとしているのに、会社の組織に合わ出しなどの要素が同じスタイルで表現され、には、まずサイト全体の設計から考えていせて事業部ごとに別々の入り口を設けてい

統一感が生まれる。デザインを修正する場

くことが重要だ。ウェブサイトを作る方法ては、利用者はどこで買い物ができるのか

合でも、スタイルシートのファイルだけをには、どんな材料があるかを考えてそれをがわからない。また、初心者を対象にした変更すれば済むので、メインテナンスの効積み上げて構築していく「ボトムアップ」

情報サイトならできるだけシンプルな階層率も大幅に向上する。

の手法と、全体の設計図に基づいて制作構造が望ましいが、業界通向けならトップしていく「トップダウン」の手法がある。

ページから目的地へ近道を豊富に用意する

利用者にわかりやすく、制作者にもメインほうが使いやすいだろう。利用者はサイト

最後にファイルを配置するディレクトリ

テナンスしやすいサイトを作るためには、右を見るときにどんな予備知識を持っているー（フォルダー）の構造を決める。メイン

ページの図のようなトップダウンのアプローのか、何を期待しているかを意識しながらテナンスのしやすさと拡張性に注意しよう。

チが欠かせない。

設計することが大切だ。

ファイル名のルールをきちんと決めておく

1.コンセプト

4.URL設計

全体設計をしたうえで、ページの関係をことが大切だ。共通する画像などを置くた

わかりやすくするナビゲーションや、サイめのディレクトリーも用意して、ファイルが散逸しないように設計する。

サイト構築の第一歩は、コンセプトの設

トのアイデンティティーのあり方を検討し定、つまり「誰に向かって」というターゲていく。ナビゲーションとアイデンティテ

ディレクトリーの分け方は、将来コンテットと「何を何のために」という目的の確

ィーのデザインを一体化させると、一貫しンツが増えたり担当セクションが変わった認だ。

た移動手段を提供することにもなり、安心

りしても移動の必要がないような方法を採

2.コンテンツ

感を与えられる。アイデンティティーはロ用すべきだ。たとえば輸入品のページでゴマークだけではない。各ページのマージ「/imports」というディレクトリーを用意

コンセプトが明確になったら、コンテンンの取り方や見出しの表現方法、コラムのすると、その商品が国内生産に移行したらツ案を練り上げていく。手元の材料ででき背景色などを統一すれば、サイトの個性がURL も変更せざるを得ない。扱う商品がる内容もあるだろうし、新たに取材したり生まれる。こうした要素を常に同じ手法で増えた結果、サブディレクトリーに再分類調査したりする必要も出てくるだろう。常表現すれば、情報の意味もいっそうわかりするときにも同様の変更が生じる。

に目的とターゲットを念頭に置いてコンテやすくなるはずだ。一貫性のあるデザイン

URLを変えると、リンクやブックマーク、ンツを考えることで、場当たり的でない整には、スタイルシートを活用しよう。デザ検索サイトの登録が無効になり、せっかく合性の取れたサイトができる。

イン設定を1 つのスタイルシートにまとめ、の訪問ルートを閉ざしてしまうことになっすべてのページからて、マーケティング上も大きなマイナスだ。

3.サイト設計

URLは商品のブランドと同様の財産であるコンテンツ案がそろったら、想定する利用者にメッセージがうまく伝わるようにコ<link rel="stylesheet"という認識を持つようにしたい。できるだ

href="mystyle.css" type="text/css">

け状況に左右されないカテゴリーを設け、その中では日付を基準にしたサブディレク

ンテンツの配置を設計しよう。このとき重要なのは、利用者の視点で構造を考えるという形でスタイルシートのファイルにリントリーを設けて分類するのが比較的安全なことだ。たとえば、オンラインショップをクしておく。どのページでもマージンや見方法だろう。

206 INTERNET magazine 2000/11

インターネットマガジン／株式会社インプレスR&D

スタイルシート：HTMLやXMLなどタグ付き文書を表示したときの視覚的効果を指定するための仕組み。CSS（Cascading Style Sheets）やXSL（eXtensible Style Language）がある。CSSは、インターネットエクスプローラ3以降とネットスケープナビゲーター4以降でサポートされた。
©1994-2007 Impress R&D

2 どこからアクセスしてもわかるサイトに書物と違ってウェブサイトは現在の位置が全体のどのあたりなのかを把握するのが難しい。初めての利用者は、適切なサポートがないと手探りで使うことになってしまう。利用者

注 1 HTML では「< 開始タグ> 内容</終了タグ>」全体を「要素」と呼ぶ。たとえば「<a>〜</a>」は「a要素」。
注2 UNIX やウィンドウズなどに対応したテキストブラウザー。

lynx.browser.org

注3 HTML 4.0に完全対応したマッキントッシュ用のブラウ
ザー。

www.icab.deがサイトで迷子にならないようにするには、ナビゲーションをきちんとしてあげることが大切だ。すべてのページに一貫した形でサイトのトップページ（もしくはサブコンテンツのトッ

リスト1プページ）へのリンクを用意しよう。ナビゲーションをデザインに組み込んでおくと、検索サイトなどからの来訪者はどこにたどり着いてもそのサイトに来たことが一目瞭然で、使いやすいうえに統一感を与える効果もある。
一つながりのページには、前後のページや目次へのリンクもわかりやすく示<head><link rel="prev" href="ch01.html" title="第 1 章"><link rel="next" href="ch03.html" title="第 3 章"><link rel="toc" href="toc.html" title="目次">しておく。リンクは「前」や「次」ではなく「第 2 章：論理タグについて」のように内容が具体的にわかるように書くと、利用者は安心してサイトを利用できる。最初のページから順番に読まれるとは限らないので、「前ページと同じなので繰り返さない」などという書き方を避ける配慮も大切だ。
link 要素（注1）でrel 属性とhref 属性を使ってリスト1 のようにページの関係を記述しておくと、Lynx（注2）やiCab（注 3）はブラウザー自身がナビゲーションバーを用意してく

iCabには、link要素に対応したナビゲーショ
ンバーの機能がある。

れる。もっと多くのブラウザーが対応するよう期待を込めて、積極的に利用しよう。

3 「導入ページ」
は作らない
ユーザーは早く情報にたどり着きたい。
雰囲気のあるデザインは悪くないが、デザインの結果として情報へのアクセスが悪くなるページに対しては、利用者の評価は厳しい。
とりわけ評判が悪いのが、目次の前に置かれる導入ページだ。ブランディングをね

サイトには一貫したナビゲーションを用意する。上はアップル、
下はAmazon.comのナビゲーション。

らってか、それともプレゼンテーション受けが目的か、最初にフラッシュなどを使ったおまけを押しつけるサイトが非常に多い。
この通過儀礼はまったく無意味、もしくは

ユーザビリティーを意識したサイト設計

逆効果だ。ユーザーは「Skip」のリンクが目的のメッセージが伝わるコンテンツ、デザイン

あればさっさとそれをクリックし、そうで

コンセプト

コンテンツ

サイト設計

URL設計

目的
（何を何のために）条件の確認↓
コンテンツ案

構造デザイン
ナビゲーション
アイデンティティー
スタイル設計ディレクトリー配置

ターゲット（誰に向けて）個別ページの制作

なければ別のサイトに行ってしまう。自己満足のために多数のユーザーを失っていることにそろそろ気付くべきだ。

ファイル名
ルール

ユーザーの視点

大切なことは、最初に目的とターゲット利用者を明確にし、常にこの2 つの観点でコンテンツやデザインを確認していくことだ。

インターネットマガジン／株式会社インプレスR&D

神崎正英（かんざき・まさひで）
ウェブコンサルタント、法政大学講師。著書に『プロフェッショナル電子メール』（ハルアンドアーク刊 ）、『ユニバーサル HTML/XHTML』（10月刊行予定）。The Web KANZAKI
にて、ごく簡単なHTMLの説明から音楽の話までを発信中。
www.kanzaki.com

検索サイト：入力した単語が含まれるウェブページを検索して、一覧表示するサービスを行うサイト。あらかじめ登録されたデータの中から検索する「ディレクトリー」型の検索サイトと、ロボットと呼ばれるソフトが自動的に収集したデータから検索する「ロボット」型の検索サイトがある。
©1994-2007 Impress R&D

INTERNET magazine 2000/11

207

H T
ML

使いやすさで訪問者の心をつかめ！
4 リンクはわかりやすく
ウェブページは書物と違って全体像が見にツールチップなどで説明が表示されるのえない。そこで、次の行き先の内容を把握

で、利用者は納得してクリックできる。

できるように、アンカー（注 4）を具体的に記述することが重要だ。作者はサイトの本文に埋め込んだリンクは、精読しないと見落としやすく、リンク先についても説明できない。

構造が頭に入っているから簡単なアンカー
でもリンク先の内容はわかると思いがちだ1

が、初めての利用者は次の行き先が理解できず、迷ってしまうことになる。

必要に応じて、節ごとに参照
リンクをまとめると使いやすくなる。

ユーザビリティーの観点から言えば、リンクは本文に埋め込むよりも、右の2のように段落や節の単位でまとめて列挙するほうが使いやすい。文章中に設定したリンク

2は見落としやすいし、文章の流れからリンク先を詳しく説明することが難しいからだ。

本 文 に埋 め込 んだアンカーに
title 属性を与えると、ブラウザ
ーによってはツールチップが表示され、利用者のヒントになる。

本文中にアンカーを設定する場合は、
title 属性を活用してリンク先についての付加説明を提供するとよい。title属性を付け

3

たアンカーにマウスを載せると、3 のよう

5 「戻る」ボタンの6 論理マークアップで読みやすくHTML の目的は、環境に依存しない形

段 落 中 で重 要 なポイントは e m 要 素 やで情報を表現することだ。大画面モニター

strong 要素で強調しておく。こうした要利用者は、サイトの中で迷ったときはまからPDAまでさまざまな環境に合わせて異素によって、本文の内容が明確になり読みずブラウザーの「戻る」ボタンを頼りにすなるHTML を作成するのは現実的ではな

やすいページになる。p 要素は改行や空行る。自分なりに把握できていた地点まで戻い。そこで、HTML では文書の「タイトを加えて表示されるが、br要素で改行するってやり直そうとするのだ。ところが、自

ル」
、
「見出し」
、
「段落」などの意味的なのとは違うことに注意しよう。画面表示の動的に新しいウィンドウが開くリンクの場

役割だけをマークアップし、どんなふうに

指示ではなく、意味の単位を示すことが目的なのだ。

じゃまをしない

合は、しばらく進んでから戻ろうとすると表示するかはブラウザーに任せるのだ。こ「戻る」ボタンが途中で動作しなくなる。

のような書き方を「論理マークアップ」と利用者が新ウィンドウに気付かないでいるいう。

と混乱するだろう。

論理マークアップの要点は、見出しと段

また、meta 要素を使った自動リフレッ

落を正しく示すことだ。見出しはh1 〜h6

シュも「戻る」ボタンの機能を麻痺させての6 段階の要素が用意されているので、文しまう。リフレッシュ時間を0 に設定して書の大見出しから順番に用いていく。アウいる場合は、何度「戻る」ボタンを押してトラインプロセッサーで文書の構成を練りも、また次のページに逆戻りしてしまうか

上げれば、その項目がそのまま見出し要素

らだ。

になる。見出し要素が適切に使われていれ

ブラウザーのウィンドウ管理や「戻る」

ば、見出しに目を通すだけで文書の骨格がボタンの機能の利用は、ウェブのもっとも頭に入るはずだ。ところがh1 を「文字を基本的なナビゲーションだ。これらを利用大きくするタグ」と勘違いして使うと、ア者の意図しない方法で操作すると、著しく

ウトライン構造が不明になってしまう。

ユーザビリティーを悪化させることを理解したい。

208 INTERNET magazine 2000/11

本文は、1 つのトピックについて述べた
段落ごとにp要素としてマークアップする。

ただし、論理マークアップはそもそも文章自体が論理的でないとうまく活かせないだろう。結局は構成を考えたよい文章を書くのが先決ということになる。

h1〜 h6の見出し要素はフォントの大きさを指定するものではない。Lynx のように、h1 要素はセンタ
リング、h2以降は左からのインデントで見出しのレベルを示すブラウザーもある。

インターネットマガジン／株式会社インプレスR&D

PDA（ピー・ディー・エー ／ Personal Data Assistance）：個人用携帯情報端末。予定表やアドレス帳など、主に個人データの管理に用いる携帯用の電子機器。最近では、パ
ソコンと連携したりインターネットへ接続したりする機能も標準的に装備されている。その多くがタッチパネル式の液晶画面で操作する。
©1994-2007 Impress R&D8 正しいタイトルの7 読めない色やフォントは困りものもしウェブページの文章を読んでもらいたいなら、その文字は読みやすくなければならな
い。あたりまえのことなのだが、文字が読みにくいサイトはとても多いのだ。

付け方
ページのタイトル（title 要素）は、ブラウザ
ーの画面で目立たない（ウィンドウのタイトル

画面全体の配色は同じトーンや色相でまとめると上品で落ち着くが、文字に関してはル

バーに表示されるだけ）ために軽視されがちだールが異なる。下の画面のように、文字は背景色と十分な明度のコントラストがないと読が、この役割は実はとても重要だ。タイトルは

みづらいことに注意しよう。青は純色でも明度が低いので、青と黒や濃紺の組み合わせは検索サイトやブックマークの登録に使われるのとても視認性が低くなる。

で、ユーザーがそのページを開くかどうかはタイ

フォントサイズも利用者によって異なるので、自分の画面に合わせてフォントサイズを落とすと、標準フォントが小さい環境では判読できなくなることも頭に入れておきたい。

トルを見て判断することになるからだ。
タイトルの使われ方を見れば、タイトルは「目次」ではなく「ユーザビリティー解説の目次」のように具体的に付けるべきだということがわかる。検索サイトの検索結果リストでは、その前後のページのことはわからないのだから、サイトの文脈を離れてもタイトルだけで内容の見当が付くようにする必要があるということだ。
ただし、「インターネットマガジン11 月号特注 4 アンカーとは、リンクの始点と終点のこと。HTML ではアンカーの始点はa 要素で表し、a要素のhref属性で指定するHTMLファイルや画像などが終点側アンカーになる。

集……」のようなシリーズ名を頭に置いたタイ
トルは、履歴やブックマークで見たときにわか

注5 適正なHTMLでは、HTMLの先頭に文書型宣言を置いて、どの文書型定義（DTD）を使りにくい。
「HTMLの正しい書き方 - インターネ

うかを宣言する。HTML 4.01 の厳密型 DTD を使うなら、<!DOCTYPE HTML PUBLIC "-ットマガジン11 月号特集」という具合に、最//W3C//DTD HTML 4.01//EN">のように記述する。

初に要点を書くほうが望ましい。

9 フレームは避ける、使うなら正しくフレームはメニューを固定的に表示しながらコンテンツを切り替えていくのに便利な手法だが、問題点も多い。まず右のようにモニターのサイズが小さい場合、画面を分割されると使い勝手がとても悪くなる。ブックマークや履歴でページを区別しにくく、個別ページへ

パソコンのモニターなら気にならないフレームでも、携帯端末の小さな画面では情報の表示範囲が極端に狭くなる。
（ ウィンドウズ CE の画 面 コピーには伊 藤 栄 一 郎 氏 のCatCEを使用しました。
）のリンクも難しい。もちろん、フレーム未対応のブラウザーでは表示できないという問題もある。さらに、安易に外部のコンテンツをフレーム内に表示すると、著作権を侵すことにもなりかねない。
こうした問題点から、次期のHTMLであるXHTML 1.1ではフレームは標準規格から外されることになっている。メニューの固定表示などは、スタイルシートを使って実現すべしということなのだ（P.211「CSS 2 を使った次世代レイアウト」参照）。
現状でどうしてもフレームが必要な場合は、次のような点に注意して正しいフレームを提供しよう（リスト2）。
・正しい文書型宣言（注5）：通常のHTMLのDTDには
フレームは含まれないので、フレーム用のFrameset による宣言が必要。
・フレーム非対応ブラウザーのためにnoframes 要素を用意する： f r a m e s e t 要素の中に、f r a m e 要素と併せてnoframes 要素を記述する。noframes 要素の中は、body
要素から始まる通常のHTML だ。
・ フレームから外 部 サイトへのリンクは、 <a href="http://..." target="̲top">としてフレームを解除する。

リスト2<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"><html><head><title> ユーザビリティに配慮したフレーム </title></head><frameset cols="20%, 80%"><frame src="toc.html" title="目次エリア"><frame src="section1.html" name="sections" title="本文表示エリア"><noframes><body><p><a href="toc.html"> 目次 </a> をご覧ください </p></body></noframes></frameset></html>インターネットマガジン／株式会社インプレスR&D

XHTML（エックス・エイチ・ティー・エム・エル／ eXtensible HyperText Markup Language）：次世代のHTMLとして2000年1月に勧告されたマークアップ言語。HTML
4.0をXMLに適合するように修正したもの。モバイル機器用に必要なタグだけを使ったり、ほかのマークアップ言語を埋め込んで拡張したりできる。
©1994-2007 Impress R&D

INTERNET magazine 2000/11

209

H T
ML

使いやすさで訪問者の心をつかめ！
11 1ページの10 テーブルの使いすぎに注意

適切なサイズは8秒

フォトショップなどで作成した画像をガイドによって切り分け、それをテーブルで固定的にレイアウトするというデザイン手法が紹介されることがある。一見ねらいどおりの美しい

最近のウェブ制作者の世界では、「8 秒

ページが再現できそうだが、それは同じ環境で見た場合だけのこと。異なる環境では困ったルール」というものが話題だ。昨年米ゾ

デザインとなってしまう。

ナ・リサーチが発表した「14.4kbps モデ

この方法の問題は、テーブルのサイズを絶対値で固定してしまうことだ。本来のテーブル

ムを使っている利用者が8 秒以内にページ

はウィンドウの大きさに合わせて自動的に伸び縮みするはずだが、固定レイアウトは利用者を表示できないと、1 か月あたり7,300 万の都合などお構いなしだ。これでは、ドルの機会損失があり得る」というレポー

小さな画面しかない携帯端末では、横トがその震源になっている。

スクロールをしないと内容を読むこと

14.4kbps は今やそれほど現実的ではなができないし、逆に大きなモニターをいにせよ、この8 秒という値はリアリティ

使っていても、そのスペースを生かすーがあり、ページ制作の目安となる。現在ことができない。ウェブデザイナーは、の主流が56kbpsのモデムもしくは64kbps
画面全体をテーブルにして横幅を固定すると、小さな画面には収まらずに横スクロールが必要になる。パソコンユー
ザーでも、ウィンドウの大きさは自分で管理したいもの。

テーブルのテクニックを弄するのではな
く、もっとウェブの特徴を活かした新しいデザインを考えるべきだろう。

のISDN とするなら、通信環境がよいとき
で50〜60Kバイトが約8秒でロードできる
データ量だ。そうすると、1 ページの許容サイズは、画像も合わせてせいぜい50K バ

12 ぱっと見てわかるページにする

イト程度までということになる。週刊誌 1
ページが約2000 字として4K バイト。テキ

利用者は結構せっかちだ。コンピュータ

をきちんと反映した見出しをこまめに用意

スト中心なら50Kバイトは余裕だから、あの画面で文字を読むのはあまり快適ではなすることで、画面を眺めただけでも文書のとは画像をどう扱うかという問題だ。厳しいし、通信料を払ってアクセスしているのアウトラインが頭に入りやすくなる。同様

いと感じるかもしれないが、ビジネスチャ

だから、ページをざっと眺めて役に立つかの観点で、冒頭に要約を用意する、重要

ンスを逃さないためにも、基本的にはこのどうかを判断し、値打ちありと思ったペーな語句を強調要素（em、strong）でマー程度のサイズに抑えておくべきだろう。

ジだけを読む傾向がある。素早く内容がつクアップする、文を短くするなどの配慮が危険なのは、最初のページはサイトのかめないページは、すぐにさようならとな考えられる。要は普通の読みやすい文章の「顔」だから、グラフィックを駆使して見ってしまうのだ。

書き方と同じなのだが、ウェブの場合はモ栄えをよくしようという発想。ユーザーは、ニター上でポイントがすぐわかるということ

トップページで使い勝手も含めたサイトのが特に重要だ。

品定めをしていることを思い出そう。同じユーザーにうまく概要をつかんでもらう
ためには、見出し要素を適切に使う。内容同じ文章でも見出しや強調要素を適切にマークア
ップすると、画面をざっと見ただけで要点を把握できる。利用者には、このように「流し読み」が可能な文書が親切。

会社の調査によれば、70K バイトをロードする必要があるサイトは、訪問者の半数を取り逃がしているということだ。

13 長いコンテンツをテーブルで囲まない
通常ブラウザーは、HTMLを読み込みなテキストや画像などのデータすべてを読みがら届いたデータを順次画面に表示してい込まないと、画面には何も表示できないとる。利用者は先頭部分を読みながら待ついうことだ。
長いページ全体をテーブルで囲むと、利ことができるので、長いデータでもそれほど苦痛を感じなくて済む。

210 INTERNET magazine 2000/11

用者はずっと空白状態の画面で待たされる

ところがテーブルの場合は、そのテーブことになる。これはかなり苦痛だ。コンテ

ルが何列あって幅がどれだけ必要なのかがンツをテーブルで囲む場合も、リード文はわからないと、ブラウザーは表示を始める

テーブルの外に出すなどして、利用者を待ことができない。つまり、テーブル部分のたせない工夫が重要だ。

インターネットマガジン／株式会社インプレスR&D

bps（ビー・ピー・エス／ bits per second）：コンピュータでデータを転送する速度の単位。1秒間に何ビットのデータを転送できるかを表す。
「64Kbps」と言えば、1秒間に65536
ビット、つまり半角英数字8192字を転送できることを示している。
©1994-2007 Impress R&D

14 印刷に配慮する

15 チェッカーソフトを使おう

ウェブページは常にモニター画面で見る

文法的な正しさがすべてではないが、間宣言している文書型に従って文法をチェッものとは限らない。ある程度まとまったコ

違いのないHTMLを書けば、知らない環境

クしてくれる。日本語で解説をしてくれる

ンテンツは、印刷してゆっくり読むというでもきちんと情報が伝わるはずだし、将来

Another HTML-lint

利用者は少なくないはずだ。印刷を考えたのデータ活用の際にもメリットがある。変

エラーが報告されたら、何が間違いだった

場合には、いくつか気を付ける点がある。

なテクニックを弄しないHTML はシンプルのかをよく確認して今後に活かすようにし

たとえば「ここをクリック」などといったなのでそんなに間違えることもないはずだよう。

アンカーは紙の上では滑稽だし、「赤い文が、ときどきはチェッカーソフトを使って字の部分を読んで」という表現は白黒印刷

文法の正しさを確認してみるといいだろう。

では理解できない。画面用フォントは印刷に不向きなことが多いので、印刷用スタイ

W3C に は HTML Validator
CSS Validator

もおすすめだ。

validator.w3.org
jigsaw.w3.org/css-validator/
openlab.ring.gr.jp/k16/htmllint/とが用意されていて、ルシートで別途フォントを指定すると、画面でも印刷しても読みやすいページとなる（リスト3）。ページを細かく分割している

16 チェック体制を作れ！

ときは、圧縮ファイルやPDF版などを用意
すると親切だ。
@media print{
body {
font-family: "平成明朝","ＭＳ Ｐ明朝", serif;
font-size: 10pt;
color: black;background-color: white;}}

制作者の考えることとユーザーの考える

いろいろな発見がある。作者の思いもよらことは往々にして微妙なずれがあり、このぬ方法でページを選択したり、意外なとこ

ギャップが使いにくさの原因となる。作っろで操作に迷ったりするといったことから、ている側ではこの点はなかなかわからない

サイトの改善点が見えてくるのだ。

ので、利用者の声を聞くしかない。

リスト3

使い勝手以外に、異なる環境でのチェッ

できればサイトの公開前に、こうした問クも欠かせない。開発はローカルの快適な題の可能性をテストするべきだろう。大が環境で進めても、モデム接続でも8 秒ルー

かりなユーザビリティーテストでなくても、ルが守れるかなどは随時確認すべきだ。こ

隣の部署の数人に「ちょっと使ってみて」

うしたテストやチェックは、思いつきでなと声をかけ、その様子を観察するだけでもく確実に実行するシステム作りが大切だ。

Topics CSS 2を使った次世代型レイアウト
CSS 2には一般のウェブ制作者には手にこれで、本文をスクロールしても移動し余るほどの豊富なプロパティーが定義されない、フレーム風のメニューが実現する。

ている。ブラウザーの実装はこれからのもスタイルシート未対応のブラウザーではメのが多いが、CSS 2を使うと従来はフレー

ニューと本文が続けて表示されるだけだ。

ムやテーブルを駆使しなければならなかったデザインや機能をスマートに実現できる。

さらに、このメニュー部分を別ファイルに保存して、

たとえば、フレームに依存していたスク
ロールしないメニューをCSS 2 で構成する<object data="menu.html"

ことを考えてみよう。方法は至って簡単。

type="text/html">

リスト4 のようなスタイルを設定するだけ

マック版 IE 5（上）では画面左に固定メニューが表示され、Lynx（左）では単純にこのメニューが画面の始めに表示される。CSS 1のみに対応しているブラウザーでは中途半端な結果になるので、今すぐには使いにくい。

だ。このスタイルでは、まずbody 要素ののようにobject要素として読み込んで利用

左マージンを取って、メニューを置くためすると、フレームの場合と同様に、一度読のスペースを確保する。次に、メニューとみ込んだメニューを複数文書で繰り返し使なるdiv 要素の幅（width）をbody 要素

えて効率がよい。ただし、object 要素をのマージン以内に設定し、positionプロパ

完全に実装したブラウザ

リスト4

ティーをfixed に、top とleft プロパティー

ーはほとんどないので、を0 にして、メニューを画面の左上に固定

まだこの方法はきちんとbody { margin-left: 15em }div.menu { width: 14em; position: fixed; top: 0; left: 0;
margin: 0; padding: 0.5em; background-color: #fcc }するのだ。

機能しないようだ。

インターネットマガジン／株式会社インプレスR&D

PDF（ピー・ディー・エフ／ Portable Document Format）：さまざまなアプリケーションで作成した文書を電子的に配布でき、フォントなど相手の環境によらず読めるようにした、電子文書およびその規格。アドビシステムズ社が開発した。
©1994-2007 Impress R&D

INTERNET magazine 2000/11

211アクセシビリティーは代替テキストから

H T
ML

誰もが使えるページを目指せ
意義はわかっていながらも、どのように実践したらいいのかよくわからないのがアクセシビリティー。
具体的な例さえ見れば、「ああなるほど」と納得できるのではないだろうか。まずは画像に代替テキス
トを用意するところから始めてみよう。（神崎正英）

1 これがaltの正しい書き方
アクセシビリティーとは、どんな利用者と書くほうが適切だ。alt 属性がきちんとで置き換えてもあまり意味のある情報にはにも同等の内容が伝わるように配慮すると「同等の内容」を示しているかどうかは、ならない。この場合は、いうことだ。文字ブラウザー、音声合成ブ

Lynxなどの文字ブラウザーで表現してみれ

ラウザー、携帯端末など、ウェブを利用す

ばよくわかる。

alt=""

る形態はさまざま。環境が違っても、同じ情報が伝わるように配慮する必要がある。
簡単なのはコンテンツを文字だけで表現することだが、あまり現実的ではない。利

2.ロゴマーク
会社のロゴマークにalt 属性を付けるときには、用者を惹きつける魅力的なコンテンツのためには、画像や動画などマルチメディアをたり、ファイル名を示したりしてしまう。

alt="株式会社インプレス"

5.title属性を使う
でなければ意味がないことはわかるだろう。

要素のalt 属性を例に詳しく見ていこう。

文字ブラウザーや音声ブラウザーは数が少ないからaltを書くメリットはない、と思

3.飾りの画像
1.写真だ。alt属性がないと、文字ブラウザーや音どんな場合でもalt 属性は必須なのだ。

する代替手段（alternative）を提供するということだ。代表的な代替手段であるimg性の値が空」ということと、「alt属性がな

声ブラウザーは [image] のような表現をしと書いてしまいがちだが、これは技術を用いる場合でも、その技術が使えない利用者のために「同等の内容」を表現

りし、余計な混乱を与えずにすむ。
「alt属
い」ということはまったく違うので要注意

alt="ロゴマーク"駆使してページを作ることも多いだろう。
アクセシビリティーの基本は、こうしたとすれば、テキストブラウザーではすっきったら大間違い。画像を扱えるブラウザー

ラインや飾りのグラフィックの場合はどでも、利用者が画像を読み込まない設定にたとえば写真をページに組み込んだとす

んな代替情報を提供すればよいのだろうか。

していることがあるからだ。その場合でもる。この場合 alt 属性をどのように記述す

文字ブラウザーでの表現を考えると、次のalt 属性があれば文字が画像の場所に表示れば「同等の内容」になるだろうか。

ような記述がよさそうだ。

される。
「alt="装飾用イメージ"」のような画像

alt="楽器の写真"

alt="-----------------------"

そのものの説明は代替テキストには適さな

alt="*"い。しかし、グラフィカルなブラウザーを使っていて画像を読まない設定の人には、これはよく見かける例だが、わかるのは、
そこに写真があるということだけだ。写真

要するに、画像を使って伝えようとするこ

代替テキストが画像を手動で読み込むかどからどんな情報が得られるかということはとを、文字で置き換えたらどうなるかを考うかの判断材料になるという意見もある。

伝わらない。写真で伝えたいことを簡単にえてみるということになる。

こうした場合には、alt属性ではなくtitle属
性で説明を加えるのがいいだろう。最新の描写して、4.意味のない画像
alt="人間より大きな楽器がある！"

212 INTERNET magazine 2000/11

ブラウザーはtitle 属性の内容をツールチッ

純粋なアイキャッチャーのような画像がプに表示するので、これをヒントにして利使われることも少なくないが、無理に文字用者は判断できる。併せて「alt=""」を設

インターネットマガジン／株式会社インプレスR&D

属性： HTML の開始タグの中で、要素が持つ性質などを指定する部分。たとえば、<A HREF="index.html"> では、A 要素にHREF という属性を指定して、その値を「index.html」とすることで、「リンク先はindex.htmlである」ことを表している。
©1994-2007 Impress R&D

2 略語には正式名称を付ける
略語は専門外の読者には理解しにくいのといった具合だ。グラフィカルなブラウザ

略語自体が一続きの単語として発音されるで、abbr 要素を使って説明を加え、すべーならこの部分にマウスを持っていくと、ようになったものを指すが、普通の略語とての利用者に親切なページにしよう。たと

ツールチップにtitle属性の内容が表示され、区別が難しいので、通常はabbr 要素を使えば、音声ブラウザーならその説明を読み上げるっておけばいい。

こともできる。
<abbr

よく似 たものにtitle="Uniform Resource Identifier">acronym（頭字語）

URI</abbr>

要素がある。NATO（ナトー）のように、定しておけば、文字ブラウザーや音声ブラ

alt 属性の意味は、頭でわかっていても、して、ページがテキストだけのときはどん

ウザーの利用者には、無意味な説明を与え実際にその内容が表示されないとピンと来なふうに表示されるのかを随時確認してみなくても済む。

ない。ウェブ開発者は、Lynx などを用意るべきだろう。

1.写真

IE

Lynx
4.意味のない画像

Lynx

この写真に対して、単に「写真がある」という代替テキス
トでは意味がない。画像で伝えようとした内容そのものをテキストに置き換えて伝える。

2.ロゴマーク

IE

Lynx

飾りの画像の例で、alt を指定しなかった場合の Lynx の画面。alt 属性がないと、何も表示されないのではなくファイル名が代わりに表示される。

5.title属性を使う

IE「ロゴマーク」と説明されても、情報としては無意味だ。ここで伝えようとする内容は、
具体的には会社の名前だろう。

3.飾りの画像

IE

Lynx「alt=""」としてtitle 属性で説明を用意しておくと、マウスを載せたときにヒントが表示されるので、画像をオフにしたブラウザーではファイルを表示させるかどうかを判断できるし、テキストブ
ラウザーでは邪魔にならない。

情報として必要のない画像は「alt=""」でもいいが、簡単な記号に置き換えておけば、
テキストブラウザーでもそれなりのアクセントを与えられる。

インターネットマガジン／株式会社インプレスR&D

ツールチップ：マウスポインターをアプリケーションの特定の部分に載せたときに現れる小さな囲み。その部分がどんな機能を持っているのかを説明するために表示される。

©1994-2007 Impress R&D

INTERNET magazine 2000/11

213

H T
ML

誰もが使えるページを目指せ
3 イメージマップにもaltを付ける
代替テキストが必要なのは、通常の画像だけではない。映像や音声、アプレッ
トなど、テキストでない内容にはすべて等価な内容の代替テキストを与える。イメージマップも同様だ。img要素、map要
素、area 要素でマップを構成するとき、
img 要素とarea 要素には、画像を表示
しないブラウザーのためにalt 属性を指定する必要がある。
img 要素とarea 要素にalt 属性を記述した場合としない場合の表示をテキスト
ブラウザーで比較してみよう。代替テキストがあれば、Lynx もイメージマップを

リスト5<object data="mymenu.png" type="image/png" usemap="#map1" width="480"height="40"></object><map name="map1" id="map1"><p><a href="welcome.html" shape="rect" coords="10,10,115,34">Home</a> |<a href="whatsnew.html" shape="rect" coords="127,10,232,34">What's New</a> |<a href="help.html" shape="rect" coords="247,10,352,34">Help!</a> |<a href="qa.html" shape="rect" coords="364,10,470,34">Q &amp; A</a></p></map>
object、map、a要素を組み合わせたイメージマップ。map要素をobject要素の内容にすれば、画像オブジェ
クトが扱えないときだけテキストリンクを表示する。object要素の外に出すと、マップと併せてテキストリンクも示される。リンク先のメンテナンスは、a要素を修正するだけでよい。

altなし

きちんと扱える。ただし、画像をオフにしたグラフィカルなブラウザーでは、こうしたイメージマップは使いにくいので、テキストリンクも別に用意した方がよい。
リスト5 のようにHTML 4 のobject 要
素とa 要素によるイメージマップを使え

altあり
area 要素と img 要素に適切な alt 属性を与えると、文字ベースのブラウザー（Lynx）でもきちんとイメージマ
ップを利用できる。

ば、イメージマップとテキストリンクを別々に用意しなくても一度に両方の手段を提供できるが、対応しているブラウザ
ーはiCab などまだ少ない。

4 スクリプトとプラグインにも代替手段を
ウェブの応用範囲はどんどん広がっていhref="javascript:……> という形にして、正しくプラグインを扱えるブラウザーは少る。対話性を持たせたり多様な表現を行っスクリプトで仕掛けを施してからジャンプ

ないから、embed 要素を使いつつ、別のたりする技術として、クライアントサイド

させるページがあるが、これは避けるべきページで静止画像版を用意するほうが現状

スクリプトや埋め込みオブジェクトの重要だ。スクリプトが無効になっていると、機では適切かもしれない。

性は増していくことになるだろう。その技能しないリンクに術を活用するのは結構だが、利用者はさまなってしまう。

ざまな機器やブラウザーでページを閲覧し埋め込みオブジていることを忘れてはならない。さらに、ェクトの場 合 は、

セキュリティーのためにこうした機能を無図のようにobject

効にしている利用者も多いことに留意すべ要素を入れ子にすきだ。

ることでプラグイン

画像の場合と同様に、新しい技術を使がだめなら静止画、

うときにも代替手段の用意が欠かせない。

それもだめならテキ

script要素でダイナミックにHTMLを生成

ストと、段階的にするなら、スクリプトを理解しないブラウ

代替コンテンツをザーのためにnoscript 要素でもHTML を提供できる。ただ記述する必要がある。また、リンクを<aし、object 要素で214 INTERNET magazine 2000/11

object要素の組み合わせ<objectclassid="java:me.class"……><object data="me.png"
type="image/png"><a href="me.html">
自己紹介しましょう…
</a></object></object>

自己紹介しましょう…

object要素を入れ子にすると、外側から順番に評価されて、ブラウザーで扱えるオブジェクトが見つかるとそれが表示される。

インターネットマガジン／株式会社インプレスR&D

イメージマップ：ウェブページの1枚の画像の中に特定の領域がいくつもあり、その領域をマウスでクリックすることで、別のページに移動できるようにした仕組み。<IMG>タグ（画像）と<MAP>、<AREA>タグ（領域指定）を組み合わせて作成する。
©1994-2007 Impress R&D

Topics WAIのガイドラインでチェックしよう
W3C では、障害者や限定的な環境でも点を挙げ、14 の指針によって注意点を説

少なくとも指針に目を通し、優先度1のもウェブを十分活用できるような技術や表現明している。その多くはこの特集でも取りのから順次取り入れていくようにしたい。

法 を 推 進 す る た め に 「 The Web

上げたが、ほかにも

Accessibility Initiative」（WAI）という・古いブラウザーでもコンテンツを利用で活動を行っている。なかでもウェブ制作者

きるような暫定措置を設ける。

にとって重要なものが、1999 年 5 月に勧・マウスなど特定の機器を前提としない。

告された「アクセシビリティーの高いコン・プラグインなどの内部のメニューもアクテンツのための指針」

セシビリティーに配慮する。

だ（日本語訳などがある）。

などがある。それぞれの指針には具体的な

この勧 告 では、 基 本 原 則 として( 1 )チェックポイントが示され、おのおの1〜3

Graceful Transformation（環境に応じての優先度が与えられている。たとえばalt属

適切に表現される優しいコンテンツ）、(2)性の使用などが優先度1 の必須事項だ。

には大藤幹氏のもの

Understandable and Navigatable（理すべてのポイントを完全にクリアするの解しやすく移動しやすいコンテンツ）の2はハードルが高いが、ウェブ制作者ならばwww.w3.org/TR/WAI-WEBCONTENT
www.zspc.com/doc/accessibility/

6 単語内に5 本当の配色テクニックとはスペースを入れない

赤と緑を区別しにくいような色覚を持つ

けでコントラストを付けるのではなく、そ人は、日本に約 300 万人いると言われる。

れぞれの明度も違えて配色するという工夫

男性はその割合が高く、20 人に1 人はこだ。また、グラフなら色だけでなく網掛け

日本語を簡単に整形するためによく使わうした色の感じ方が異なるそうだ。インタなども加えて領域を区別するなど、色だけれる手段が、全角スペースを挿入して文字ーネットなどで公開されている体験談を読に頼らない表現を心がけることが重要だ。

の位置をそろえるというものだ。便利に使むと、多くの人が地下鉄の路線図のっている人も多いだろうが、ような、微妙な色使いによる情報を判別するのが難しいと述べている。

<li> 経

区別しにくい色の代表的な組み合

済</li><li> スポーツ</li>

わせは赤と緑とされるので、少なくとも赤と緑の色差だけに頼ったデザという具合にスペースを入れた場合、音声インは避けるべきだろう。ただし、読み上げソフトは最初の項目を「けい、す灰色と水色、ピンクと灰色など人にみ」と発音してしまう。単語が単語としてよってほかにも混同しやすい配色が認識されなくなってしまうのだ。この場合あり、見え方はさまざまだという。1

チャートを示す場合、色分けだけでなく塗りパターンも加えると、色による区別が困難でも違いが明確になる。

つの方法は、色相（赤、緑など）だはスタイルシートで「text-align: justify」
や「letter-spacing: 2em」などのプロパティーを使って調整できる。

7 動くコンテンツは慎重に
以前に人気アニメで画面が激しくフラッ

テキストは読むことができない場合がある。

いが、すぐに飽きられてわずらわしくなる。

シュする場面で、多くの視聴者が卒倒して意味もなく画面にそうした効果を持ち込ま

画面にちらちら動くものがあると、本当に問題になった。これは極端な例だが、人間ないほうがいい。blink とかmarquee とい重要な内容に集中してもらえないことも認

にとって点滅したり動いたりするものは特ったタグは、そもそも標準のHTML仕様に識しておこう。

殊な刺激となる。多くの人はこれらを不快は含まれない。

に感じるし、障害のある人にとっては動く

アニメーションGIF も最初のうちは面白

インターネットマガジン／株式会社インプレスR&D

アニメーションGIF ：GIF（Graphics Interchange Format）は、画像ファイル形式の1つ。GIFにはいくつかの規格があり、その中の1つ「GIF89a」は、ファイルの中に複数の画像を納められる。これを利用して、複数の画像を切り替えながら表示するタイプのものをアニメーションGIFという。
©1994-2007 Impress R&D

INTERNET magazine 2000/11

215

H T
ML

誰もが使えるページを目指せ
8 色に頼らないページ作り
世の中すべての利用者がカラーモニター「赤い文字の部分は重要なので注意して下でウェブを見ていると思ったら大間違い。

さい」という表現が不適切なことがわかる

携帯端末ではまだモノクロ画面が多数あるだろう。重要部分を赤字で表現

し、白黒印刷して読んでいる読者もいる。

したいなら、スタイルシートを使テキストブラウザーではほとんど色は使われって「em { color: red } 」とないし、まして音声合成では文字の色など設定し、em 要素でマークア

いちいち読み上げているわけにはいかない。

ップする。そうすれば、色がこのような環境の違いを考慮すると、表現できなくてもその要素がスタイルシートでem 要素の
文 字 色 を赤 に設 定 すると、
スタイルシート対応ブラウザ
ーでは強調部分が赤文字で示 され、非 対 応 ブラウザー
でも、ちゃんと強 調 要 素 として扱 われるので、同 等 の情報を伝えることができる。

強調されていることは伝わる。
少し視点は違うが、濃色の9 言語指定の使い方
国際化の時代にはHTML文書でも多国語を混在させるケースが出てくる。ブラウザー

背景画像に淡色の文字を指定すると、画像をロードしない設定の人には文字が読めなくなることに注意。背景画像を指定した場合は背景色も指定する必要がある。

が言語を判断できるように、lang 属性で言語コードを指定しておくと、多言語の文書

10 キーボードで便利なページにがうまく扱えるようになる。
通常は、html 要素でマウスではなくキーボードを使ってブラウザーを操作する環境も少なくない。こうした場<html lang="ja">

合に、フォームの項目などの選択を容易にするために導入されたのがtabindex 属性とaccesskey 属性だ。

という具合に基本言語を指定しておき（jaは日本語）、異なる言語を使う部分だけ

tabindexはリンクやフォームの選択順序を数字で設定する。特殊な要素を飛ばして必須
入力項目だけをTAB キーで選択できるようにするなどの使い方ができる。
accesskeyはキーボードショートカットを実現する機能だ。

<p lang="fr"><a href="help.html" accesskey="h">などと言語指定を上書きする（fr はフランス語）
。これによって、音声ブラウザーはそとしておくと、Hキーでヘルプページを表示できる。ショートカットのためのキーの組み合わの部分を適切に発音できるし、視覚ブラウ

せがOS やブラウザーによって異なるなどまだ不統一な段階だが、これが普及すると、テキザーは適切なフォントや引用符、単位記号

ストブラウザーだけでなくグラフィカルなブラウザーの利用者にとっても便利なものになるを使って画面表示できるようになる。

だろう。

11 テーブルも優しくテーブルを使うと複雑な情報を一目で把握できるようになるが、これは視覚的にテーブルを認識できる場合の話だ。音声合成

れる前に構造をイメージできるので、理解が容易になる。レイアウト目的の場合はがわかるようにすること、の2点が大切だ。
<table summary="レイアウト用テーブ

テーブルの説明をするには、table 要素のsummary 属性を使う。

ル">でテーブルを読み上げる場合は、全体の構造が頭に入っていないとわかりにくい。

<table summary="WWW の利用の変と説明すれば、混乱を招かずに済む。

テーブルのアクセシビリティーを高める

化を示す表。1 列目に年度、2 列目にホス

項目名とデータの区別は、th 要素とtd

ためには、(1) テーブルの構造や全体像にト数、3列目にサーバー数を示している">要素を正しく使うということだ。これがきちんと使い分けられているだけで、テーブついての説明を提供すること、(2) 項目名とデータのセルを明確に区別してその関係

216 INTERNET magazine 2000/11と記述すると、テーブル本体が読み上げらルの意味はずっと明確になる。

インターネットマガジン／株式会社インプレスR&D

フォーム：掲示板のコメントや検索サイトでのキーワードのように、ブラウザー上でユーザーが値を入力してサーバー上のプログラムに送信することで、対話的な機能を実現する仕組み。
HTMLでは<FORM>タグや<INPUT>タグを組み合わせて作成する。
©1994-2007 Impress R&D

Topics リンクに許可はいらない
ウェブサイトでよく見かけるのが「無断「通常のリンク」とimg 要素などによるHTMLの機能によって権利の問題が発生

リンクは禁止します」「このサイトはリンク「埋め込みリンク」に分けている。通常のする場合はあるが、a 要素による通常のリフリーです」という注意書きだ。はたしてリンクそれ自体は単なる参照だ（作者に責ンク自体は言論の自由に基づいて自由に行こうした言葉には根拠があるのだろうか。

任があるのは「このページをご覧ください」

われるべきだというのが、WWW を作った

WWW の発明者であり、現在W3C のデなどの言葉）。しかし、埋め込みリンクで人物の意見だ。リンクに関して細かい注意ィレクターであるティム・バーナーズ＝リは、埋め込まれた画像はページの一部と見などは書かないのが、正統派のサイト作者

ーは、リンクに関する文章をいくつか公開なされるため、作者にはその画像に対するの態度だと言えるだろう。

している。「リンクの神話」

では、責任が発生する。また、フレームについて「リンクは著作権を侵害する」「リンクにはは、文書の持ち主について混乱が起きるよ

対価を求めることができる」「リンクはプラうなデザインは避けるべきだと述べている。

www.w3.org/DesignIssues/LinkMyths.html
www.w3.org/DesignIssues/LinkLaw

イバシーの侵害になる」という3 つの意見を誤解であると語り、右の囲みのような原理に立たなければハイパーテキストの世界

・ほかのサイトにリンクを張る前に許可を求めなければならない理由はない。

は成り立たないと主張している。
一方、同じバーナーズ＝リーの「リンクと法」

ティム・バーナーズ＝リーの主張

では、リンクをa 要素による・言論の自由がなくならない限り、「参照されない権利」は認められない。
・公開された文書にリンクを張ることは、プライバシーの侵害ではない。

Topics IBMホームページ・リーダーを使ってみた「アクセシビリティー」の意義はわかっあるようで、日付の「2000/9/8」は「きた、alt属性の使い方もわかったという人でゅうぶんのにせん、はち」となった。

も、IE やナビゲーターで毎日ウェブを見てホームページ・リーダーは、基本的にキいる現状では、いまいち実感がわかないの

ーボードのテンキーだけで操作できるようではないだろうか。
「音声読み上げブラウになっている。たとえば読み上げを止めた

ザー」なんて遠い世界のことのように感じ

ければ、「Enter」を押し、再開するにはるかもしれない。そういう人には、IBM ホ「0」を押す。リンクだけを順番に読みたけームページ・リーダーを使ってみることをれば「3」を押し、現在のリンク先に飛びおすすめする。購入するには高めの値段だ

たければ「2」を2 回押す、といった具合が、お試し版はIBM のサイトからだれでもだ。操作をマスターすれば、すダウンロードしてインストールできる。対ばやいブラウジングも可能にな応しているOS は、ウィンドウズのみ。実るだろう。

行にはネットスケープナビゲーターがインス

ホームページ・リーダー Windows版 V2.5
価格： 15,000円

www.ibm.co.jp/accessibility/soft/hpr.html

ホームページ・リーダーでウェブを読んでみると、いかに多トールされていることが必要だ。
インストールして実行すると、案内のペくのサイトが使いづらいかを実ージが合成音声で朗読される。テンキーの感できたり、意外にどんなサイ「+」と「.」を順番に押して、URLを入力

トでもそれなりに読めてしまう

してみよう。そのページにアクセスして内ものだということがわかったり

容が読み上げられる。通常のテキストは男する。自分のサイトの作成に性の声だが、リンクのテキストは女性の声も参考になることが多いに違いに切り替わる。テキストの読み取りはかなない。最先端の技術でウェブ

り正確で、英単語が混じっていてもきちんの未来を体感するために試してと発音してくれる。ただし、苦手な部分もみるのもいいだろう。

Internet Watch を読んだところ。左側のメニューを抜けて右側のニュース一覧にたどり着くまで結構時間がかかることがわかった。

インターネットマガジン／株式会社インプレスR&D

フレーム：WWWブラウザー上で、複数のHTMLファイルを一度に表示する方法、およびそのタグ。ネットスケープナビゲーターとインターネットエクスプローラ以外のブラウザーでは対応
していない場合が多い。
©1994-2007 Impress R&D

INTERNET magazine 2000/11

217

H T
ML

あの企業は正しく書いているか

有名 サイト HTML チェック！
ウェブが公的なメディアとなっている現在、企業や官公庁にとって、ユーザビリティーやアクセシビリ
ティーを考慮したサイトを作ることは義務とも言える。著名な企業 7 社と首相官邸、それにインプレスのサイトをチェックしてみた。
（ソシオメディア＋編集部）

Yahoo! Japan91点

採点： 9 つのサイトの中ではもっとも軽い。alt属性もほとんどの画像に付いている。文法にはやや妙なところも。
総評：見るためではなく使うためのページを意識しているようで、テキストベースで構成され、シンプルで表 示 も速 い。また、カテゴリーの分類法から自分の探したいジャンルが見つけやす
い構造になっている。プロモー
www.yahoo.co.jp
ション、メニュー、ディレクト
リーという大きなエリア分けも明解さを増している。
ただし、メニュー（ニュース、掲示板、オークション）の数が多すぎることや、クリック可能なエリアが多すぎるために、クリックできない部分とのコントラストに欠ける感がある。また、ほとんどがリンクテキストであることから、すべてに下線がついていて見づらい側面も。
利用者の求める利用方法を明確化しているので、その意味では利用者の満足度が高いサイトであることがわかる。

asahi.com

40点

採点：サイズが大きいのは、サイトの特徴からしてやむを得ないか。イメージマップにalt属性が用意されていないのが難点。
総評：最新ニュースが上部に配置されていることから、ページ
全体を読み込まなくても最新ニュースを確認できる。また、更新時間が表示されているので速報性がはっきりしている。トップページで焦点を当てる記事のwww.asahi.com
サマリーを 1 つにしぼっているのも、ウェブサイト上での読みやすさへの配慮が感じられる。
しかし、 画像のクォリティーが低いのが残念。減色スキルの向上による改善に期待。また、検索機能がないこともユーザーの使い勝手からみると不便である。
全体のボリュームを把握したり、自分の求める情報が存在するかしないかを判断したりするための基準や仕組みがあると便利ではないか。1 つのインターフェイスでターゲットを広げすぎている感がある。

218 INTERNET magazine 2000/11

楽天市場

88
点

採点：文法チェックの点数がもっともよかった。スクリプト未対応のブラウザーでもすべてのメニューが使えるのがよい。
総評：テキスト中心でダウンロ
ード時間も短く、ストレスはない。検索フィールドがわかりや
すいのもよい。ページデザイン
では、ウインドウサイズによって横 幅 が可 変 になっているが、崩れることなく表示できる。
www.rakuten.co.jp
しかし、メニューの切り口の多さ、クリックできそうでできないものの多さ、似たようなリンクの多さな
どから、サイトの全体構成が予測できない。デパートというよりは、さな
がら雑居ビルのよう。これを解消するためにも、機能別のエリア分けを明瞭にしたり、タブ型の要素をもっと効果的に利用したりするなどの工夫が必要ではないか。
運営側が提示したい情報と、ユーザーが自由に利用できる分類メニューとが混在しており、情報に対する信頼性が低く感じられるのが残念。

マイクロソフト83
点

採点：軽いために高得点。IE 用のスクリプトを使ったメニューがあるが、それ以外のブラウザ
ーでも一応は使える。
総評：ヘッダー部分や左エリアにサイト全体のメニューや検索エリアが置かれ、ユーザーにとって注目度が高い情報が目立つ位置に配置されているので、わかりやすく、うまくまとまっていると言える。また、少ない画
www.microsoft.com/japan/
像を効果的に使っており、それなりの見栄えを保つことにつながっている。
しかし、リンクテキストのスタイル、マウスオーバーのフィードバックなどが統一されていないところ、横幅の広さ、最終更新日の提示位置、検索についてのヘルプなど、改良すべき点も散見される。上部 2 つの水平
メニューの使い分けも意味不明。
このサイトの問題は、トップページよりも中に入ってからの部分で、画面構成が統一できていないためにすぐ迷子になることがある。

インターネットマガジン／株式会社インプレスR&D

ディレクトリー：コンピュータの世界で、ディスクなどにあるファイルを管理するための仕組み。ツリー構造をしたディレクトリーによってファイルが階層的に管理されている。検索サイト
においてサイトをカテゴリーごとに分類、整理する方式を、ロボット収集型のサイトに対してディレクトリー形式と呼ぶことも多い。
©1994-2007 Impress R&D

NTT 東日本

74点

採点：総サイズの大きさが点数にひびいている。
総評：「〜したい方はこちら」
といった表現を使って、目的指向のナビゲーションを重要視しており、探したい情報にアクセスしやすくなっている。また、各リンクの重要度が、面積によって表現されており、初めて利用する人に直感的に情報の重要性を伝える効果を出している。
www.ntt-east.co.jp
検索エリアやサイトマップが下方に配置されすぎていること、サイトナビゲーションが明示されていない
こと、インターフェイス要素のデザインが不統一であることは、今後の改善点。ターゲットを広く想定しているにも関わらず、画像のみで構成されたトップページであることは、アクセシビリティーの観点からは課題となる。現サイトは、女性週刊誌の釣り広告のような印象を受ける。

トヨタ自動車69
点

採点： alt 属性がまったくない
ため、点数は低くなった。
総評：ビビッドな色使いで元気さが伝わってくる。各メニュー
がボタンの色で区別されてわか
りやすいうえ、各メニューに説明が付いているので求める情報
を見つけやすくなっている。画面エリアの分割とその意味が明確となっていること、エリア面
積や位置関係などから重要度を
www.toyota.co.jp
表していることなどがサイト全
体の使いやすさ、わかりやすさを支えている。また、速報、ユーザーの求
める情報、企業が発信したい情報、客観的なナビゲーションなど、トップページに求められるナビゲーションの切り口がすべて揃っていて、使い勝手のお手本のようなサイト。全体のカラーリングからは、実際の「トヨタらしさ」と異なる印象を受けるが、そこにウェブ上での戦略を感じる。

インプレス

80

首相官邸

点

採点：官庁らしく、alt 属性の使用は完璧だった。
総評：デザイン自体のテイスト
は 5 年前のものであるが、カラーリングなどから落ち着いた雰
囲気が醸し出されている。タイ
トルや建物の写真は目立っているが、一瞥して何のためのサイトであるかが不明瞭。エリアごとの情報の枠組みもわかりづら
いうえ、各リンクの重要度や分
www.kantei.go.jp
類 基 準 がまったくわからない。
写真をクリックするとどこへ行くかすら予想できない。また、「English」
がグレーで表示されていることから、まるでクリックを拒絶しているかの印象を受ける。インターフェイス要素の使用方法に一貫性がなく、あらゆる意味でデザインがなされていないが、その無骨なところがかえって「首相官邸」らしさを出しており、情報の信頼性に通じるとも取れる。

32

東京三菱銀行点

採点：同じく alt 属性が少ない
ため、点数が低い。
総 評 ： ナビゲーションの点 で、左エリアのメニューからロール
オーバーでサブカテゴリーが出るのは流行りでもあるがとても便利。また、サイトマップなど
はヘッダー部分、メニューは左エリアというように、エリア分
けが明確化されているので、初めてのユーザー、リピーターに
www.btm.co.jp
もすぐにアクションが起こせてわかりやすい。しかし、画像ボタンのフィードバック（行き先など）がバ
ラバラであったり、「New」が連続するなど、情報の重要性やコントラス
トに欠け、全体にインターフェイスが不統一。検索機能がないのも疑問。
ヘッドラインニュースがコンテンツエリアの中心になっていることで、一般ユーザーが訪れた際の目的意識まで奪ってしまわないか心配。

85点

採点：サイズはやや大きめ。画像数が多いのが気になる。
総評：情報量が多いにもかかわらず、エリア分けによる情報分
布ができており、わかりやすい
サイトになっている。また、検索機能が目立つ位置にあって、使いやすい。全体的にトーンを抑えながら、使うためのサイト
である雰囲気を出している。しかし、不要な凹凸や画像要素がwww.impress.co.jp
多いこと、ボタンの形状の種類が多すぎること、リンクテキストの色が不統一であることなどは今後の改善点。また、下半分の情報はトップページで一覧させるには多すぎる印象を受けることから、別ページにするなどの改善が必要。数度にわたる見直しを経て、構成要素を考えてきたことが伝わり、ブランディングに配慮している様子もわかるが、まだ余計なディテールが多く見受けられる。

●採点基準
各サイトのトップページ（9 月 18 日現在）を評価して、以下の5 項目に編集部が0 〜 20 点の点数を付けて合計した点数を出した。
□ HTML と画像を合わせたサイズ。50KB 以内は20 点、10KB 増
えるごとに-1点。
□ alt属性の有無。alt属性の数÷ img要素とarea要素の数× 20点。
□ JavaScript がないと使えない部分があるかどうか。ない場合は20点、1つあるごとに-2点。
□文法の正確さ。Another HTML lint（211ページ参照）の点数が50点以上は20点、50点から10点減るごとに-1点。
□トップページに検索機能がある場合は20点、サブページに検索機能がある場合は10点。

インターネットマガジン／株式会社インプレスR&D

ナビゲーション：関連付けられた複数の情報を読者に閲覧させること。あるいは、閲覧させるための仕組みや、ボタンなどのインターフェイス。

©1994-2007 Impress R&D

INTERNET magazine 2000/11

219

H T これまでの常識を見直そう
M L こんな ページはかっこ悪い。
年月が経つにつれてページ制作も洗練されてくるはずだが、ウェブが流行し始めたころの「ノリ」をそのまま引きずっている部分もまだあるのではないだろうか。「ダサい」と言われないために、習慣に従って漠然と作っていないか点検してみよう。（編集部）

1 Sorry, Japanese Only？
「Sorry, Japanese Only」は、日本でウェブが普及し始めたころから受け継がれている
代表的な決まり文句だが、いろいろな意味で変なフレーズだ。まず、日本語で書かれているからといって謝る必要があるだろうか。
「Sorry, Chinese Only」や「Korean Only」と書いてある中国語や韓国語のページは見かけない。また、英語圏のユーザーは、「Sorry, …
…」という英語が書けるくらいなら、なぜコンテンツも少しは英語にしてくれないのか、と思うのではないだろうか。さらに「Japanese Only」のあとに「What's New」という見出しがあると、ますます奇妙なページになる。
外国のユーザーのことも気になるなら、英語のページをきちんと用意したほうがいいだろう。また、日本語でページを直接表示させて情報をつかみたい外国人もいるだろう。ヤフー（

www.yahoo.co.jp）のトップページから「韓国」や「中国」を選んだときのよ

うに、日本語フォントの表示方法を紹介してあげると親切だ。

日本語の情報を直接求めている人のために、マイクロ ソ フ ト の Global IME（
www.microsoft.com/windows/ie/features/ime.asp）などを紹介するのも手だ。

3 「工事中」と2 「〜でご覧下さい」はもう古い

書かない「Netscape何々以上でご覧下さい」「IE

を慎重に使えば、古いブラウザーでも便利

何々以上でご覧下さい」と書いてあるペーに使えて新しいブラウザーなら見栄えのい「Sorry, Japanese Only」のように、深ジは多い。さらに、ブラウザーのロゴ画像

いページは作れる。もし自慢のデザインがく考えずについつい使ってしまう決まり文を貼り付けているページもある。これは、崩れるから自分が使っているブラウザーだ

句 が い く つ か あ る が 、「 U n d e r

1995年ごろにネットスケープ社が次々と新けで見てほしいというなら、それは利用者

Construction」や「工事中」もその1 つ。

機能を取り入れたブラウザーを発表し、そに失礼な話だ。

サイトは必ず未完成な状態で公開するといれが熱狂的に支持されていた時代の流行

携帯電話に代表されるように、これからう決まりがあるわけではなし、この習慣もだ。現在では、ブラウザーの最新機能をやの時代はウェブを閲覧する環境が多様化す

そろそろなくなってもいいのではないだろう

みくもに取り入れることは避けられる傾向

る。できるだけ多くの人をターゲットにしか。工事中だらけのページはみっともないにある。また、クライアント側よりもサーたサイトを目指すなら、ブラウザーの独自し、期待してクリックしたリンク先が「工バー側に機能を持たせて、どんな環境でも機能よりも標準的な文法に気を使うべき事中」となっていたら、利用者はユーザビ活用できるサイトを作るのがトレンドだ。

だ。特定の層をねらったサイトならブラウ

リティーに欠けたサイトだと評価するだろ

いろんな環境でテストしていないことがザーを限定する意味もあるだろうが、公共う。コンテンツをすべて完成させてからサ気になるかもしれないが、どんなブラウザ

性の高い官公庁のサイトでブラウザーの指イトを公開するか、十分な内容を用意してーでもテキストだけは読めるものだ。CSS

定を見かけるのは困ったものだ。

から「さらに以下のようなコンテンツを今後お届けする予定です」のように書けばい
いだけの話だ。

220 INTERNET magazine 2000/11

インターネットマガジン／株式会社インプレスR&D

コンテンツ：一般的に英語では「内容」を意味する。インターネットやマルチメディアの世界では、文章や動画、音声、静止画などの素材やそれらで組み合わされるもの（ウェブページなど）をコンテンツと呼ぶ。
©1994-2007 Impress R&D

4 ユーザーへの指図は悪印象「800x600 以上でご覧下さい」のようにてくれるわけではない。利用者はウィンド

書かれているページがよくあるが、これはウのサイズを自由に変更できる。

非現実的なお願いだ。特定のサイトを見る

もちろん特定のサイズに合わせてサイトためにブラウザーを新しくインストールしたのデザインを統一するのは悪くないが、利り、パソコンを買い換えたりする人はいな

用者に押し付けるようなお願いを表記する

い。また、現状では大半の利用者が解像とサイトの印象は悪くなる。サイズに限ら度の高いモニターでウェブを利用しているずブラウザーやプラグインの指定などにもからと言って、指定のサイズでページを見言えることだ。

6 スタイルシートのやりすぎに注意
スタイルシートを使えば、柔軟でアクセ
シビリティーに優れたページが作れるという認識は広まってきたようだが、スタイル
シートさえ使えば何をやってもいいと勘違

5

いしてはならない。スタイルシートではサ

古いテクニックは使わない

イズを細かい単位で指定できるので、ついつい凝ってしまいがちだが、フォントサイJavaScript が初めて登場したころは、の重要な情報が表示される場所であり、表ズ大きくしすぎたり小さくしすぎたりするできることが少なかったので、限られた機示を勝手に書き換えるとページの使いやすと読みにくいページになる。長い文章には能を活用しようとして流行したのがステー

さが低下する。

サイズを指定せず、利用者の設定に任せたタスバーを使った文字のアニメーションだ。

テキストボックス（input 要素）を使っほうがいいだろう。また、むやみにたくさ

ダイナミックHTML をサポートしたブラウ

たアニメーションも同様に時代遅れのテク

んの色を指定したり、書体を変更したりす

ザーのシェアが高くなった今となっては、こニックだ。テキストボックスはフォームのると、品のないデザインになる。テクニッのテクニックは時代遅れに見える。そもそ

入力用部品であり、アニメーション効果に

クに走らずに、スタイルシートを使うときもステータスバーは、リンク先のURL など使うものではない。

にもユーザビリティーを念頭に置こう。

Topics ウェブサイト成功のためのポイント
ウェブ制作には、HTML の書き方からマーケティングまで幅広い知識が必要だ。成功するウェブサイトを作るためには、これから重点的に何に取り組んでいけばいいのかまとめてみよう。

1ページのデザインsサイト全体のデザイン
ロゴやトップページをデザインしただけで満足してはいないだろうか。利用者はサイトの表紙ではなく、そのサイト
で何ができるか、何が得られるかを評価する。個々のページだけではなく、サイト全体をどのように機能させるかをよく考えて設計しよう。ヤフーのように、サイト紹介のカテゴリーのページからそのジャンルの掲示板やショッピング、
オークションのページにも飛べる作りは大きなヒントになるだろう。

ブラウザー上の技術 sサーバー上の技術
検索機能のないニュースサイトを積極的に使おうとする人はいるだろうか。また、商品を並べるだけで、ブラウザ
ーからは注文できないサイトをショッピングサイトと呼べるだろうか。これからはますますサーバー上の技術が重要になる。サイト構築を仕事にしようとするなら、HTML や画像の作成技術だけではやっていけないだろう。サーバー上のプログラム作成まで含めたトータルなコーディネイト能力が求められる。

クールなサイトsユーザーの立場に立ったサイト
ウェブサイトでは、リアルなお店と違ってお客は並んで待ってくれたりしないし、テレビのように座って見ていてくれるわけではない。満足のいく結果が得られないと、すぐにほかのサイトに逃げてしまうだろう。いくらすばらしいと自信を持って提示しても、利用者に受け入れられるかどうかはわからない。制作者の主観だけに頼らずに、ユーザビ
リティーやアクセシビリティーを客観的にチェックできる制作スタイルが必要だ。

インターネットマガジン／株式会社インプレスR&D

URL（ユー・アール・エル／ Uniform Resource Locator）：ウェブページなどのアドレスをいう。WWWの場合はhttp://から始まる文字列で、ホスト名、ドメイン名、パス名、ファイル名を順に記述することで、世界中のWWW上のファイルを指示できる。
©1994-2007 Impress R&D

INTERNET magazine 2000/11

221

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバー
アーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ
番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.