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

米認知科学者ドナルド・ノーマン(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スライド」などがよく知られている。

ある目的や形式に沿って作成されたデータの雛型で、利用者はこれを複製して個別の内容を記入してくだけで目的のデータを完成させることができる。あらかじめ記入例が書き込まれており内容を上書きしていく形式と、空欄を埋めて作成する形式がある。

文書作成などを行うためのアプリケーションソフトの中には、伝票や履歴書など一般的な形式の書類についてテンプレートが同梱されており、項目を埋めていくだけで簡単に文書が作成できるようなっているものもある。

また、雛型の意味から転じて、典型例、標準的な方法、紋切り型、型通りのやり方、様式、定石、王道、といった意味合いで比喩的に用いられることも多く、俗に「テンプレ」と略されることがある。(問い合わせに対する)「テンプレ対応」(ストーリーなどの)「テンプレ展開」のように使う。

C++言語のテンプレート

プログラミング言語の一つであるC++言語の機能の一つにテンプレートがあり、データ型に依存しない関数やクラスを定義することができる。

関数などを定義する場合、引数や返り値のデータ型を指定しなければならないため、様々な型の値を投入する可能性がある場合は中身の処理は同じでデータ型だけが異なる関数を定義しなければならなかった。

テンプレートでは関数などを宣言する際にデータ型の部分を引数(テンプレート仮引数)にしておき、呼び出し時にどのデータ型でその関数を呼び出すかを指定(テンプレート実引数)する。一度の定義で様々なデータ型による呼び出しを実装することができる。

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

トップページにはサイトの概要や内容の案内、主要なページへのリンクが掲載されることが多く、ここを起点に閲覧を開始することが期待されるが、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ページそのもののことをホームページと呼ぶ用法が広まった。

ハイパーリンク (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/ダイナミックリンク)という。

ハイパーリンクは参照先の識別情報や所在情報などを特定の記法で記述したもので、コンピュータシステムによって参照先を容易に呼び出したり照会したりできるようになっている。このようなハイパーリンクの仕組みによって様々な文書などの情報資源を相互に結びつけた情報メディアを「ハイパーテキスト」(hypertext)あるいは「ハイパーメディア」(hypermedia)という。

現代において最も身近で最も普及しているハイパーテキストシステムはインターネット上に構築されたWeb(ウェブ、WWW：World Wide Web)であり、単にハイパーリンクといった場合はWebページなどWeb上の様々な情報を相互に結びつけるリンクのことを指すことが多い。

Web/HTMLのハイパーリンク

Webページでは文書の構造化に用いるHTMLおよびネット上の所在情報を表すURL(Uniform Resource Locator)の記法に従って、ページ内の構成要素から他のWebページなどインターネット上の情報資源へハイパーリンクを設けることができる。

HTMLではa要素(アンカータグ)で文字や画像などにリンクを設定でき、リンク先としてURLやパスなどを指定できる。例えば、「<a href=“リンク先URL”>リンクテキスト</a>」のように記述すると、リンクテキストで示された文字列がハイパーリンクとなり、飛び先としてhref属性で記述したリンク先URLが設定される。

href属性に「href="https://www.example.com/"」のようにURLを設定すれば外部の任意のサイトを指定できるが、「href=“/index.html”」のように絶対パスを指定したり、「href="../about.html"」のように相対パスを指定することでサイト内リンクとすることもできる。

また、「href="#section9"」のように同じページ内の別の箇所を指定したり(ページ内リンク)、「href="mailto:info@example.com"」のようにメールアドレスなどWeb以外の資源をURI記法に従って指定することもできる。

同じWebサイト内のページ間を連結するハイパーリンクを「内部リンク」、外部の別のサイトへ(あるいは外部から)繋ぐリンクを「外部リンク」という。画像ファイルなどページ(HTMLファイル)以外の資源へ外部から直接繋いだリンクを「直リンク」、サイトの深い階層にある個別のページを外部から直に参照するリンクを「ディープリンク」という。

Microsoft Excelのハイパーリンク機能

表計算ソフトのMicrosoft Excel(エクセル)では、Webページのリンクと同じように、セル内のテキストや画像にハイパーリンクを設定し、シート内の他のセルや、他のシート、他のExcelファイル、外部のWebページ(URL)などを参照することができる。

セルに対する右クリックメニューの「リンク」などから設定できる。リンクを設定したセルのテキストは文字色が変わり、マウスホバーするとマウスポインタが指の形に変化してクリッカブルであることを知らせる。そのままクリックあるいはタッチすると、埋め込まれたリンク先へ移動する。

現代ではWeb上のハイパーリンク機能は単に「リンク」と呼ぶのが一般的となっており、「ハイパーリンク」はもっぱらExcel(やWordなど他のMicrosoft Officeアプリケーション)のリンク機能を指す用語として用いられるようになってきている。

他のハイパーリンク技術

WebおよびHTML以外にもハイパーリンクの機能を実装した技術規格やシステムは存在する。例えば、XMLに高度なハイパーリンク機能を提供する「XLink」では、複数の資源の同時参照や要素外からのリンク設定、外部資源間のリンクの設定など、HTMLのリンク仕様にはない強力な機能が定義されている。

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への移行が企図されたが普及せず、以後も独立した規格として維持されている。

人間が用いる自然言語(日本語、英語など)で書かれた文書の中に、特定の記法を用いてコンピュータ向けの制御データを埋め込むことをマークアップという。マークアップはソフトウェアによって解釈され、文書の見栄えを変更したり、表のような構造化されたデータ集合を定義することができる。

言語によってマークアップの構文や記法、指定できる内容などは異なっている。例えば、文書中に見出しを設定するには、HTMLでは「<h1>見出し</h1>」のように、TeXでは「\section{見出し}」、MarkDownやWiki記法では「# 見出し」のように記述する。

例えば、「振り仮名のことをルビといいます」という文章中にHTMLを用いて「<ruby>振り仮名<rt>ふりがな</rt></ruby>のことをルビといいます」というマークアップを挿入すると、Webブラウザがこれを解釈して「振り仮名ふりがなのことをルビといいます」のように表示する。

文書中にマークアップを記述するための記法や語彙、文法などを定めたコンピュータ言語を「マークアップ言語」(markup language)という。HTMLやTeX、Markdown、Wiki記法のように文書を構成するためのマークアップが有名だが、画像データやソフトウェアの設定ファイルなどへの応用例もある。

また、SGMLやXMLのように、マークアップ言語の記法のみを規定しており、特定の対象や用途に特化した語彙を定義することで新たにマークアップ言語を作り出すことができるメタ言語も存在する。例えば、SVGはXMLの仕様と記法を用いて画像の構成要素を記述することでベクター画像を構成することができる。

マークアップ言語のタグ

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

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

タグによる情報の分類

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

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

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

画像など文字以外の要素をページ内に配置する際、そこに何が置かれているのかを説明する短い文字列を代替テキストとして指定する。この文字列を「altテキスト」「代替テキスト」(alternate text)などと呼ぶ。何を記述するかは制作者が任意に決められるが、HTMLの仕様上はその要素の代わりとして要素が伝達したい内容を記述すべきとされる。

グラフィック表示の通常のWebブラウザでページを表示した際には画面上には表示されないが、ブラウザによってはマウスホバー(マウスポインタを要素の上に重ねて静止すること)など特定の操作によって表示させることができる場合もある。

また、テキストブラウザや音声ブラウザなどグラフィック表示以外のブラウザソフトでは文字以外の要素は直に扱うことはできないが、代替テキストが設定されていれば利用者にその要素の意味を伝えることができる。

検索エンジンの情報収集ソフト(クローラやインデクサ)などの中にも、要素が何を表しているのか理解する参考として代替テキストの内容を読み取って処理するものがある。

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

通常、Webサイトを構築するには、見出しや文章、画像など個別の要素の作成に加え、HTMLやCSSなどのコンピュータ言語でレイアウトやデザイン(スタイル)を記述し、ページ間にリンクを設定するなどの作業を行う必要がある。

CMSではこうした要素の入力や編集、登録を行うことができ、専用のデータベースで一元的に管理する。コンテンツの登録や編集、サイトの管理は専用のWebアプリケーションで行う方式が多く、利用者がWebブラウザで編集や設定変更を行うと、Webサーバ側のソフトウェアがサイトへの反映・更新を自動的に行なってくれる。

HTMLの記述など専門的な知識や技能が要求される作業の多くをソフトウェア側が肩代わりしてくれるため、利用者は文章や画像などの掲載内容の作成や編集に専念できる。サイト内のナビゲーション要素なども自動生成されるため、ページが追加されるたびに関連ページにリンクを追加するといった作業も不要となる。

知識があればページのデザインやサイトの構造などを作り込むことができる機能が提供されている場合もあるが、デザインなどは何種類かのテンプレート(雛形)があらかじめ用意されており、一つを選択するだけですぐにサイトを開設できるようになっていることが多い。

CMSの種類

狭義のCMSは、サイトの種類や構造を限定しない汎用的なWebサイト構築・運用ソフトを指し、多くは商用ソフトウェア製品として企業が開発・販売している。XOOPSやDrupal、Joomla、concrete5のように著名なオープンソースソフトウェアもある。

広義には、ブログツールやWiki、SNS構築ソフト、ECサイト構築ソフトなど、特定ジャンルのサイト構築・運用を行うためのソフトウェア全般が含まれる。WordPressやMovable Typeのようにブログツールから発展して汎用的なCMSのように使われている例も多い。

近年ではインターネット上でのCMSの運用と、制作したWebサイトの公開を請け負うネットサービスとして、各種のブログサービスやレンタルWiki、ホームページ作成サービス(WixやJimdoなど)なども発達している。自らWebサーバを構築・運用するのが難しい個人利用者や中小事業者の多くはこのようなサービスを通じてCMSを利用している。

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

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

もともと「ワードプロセッサ」(word processor)と呼ばれる文書作成・編集専用のコンピュータ製品があり、その機能を汎用のパソコンなどの上で動作するソフトウェアとして実装したものであるためこのように呼ばれる。

特定の大きさの紙面に文章や見出し、箇条書き(リスト)などを配置し、文字の大きさや書体(フォント)を指定したり、字間や行間を調整したり、複数の段に分けて表示したり、画像や図表を埋め込んだりすることができる。

同じ文字入力・編集ソフトでも、紙面の構成を前提とせず、文字データの表示、入力、編集のみができる(見栄えを指定する機能がない)ソフトウェアは「テキストエディタ」(text editor)と呼ばれ、区別される。

1980年前後のパソコン(当時はマイコンとも呼ばれた)黎明期から存在するソフトウェアで、業務用の高価なワープロ専用機の機能を安価な個人用コンピュータでも利用できるとあって、家庭向け、オフィス向け共にパソコンの主要なアプリケーションとして広く普及した。現代では表計算ソフトなどと共にオフィスソフト(オフィススイート)の主要な構成要素として提供されることも多い。

歴史

欧米では1980年代には米ワードパーフェクト(WordPerfect)社の「WordPerfect」の人気が高かったが、1990年代になるとマイクロソフト(Microsoft)社の「Microsoft Word」(マイクロソフト・ワード)が同社のWindowsと共に劇的に普及し、事実上の標準に近い存在となった。現在でも他社製品がWordのファイル形式(.docファイル/.docxファイル)の読み書きに対応するなど標準的なソフトとなっている。

日本では日本語の扱いの特殊性などから1980年代の黎明期に国産ソフトが主流となり、管理工学研究所の「松」やジャストシステムの「一太郎」、ワープロ専用機の流れを継ぐ富士通「OASYS」などの人気が高かった。1990年代にはWindowsの普及と共にWordが優勢となった。

現代では単にワープロといった場合は汎用コンピュータ製品のオペレーティングシステム(OS)上で動作するアプリケーションソフトとしての文書作成ソフトウェアを指し、機器としてのワープロは「ワープロ専用機」(word processor appliance)と呼ぶのが一般的である。

欧米には文書作成機器としてタイプライターが19世紀から使われていたが、日本では日本語の壁に阻まれ、そのような機械の開発は無理と考えられていた。しかし、コンピュータの力を借りて、文書作成機械、今日のワープロ専用機の開発に成功した。

最初のワープロ専用機は東芝が1978年10月に発売した「JW-10」(TOSWORD)である。これは事務机のような形態・サイズのコンピュータで、ハードディスクやフロッピーディスクドライブを内蔵した本体、CRTディスプレイ、キーボード、印刷装置などからなる。発売の年に制定されたJIS漢字コード第1・2水準の6802字の入力・表示に対応し、当時としては完成度が高かった。

初期のワープロ専用機は文字入力、簡単な表組み機能を備えたものに過ぎなかったが、高機能化が進むにつれ表計算機能や図表作成機能などの高度なソフトウェアが搭載されたり、イメージスキャナやタッチペン入力など新しい入出力機器が内蔵されるようになっていった。

インターネットの普及が始まると、モデムを内蔵し、Webブラウザや電子メールソフト、HTML文書作成機能などを持つものも現れた。初期の機種は各社間でファイルのフォーマットが異なるなど融通を欠いていたが、ワープロ文書のプレーンテキストへの変換機能、各社間のワープロ文書の相互変換機能などが準備された。

1980年代には電機メーカー各社がワープロ専用機を発売し、一家に一台普及するのではないかと言われるほど活況を呈した。富士通の「OASYS」シリーズなど、根強いファンを持つ名機も登場した。しかし、1990年代後半のパソコンの低価格化と普及率の上昇、パソコン向けワープロソフトの高機能化などに押され、現在では新規の開発・販売などは行われておらず歴史上の存在となっている。