高校「情報Ⅰ」単語帳 - 数研出版「高等学校 情報Ⅰ」 - 効果的なコミュニケーション

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ハイパーリンク (hyperlink)

Webの分野では、ある文書の中に記述された、別の文書など何らかの情報資源の所在を指し示した要素のことを「ハイパーリンク」(hyperlink)と呼び、これを略してリンクという。

資源の所在はURL/URIと呼ばれる統一された記法が用いられ、Webサイト内に別のWebページや、インターネット上の別のWebサイト上のページ、ローカルファイル、電子メールアドレスなど様々な対象を指し示すことができる。

Webブラウザ上では何らかの表示要素(文字や画像など)の付加的な属性として扱われ、マウスポインタを合わせてクリック(タッチスクリーンの場合は指先やペン先でタップ)すると、指し示した先の資源を読み込んで表示が切り替わる。

通信機器間のリンク

通信ネットワークの分野では、一対の機器の間などで信号やデータを送受信できる状態にある回線や伝送路のことをリンクということがある。

機器間で物理的に信号の送受信が可能で、一定の伝送手順に従って特定の形式のまとまった単位のデータ(フレームやセル、データグラムなど)を互いに伝送するすることができる状態を指す。このような接続状態を確保することを「リンクする」「リンクを確立する」などと表現することがある。

通信手順や仕様を階層化したモデルでは、何らかの物理回線上でリンクを確立してデータを伝送するための伝送手順や伝送形式を定めた階層のことを「リンク層」あるいは「データリンク層」という。物理層(第1層)とネットワーク層(第3層)の中間であるため「第2層」(L2：Layer 2)とも呼ばれる。リンク層の技術規格としてEthernetやWi-Fi、PPPなどがよく知られる。

ファイルシステムのリンク

コンピュータのストレージ内でデータをファイルやディレクトリなどの単位で管理するファイルシステムでは、ファイルやディレクトリを本来の位置とは別の位置から参照できるようにしたものをリンクという。

このうち、あるファイルやディレクトリの実体に複数の名前を付け、それぞれが実際のファイル名やディレクトリ名として等しく機能するようにしたものを「ハードリンク」(hard link)という。

一方、すでに存在するファイルやディレクトリを指し示す特殊なファイルなどを作成することにより、本来とは別の位置にそのファイルやディレクトリへの参照を作成することができる機能を「ソフトリンク」(soft link)という。この機能はWindowsでは「ショートカット」、macOSでは「エイリアス」、UNIX系OSでは「シンボリックリンク」として知られている。

プログラムのリンク

ソフトウェア開発やプログラミングの分野では、機械語などで書かれたプログラム(オブジェクトコード)が収められた複数のファイルを結合し、実行可能形式のファイルを生成することをリンクと呼ぶ。

開発者が作成したソースコードから変換されたオブジェクトコードに、そのコード中から参照されているライブラリなど既存のコード群を統合して実行可能な状態にする。「リンカ」(linker)と呼ばれる専用のソフトウェアで自動的に行われる。

一つのファイルにすべてのコードを連結する方式を「静的リンク」(static link/スタティックリンク)、実行時に必要に応じて外部のファイルをメモリ上に呼び出す方式を「動的リンク」(dynamic link/ダイナミックリンク)という。

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など)のような単一の統合されたバージョン番号は用いられない可能性がある。