アイコン(icon)シグニファイア | UI部品

 意味を記号的な絵で表したもの。マウスオペレーティングGUIの根幹をなす部品。
 GUIの別名「WIMP」のIにあたる、極めて重要な部品。

 MacのFinderやWindowsのエスクプローラのようなデスクトップでは、フォルダや紙など何かの道具のメタファが使われ、操作上も名詞的に使われることが多い。
 デスクトップメタファのGUIではファイルがアイコンで表されるので、ファイル=アイコンという勘違い、あるいは言い換えが良く起きる。

 動詞的アイコンとしては、機能やツールを表すものがある。
 名詞に比べ、具体的な形が動作にはないので、アイコンは分かりづらいものになりがち。

 アイコンはインジケータとしての機能を持つことが多く、特に利用可能(イネーブル)利用不可(ディスエーブル)が表現されることが多い。

ギアアイコンハンバーガーアイコンモアアイコンプラスアイコンロックアイコンチェーンアイコンカートアイコン

ピクトグラム

バッヂアイコンビュー

アイコン - Wikipedia

アイコンビュー(icon view)リスト | ビュー

 ウィンドウ(画面)全体にアイコンが並んだレイアウト。
 アイコンを選択すると、アプリケーションが立ち上がったり、サイト内のカテゴリへ移動する。
 格子状にアイコンが整列する使い方が一般的かと思うが、アイコン同士を重ねて置くことも含め、任意の位置におけるようになっていることもある。

 表示切り替えの際のアイコンには、が使われる。

ランチャリストビュー

Iビームポインタ(i-beam pointer)ポインタ

 文字入力あるいは選択可能な箇所の上にマウスポインタが来た時に変化するポインタの形。
 セリフ(装飾)付きの大文字のIの形、もう少し具体的には}{を密着させたような形をしている。

選択範囲ドラッグキャレット

Iカーソル

アウトデント(outdent)レイアウト

 一定間隔でずらした行頭を戻す操作。
 多くのテキスト入力ソフトで、アウトデントはSft+Tabキーによって行えるが、セグメンテッドコントロールによっても提供されることもある。

インデント

アラインメント

アクティビティインジケータ(activity indicator)インジケータ

 電源ランプなど、何かが動作していることを示すインジケータ。

 狭義にはスピニングホイールの事。

プログレスインジケータスロバー

アクセシビリティ(accessibility)

 画像が見えない、小さい文字が読めない、色の区別がつかない、音が聞こえないなど、利用環境や身体的な問題で利用方法が制限される場合でも、操作不可能に陥らないようにすること。
 例えばHTMLならば画像が表示されない(音声で表現される)環境向けにimg要素にalt属性をつけて意味が伝わるようにするとアクセシビリティが高まる。

ユーザビリティアクセスキー

アクティブウィンドウ(active window)ウィンドウ

 マルチウィンドウ環境でユーザの操作対象になっているウィンドウ。一番手前に表示されているウィンドウとも言い換えられる。
 アクティブウィンドウであることを示すために、他のウィンドウよりウィンドウ枠やタイトルバー、およびアイコンの色が濃い。

インアクティブウィンドウ

パネルフローティングウィンドウダイアログオーバーラップ

アクセスキー(access key)ショートカットキー

 特定の機能を割り当てられたキー。ショートカットキーの一種。
 ただし、もともと何らかの機能を与えられることを前提としているカーソルキーなどの編集キーや、そのた特殊キーは除く。

 WindowsではaltまたはF10キーを押した後、メニュー項目に示されたキーを押して選択できる。
 その際に割り当てられているキーがアクセスキー。
 マウス無しでも操作できる安心感があるが、ctrキーによるショートカットキーと使う文字・記号が異なっていたりして、記憶しづらさがある。
 また、英語版ではメニュー項目のスペルのどれかの文字の下にアンダーバーという書式で書かれてスッキリしているが、日本語版はアクセスキーが別に()の中に書かれるので、極めて格好悪く視認性も悪い。
 せめて表示位置が揃うように、頭に書いて欲しかったところだ。

 また、HTMLのaccesskey属性で設定されるキーを指す。
 ポインティング機能に劣るケータイ用のHTMLには必須と言っても良い機能だが、2015年現在、そのボタン操作が主体のケータイはなくなりつつある。
 また、パソコンであっても、マウス操作が困難な人にとってもアクセシビリティを高める役割がある。
 環境によって異なるが、指定されたキーを単独で押す場合と、ctraltとの組み合わせで動作する場合がある。

アコーディオン(accordion)UI部品
  • 見出しA
    • 項目A-1
    • 項目A-2
    • 項目A-3
  • 見出しB
    • 項目B-1
    • 項目B-2
    • 項目B-3
  • 見出しC
    • 項目C-1
    • 項目C-2
    • 項目C-3

 楽器のアコーディオンの蛇腹ように、見出し部分を選択すると下に情報を展開する部品。
 階層メニューを表現するのに使われる事が多い。
 開くのは常に一箇所で、別のボタンを押したら前に開いていた箇所は閉じるという作りで、機能としてはタブとほぼ同じ。

 一覧性が落ちる面があるので、初期状態では全て閉じて見出しだけにしていたり、すでに開いている箇所を選択すると全て閉じる場合もある。
 特に画面が狭く、全体がアコーディオンとして作られている場合に、全部閉じた状態は有効。
 フリック操作と画面全体がアコーディオンとして作られるインタフェースとの相性が良いので、スマートフォンなどのモバイルデバイスに向いている。

 操作する箇所が移動してしまうなど、意外にユーザにとっては使いづらく分かりにくいので、そういう場合は別の部品の検討も必要だろう。

ツリービューディスクロージャドロップダウンメニューカードスタッククローザブルパネル

エキスパンディングリスト(expanding list)

アニメーション(animation)

 画像、特にUI部品が時間に伴って変化・移動すること。
 下手にアニメーションすると待ち時間が発生してイライラするだけだが、プログレスインジケータのように処理の進み具合など、ユーザが求める情報を提供するなどすればユーザの心証は良くなる。
 また、ウィンドウを開いたり閉じたりしたときの開閉アニメーションや、ページめくりアニメーションなど、一見無駄なようにも見えるが、作用の方向性を直感的に理解させる効果がある。

イージング

ムービーミドル

アラインメント(alignment)レイアウト

 日本語には多くの場合"行揃え"と訳されるが、文字の行に限らず図や動画その他UI部品全般のレイアウト位置を表す。
 HTMLでもそうだが、alignと略されることが多い。
 また、アラインメントの選択はセグメンテッドコントロールによって提供されることが多い。

 水平(horizontal)は、左(left)、中央(center)、右(right)で部品の配置が規定される。複数の文字(画像等)がある場合、均等割付(justify)もある。
 垂直(vertical)方向の位置の場合は、上(top)、中央(middle)、下(bottom)となる。

 ラベル入力フィールドが並べられる場合、ラベルを右揃え入力フィールドを左揃えにしておくことで、近接効果によるまとまりが生まれてラベルと入力フィールドの関係が分かりやすくなる。
 そのような組み合わせが複数ある場合、ラベルの右に置いた「:」の位置が揃い、直線による分類効果が生まれ、より理解しやすくなる。
 映像作品のスタッフ・キャスト表示を見ると、ここでもラベルと内容を右揃え左揃えの関係にして、まとまりを良くする場合が多いことが分かる。

センタリングミドルインデント

アローボタン(arrow button)ボタン

 進行を示すボタン。多くは左右方向に配置されページの移動などを行う。その際はナビゲーションの一種と言える。
 横書きでディレクション左→右環境(アラビア語とか縦書き日本語でない環境)の場合は、左が前(戻る、prev)、右が次(進む、next)に割り当てられる。
 矢印に限らず、◀・▶︎であったり、<・>であったりもするが、その際もアローボタンと呼ばれる。

 また、数値の変更の際のボタンとしても使われる。

スクロールアローステッパ

カーソルキーページャ

アフォーダンス(affordance)

 ドナルド・A. ノーマンが「誰のためのデザイン」で提唱した概念だが、そもそもジェイムズ・ギブソンの提唱した生態心理学の「○○できる」という言葉とは意味を取り違えた誤用。
 生態心理学の元々の言葉と区別し、デザイン業界で使われる意味をもたせたい場合は「知覚されたアフォーダンス」と呼ぶ。
 それよりも、「○○できそう」を意味して使いたい場合シグニファイアという用語を使った方が良いだろう。

アドレスバー(address bar)バー

 現在の階層位置(path)を表示する部品。
 ファイルパスやインターネットアドレス(URL)が表示される。
 また、表示部は入力フィールドになっておりパスの文字を入力して移動できる。

 アドレス入力フィールドは、検索フィールドと兼用されることが多い。
 URLは検索文字列とほぼ明確に区別できる上、ページを指定するという共通した機能を持ったものなので違和感がない。
 さらにプログレスバーを兼用していることもある。

ロケーションバー(location bar)

アンドゥ(undo)機能

 直前の操作を取り消す機能。
 この機能があると失敗を許容できるようになるので、ユーザビリティが大きく向上する。
 操作ごとに状態を保存することにより失敗をなかったことにする、究極のフェイルセーフ機能とも言える。
 アイコンはU字型の矢印が描かれる場合が多いが、その方向や色などは一定した傾向はない。
 一般的なショートカットキーcmd+Z(ctr+Z)。

リドゥ