ITパスポート単語帳 - 情報デザイン

1996年にアメリカの建築家・グラフィックデザイナー、リチャード・ワーマン(Richard Saul Wurman)氏が提唱した情報の整理法で、世の中に存在する様々な情報は5つの基準を用いて整理することができるとする考え方である。“LATCH” の名称は、“Location” (場所)、“Alphabet” (文字)、“Time” (時間)、“Category” (種類)、“Hierarchy” (階層)の頭文字を繋いだもの。

“Location” は「場所」「位置」という意味で、情報を空間的な位置関係に基づいて並べ替えたり配置したりグループ化する方法を指す。都道府県名を北から順に並べたり、画面に地図を表示してアイコンなどで位置を指し示すといった手法などが該当する。

“Alphabet” は情報を項目名や関連する属性のアルファベット順(辞書順、あいうえお順)で並べたりグループ化する方法を指す。図書館の書架で著者のあいうえお順に蔵書を整理したり、CD/DVD販売店やレンタルビデオ店で作品名やアーティスト名などの辞書順で陳列棚を構成する手法などが該当する。

“Time” は情報を時系列に並べたり、紐付けられた日付や時刻に基づいてグループ化する方法を指す。天気予報を時刻ごとに一列に並べたり、カレンダーから日付を選んでスケジュールを確認できるようにしたり、ブログの記事を新しい順に並べたり、展覧会や博物館の展示を時代や時系列に沿って並べる手法などが該当する。

“Category” は情報を種類や属性に応じてグループ化する方法を指す。小売店の売り場や陳列棚を同種あるいは類似の商品、互いに関連性の高い商品(鍋ものコーナーなど)、共通する性質や属性を持つ商品(冷凍食品など)ごとにまとめたり、Webサイトを同じ種類の情報を掲載しているページごとにカテゴリー分けする手法などが該当する。

“Hierarchy”は何らかの尺度に基づく順位や順序、階級などに従って情報を並べたりグループ化する方法を指す。サイズや価格など量的な基準による大小順の並べ方や分類、人気度や顧客満足度など評価に基づく順位付け(ランキング)、その他、重要度や使用頻度など何らかの量的データや尺度による上下や大小、高低によって情報を整理する手法が該当する。

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

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

類義語と語源

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

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

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

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

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

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

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

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

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

コンピュータの機種や入出力機器、ソフトウェアの違いや、子どもや高齢者、障害者といった身体的特性の違いによらず、なるべく多くの人がサイト内の情報を見つけ出し、Webページを開いて内容のすべてに触れることができる状態のことを意味する。

例えば、特定の画面サイズや操作法に依存しないレイアウトやメニュー構成にしたり、漢字やアルファベット、外来語にふりがなや言い換えを併記したり、文字サイズや配色を簡単に変更できるようにするといった対応が必要になる。

また、読み上げソフト(スクリーンリーダー/音声ブラウザ)で音声に変換しても意味が通じるよう、文字情報だけで内容が把握できるようにしたり、画像や動画、音声に内容を説明する代替テキスト(alt属性)を付与したり、すべての要素をキーボード操作で指定できるようにしたりといった配慮も必要になる。

Web技術の標準化団体であるW3C(World Wide Web Consortium)は作業部会WAI(Web Accessibility Initiative)を設置して「WCAG」(Web Content Accessibility Guidelines)と呼ばれるガイドラインを発行し、Web制作者・開発者へ対応を促している。1999年に初版(WCAG 1.0)が発行され、2008年に改訂(WCAG 2.0)された。

また、日本工業規格(JIS)にはWebアクセシビリティの国内標準として2004年に「JIS X 8341-3」が策定され、2010年(JIS X 8341-3:2010)と2016年(同:2016)に改訂された。これは一般に「ウェブコンテンツJIS」と通称され、国や自治体ではWebサイトを制作する際の調達要件としてこの標準への準拠を求めている。

情報や案内を単語や文章で記載するとその言語が読めない人には内容が伝わらないが、様々な場所で共通して使われるピクトグラムを描いておけば、言葉が分からなくても最低限の内容は伝達できる。文字のみの場合よりもよく目立ち、ひと目ですぐに情報が伝わる利点もある。

代表的な例として、公共施設などにあるトイレの男女のマーク、障害者用を表す車椅子のマーク、非常口のマーク、禁煙マークなどがある。その場所における禁止事項や危険についてピクトグラムを列挙した看板などもよく見かける。

図柄は線や図形を組み合わせた単色か二色(背景色を含めれば2～3色)のシンプルなデザインとすることが多い。「赤は禁止、黄色は注意」「青は男、赤は女」といった具合に色の違いに意味が込められている場合もある。

駐車場の「P」マークや案内所の「i」マークのようにアルファベット頭文字をモチーフとする慣例がある少数の事例を除き、文字部分が読めなければ意味が伝わらないデザインにはしないのが原則である。図柄の下などに「立入禁止」のように補助的に内容を表す単語を添えることはある(厳密にはこの部分はピクトグラム本体に含まれないとも言える)。

施設の設置者などが独自にデザインして掲示する例も多いが、社会的に共通してよく使われるものは標準の図柄が国際規格や国内規格で定められている。一般的な案内用のピクトグラムについて国際標準化機構が定めたISO 7001や、危険や警告、禁止などを表す標識を定めたISO 7010、これらを反映して定められた日本国内のJIS規格であるJIS Z 8210(案内用図記号)などがよく知られている。

単なるグラフやイラストではなく、様々な視覚的な要素を組み合わせ、色彩や形状、大きさ、配置などをデザインすることにより、一目で概要を把握できるように表現された画像を意味する。アニメーションする動画や対話的に操作できるソフトウェアの形に仕上げたものもある。

日常的によく目にする例として、鉄道の路線図や交通標識、各地の天気予報を地図に重ねて表示した画像、各地域の統計値を地図に書き入れた図などがある。科学技術の分野では、人工物の構造図や自然現象の模式図などに補助的な線や矢印、注釈、数値などを書き入れた画像がよく用いられる。

人間が手足の動きなどを通して機械を操作したり、機械が現在の状態や結果を人間の視覚や聴覚、触覚などを通じて知らせる手段、および、そのための器具や装置などのことを指す。

人間が指示を与える手段としてはスイッチやボタン、ハンドル、ダイヤル、ペダル、リモコン、マイク、キーボード、マウスなどが含まれ、機械が情報を伝える手段としては液晶画面やメーター、ランプ、スピーカーなどが含まれる。

産業機器などの場合、パソコンなどから遠隔で機械の状態を把握したり、設定や操作を行うためのソフトウェアを「HMIソフトウェア」と呼び、これを指してヒューマンインタフェースという場合もある。コンピュータにおけるインターフェースは特に「ユーザーインターフェース」(UI：User Interface)と呼ばれることが多い。

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

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

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

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

パネルやボタン、レバーなどを触れたり押したりする操作方法は以前からあるが、身体の一部分が動く様子そのものを何らかの方法で検知して入力手段とする手法をジェスチャーインタフェースという。離れた位置からカメラや空間センサーで動きを検出する方式と、加速度計などが内蔵された装置を手に持ったり身体に装着する方式がある。

対象となる部位は指や手、腕、足(足踏みなど)、頭部(首振りや頷きなど)、口(発音を読み取るのではなく開閉などの動きを検知する)、まぶた(瞬きやウインク)などがある。眼球(視線)の動きを読み取る技術もあるが、ジェスチャーとは区別して「アイトラッキング」(eye tracking)と呼ぶことが多い。

すでに広く実用化されている分野に家庭用ゲーム機がある。加速度計やジャイロスコープを内蔵したコントローラを持って動かしたり、画面の脇に設置したカメラでプレーヤーを撮影して動きを検出し、キャラクターの動きなどに反映させることができる。

体が動かせなくても瞬きだけで文字を入力できる装置など、身体が不自由な人をサポートするシステムの研究も進んでいる。他にも、体感型のアートやエンターテインメントへの応用、「非接触」であることを活かした医療などへの展開が期待されている。

画面や操作面に接触して位置や動きを指示するタッチ方式の入力装置にはタッチパネルやトラックパッド(タッチパッド)があるが、従来の製品は同時に一か所だけを指示することができた。複数点での接触を検知するのが難しいのと、マウスポインタなど画面上の位置に一対一に対応する必要があったためである。

マルチタッチインタフェース方式の装置はスマートフォンなどタッチ操作前提の機器で用いられ、同時に複数箇所(2点から多いもので10点程度)に接触してそれぞれに位置や動きを指示することができる。大きな画面で複数人で同時に利用したり、複数の指を同時に触れて複雑な操作を行うことができる。

二本指で触れて片方を滑らせることで回転を指示する操作や、互いに離すように滑らせることで拡大を指示する「ピンチアウト」(ピンチオープン)、互いに近づけるように滑らせることで縮小を指示する「ピンチイン」(ピンチクローズ)、同じ方向にさっと滑らせる二本指スワイプなどがよく用いられる。

一点のみの場合と制御方式が異なるため、対応機器であってもオペレーティングシステム(OS)やアプリケーションソフト側が対応していなければ複数の点を同時に触れて操作することはできない。

タッチパネルのタップ操作

画面に触れて操作するタッチパネル(タッチスクリーン)の基本的な操作方法の一つで、画面上の特定の場所を指先やペン先で軽く(一回)叩く動作のこと。マウスなどのボタンにおける「クリック」(click)操作にほぼ相当する。

画面上の特定の位置にある対象を選択して決定する動作を表すことが多く、スマートフォンやタブレット端末などでは最も頻繁に用いられるタッチ操作の一つである。一方、指を触れたまま離さずに画面上を滑らせる動作には「スライド」「スワイプ」「ピンチ」「ドラッグ」などがある。

一度だけタップするのと、連続で何度かタップするので異なる動作になる場合がある。その場合、一回タップする操作を「シングルタップ」(single tapping)、二回を「ダブルダップ」(double tapping)、三回を「トリプルタップ」(triple tapping)のように区別する。

また、指先で画面に触れた後、すぐに離さずしばらく触れたままにする操作もあり、「ロングタップ」(long press)あるいは「タッチアンドホールド」(touch and hold)、または単に「長押し」という。

“swipe” は「拭い取る」という意味で、画面に指先(やペン先など)で触れ、指示したい方向に向けてさっと拭き取るようになでる操作を指す。触れる対象は画面全体など広域的な場合が多く、また、画面から指を離す位置やタイミングにも特に意味はない(任意である)ことが多い。

指を滑らせる向きでスクロールなどの方向を指示する。左スワイプと右スワイプを使い分ける場合と、上スワイプ(スワイプアップ)と下スワイプ(スワイプダウン)を使い分ける場合がある。

画面上の複数地点の同時接触を検知できるマルチタッチ対応のシステムの場合には、複数の指で同時に触れてスワイプする「2本指スワイプ」や「3本指スワイプ」が1本指とは別の操作を表している場合がある。

フリックとの違い

指を触れたまま画面をなぞる動作には「フリック」(flick)もある。フリックは特定の箇所に指を触れた後、弾くように短い距離をさっと動か(してすぐ指を離)す操作を意味する。長い距離を撫でるとフリックと認識されずスワイプ操作になってしまう場合がある。

ドラッグとの違い

他に「ドラッグ」(drag)も画面をなぞる動作を指す。システムの種類や文脈により、ドラッグとスワイプをほぼ同義とする場合と、アイコンなど対象物を掴んで別の場所へ移動させるのがドラッグで、(画面のスクロールなど)触れる個所を特定しないのがスワイプであるとして区別する場合がある。

“flick” は「軽く打つ」「弾く」「急に動かす」などの意味で、画面上で操作を行いたい特定の位置に指やペン先で触れ、特定の方向に向けて弾くようにサッと滑らせる操作を指す。他の操作と区別する(動作モードをフリック対応に変更する)ために、触れたあと極短時間(コンマ数秒程度)待つ必要がある場合もある。

この操作を応用して文字盤(ソフトウェアキーボード)から素早く文字を入力する方式を「フリック入力」(flick input)という。例えば、文字盤の「さ」に触れると、これを十字に囲むように上下左右に「し」「す」「せ」「そ」が現れ、「し」の方向にフリックすると「し」が入力される。慣れれば高速に文字を入力できるようになる。

指を触れたまま画面をなぞる動作には他に「ドラッグ」(drag)や「スワイプ」(swipe)がある。ドラッグはアイコンなど特定の対象を指で触れて別の位置へ移動させるような操作を意味し、スワイプは画面スクロールなどのために画面を特定の方向になでる(触れる対象は広域的)ような操作を意味する。

タッチパネルでは指やペン先などで画面に触れて操作するが、画面上の特定の位置に指先を触れ、すぐ離す(軽く叩く)操作を「タップ」(tapping)という。触れた後にすぐに離さずしばらく触れたままにする操作をロングプレスという。

どのくらいの長さ触れ続けるとロングプレスと判定されるかはシステムや設定により異なるが、短い場合で0.5秒程度、長い場合で数秒程度のことが多い。触れたアイコンなどの表示状態がわずかに変化することでロングプレスに移行したことを知らせるシステムもある。

ロングプレスにどんな動作を割り当てるかは機種やソフトウェアによって異なるが、単独で行われる場合は使用頻度の低い機能やコンテキストメニュー、サブメニューなどの呼び出しに用いられることが多い。また、ロングプレス操作で当該要素を選択し、指を画面に触れたまま滑らせ、目的の位置で指を離すことで、画面上の移動を指示できる場合がある。これはマウス操作における「ドラッグ&ドロップ」(drag and drop)にほぼ相当する。

コンピュータやその応用製品を人間がどのような手段で操作するか、システム側から情報をどのように伝達するかを合わせて「ユーザーインターフェース」(UI：User Interface)という。現在一般的なCUI(Character User Interface)やGUI(Graphical User Interface)などの方式はいずれも、人間が装置を手指で操作し、コンピュータが画面に文字や図像を表示して応える方式を採用している。

これに対しVUIでは、機器に接続あるいは内蔵されたマイクを用いて利用者の声を入力し、音声認識を用いて発話内容を文字に置き換え、自然言語処理を行って指示内容を理解する。システムによっては応答内容も音声合成を用いて文字から声に変換し、スピーカーやイヤホンを通じて利用者に聞かせる。

近年までこのような処理をリアルタイムに行うのは技術的に困難だったが、機械学習など人工知能に関連する技術の飛躍的な進歩や半導体の性能向上により、パソコンやスマートフォンなど民生用の一般的な情報機器でも現実的なコストで実装できるようになった。応用製品として、SiriやGoogleアシスタント、Cortanaといった音声アシスタント、Google Nest、Apple HomePod、Amazon Alexaなどのスマートスピーカーなどがある。

画面上にアイコンやメニュー、ボタンといった絵や図形に補助的な文字情報を組み合わせた操作要素が表示され、これをマウスやトラックパッド、タッチパネルなどのポインティングデバイス(位置入力装置)で選択してコンピュータへの指示を与える。

パソコンなどではオペレーティングシステム(OS)が管理する「デスクトップ」(desktop)と呼ばれる初期画面が表示される。各アプリケーションソフトは「ウィンドウ」(window)と呼ばれる矩形の領域を与えられ、その中で表示や操作を行う。複数のウィンドウを同時に開き、並行して処理を行ったり、即座に切り替えて操作することができる。

スマートフォンやタブレット端末では「ホーム画面」(home screen)が表示され、導入済みのソフトウェア(アプリ)がアイコンとして並んでいる。これをタッチ操作で選択するとアプリが起動して全画面で操作可能になる。複数アプリを同時に起動することはできるが、画面を切り替えて使用するのが一般的となっている。

CUIとの違い

一方、情報の提示も操作の受付も原則として文字によって行うユーザーインターフェースを「CUI」(Character User Interface：キャラクターユーザーインターフェース)あるいは「CLI」(Command Line Interface：コマンドラインインターフェース)という。

利用者はキーボードなどを用いてコンピュータへの指示を文字によって与え、コンピュータからの出力も画面に文字を表示して行われる。LinuxなどのUNIX系OSやメインフレーム(大型コンピュータ)、ネットワーク機器など、訓練を受けた専門の技術者やオペレータが操作する前提のコンピュータ製品で多く用いられる。

パソコン向けOSのWindowsやmacOS、スマートフォンやタブレット端末向けのAndroidやiOSなど、技術者ではない一般消費者や(企業の)従業員が操作することを想定したコンピュータ製品は、情報の見やすさや操作方法の習得のしやすさなどを重視してGUIを中心に構成することが多い。家庭用ゲーム機、デジタル家電など民生用コンピュータ応用製品の多くも、主要な表示・操作方式としてGUIを用いる。

パソコンなどのオペレーティングシステム(OS)で一般的なグラフィック表示を利用した操作画面(GUI：Graphical User Interface)では、実行中のソフトウェアごとにウィンドウが与えられ、その中で表示を行ったり利用者の操作を受け付けたりする。

このような仕組みを「ウィンドウシステム」(windowing system)と呼び、ウィンドウが置かれる背景(画面全体)のことは「デスクトップ」(desktop)という。複数のソフトウェアを起動すると画面上にそれぞれのウィンドウが表示され、一部が重なることもあるが、最も手前で全体が見えているものが現在操作対象になっている「アクティブウィンドウ」である。

ウィンドウは大きさや形状が固定されているものと可変のものがあり、後者はマウス操作やタッチ操作で隅や端を指定してドラッグ操作することにより大きさを変えることができる。上部にはタイトルバーが表示され、ソフトウェア名や操作アイコン(全画面表示、最小化、消去など)が並んでいる。

最小化を指示するとウィンドウは画面から消えるが、プログラムの実行状態は維持したままタスクバーなどにアイコンとして表示され、アイコンをクリックすると再びウィンドウが開く。一方、ウィンドウを閉じる操作を行うと、常駐ソフトや複数ウィンドウを同時に利用する場合を除いて、ソフトウェアは終了する。

スマートフォンやタブレット端末向けのOSなどでは、GUIによる表示・操作体系を採用しながらもウィンドウ表示を行わず、どのソフトウェアも常に全画面で表示するようになっていることが多い。表示されていないソフトウェアも終了しない限り動作し続けており、必要に応じて画面を切り替えて利用する。

データ処理のウィンドウ

データの処理や送受信などで、連続した長いデータを扱う際、現在着目している処理対象として設定された固定長の区間のことを「ウィンドウ」ということがある。そのような区間を設定して処理を進める方式を「ウィンドウ制御」「ウィンドウ処理」(windowing)という。特に、処理の進行に伴ってこの区間を連続的に少しずつ移動していく手法を「スライディングウィンドウ」という。

利用者はマウスやタッチパネルなど位置を入力する装置を用いて画面上のアイコンを指定し、コンピュータに実行内容の指示などを行う。例えば、アプリケーションソフトを表すアイコンを開くと起動して操作画面が現れ、ファイルを表すアイコンを開くと閲覧画面や編集画面が現れる。

アイコンは操作画面を画像や図形で構成するグラフィカルユーザーインターフェース(GUI)の主要な構成要素であり、キーボードなどから文字で指示を入力する方式に比べ、文字入力が不慣れな人や命令文などを覚えていない初心者でも容易に操作内容を指示できる。

アイコンの大きさや形状はシステムによって異なるが、システムごとに規定された決まった大きさ(縦横数十ピクセル程度)の正方形に揃えられ、複数のアイコンを縦横に規則正しく並べて表示する場合が多い。脇にファイル名などの文字情報を添えたり、マウスカーソルを合わせると短い説明が表示されたりする場合もある。

どの絵柄が何を表すかはシステムによって異なるが、何の機能や対象を表しているのか直感的に連想しやすいものになるよう工夫されている。しかし、コンピュータに特有な事項や抽象的な事柄などは絵や図に表すのが難しく、慣れていない人が一見しても何のことか伝わらないことも多い。

歯車が「設定」、重なった2枚の紙が「複製」、ゴミ箱が「削除」、フロッピーディスクが「保存」、虫眼鏡が「検索」、左回りの回転矢印が「アンドゥ」(操作の取り消し)など、多くのソフトウェアに共通する機能については慣用的に同じような図柄が採用されることが多い。

グラフィック表示を用いたコンピュータの操作画面(GUI)で用いられる入力要素(GUIウィジェット)の一つで、入力フォームの中で「はい」「いいえ」や「18歳未満」「18～64歳」「65歳以上」のような択一の選択項目の先頭に小さなボタンとして表示される。

一般的な表示方式では小さな丸い印として表示され、中が空白のものは選択されていない状態を、黒丸のものは選択済みの状態を表している。ボタンをクリックやタップすると選択状態にすることができ、すでに選択状態だったボタンは自動的に未選択状態に戻る。一つのグループから一つの項目しか選択できない。

なお、複数の選択肢を同時に選択済みにできるようにしたい場合は「チェックボックス」(checkbox)を用いる。これは正方形で表され、中が空白なら未選択状態を表す。選択状態にすると中にバツ印(×)やチェックマーク(レ点)が現れる。

「ラジオ」は音声放送の受信装置のラジオのことで、押すとあらかじめ設定された放送局の周波数にチューニングしてくれる選局ボタンが名称の由来となっている。ボタンを押すとそれまで押されていたボタンが自動的に跳ね上がってオフになる仕組みがあり、同時に複数のボタンを押し下げた状態にすることはできないようになっている。

「□ 自動的に接続する」といったように項目名や説明を記述した行の先頭に表示される小さな正方形の領域で、クリックやタップなどの操作でオンとオフと反転することができる。オフの場合は中が空白で、オンになると中にチェック記号(レ)やバツ印(×)などの印が現れる。

GUI画面における最も基本的な入力要素の一つで、ある項目についての有無や可否、入切など互いに反対の二つの状態を入力・表示するために用いられる。

行頭に表示されるボタン型の入力要素にはラジオボタン(radio button)もあるが、これは複数の項目のグループから一つを選択するためのもので、互いに関連付けられたボタンの一つをオンにすると他のボタンが自動的にオフになる。複数の項目から選択する場合、一つだけ選ばせたい場合はラジオボタンを、複数同時に選択可能にしたい場合はチェックボックスを用いる。

グラフィック表示を用いたコンピュータの操作画面(GUI)で用いられる入力要素(GUIウィジェット)の一つで、あらかじめ用意された選択肢の中から利用者が選んで申告する入力方式を用意したいときに用いられる。

最も単純なリストボックスは一行分の細長い矩形の領域を持ち、クリックなどの操作で選択して有効にすると、覆い被さるように選択肢の一覧が表示される。その中から一つを選択すると、一覧が閉じて元の一行分の領域に選択された項目が表示される。

また、箱型の領域に複数行に渡って項目が並び、その中から一つまたは複数を選択できるようになっているものもある。その場合、選択された項目は背景色が変わるなどして、選択されたことが分かるようになっている。

リストボックスと1行のテキストボックスを統合し、用意された選択肢から選ぶことも、キーボードなどから自由に文字列を入力することもできるようになっているものもあり、「コンボボックス」(combo box)と呼ばれる。

「ファイル(F)　編集(E)　表示(V)　ツール(T)　ヘルプ(H)」といったように操作可能な項目が一列に並んだ帯状の領域である。クリック操作やタップ操作などで項目を選択すると、その項目に対応した操作が実行されたり、子項目の一覧(プルダウンメニュー)が出現したりする。

「(F)」といった括弧内のアルファベットはショートカットキー(キーボードショートカット)を表しており、Ctrlキー(Controlキー)などとその文字のキーを同時に押すことでそのメニューを呼び出すことができる。「(F)」であれば「Ctrl+F」操作で呼び出すことができる。

メニューバーはアプリケーションごとにウィンドウ上部に表示されることが多いが、macOS(Mac OS X)のようにデスクトップ上部にオペレーティングシステム(OS)のメニューバーが常時表示されるシステムもある。近年のWebブラウザのように、メニュー操作の利用頻度が低いアプリケーションでは廃止あるいはデフォルトで非表示設定とし、右端などに設けたアイコンからメニューを開く方式を採用しているものもある。

グラフィック表示を用いたコンピュータの操作画面(GUI)で用いられる入力要素(GUIウィジェット)の一つで、メニューの表題部分をクリック操作やタッチ操作で指定すると、そのすぐ下あるいは右に選択可能な項目の一覧が表示され、その中から一つを選ぶことができる。

ソフトウェアのメニューバーなどの場合、下に開いた項目の一つ一つがサブメニューになっており、一つを選ぶとさらに右に対応する項目の一覧が現れ、その中の項目もさらにサブメニューになっており…といった具合に、何段階にも展開するメニューになっているものもある。

特徴と適した用途

狭い領域に多数の項目を収めて素早くアクセスすることができるが、メニューを選択するまでどんな項目があるか分からず、また、メニューが複数ある場合にはすべての項目を並べて同時に表示することはできないなど、一覧性には劣る。

このような特徴から、都道府県や日付の選択など、表題だけでどんな項目が入っているか容易に予想できる場合や、何度も繰り返し利用することで内容をある程度覚えることが想定される、ソフトウェアの操作メニューなどでよく用いられる。

階層型に整理されたメニューシステムで操作するソフトウェアによく用いられるもので、最初は画面上にメニューバーなどの形でいくつかの大項目だけを表示し、利用者がその内の一つを選択すると、すぐ近くに子項目の一覧が出現する。

子項目にさらに孫項目がある場合は、同じように項目を選択するとすぐ近くにさらに孫項目一覧が展開する。狭い画面でも全体としては多くのメニュー項目を盛り込むことができ、選択肢を段階的に提示することで利便性が高まる。

画像や動画、Webサイトなど何らかの対象を画面上で一覧表示して選択する場合に、視認性を高めるために個々の対象の内容を表す小さなサムネイル画像を作成し、名前などと合わせて表示することがある。

元のサイズのままでは大きすぎて一覧性が悪くなる場合によく用いられるが、Webサイトやネットサービスなどでは全体が表示されるまでの時間を短縮してすぐに一覧できるよう、データ量を削減する意味もある。

画像の場合は縮小された画像そのものをサムネイルとする場合が多いが、動画の場合は最も長く表示される場面を静止画に写し取ったキャプチャ画像や制作者が用意したサムネイル用の画像を用いることが多い。WebサイトやWebページの場合はWebブラウザに表示した状態のスクリーンショット画像がよく用いられる。

画面上に表示された小さな矢印などのポインタをマウスなどで動かして操作する方式のコンピュータやソフトウェアで用いられる仕組みで、対象にポインタが重なっている間だけ表示状態が切り替わったり、あらかじめ設定された操作や処理が行われたりする。

対象の属性や状態をツールチップやポップアップなどで表示するなど、利用者に補助的な情報を知らせるために用いられることが多い。プログラミングなどでは、ポインタが対象に重なることを「マウスオン」、外れることを「マウスアウト」と呼ぶこともある。

スマートフォンやタブレット端末などタッチパネル方式で画面に触れて位置を指示するタイプのコンピュータやソフトウェアでは、マウスポインタに相当する操作要素が存在しないため、マウスホバーによる表示・操作も利用できない。実質的にはパソコンでしか機能しないため、様々な種類の端末から利用されるアプリケーションやコンテンツでは必須の操作にしないよう設計する。

使用例

多くのWebブラウザでは、リンクが設定された文字列や画像にカーソルを重ねると、文字色が変化したり、リンク先のアドレス(URL)が表示されるなど、それがリンクであることを知らせる表示状態に変化する。また、title属性が設定されている要素はマウスホバーするとその文字列がツールチップ表示される。

Windowsエクスプローラなどファイルやフォルダを操作するオペレーティングシステム(OS)の機能では、一覧表示されたファイルのアイコンなどにポインタを合わせると周囲に小さなツールチップ領域が出現し、ファイルの種類やサイズ、更新日時などが表示される。

普段は表示されておらず、対象を選択したりマウスポインタを重ね合わせたりする(マウスホバー/マウスオーバー)と、対象のすぐ側に半ば被さる形で出現する。内容はソフトウェアにより様々だが、対象の操作方法や関連情報などを表示することが多い。選択を外したりポインタをどけると即座に消滅する。

マンガの吹き出しのように、輪郭の一部が尖って対象を指し示しており、角が丸い形をしているものは「バルーン表示」「バルーンチップ」とも呼ばれる。スマートフォンのようなタッチ操作のシステムではマウスホバーに相当する動作が存在しないため、ツールチップも使うことができない。

文書内の各文字要素(見出しや本文など)について、字体(フォント)や大きさ、文字色、字間や行間、下線や斜体などの修飾を定義することができる。画像など他の要素について枠線や陰影などの表示形式を定義したり、文書内での各要素のレイアウト規則などを記述する場合もある。

ワープロソフトなどの文書作成ソフトでは、用途などに応じてあらかじめ複数のスタイルシートを作成しておくことにより、文書作成の度に個別に要素の見栄えを定義しなくても、適したスタイルシートを選択・適用するだけで望みの表示スタイルに変更することができる。

また、帳票や記入用紙などの定型的な書類や、互いに関連性や共通性のある複数の文書を作成する場合などにも、同じスタイルシートを適用することで文書間の見栄えに統一感を持たせることができる。

Webページのスタイルシート

Webページの記述に用いられるHTMLなどにもスタイルシートの概念があり、一般的にはCSS(Cascading Style Sheets)と呼ばれる専用の言語によりスタイルシートを記述する。単にスタイルシートといった場合はCSS形式のデータやファイルなどを指すことが多い(XSLなど他の方式も存在する)。

HTML文書にスタイルシートを適用すると、文書本体から表示形式やレイアウトなどに関する情報を分離し、文書の構造だけをHTMLファイル本体に記述することが可能になる。

これによって、HTML文書の論理的な構造が把握しやすくなるほか、サイト内の複数のページで同じスタイルを共有でき、変更を一括して適用するなどの効率的な管理ができるようになる。

CSSのみを記した単体のファイル(.cssファイル)を用意してHTMLファイルからlink要素などで指定する方法が一般的だが、HTMLファイル内部にstyle要素で記述する方法(<style>(CSS文)</style>)や、HTML要素の属性(attribute)として開始タグのstyle属性に記述する方法(<div style=“(CSS文)”>...</div>)も用意されている。HTML内に記述する場合は他ページとの共有という利点は損なわれる。

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サイトやネットサービス、アプリケーションソフトなどを開発・公開する際、これまではパソコン版が先行し、後からモバイル版が公開されることが多かった。また、モバイル版は機能が制限されたり、パソコン版の設計がそのまま持ち込まれて表示や操作がしにくかったりと、「おまけ」的な扱いに留まることが多かった。

これに対し、モバイルファーストの考え方では設計や開発、デザインなどでモバイル環境への対応を常に最優先し、モバイル版をパソコン版と同時、または先行して提供したり、モバイル向けの設計を先に行なってそれに合わせてパソコン版を開発する。スマートフォンやタブレット端末が急速に浸透していることを受け、大手サイト・サービスの多くがモバイルファースト化を表明している。

2016年には、Web検索サイト最大手の米グーグル(Google)がWebページの収集・索引付け(インデックス化)や評価(ランク付け)の対象として、従来のパソコン版を基準とする方式からモバイル版重視へ切り替える「モバイルファーストインデックス」(MFI：Mobile-First Indexing)を発表し、Web運営者へモバイルファースト化を迫っている。

Webページをパソコンやスマートフォン、タブレット端末など複数の機器や画面サイズに対応させる際、内容が同じでデザインや動作をそれぞれに最適化した複数のHTMLファイルやCSSファイルを用意し、Webサーバが端末に応じて送信ファイルを出し分けたり、それぞれに適したURLにHTTPリダイレクトするなどしてアクセスを振り分ける手法がよく用いられる。

レスポンシブWebデザインではこのような対応はせず、すべての機器に同じURLで同じファイルを送信する。HTMLやCSS、JavaScriptなどの機能を組み合わせ、現在表示されている機器の種類やサイズ応じて表示内容やレイアウトを調整し、最適な状態になるようにする。

例えば、パソコンなどの横長の画面では、同じ幅の要素が縦に並んだ領域(カラム)が2～3列横に並んだレイアウトにしておき、スマートフォンなど横幅の狭い画面で表示するとこれらがすべて縦一列に並んで表示されるようなデザインを指す。

複数のファイルやURLを用意する場合に比べ、デザインや機能の自由度は下がり、サイズごとの調整を行う複雑なコードが必要になるが、すべての機器に同じ内容を表示でき、更新作業の簡略化や更新漏れの防止が期待できる。

検索エンジンやアクセス解析に同じ内容のWebページが複数の異なるURLが出現することも避けられるため、Web検索大手の米グーグル(Google)社などではWebサイト運営者に極力レスポンシブWebデザインでサイトを構成するよう推奨している。

Webコンテンツの伝送に用いられるHTTPでは、WebブラウザなどのクライアントからWebサーバにファイルなどの資源を要求(リクエスト)する。資源が存在すれば応答(レスポンス)として送信するが、元の場所から移転するなど別の場所にある場合にはリダイレクトを指示する応答を返す。

HTTPレスポンスのステータスコード300番台がリダイレクト用となっており、所在を示すURLがある場合は「Location:」ヘッダで通知する。通常用いられるのは恒久的な移転を表す「301」と一時的な移転を表す「302」、キャッシュを読み込むよう指示する「304」だが、複数の選択肢を示す「300」、アップロード時などに案内ページなどを示す「303」なども用意されている。

301リダイレクト (301 Moved Permanently)

ステータスコード「301」を用いて行なうHTTPリダイレクト。“Moved Permanently” (恒久的に移転)を意味し、リクエストされたURLは新しいURLに恒久的に移転し、元のURLはもはや無効であることを表す。WebサイトやWebページの移転などの際に用いられる。

同じ意味を表すコードに「308 Permanent Redirect」があるが、301はリダイレクト時にリクエストメソッドを変更(POSTメソッドからGETメソッドなど)してしまうWebブラウザがあるため、同じメソッドでアクセスするよう強制するために用意されている。POSTメソッドのリダイレクトなどで用いられる。

302リダイレクト (302 Found)

ステータスコード「302」を用いて行なうHTTPリダイレクト。HTTP 1.0では “Moved Temporarily” (一時的な移転)、HTTP 1.1では “Found” (発見した)を意味し、リクエストされたURLは新しいURLに一時的に移転したことを表す。

同じ意味を表すコードに「307 Temporary Redirect」があるが、301と308の関係と同じように、301ではリダイレクト時にリクエストメソッドを変更されてしまう場合があるため、同じメソッドで読み込むよう強制したい場合に307を返すようにする。

なお、PUTメソッドでファイルを操作する場合などには、ブラウザ側にその資源自体を応答するわけではないため、ブラウザに表示する案内ページなどを指定するために「303 See Other」を用いることがある。

システムの設計者がしばしば陥りがちである「人間がシステムに合わせる」式の使い方で良しとするのではなく、人間の特性の理解と尊重を基礎に、人間にとって使いやすいシステムのあり方を探求、実装していく方法論を指す。

ISO(国際標準化機構)によるインタラクティブシステムの人間中心設計に関する標準規格ISO 9242-210では、「インタラクティブシステムの開発において、利用者とそのニーズ、要求に焦点を当て、人的要因や人間工学、ユーザビリティの知識や技術を適用することで、有用で使いやすいシステムを目指すアプローチ」と定義されている。

同規格では人間中心設計の実践に必要な原則として「実際の利用状況における利用者、利用法、利用環境の明確な理解」「設計・開発プロセス全体への利用者の関与」「利用者中心の評価法による設計と見直し」「反復的な設計プロセス」「ユーザー体験(UX)全体を対象とする」「複数の専門分野の技術と視野を含んだ設計チーム」の6つを提唱している。

日本ではNPO法人の人間中心設計推進機構(HCD-Net)が人間中心設計専門家育成のため、「認定人間中心設計専門家・スペシャリスト」という認定制度を実施している。