基本情報技術者単語帳 - ユーザーインタフェース

様々な分野で用いられる用語であるため一概に定義することはできないが、機械的に与えられた一意の識別子(ID：Identifier)などとは別に、利用者など人間側の都合や利便のために任意に設定あるいは変更できる名前、という意味合いで用いられることが多い。

また、複数の要素を組み合わせた集合を定義するために与えられる名前や、識別名とは別に与えられる分類名や属性名などのことをラベルということもある。対象にラベルを与える操作や処理を「ラベリング」(labelling)という。

一般的な意味

一般の外来語としては、物体(商品、持ち物など)の名前や中身、分類、持ち主などを表示するために貼り付けるシール、添付する札などを指すことが多い。「レーベル」「レッテル」(オランダ語：letter)も元来は同じ語だが、レーベルは音楽などの制作会社におけるブランド名(および制作部門)などの意味で、レッテルは不名誉で一方的な評価などの意味で用いられている。

データ通信やファイル形式などで、ひとまとまりのデータの塊のことをチャンク(チャンク形式/チャンク構造)ということがある。特に、長大な、あるいは連続した(終わりの決まっていない)データを先頭から一定の長さや内容上の区切りに従って分割した断片的なデータ集合を指すことが多い。

一つのチャンクは、データ本体の先頭にそのデータについての情報(データ長やデータの種類、識別子など)を付加した形になっており、これをいくつも連ねてデータ全体を表現する。画像や音声、動画など大きなサイズのバイナリデータの保存や送受信を行なう際によく用いられる形式である。

Webページのナビゲーションメニュー

Webの分野では、サイト内の各ページに共通して置かれる、サイト内のどこに何があるのかを簡潔にまとめたリンク集やメニューなどのことをナビゲーションということが多い。

規模の大きなサイトでは、サイトの全体的な構造や大項目などを案内する「グローバルナビゲーション」、現在のページを含む大項目の内部を案内する「ローカルナビゲーション」など、粒度の異なる複数のナビゲーションをページ内に設けることがある。

ナビゲーションシステム

位置情報システムの分野では、画面に地図を表示して現在地から目的地までの道順や所要時間、目的地周辺の情報などを案内することをナビゲーションという。

自動車向けのシステムを「カーナビゲーションシステム」(カーナビ)、歩行者向けに公共交通機関の乗り換え案内などを統合したシステムを「歩行者ナビゲーションシステム」(歩行者ナビ)などという。スマートフォンなどを通じてネットサービスの形で提供されるものは「ナビゲーションサービス」という。

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

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

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

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

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

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

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

情報システムやソフトウェアでは、利用者の操作や入力に対してシステムが即座に反応を返し、相互にやり取りをする中で処理を進めていくような操作方式をインタラクティブシステムであるという。

メディアコンテンツでは、内容を利用者に一方的に与えるのではなく、利用者の働きかけにより刻々と内容が変化することをインタラクティブシステムであるという。

特に、(ビデオゲームのようにもともとインタラクティブシステムなものではなく)映像作品のように元来は内容が固定的で一方通行に提供されるものに対話的に変化する要素を取り込んだ場合にインタラクティブシステムという語が用いられることが多い。

マイクに向かって喋った内容を文字に起こし、口述筆記のように文書作成を行うシステムや、目的地などの指示を声で行えるカーナビゲーションシステム、操作の指示やネットで検索したい内容などを声で行えるスマートフォン向けのサービスやソフトウェアなどがある。

また、音声認識で指示や要求を伝え、結果をスピーカーから音声で返す専用のシステムは「スマートスピーカー」と呼ばれ、2010年代半ば頃から家庭向けの製品の普及が進んでいる。利用者が情報検索や音楽再生、計算(電卓)、予定通知(リマインダー)、タイマーなどの機能を発話による指示で実行することができる。

音声データはデータ量が多く、リアルタイムに大量の解析・変換を行うことは難しかったためなかなか実用化できなかったが、21世紀に入ってコンピュータの記憶容量や処理性能が大幅に向上し、徐々に実用的なサービスが提供されるようになった。現在でも、複数の人物が同時に喋る状況など、なかなか精度が上がらない場面もある。

一方、同じ音声から人間の声を認識する技術でも、誰が話しているかを識別する技術は「話者認識」(speaker recognition/voice recognition)という。事前に登録した人物の声のデータを元に、マイクに話しかけた人物が誰であるかを識別する。利用者認証の本人確認を声で行う「声認証」(音声認証/声紋認証/voice authentication)などに応用される。

コンピュータが利用者に情報を提示したり、利用者が操作や入力を伝達する手段をユーザーインターフェース(UI：User Interface)という。歴史的には、初期のパンチカードやプリンタの時代を経て、ディスプレイ装置による文字表示とキーボードによる文字入力を組み合わせたCUI(Character User Interface)が普及し、続いて、グラフィック表示とマウスなどのポインティングデバイスによる位置入力を組み合わせたGUI(Graphical User Interface)が主流となった。

CUIではソフトウェアのコマンド(命令)体系を利用者が暗記して一文字違わず正しく入力しなければ動作しないが、GUIではアイコンやウィンドウなどのシンボルやメタファ(暗喩)を利用することで、厳密な操作や入力が必要な場面が減り、コンピュータに詳しくなくても「なんとなく」で操作方法が推測できるようになった。

NUIではこの考え方をさらに発展させ、マウスのような専用の装置を操作しなくても、人間が日常的に行っている動作の延長でコンピュータへの指示を与えられることを目指している。スマートフォンやタブレット端末などではスクリーンを指やペン先などで触れることで操作対象や処理を指示することができ、ある程度NUIの概念を体現していると言える。

これまでにない新しい操作方式として、カメラやセンサーで手指や体全体の動きを検知し、操作に反映させる「ジェスチャー認識」が研究されている。スマートスピーカーや音声アシスタントなどとして実用化されている、声で指示を与える「音声ユーザーインターフェース」(VUI：Voice User Interface)もNUIの一種に分類される場合がある。

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

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

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

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

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

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

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

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

CUIとの違い

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

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

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

画面内で操作を行いたい位置を入力することができ、表示された要素を指定して処理や操作を指示することができる。キーボードなどから文字で指示を与える方式に比べ、直感的に操作でき、操作法に習熟していない状態でも指示を出しやすい。

マウスなど手元で操作する機器の場合、画面上で対応する現在位置を示す絵記号が表示され、これを「ポインタ」(pointer)あるいは「カーソル」(cursor)という。手元の機器を操作すると、その動きに応じて画面上のポインタが移動するため、指示したい場所にポインタを重ねて操作を行う。

タッチパネル(タッチスクリーン)の場合には画面に接触位置を検知するセンサーが内蔵されており、指やペンなどで画面に直接触れ、その位置に操作の指示を行なうことができる。画面上にはポインタなどは表示されないことが多い。

アイコンやウィンドウなどのグラフィック表示とポインティングデバイスによる位置入力を基本とする操作体系(ユーザーインターフェース)を「GUI」(Graphical User Interface)という。現代では一般の利用者が使うコンピュータ製品のほとんどがGUIを備えており、何らかの形でポインティングデバイスを用いる。

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

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

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

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

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

データ処理のウィンドウ

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

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

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

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

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

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

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

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

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

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

同じ一つの操作で二つの状態を交互に切り替えるような仕組みを「トグル」(toggle)というが、これを画面上のボタンやスイッチなどの操作要素に適用したものである。

設定画面で項目の有効・無効を切り替えるボタン、音声や動画の再生画面で再生・停止を切り替えるボタンなどでよく用いられる。ボタンを見ただけで現在の状態が分かるよう、再生中は停止ボタン、停止中は再生ボタンというように状況に応じてボタンの表示状態も切り替わることが多い。

現実世界のボタンでも、一度押すと点灯、もう一度押すと消灯する照明のスイッチ、一度押すと電源オン、もう一度押すと電源オフになるリモコンの電源ボタンなど、トグル動作のボタンやスイッチは広く普及している。

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

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

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

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

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

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

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

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

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

特徴と適した用途

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

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

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

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

横長の見出しが縦に並んでおり、そのうちの一つをクリックやタップで選択するとその項目の表示領域が他の項目を押しのけて縦に広がり、詳細な内容が表示される。もう一度その項目を選択すると広がった領域が狭まっていき、元の見出しのみの表示に戻る。

ある項目が開いた状態で他の項目を選択すると、開いてい自動的に項目が閉じて、新たに選択した項目が開く。このように任意の箇所が操作に伴って自在に伸びたり縮んだりする様子を、楽器のアコーディオンの蛇腹部分になぞらえてアコーディオンと呼ばれている。

スマートフォンの画面など表示領域に限りがある場合に、コンパクトにメニューの全体像を見せつつ、ページ遷移などを伴わずに即座に各項目の詳細を提示することができる。使い慣れれば必要な項目にたどり着きやすく快適な操作感を得ることができる。

一方、詳細部分をすべて広げて一覧することはできないため、目当ての項目がどこにあるか分からない場合などには何度も項目の開閉を繰り返さなければならずストレスとなることがある。また、表示された項目の一覧がアコーディオンであることはクリック・タップしてみて初めて分かるため、利用者が初見では気づかずに十分に活用されないこともある。

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

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

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

使用例

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

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

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

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

文書編集ソフトなどのテキストボックスは文書内の任意の位置に配置できる矩形の領域で、内部に複数行の文字を入れることができる。背景や輪郭を着色したり、透明にして画像など他の要素に重ね合わせて表示することもできる。

縦横の大きさを任意に変形でき、広さに合わせて内部の文字が折り返される。広さに対して文字が多すぎてボックスの下端よりも下にはみ出してしまった文字は表示されないが、複数のボックスを連結して続きを次のボックスに表示する「流し込み」設定が可能なソフトもある。

入力フォームのテキストボックス

ソフトウェアの操作画面やWebページなどに現れるテキストボックスは入力フォームの要素の一つで、利用者が文字列を入力するための領域を指す。「テキストフィールド」(text field)とも呼ばれる。入力用の領域であることを示すため、輪郭が少し内側に窪んだようなエンボス表示になっていることが多い。

一行だけ入力するために用いられる、高さが一文字分の横に細長いボックスと、複数行の入力に対応した広い箱型のボックスがあり、HTMLなどでは後者のことを「テキストエリア」(text area)と呼んで区別することもある。

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

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

リミットチェック (限界検査/限度検査)

数値などが規定された上限あるいは下限に収まっているかどうかを調べることをリミットチェックという。値が規定された上限値より小さいか、下限値より大きいかを調べるもの。上限あるいは下限のみが設定されたものを指すことが多い。

レンジチェック (範囲検査)

数値などが規定の範囲内に収まっているかどうかを調べることをレンジチェックという。上限と下限の両方が定義され、値がその間に存在することを確認する。

フォーマットチェック (書式検査/形式検査)

あらかじめ定められた書式(フォーマット)に則って記述されているかどうかを調べることをフォーマットチェックという。

例えば、日付を入力すべき場所に、有効な日付として解釈可能なデータが入力されているか、電話番号や郵便番号として入力されたデータの桁数が適切か、数字とハイフン以外の文字が混じっていないか、といった点を検査する。形式上の誤りがないかを調べるチェックであり、論理的、意味的に妥当かどうかといった点については別の手法により検査する。

シーケンスチェック (順序検査/順番検査)

順序が決められているようなデータで、入力値が順番通りに並んでいるか確かめることをシーケンスチェックという。

順序が決まっているデータ群に対して行われるチェックで、規定された順序どおりに並んでいるかどうかを調べる。例えば、時系列の変化を記録したデータが日付・時刻の推移の通りに並んでいるか、伝票番号のような通し番号が付与されたデータが昇順(小さい順)あるいは降順(大きい順)に並んでいるか、といったことを調べる。また、連続した番号などが対象の場合には、あるべきデータが抜け落ちていないかどうかを調べる場合もある。

論理チェック (ロジックチェック/妥当性チェック)

データの論理的な整合性を確かめることを論理チェックあるいは妥当性チェックという。

生年月日が未来の日付になっているなど、データ単体として論理的にありえない状態になっていることを検知したり、複数の項目やデータ間の関係を調べ、販売したチケット数が座席数より多い、発送日が発注日より過去になっている、などの論理的に矛盾したデータが入力されていないかを調べる。

ニューメリックチェック (数値検査)

データが数値としての形式を満たしているかどうかを判別することをニューメリックチェックという。

個数や値段など数値を入力すべき場所に、数値として解釈可能な文字群が正しく入力されているか、アルファベットや日本語文字など、数値として扱うことができないデータが含まれていないかを調べる。

数値であることが確認されたあと、その値が上限あるいは下限を超えていないか調べるのは「リミットチェック」あるいは「レンジチェック」の役割で、個数に小数点以下の値があるなど論理的に正しくないことを検知するのは「論理チェック」の役割となる。

バランスチェック (平衡検査)

必ず一致していなければならない一対のデータを実際に計算してみて一致するかどうか確認することをバランスチェックという。

会計データの借方と貸方のように、2つ以上の異なるデータの並びについて、その合計値などが最終的に必ず一致しなければならない場合がある。このような場合に、実際にそれぞれ計算してみて一致するかどうかを確認することを指す。

リミットチェック (限界検査/限度検査)

数値などが規定された上限あるいは下限に収まっているかどうかを調べることをリミットチェックという。値が規定された上限値より小さいか、下限値より大きいかを調べるもの。上限あるいは下限のみが設定されたものを指すことが多い。

レンジチェック (範囲検査)

数値などが規定の範囲内に収まっているかどうかを調べることをレンジチェックという。上限と下限の両方が定義され、値がその間に存在することを確認する。

フォーマットチェック (書式検査/形式検査)

あらかじめ定められた書式(フォーマット)に則って記述されているかどうかを調べることをフォーマットチェックという。

例えば、日付を入力すべき場所に、有効な日付として解釈可能なデータが入力されているか、電話番号や郵便番号として入力されたデータの桁数が適切か、数字とハイフン以外の文字が混じっていないか、といった点を検査する。形式上の誤りがないかを調べるチェックであり、論理的、意味的に妥当かどうかといった点については別の手法により検査する。

シーケンスチェック (順序検査/順番検査)

順序が決められているようなデータで、入力値が順番通りに並んでいるか確かめることをシーケンスチェックという。

順序が決まっているデータ群に対して行われるチェックで、規定された順序どおりに並んでいるかどうかを調べる。例えば、時系列の変化を記録したデータが日付・時刻の推移の通りに並んでいるか、伝票番号のような通し番号が付与されたデータが昇順(小さい順)あるいは降順(大きい順)に並んでいるか、といったことを調べる。また、連続した番号などが対象の場合には、あるべきデータが抜け落ちていないかどうかを調べる場合もある。

論理チェック (ロジックチェック/妥当性チェック)

データの論理的な整合性を確かめることを論理チェックあるいは妥当性チェックという。

生年月日が未来の日付になっているなど、データ単体として論理的にありえない状態になっていることを検知したり、複数の項目やデータ間の関係を調べ、販売したチケット数が座席数より多い、発送日が発注日より過去になっている、などの論理的に矛盾したデータが入力されていないかを調べる。

ニューメリックチェック (数値検査)

データが数値としての形式を満たしているかどうかを判別することをニューメリックチェックという。

個数や値段など数値を入力すべき場所に、数値として解釈可能な文字群が正しく入力されているか、アルファベットや日本語文字など、数値として扱うことができないデータが含まれていないかを調べる。

数値であることが確認されたあと、その値が上限あるいは下限を超えていないか調べるのは「リミットチェック」あるいは「レンジチェック」の役割で、個数に小数点以下の値があるなど論理的に正しくないことを検知するのは「論理チェック」の役割となる。

バランスチェック (平衡検査)

必ず一致していなければならない一対のデータを実際に計算してみて一致するかどうか確認することをバランスチェックという。

会計データの借方と貸方のように、2つ以上の異なるデータの並びについて、その合計値などが最終的に必ず一致しなければならない場合がある。このような場合に、実際にそれぞれ計算してみて一致するかどうかを確認することを指す。

リミットチェック (限界検査/限度検査)

数値などが規定された上限あるいは下限に収まっているかどうかを調べることをリミットチェックという。値が規定された上限値より小さいか、下限値より大きいかを調べるもの。上限あるいは下限のみが設定されたものを指すことが多い。

レンジチェック (範囲検査)

数値などが規定の範囲内に収まっているかどうかを調べることをレンジチェックという。上限と下限の両方が定義され、値がその間に存在することを確認する。

フォーマットチェック (書式検査/形式検査)

あらかじめ定められた書式(フォーマット)に則って記述されているかどうかを調べることをフォーマットチェックという。

例えば、日付を入力すべき場所に、有効な日付として解釈可能なデータが入力されているか、電話番号や郵便番号として入力されたデータの桁数が適切か、数字とハイフン以外の文字が混じっていないか、といった点を検査する。形式上の誤りがないかを調べるチェックであり、論理的、意味的に妥当かどうかといった点については別の手法により検査する。

シーケンスチェック (順序検査/順番検査)

順序が決められているようなデータで、入力値が順番通りに並んでいるか確かめることをシーケンスチェックという。

順序が決まっているデータ群に対して行われるチェックで、規定された順序どおりに並んでいるかどうかを調べる。例えば、時系列の変化を記録したデータが日付・時刻の推移の通りに並んでいるか、伝票番号のような通し番号が付与されたデータが昇順(小さい順)あるいは降順(大きい順)に並んでいるか、といったことを調べる。また、連続した番号などが対象の場合には、あるべきデータが抜け落ちていないかどうかを調べる場合もある。

論理チェック (ロジックチェック/妥当性チェック)

データの論理的な整合性を確かめることを論理チェックあるいは妥当性チェックという。

生年月日が未来の日付になっているなど、データ単体として論理的にありえない状態になっていることを検知したり、複数の項目やデータ間の関係を調べ、販売したチケット数が座席数より多い、発送日が発注日より過去になっている、などの論理的に矛盾したデータが入力されていないかを調べる。

ニューメリックチェック (数値検査)

データが数値としての形式を満たしているかどうかを判別することをニューメリックチェックという。

個数や値段など数値を入力すべき場所に、数値として解釈可能な文字群が正しく入力されているか、アルファベットや日本語文字など、数値として扱うことができないデータが含まれていないかを調べる。

数値であることが確認されたあと、その値が上限あるいは下限を超えていないか調べるのは「リミットチェック」あるいは「レンジチェック」の役割で、個数に小数点以下の値があるなど論理的に正しくないことを検知するのは「論理チェック」の役割となる。

バランスチェック (平衡検査)

必ず一致していなければならない一対のデータを実際に計算してみて一致するかどうか確認することをバランスチェックという。

会計データの借方と貸方のように、2つ以上の異なるデータの並びについて、その合計値などが最終的に必ず一致しなければならない場合がある。このような場合に、実際にそれぞれ計算してみて一致するかどうかを確認することを指す。

リミットチェック (限界検査/限度検査)

数値などが規定された上限あるいは下限に収まっているかどうかを調べることをリミットチェックという。値が規定された上限値より小さいか、下限値より大きいかを調べるもの。上限あるいは下限のみが設定されたものを指すことが多い。

レンジチェック (範囲検査)

数値などが規定の範囲内に収まっているかどうかを調べることをレンジチェックという。上限と下限の両方が定義され、値がその間に存在することを確認する。

フォーマットチェック (書式検査/形式検査)

あらかじめ定められた書式(フォーマット)に則って記述されているかどうかを調べることをフォーマットチェックという。

例えば、日付を入力すべき場所に、有効な日付として解釈可能なデータが入力されているか、電話番号や郵便番号として入力されたデータの桁数が適切か、数字とハイフン以外の文字が混じっていないか、といった点を検査する。形式上の誤りがないかを調べるチェックであり、論理的、意味的に妥当かどうかといった点については別の手法により検査する。

シーケンスチェック (順序検査/順番検査)

順序が決められているようなデータで、入力値が順番通りに並んでいるか確かめることをシーケンスチェックという。

順序が決まっているデータ群に対して行われるチェックで、規定された順序どおりに並んでいるかどうかを調べる。例えば、時系列の変化を記録したデータが日付・時刻の推移の通りに並んでいるか、伝票番号のような通し番号が付与されたデータが昇順(小さい順)あるいは降順(大きい順)に並んでいるか、といったことを調べる。また、連続した番号などが対象の場合には、あるべきデータが抜け落ちていないかどうかを調べる場合もある。

論理チェック (ロジックチェック/妥当性チェック)

データの論理的な整合性を確かめることを論理チェックあるいは妥当性チェックという。

生年月日が未来の日付になっているなど、データ単体として論理的にありえない状態になっていることを検知したり、複数の項目やデータ間の関係を調べ、販売したチケット数が座席数より多い、発送日が発注日より過去になっている、などの論理的に矛盾したデータが入力されていないかを調べる。

ニューメリックチェック (数値検査)

データが数値としての形式を満たしているかどうかを判別することをニューメリックチェックという。

個数や値段など数値を入力すべき場所に、数値として解釈可能な文字群が正しく入力されているか、アルファベットや日本語文字など、数値として扱うことができないデータが含まれていないかを調べる。

数値であることが確認されたあと、その値が上限あるいは下限を超えていないか調べるのは「リミットチェック」あるいは「レンジチェック」の役割で、個数に小数点以下の値があるなど論理的に正しくないことを検知するのは「論理チェック」の役割となる。

バランスチェック (平衡検査)

必ず一致していなければならない一対のデータを実際に計算してみて一致するかどうか確認することをバランスチェックという。

会計データの借方と貸方のように、2つ以上の異なるデータの並びについて、その合計値などが最終的に必ず一致しなければならない場合がある。このような場合に、実際にそれぞれ計算してみて一致するかどうかを確認することを指す。

番号を伝達したり記録する際に誤りが生じたり、悪意の攻撃者が番号の改竄や偽造を試みると正規に発行した番号ではなくなるが、チェックキャラクターによる検査を行うことで簡単に誤った番号であることを検知することができる。

最もよく用いられる方式は、各桁の値に一定の規則に従った係数を乗じた値の和を求め、それを定められた係数で割った余りを末尾に付加する方法である。元の番号の数字が少しでも違っているとチェックキャラクターが全く異なる値になるため、誤りを検出することができる。

偶発的な誤りを検知することが主目的の場合は算出方法は簡易なものにして公開されるが、偽造の防止などが必要とされる場合は適合する番号が簡単に逆算できないような複雑な計算方法を採用したり、算出方法を非公開とすることもある。

文書の見出しや枠線、罫線、表、項目名といった記入様式(フォーム)に相当する部分をあらかじめ作成しておき、記入内容に相当する原稿を与えるとシステム側で自動的に重ね合わせて印刷してくれる機能である。

伝票のように同じ様式で毎回異なる内容の印刷物を作成する必要がある場合、書類を作成するたびに雛形に内容を入力する手間がかかるが、フォームオーバーレイに対応したシステムでは雛形と内容の重ね合わせを印刷時に自動的に行なってくれる。書類の作成や印刷にかかる手間や時間を削減でき、窓口業務などでよく用いられる。

コンピュータシステムで現実の対象をデータとして取り扱うには、対象ごとに番号や英数字などから成る符号を割り当て、これを用いて対象の識別や同定を行う必要がある。符号をどのような文字や数字で構成し、各対象にどう割り当てるのかを決めるのがコード設計である。

代表的なコード体系には、現れた順に通し番号を与える「順番コード」(連番コード/シーケンスコード)、桁ごとに属性値を決めて組み合わせる「桁別コード」、グループごとに番号の範囲を割り当てる「区分コード」(ブロックコード)、人間にとって意味のある数値や英略語などを組み合わせる「表意コード」(ニーモニックコード)などがある。

どのような対象を扱うのか、対象についてのデータを人間やシステムがどのように扱いたいのかによって適したコードは異なる。例えば、対象が後からどのくらい増えるのか分からないのに範囲の狭い区分コードを使うべきではないし、人間がコードを見ただけで対象の特性などをある程度分かるようにしたければ表意コードを用いるべきである。

最初のデータに「1」、次のデータに「2」…といった具合に単純に連続した番号を割り当てていく方式である。将来追加される可能性のあるデータ群に対してデータを一意に識別できるコードを与えることができる。

各データに与えられる番号は単なる通し番号であるため、それ自体がデータに関する何かの性質や分類を表現しているわけではないが、データの出現順や追加順に採番していくことが多いため、値の大小が時系列上の前後関係に対応することになる。

よく用いられるのは先頭を0または1とする整数をコードとする形式で、現在の最大値(末尾の値)に1を加算して新しいコードとする。一度与えたコードは変更しないのが一般的で、データを削除する場合は対応する番号を欠番とする。表現形式によっては「0001」など桁数が決まっていることもある。

データに整数の識別番号を与える際、データをいくつかのグループに分類し、グループごとに1000番台、2000番台といったように番号の範囲を定める。データには各グループに割り当てられた範囲から番号を割り当てる。

上位の桁を見ただけでデータが属するグループを識別でき、数値の範囲を指定することで特定のグループを絞り込むといった処理が容易に記述できる。コード設計の時点でグループごとに収録できる件数の上限が決まるため、件数があらかじめ決まっているか予想できる場合に用いる。

グループ内での番号の割り当て方に決まりはないが、出現順に通し番号(シーケンスコード)を与え、グループの識別以外には特に意味は持たせないことが多い。一方、コードを構成する各桁や桁の範囲ごとに特定の意味を持たせる方式は「桁別コード」という。

コードの桁数をあらかじめ決めておき、端から順に何番目の桁(一桁でも複数桁でもよい)が何を表し、どのような基準や体系で値を割り当てるのかを定義する。各データはその属性から各桁の値を決定していく。個体の識別のためにデータ固有の部分は通し番号などにすることが多い。

例えば、学生に割り当てる学籍番号を、上位2桁が入学年、続く2桁が所属、末尾4桁が所属内での個人の識別番号とするような方式である。特定の桁の値を見ることで入学年や所属を簡単に知ることができる。

コードだけで様々な情報を表現することができ、データの識別や分類、属性の伝達を一つの番号だけで行える利点がある。単純な通し番号などに比べると桁数が長くなりがちな難点もある。社会でも広く用いられる方式で、書籍のISBN、バーコードのJANコード、運転免許証番号などは桁別コードとなっている。

黒色を「BK」で表すなど、英単語の略号や頭文字、特性を表す数値などを組み合わせてコードとする方式で、製品の型番などによく用いられる。例えば、容量700MB、レーベル面が白のプリンタブル、スピンドルケース50枚入りのCD-Rメディアの商品パッケージを「CDR700WP50SP」とするようなコードがこれに当たる。

人間にとってコードを見ただけでそれが表す内容を容易に想像したり確認することができ、取り違えなどを防ぐ効果が期待できるが、通し番号など意味とは無関係に機械的に決められる他のコード設計よりも桁数や文字数が長くなりがちである。

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

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

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

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内に記述する場合は他ページとの共有という利点は損なわれる。

一般の外来語としては、絵画や写真などを入れる額縁や、画像の周囲を囲む飾り枠、機械などの骨組み、物事の理解の枠組みや共通の考え方などを意味することが多い。IT関連では主に以下の意味で用いられる。

動画のフレーム

動画を構成する一枚一枚の静止画(コマ)のことをフレームという。コンピュータで動画を表示する際は、数十分の1秒といった極めて短い一定の時間間隔で次々に静止画像を切り替えて表示することで人間の目に動いているように見せている。

この一枚ずつの静止画像をフレームという。動画の滑らかさの指標として、1秒間に書き換えるフレームの数を表す「fps」(frames per second：フレーム毎秒)という単位がよく用いられる。例えば、60fpsの動画といった場合は毎秒60枚の画像を切り替えて表示している。

データの送受信単位としてのフレーム

イーサネット(Ethernet)などいくつかの通信方式や通信プロトコル(通信規約)では、データの送受信単位をフレームと呼ぶ。送りたいデータを一定の大きさに分割し、先頭に宛先アドレスなどの制御情報を付加したもので、最大長や制御情報の形式は各規格ごとに定められている。

一般に、物理層における信号の送受信を一定のまとまりのデータ単位ごとの送受信に編成する「リンク層」あるいは「データリンク層」における送受信単位をフレームと呼ぶことが多い。有線LANの標準であるイーサネットの送受信単位は「MACフレーム」あるいは「イーサネットフレーム」と呼ばれる。

Webページ/HTMLのフレーム表示

Webページの表示手法の一つで、Webブラウザの表示領域を縦または横に複数の領域に分割して、それぞれに別のページを表示できるようにしたものをフレームという。HTMLではframeset要素(タグ)およびframe要素で定義する。

また、ページ内に矩形(箱型)の領域を設けて元のページから分離し、別のページの内容を埋め込んで表示する方式もあり、「インラインフレーム」(inline frame)という。広告の表示などに応用されており、HTMLではiframe要素で定義する。

Webページのナビゲーションメニュー

Webの分野では、サイト内の各ページに共通して置かれる、サイト内のどこに何があるのかを簡潔にまとめたリンク集やメニューなどのことをナビゲーションということが多い。

規模の大きなサイトでは、サイトの全体的な構造や大項目などを案内する「グローバルナビゲーション」、現在のページを含む大項目の内部を案内する「ローカルナビゲーション」など、粒度の異なる複数のナビゲーションをページ内に設けることがある。

ナビゲーションシステム

位置情報システムの分野では、画面に地図を表示して現在地から目的地までの道順や所要時間、目的地周辺の情報などを案内することをナビゲーションという。

自動車向けのシステムを「カーナビゲーションシステム」(カーナビ)、歩行者向けに公共交通機関の乗り換え案内などを統合したシステムを「歩行者ナビゲーションシステム」(歩行者ナビ)などという。スマートフォンなどを通じてネットサービスの形で提供されるものは「ナビゲーションサービス」という。

WebブラウザのHTMLやCSS、JavaScriptなどの仕様は基本的にはW3Cなどが定めた標準を元にしているが、バージョンによって対応度合いが異なるほか、開発元が独自に拡張した部分や、標準に対応していない部分、解釈や挙動の異なる部分がある。クロスブラウザのツールなどはそのような違いを吸収したり最低限の共通機能のみを使うなどすることにより、複数の主要なWebブラウザで不具合無く動作させることができる。

「クロスブラウザ」と「マルチブラウザ」はほぼ同義として用いられるが、前者をブラウザを問わず共通して動作する、後者を決められた複数の特定のブラウザに対応するという意味で使い分ける場合もある。

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

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

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

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

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

3DCGのワイヤーフレームモデル

“wire” は針金や電線、“frame” は枠組み、骨組みなどを意味し、3DCGで立体物を表現する際に頂点と頂点間を結ぶ線分のみを描画する手法を指す。面の情報を持たず、すべての線が見えるように描画する方式と、面についての情報を持ち、視点から見えない線は描画しない(隠線消去)方式がある。

最も基本的で簡易な3D描画手法で、コンピュータの性能が低い頃のCG表現によく見られた。現代では面を描画するサーフェスモデルが一般的だが、3DCG制作ソフトや3D CADの設計画面などでは立体の形状を編集する際にワイヤーフレーム表示を用いることが多い。

Webサイトのワイヤーフレーム

Webサイトやスマートフォンアプリのデザインを検討する初期段階で、表示画面の中でどこにどのくらいの大きさや形状でどのようなコンテンツや操作要素が入るのかを示した線画の図面をワイヤーフレームという。

詳細なデザインや装飾などはせず、画像を矩形で表したり、未確定な文章は横線やでたらめな文字列で表すなど、形状や大きさ、配置といったレイアウトに関連する要素以外は極力省略する。各要素には「ロゴ画像」といった要素名や「季節ごとに差し替え」といった注釈などを付記する。

関係者間でコンセンサスが得られるまで何度も繰り返し書き直しや修正を行う前提で作られるため、紙に鉛筆やペンで手書きすることが多い。画像編集ソフトや文書編集ソフト、プレゼンテーションソフトなどでデータとして作成する場合もある。近年ではWebサイトやアプリのワイヤーフレームを作成するためのツールやネットサービスなどもあり、それらを利用することも多い。

ページが現在表示されている画面の幅や高さ、縦長か横長かなどの情報を取得し、「表示サイズの幅がこれ以上ならこのスタイルを適用」「画面が横長ならこのスタイルを適用」というように、一つのスタイルシートで複数の画面環境に対応することができる。

CSSファイルやHTMLのstyle要素内で「@media」規則として記述することができるほか、「@import」規則やHTMLのstyle要素のmedia属性の中で条件を指定して読み込むCSSファイルを切り替えることもできる。

調べることができる属性には、表示領域(ウィンドウなど)の幅(width)と高さ(height)、画面全体の幅(device-width)と高さ(device-height)、画面が縦長か横長か(orientation)、表示領域の縦横比(aspect-ratio)、画面全体の縦横比(device-aspect-ratio)、表示可能な色の数(color)、画面の画素密度(resolution)など。

コンピュータの操作画面を構成する要素の一つで、写真など複数の項目が横に並んでおり、これをマウス操作やタッチ操作で左右にスライドして中央に表示される項目を次々に入れ替えていくことができるものをカルーセルという。

項目全体が円環状に繋がっており、同じ方向にスライドし続けると同じ項目に戻ってくる様が回転木馬を横から見た様子に似ていることからこのように呼ばれている。利用者が操作しなくても一定の早さや周期である方向に自動的にスライドし続けるよう設定されたものが多い。

限られた領域に多くの情報を提示できるが、閲覧者がカルーセルであることに気づかなかったり、わざわざ操作しようと思わず最初に表示されているものしか見ないなど、必ずしも狙った効果が得られないことも多いと言われる。

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

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

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

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

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

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

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

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

W3C(World Wide Web Consortium)はWeb技術の標準化を推進する非営利団体の一つで、WAIはその内部に設けられた分科会の一つである。どのような身体的特性を持つ人も等しくWebにアクセスできるようにする「Webアクセシビリティ」を推進するための技術標準の策定などを行っている。

主な成果物として、Webコンテンツのアクセシビリティ向上のための指針を策定した「WCAG」(Web Content Accessibility Guidelines)がある。主に身体に障害のある人に配慮したWebコンテンツの作成方法を示したガイドラインで、初版は1999年に発行され、最新版は2023年に発行されたWCAG 2.2である。

他にも、Webアプリケーションのユーザーインターフェースのアクセシビリティ改善ガイドライン「WAI-ARIA」(Accessible Rich Internet Applications)、動画にキャプションを付加する「WebVTT」(Web Video Text Tracks Format)、ブラウザなどのソフトウェア開発者向けのガイドライン「UAAG」(User Agent Accessibility Guidelines)、Web制作ツールの開発者向けガイドライン「ATAG」(Authoring Tool Accessibility Guidelines)などの指針も策定・公表している。

Webページがコンピュータやソフトウェアなど利用環境の違いや、子どもや高齢者、障害者などの区別なく、誰でも等しくアクセス可能である状態や程度を「Webアクセシビリティ」(web accessibility)という。WCAGではアクセシビリティを確保するために制作者が留意すべき技術的な要件を定めている。

4つの原則として、(視覚に限定せず)何らかの形で内容を知覚できるようにする「知覚可能」(perceivable)、(特定の装置や方法に限定せず)様々な手段で操作できるようにする「操作可能」(operable)、内容や操作方法を理解しやすくする「理解可能」(understandable)、記述の完全性や技術仕様の互換性に配慮する「堅牢」(robust)を掲げている。

具体的な項目としては「画像や音声などには代替テキストによる注釈をつける」「すべての要素をキーボードで指定できるようにする」「サイトやページ内での現在位置を確認する手段を提供する」「ページ内の要素の動作を予測できるように構成する」「ユーザーエージェント(Webブラウザや音声読み上げソフトなど)との互換性を最大化する」などがある。

WCAG 1.0はW3C内の作業部会WAI(Web Accessibility Initiative)が仕様を取りまとめ、1999年にW3C勧告として標準化された。WCAG 2.0は2008年にW3C勧告となり、2012年には国際標準化機構(ISO)によってISO/IEC 40500として採用された。日本ではJIS X 8341-3の2010年改訂版(JIS X 8341-3:2010)がWCAG 2.0対応となった。

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

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

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

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

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

従来の一般的なフォントは健常な成人が読むことを暗黙の前提としており、高齢者や子ども、弱視(ロービジョン)や読字障害(ディスレクシア)など視覚に関する障害や特性を持つ人々、日本語がネイティブではない外国出身者などにとって、読み取りにくかったり誤読しやすい箇所が含まれることがあった。

UDフォントはユニバーサルデザイン(UD：Universal Design)の考え方に基づいて、できる限り多くの人が同じように読み取ることができるよう配慮された字形となっている。文字としての見やすさや分かりやすさ、文として並べたときの読みやすさ、他の文字との判別しやすさ、誤読しにくさを重視してデザインされている。

「このような特徴がある字形はUDフォントである」といった明確な基準や共通する性質があるわけではないが、短いはみ出し部分を除去するなどすっきりしたシンプルなデザインにしたり、「C」「3」などの開口部を広く取ったり、濁点と半濁点を取り違えないよう大きくしたり、「1」「I」「l」などの字形の似ている文字にそれぞれ明確な特徴を与えるなどの工夫が凝らされている。

UDフォントは様々な人が様々な状況で目にする可能性がある場合によく用いられ、家電製品などの電子機器の操作画面、商品のパッケージや取扱説明書、街頭や公共施設、店舗、交通機関などの案内や掲示物、新聞や雑誌などの出版物、手続きや契約関係の書類などで採用が広がっている。教科書にも「UD教科書体」が使われる例が増えている。

開発者やユーザーインターフェース設計の専門家などが少人数で行なう評価法で、ユーザビリティに関する原則(ヒューリスティクス)をまとめたチェックリストやガイドラインなどを用意し、各評価者がそれぞれの項目に照らしてサイトをチェックし、問題点を列挙する。

各評価者の評価作業が終わったら集まって各項目について議論し、問題の整理を行う。評価は組織内で策定した原則や、専門家の提唱しているガイドラインなどを用いて、観点や評価項目、基準などをある程度揃えて行なうのが望ましいとされる。

専門家でもなく制作にも携わっていない外部の被験者を集めて実施する「ユーザビリティテスト」(ユーザーテスト)に比べ、時間や費用がかからず、被験者に実際に見せられるものが用意できない開発の初期段階でも実施できる。ただし、評価の質が評価者の知識や経験に大きく左右されるという問題もある。

1990年にユーザビリティの専門家であるヤコブ・ニールセン(Jakob Nielsen)博士らが開発した手法で、同氏は評価時に用いるヒューリスティクスである「ニールセンのユーザビリティ10原則」も提唱している。このような原則に加え、評価者自身の知識や経験則なども加味して評価を行う手法は「エキスパートレビュー」とも呼ばれる。

一般的な手法は、対象システムが想定する利用者像に近い属性を持つ被験者を集め、システム上で達成してほしい課題をいくつか与え、用意したコンピュータで実際に操作してもらう。その様子を映像で録画したり操作記録を取って、終了後に被験者と面接する。

被験者が開発者側の意図と異なった操作をしていた場合にその時の意図や認識を尋ねたり、逆に、課題を行う上で困難に感じた場所やわかりにくかった箇所などを指摘してもらう。複数の被験者が同じ箇所でつまずくようであれば、その部分の画面構成や案内、操作法などが分かりにくいため改善する必要があることがわかる。

テスト後に改善を行なったら、利用者の視線で改善されているかどうかを確かめるため、別の被験者を集めて再び同じ課題でユーザビリティテストを実施する場合もある。一般消費者向けネットサービスなどではユーザー体験(UX：User Experience)を差別化要因とするため、このプロセスを重視して何度も繰り返すこともある。

ユーザビリティテストは開発チームだけでは実施できず、外部から被験者を集めなければならないため期間と費用がかかるが、システムの構造や事情を熟知している開発者側では気が付かない問題点を明らかにできる限られた方法の一つであるため、特に一般向けに公開されるシステムでは必ず実施すべきとする専門家も多い。