高校「情報Ⅰ」単語帳 - 東京書籍「情報Ⅰ Step Forward!」 - 効果的なコミュニケーション

米認知科学者ドナルド・ノーマン(Donald A. Norman)が提唱した概念で、人間がモノに接したときに知覚される、行動の手掛かりとなる要素のことである。典型的には物体の形状やデザインなど視覚的な要素だが、発する音(聴覚)や表面の質感(触覚)などが手掛かりとなる場合もある。

例えば、ゴミ箱の設計者が上部に小さな丸い穴の空いた形状にデザインすれば、特に文字や絵文字で案内しなくても、それがビンや缶、ペットボトルなどを入れるものであることが伝わる。これは意図されたシグニファイアだが、通路で大きなプラ容器を雨漏りの水受けに使っていたらゴミを捨てられてしまう、といった意図しない(あるいは意図に反する)シグニファイアが生じることもある。

類義語と語源

似た概念に「アフォーダンス」(affordance)がある。モノと人間の間に生じる相互作用の可能性を表し、人間が知覚するかどうかに関わらずモノが宿している性質であるとされる。ノーマンは当初、デザインによって適切にアフォーダンスの手掛かりを与えることの重要性を説いていたが、デザイン上の手掛かりがアフォーダンスであるとする解釈が広まってしまったため、改めてシグニファイアの概念を提唱した。

「シグニファイア」の語は記号学の用語「シニフィアン」(仏語 “signifiant”、英語では “signifier” )から取られたもので、記号学ではある特定の内容を指し示す文字による表記や発話などを意味する。それによって指し示された実際の内容である「シニフィエ」(signifier)と対になる概念である。

国際規格のISO 9241-11では、ユーザビリティを「特定の利用状況において、特定の利用者によって、ある製品が、指定された目標を達成するために用いられる際の、有効さ、効率、利用者の満足度の度合い」と定義している。漠然とした「使いやすさ」よりは限定された概念で、ある人がある状況下である目的を達することがどれくらい容易であるかを表している。

ユーザビリティは利用者への情報やメッセージの提示の仕方やタイミング、言い回し、操作要素や選択肢の提示の仕方、操作の理解のしやすさや結果の想像しやすさ、操作のしやすさや誤りにくさ、誤操作に対する案内や回復過程の丁寧さ、利用者の操作に応じた表示や状況の変化(インタラクション)などの総体で構成される。

高いユーザビリティのために必要な実践は対象の種類(機器・ソフトウェア・Webページ等)や想定される利用者の属性、文脈や利用目的によって異なるため個別性が高く、ある状況では良い事例とされたものが別の文脈では悪い事例になる場合もある。

開発者が期待するユーザビリティが備わっているかどうか確かめるには、利用者(やそれに近い属性の人物)の協力を得て実際に使ってみてもらい、想定通りの操作が行われるか、利用者が不満や戸惑いを感じないかなどをテストするのが有効であるとされる。このような試験を「ユーザーテスト」(user testing)あるいは「ユーザビリティテスト」(usability testing)という。

対象物の機能や性能、内容、使い勝手といった性質そのものよりも、それを通じて利用者が得られる経験がどのようなものであるかに着目する概念である。対象物の持つ特性だけでは決まらず、利用者側の属性や個性、利用者を取り巻く環境や利用時の状況などにも強く影響を受けるため、作り手側ですべてを制御することは難しい。

よく混同されるが、「ユーザーインターフェース」(UI：User Interface)は対象物の具体的な使用・操作の方法や様式を定めたもので、「ユーザビリティ」(usability)は対象物の使い勝手、使いやすさを指す。ユーザエクスペリエンスはこれらの要素を含むが、これらを通じて得られる最終的な体験、および体験を通じて惹起される感情が中心となる。

また、従来は製品の使用感をある一回(初回)の使い方や印象に限定して捉えることが多かったが、ユーザエクスペリエンスはこれを通時的に捉える。すなわち、製品やサービスと利用者との出会い(プロモーションや販売・加入など)、使用の開始(開封や初期設定など)、使用の継続や反復(様々な状況・環境を含む)、使用の終了(廃棄や買い替え、解約など)といった各場面における利用者の感じ方をそれぞれ検討する。

“user experience” という表現自体は以前から使われていたようだが、1990年代半ばに当時の米アップルコンピュータ(Apple Computer)社(現アップル)に勤務していた認知心理学者のドナルド・ノーマン(Donald A. Norman)博士により、コンピュータやソフトウェアなどの分野で現在の用法が広まったとされている。

現在ではITの分野に限らず工業製品や小売業など様々な分野で引用される概念となり、また、「対象者の体験の総体に着目する」という考え方から「カスタマーエクスペリエンス」(CX：Customer Experience)など様々な “～ experience” という派生概念を生み出している。

言語や文化、人種、性別、年齢、体型、利き腕、障害の有無や程度といった違いによらず、できるだけ多くの人が同じものを同じように利用できるよう配慮されたデザインのことを意味する。

「バリアフリー」を始めとする従来の考え方では、「高齢者用」「左利き用」「車椅子用」のように特性に応じた専用のデザインを用意する発想が基本だったが、ユニバーサルデザインではこうした発想を極力排し、単一のデザインで万人が利用できることを目指している。

ユニバーサルデザインという用語は1985年に米ノースカロライナ州立大学のロナルド・メイス(Ronald Mace)教授によって提唱されたが、それ以前から実践されていた考え方を整理して名前をつけたものとされる。氏はユニバーサルデザインの7つの原則として「公平に使える」「柔軟性がある」「簡単で自明」「必要なことがすぐに理解できる」「間違いを許容する」「弱い力で使える」「十分な大きさと空間」を唱えている。

ユニバーサルデザインの具体例として、施設内の案内などを言葉ではなく絵文字で伝えるピクトグラム、様々な視覚特性を持つ人による調査・テストを経て開発された視認性の高いフォント、容器に刻まれた凹凸を触れば何が入っているか識別できるシャンプーやコンディショナー、手や指の状態によらず持ちやすく使いやすい文房具やカトラリーなどがある。

どんな身体的な特性がある人も等しく使うことができる、あるいは使いやすいデザイン・設計のことを「ユニバーサルデザイン」(universal design)というが、これを表現物の配色に適用し、色覚の特性によらず認識することができる、あるいは見やすいデザインを目指す考え方である。

人間の色覚(色の感じ方)は一様ではなく個人差があり、先天的な色覚異常や、緑内障、白内障など目の病気によっても大きな影響を受ける。カラーユニバーサルデザインでは、色によって情報の認知に差が生じないよう「なるべく多くに人が見分けやすい配色を選ぶ」「色が見分けられなくても情報が伝わるようにする」「色の名前を併記するなど色を言葉で伝達できるようにする」という3つの原則に沿ってデザインを進める。

カラーユニバーサルデザインは生物学者の伊藤啓氏と医学者の岡部正隆氏が「カラーバリアフリー」(color barrier-free)として提唱し始めたもので、2004年に両氏が中心となってNPO法人カラーユニバーサルデザイン機構(CUDO)が設立された。以降は「カラーユニバーサルデザイン」の名称で普及活動が進められている。同法人では見分けやすい色の組み合わせを集めた推奨配色セットを公表したり、カラーユニバーサルデザインに配慮した製品などの認証制度の運用などを行っている。

高齢や障害、病気、あるいは他の身体的・認知機能的な特性により運動や視聴覚機能に制約や偏りがあっても、機器やソフトウェアの操作、情報の入手、ネットサービスの利用などが可能である状態を意味する。

例えば、マウスなどによる画面上の位置指定が困難な場合に備え、キーボードやボタン型の入力装置、音声認識など他の入力機能のみで操作が行えるようにしたり、視力や視覚の状況に応じて、画面表示や文字の拡大、画面上の文字の読み上げなどの機能を選択できるといったように、様々な人が利用できるような備えが行われている状態を指す。

単にアクセシビリティといった場合はWebページについての「Webアクセシビリティ」のことを指すことが多い。また、IT分野以外でも、例えば建物や施設、設備などへの出入りや内部の移動のしやすさ、利用しやすさ(段差がない、スロープやエレベーターが整備されている等)のことをアクセシビリティということもあるが、これは日本語では「バリアフリー」(barrier free)という外来語で表現されることが多い(厳密にはバリアフリーはアクセシビリティより狭い概念を指すとする見解もある)。

スライドプロジェクタで映写するスライドフィルムを作成するためのソフトウェアが起源で、見出しや文章、箇条書き、図、表、画像、背景などをレイアウトして発表用の資料を一枚ずつ作成する。動画や音声を配置して適宜再生する機能を持つものもある。

作成した資料は全画面表示モードで一枚ずつ順に再生することができ、大画面のディスプレイやプロジェクタで投影する。発表者の話の展開に合わせて、本人あるいはコンピュータ操作の担当者がスライドをめくっていく。一枚のスライドの中で操作によって順に新しい要素が登場するといった仕掛けを組み込むこともできる。

多くのソフトは発表のジャンルやデザインごとにテンプレート(雛形)を用意しており、ゼロからすべての要素を配置しなくても、雛形に発表内容を組み入れていくだけで手軽にスライドを作成することができる。特定のソフトウェア向けのテンプレートを提供・販売しているWebサイトなどもある。

米マイクロソフト(Microsoft)社のMicrosoft Officeファミリーに含まれる「PowerPoint」(パワーポイント)が代表的なソフトウェアであり、スライド方式のプレゼンテーション資料を指して「パワポ資料」のように呼ぶことも多い。他に、米アップル(Apple)社のiWorkに含まれる「Keynote」(キーノート)や、米グーグル(Google)社のGoogle Workspaceに含まれる「Googleスライド」などがよく知られている。

サイト内の各ページには他のページへのハイパーリンクが設置され、これをたどってページ間を互いに行き来できるようになっている。入口や表紙にあたるページを「トップページ」または「ホームページ」(あるいはメインページ、フロントページ、インデックスページなど)という。

トップページにはサイトの概要や内容の案内、主要なページへのリンクが掲載されることが多く、ここを起点に閲覧を開始することが期待されるが、Webの特性上、検索エンジンの検索結果ページや他サイトからのリンクなどでトップ以外のページに直接訪問されることも多い。

Webサイトの構成

管理者があらかじめ作成した内容を提供する静的コンテンツ(静的ページ)と、Webサーバの拡張機能を用いて、ページの一部が動的に変化したり、電子掲示板(BBS)やコメント欄のように訪問者が内容を投稿できるコーナーが設けられる場合もある。

アプリケーションソフトのように閲覧者が対話的に操作して何らかの処理を行えるような構成になっているものもあり「Webアプリケーション」と呼ばれる。また、そのような仕組みを用いて利用者にサービスを提供するものを「Webサービス」と呼ぶことがある。

Webサーバ/ドメインとの違い

Webサーバは「IPアドレス」または「ドメイン名」(ホスト名まで含むFQDN)、個別のWebページは「URL」(Uniform Resource Locator)という識別子で指し示されるが、Webサイトそのものを指し示す識別子やサイトの範囲を定義する設定情報のようなものはない(補助的に利用される技術はあるが必須ではない)。

一つのWebサイトが複数のWebサーバ(ドメイン)にまたがって設置・運営されたり、一つのWebサーバがサブディレクトリごとに異なるWebサイトを提供している場合もある。WebサーバとWebサイトは一対一に対応するとは限らず、ページがどのサイトに属するのか確実に見分ける仕組みもない。

このため、「Webサイト」という括りは技術的に厳密に定義できるものではなく、便宜上のものと言える。通常はトップページのURLをWebサイトの所在とし、同一の管理者の管理権限の及ぶ範囲をWebサイトの範囲と考えることが多い。

ネットサービスの個人スペースと区別する用法

近年では、ブログやSNS、動画共有サービスのように登録利用者が内容を投稿できる専用のスペースを設け、インターネット上に公開できるサービスが普及している。巨大なサービス全体のWebサイトが利用者ごとのスペースに分割されている。

これも外形的にはWebサイトの一種に違いないが、利用者側から見て、「私のブログ」「私のInstagram」「私のサイト」といったように、ネットサービス上の「借り物」のスペースと区別して、従来のような構成のWebサイトを「サイト」と呼ぶことがある。

標準的なWebページは「HTML」(Hypertext Markup Language)と呼ばれるマークアップ言語で記述されたテキストファイルと、その中でページ中に埋め込んで表示するよう指定された画像ファイルなど外部のデータから構成される。

HTMLファイル中には見出しや文章など表示される文字データが記述されているほか、特殊な記法により文書全体や個々の構成要素の構造や設定、レイアウト、見栄えなどに関する指示や設定が記載される。近年では見栄えに関する情報は「CSS」(Cascading Style Sheet)と呼ばれる別の言語で記述し、さらにCSSファイルとして画像などと同じように文書本体から分離されることが多い。

JavaScriptなどのプログラミング言語で簡易なコンピュータプログラム(スクリプト)を記述することもでき、動きのある特殊効果や閲覧者による対話的な操作などを実現することができる。動的に表示内容を変化させ、アプリケーションの操作画面としてWebページを用いる方式を「Webアプリケーション」という。

Webページは印刷物のページのようにあらかじめ固定されたサイズが決まっているわけではなく、ページごとに大きさはまちまちなのが一般的で、ブラウザなど表示するソフトウェアの画面やウィンドウに収まりきらない分は途中で途切れて表示され、スクロール操作や拡大・縮小表示などで表示範囲を閲覧者が指定することができるようになっている。

リンクとWebサイト

Webページ中に別のページへの「ハイパーリンク」(hyperlink、単にリンクとも)と呼ばれる参照情報を埋め込むことができ、閲覧者が指定することにより即座に参照先のページを開くことができる。平面上にページを点、ページ間を繋ぐハイパーリンクを線として書き表すと、張り巡らされた網目がクモの巣(英語で“web”)のように見えることが “Web”という名称の語源となった。

関連する複数のWebページを互いにリンクしてひとまとめにして公開することが多く、そのような一連のページ群のことを「Webサイト」(website)という。本の表紙や目次に当たるサイトの入口となるWebページを「トップページ」(top page)「フロントページ」(front page)「メインページ」(main page)あるいは「ホームページ」(home page)などという。

ホームページとの違い

Webページのことを「ホームページ」と呼ぶこともあるが、ホームページという語は当初はWebブラウザを起動した時に最初に表示されるWebページのことを表していた。これは「スタートページ」「起動ページ」とも呼ばれる。

転じて、「Webサイトのトップページ」という意味でも用いられるようになった。さらにWebが一般に普及する過程で、「Web」という英単語に馴染みがなかったことなどから、Webページそのもののことをホームページと呼ぶ用法が広まった。

HTMLでは、文書の一部を“<”と“>”で挟まれた「タグ」と呼ばれる特別な文字列で囲うことにより、文章の構造や修飾についての情報を文書に埋め込んで記述することができる。例えば、HTMLファイル中で <br> と書かれた場所はブラウザなどにおける表示では改行が行われ、<h1>HTMLの概要</h1> のように括られた箇所は大見出しとみなされ(通常の設定では)上下の要素から少し離れた独立した行に大きくて太い文字で表示される。

様々な機能や意味を持つタグが定義されており、文章の中で表題や見出し、段落の区切りを指定したり、箇条書きの項目を列挙したり、縦横に項目が並んだ表を定義したり、文書の一部として画像や音声、動画を埋め込んだり、他の文書へのハイパーリンクを設定したりすることができる。

HTML文書の構造

典型的な構造のHTMLは冒頭にHTMLのバージョンなどを示すDOCTYPE宣言があり、以下ページ全体がhtml要素(htmlタグで括られた領域)となる。

html要素内にはhead要素とbody要素に分かれ、head要素には文書についての情報が記述される。ページタイトルや言語、文字コード、他の文書との繋がり、読み込むスタイルファイルやスクリプトファイルなどを指定する。body要素が表示されるページの本体で、具体的な内容が記述される。

他の言語の混在

他の言語による記述をHTML要素として文書中に記述することができる。例えば、CSS(カスケーディングスタイルシート)による要素の見栄えの記述を文書中にまとめて記したい場合は<style>と</style>で括られた領域に記述することができる。

また、<script>と</script>で囲った領域にはJavaScriptという簡易なプログラミング言語を用いてスクリプトを記述することができ、ページがブラウザなどに表示された後に実行される。

これら別の言語による記述はHTMLタグ中の属性(style属性やonclick属性)の値として記述することもできる。

歴史

HTMLは元々SGML(Standard Generalized Markup Language)の簡易版として生まれ、最初の標準規格は1993年にIETFによって発行された。1994年にW3Cが設立され、以降の改訂はW3Cが担当している。

当初は主に文章の論理構造を記述する言語だったが、Webの普及が進むにつれて要素の見栄えに関する仕様がブラウザメーカー主導で相次いで追加されていった。その後、表示の仕方を記述する専用のスタイル言語としてCSS(Cascading Style Sheet)が考案され、文書の論理的な構造の記述をHTMLに、見栄えの記述をCSSに分離すべきとされるようになった。

2000年前後には汎用的なマークアップ言語であるXML(Extensible Markup Language)に準拠するよう一部の仕様を改めたXHTMLへの移行が企図されたが普及せず、以後も独立した規格として維持されている。

マークアップ言語のタグ

Webページなどの記述に使われるHTMLやXMLなどのマークアップ言語では、元になる文書に「<」と「>」で囲まれた標識を埋め込むことにより、表示ソフトに対して文書構造や書式、文字飾りなどを指示したり、画像や他の文書へのリンクを埋め込むことができるようになっている。

このように、地の文とは別の主体や階層によって解釈され(文章を読むのは人間だがタグを表示に反映するのはソフトウェア)、付加情報を埋め込む特殊な文字列などのことをタグと言う。

タグによる情報の分類

ソフトウェアやネットサービスで情報を分類・整理する際に、その属性や特徴を表す単語や短いフレーズをタグという。利用者が考えた様々なタグを対象に対応付けて分類していく手法をタギング(tagging/タグ付け)という。

単語を書いた付箋をたくさん貼り付けるようなイメージの分類法で、共通点の乏しい多様な対象が集まっていて階層構造などで整理・分類するのが難しい場合や、様々な側面から情報を検索・抽出したい場合などに用いられる。

例えば、ある歌手の歌唱した音声を保存したファイルに対して、曲名、収録媒体、歌唱者、作曲者、作詞者、発表年などをタグ付けしておけば、大量のファイルがあってもこれらの情報に基いて検索や分類、共通の属性を持つファイルの抽出・一覧などを容易に行なうことができる。

Web規格では、文書内の文字情報と論理的な構造(見出しや本文、箇条書きなど)、画像など文字以外の要素の組み込みなどはHTMLで記述し、それらの画面上での位置関係や見た目の指定、装飾などはCSSで記述した「スタイルシート」により指定することとされている。

CSSによるスタイル指定はHTML文書中に直接記述することもできるが、外部のファイルにまとめて記述してHTMLから呼び出す形が望ましいとされる。CSSをファイルに格納する際の標準の拡張子は「.css」である。

基本的な書式

基本的な書式は「要素の一致条件 {プロパティ名1:値1;プロパティ名2:値2;…}」というもので、文書内で条件に一致する要素に対し、各プロパティに値が適用される。例えば「p{font-size:16px}」という指定は文書中に登場するHTMLのp要素のfont-sizeプロパティ(文字サイズ)を16ピクセルに指定することを表す。この文を必要なだけ列挙して文書の書式を設定する。

指定できるプロパティは要素の大きさや配置、要素間の位置関係や空白、要素の境界線や余白、要素間の間の空白や周囲の余白、文字の大きさや文字や行の間隔、書体(フォント)の種類や変形(太字や斜体、上付き、下付きなど)、箇条書き(リスト)の表示書式、背景色や背景画像など多岐にわたる。

HTMLタグが親子関係(包含関係)にある場合、多くの設定値は親要素に指定されたものが子要素、孫要素に引き継がれ、子要素で指定されたものが追加されていく。このように設定値が上から下へ伝播していく様子を階段状の滝を意味する “cascade” (カスケード)になぞらえてこのような名称となった。

見栄えにCSSを用いることでHTML文書に直接見栄えを記述することを避け、文書の論理的な構造をHTMLに、見栄えに関連する情報をCSSに分離することができる。構造のみ、あるいは見栄えのみを修正することが容易になり、対象機器などに応じてCSSを切り替え、それぞれに適した表示や印刷を行えるようになる。

セレクタ

CSSで要素の指定に用いられる一致条件を「セレクタ」(selector)という。要素型(タグ名)やクラス、ID、属性値、先頭からの順番など、様々な指定方法が用意されている。

「div」「a」などアルファベットから始まるものはHTMLの要素型(タグ名)を指定する「要素型セレクタ」(type selector)、「.myclass」のようにドット(ピリオド)から始まるものはclass属性の値を指定する「クラスセレクタ」(class selector)、「#myid」のようにシャープ(ナンバーサイン)から始まるものはid属性(またはname属性)の値を指定する「IDセレクタ」(ID selector)で、この3つの組み合わせが基本となる。

他にも、「要素:nth-child(n)」で子要素の特定の順番を指定したり、「要素[属性名="値"]」で特定の属性値を持つ要素のみを取り出したり、「要素:hover」(マウスオーバー時の挙動を指定)など要素が特定の状態にある場合を指し示す書式などが用意されている。

文書内の要素の階層構造(親子関係)に基づいて特定の位置にあるものだけを指定することもできる。例えば、「p>a」のような大なり記号は「子セレクタ」と呼ばれ、親要素直下の子要素(この例ではp要素直下のa要素)を指す。「p a」のように空白で繋ぐ指定方式は「子孫セレクタ」と呼ばれ、孫要素などすべての子孫要素(この例ではp要素内のすべてのa要素)を指す。

歴史

最初の規格(CSS Level 1)は1996年にW3Cによって標準化され、1998年に拡張された「CSS Level 2」標準が勧告された。長年の間これがCSS標準として定着していたが、2011年に大改訂された「CSS Level 3」(CSS3)が策定された。

CSS3からは仕様がモジュール(部品)化されたため、CSS3準拠のモジュール規格はその後何年にも渡り新たに登場し続けている。メディアクエリやセレクタなどで「Level 4」仕様の検討が始まっているが、今後は「CSS4」(あるいは5、6など)のような単一の統合されたバージョン番号は用いられない可能性がある。

RGB(赤緑青)各色を16進数の「00」から「FF」まで均等に6段階の「00」「33」「66」「99」「CC」「FF」に分割し、「#336699」「#FF66CC」といったようにこれらの値の任意の組み合わせで色を定義する。「#000000」(黒)から「#FFFFFF」(白)までの間に、赤(R)6段階×緑(G)6段階×青(B)6段階の計216色が定義される。

値を等間隔に区切って機械的に組み合わせたものであるため、視覚的に区別する必要が薄い暗色側が豊富な一方、明色側は逆に大雑把すぎてデザインに用いるには難しい配色となっている。フルカラー表示が一般的になった現在はほとんど意識されることはない。