エルゴノミクス GUI：人の身体的動作に合わせた GUI 設計手法
理学専攻・情報科学コース

1

はじめに近年，人の手の形状に合うようにデザインされた製品が実用化されている（図1，図2）．これらと同様に，グラフィカルユーザインタフェース（GUI）も人間の手および腕の動きの特性を考慮したデザインにすることで，より自然に心地よくGUIを扱えるようになり，自然なかたちでのコンピュータ操作が可能になると考える．そこでエルゴノミクスの観点に基づいてデザインされたGUI，エルゴノミクスGUIを提案する（図3）．本研究では代表的なGUI要素から，プルダウンメニューとスライダーを取り上げた．

2

冨田 あゆみ図 1: 一般的なキーボード（左），エルゴノミクスキーボード（右）図 2: 世界初のマウス（左），エルゴノミクスマウス（右）背景

本章では，エルゴノミクスGUIの提案に至る背景を3つの観点から説明する．

2.1

人間の手の動き基本的に，人間の手，手先，指先をまっすぐ動かすことは簡単でないと考えられる．まっすぐとは，机上のような平面の上において水平垂直方向に直線的に動かす動作である．人間の動きの基本は回転である．一般に，関節の位置を固定すればその先の部分は関節を中心に弧を描く．まっすぐ伸ばし引っ込めるという動作を作り出すのは，回転の組み合わせである．回転を組み合わせ，まっすぐの動作を行う時，人間の脳は複雑な制御をしている．すなわち，体のパーツを同時に制御し，徐々に均衡の取れた位置にシフトすることで，ある場所からある場所に手を移動させる到達動作を行っているのである[1]．また，人間がまっすぐ動かそうとしても動かせないという状況に関する研究は，過去に多く存在する．De Graafらは，出来るだけまっすぐを目指して手先でゆっくりと直線を引かせる実験を行った[2] ．どんなにまっすぐ動かそうとしても，5 °〜10 °は進む方向を誤り，非拘束な腕では，点から点への動きは通常優しくカーブするという.

図 3: 従来のGUI（左），エルゴノミクスGUI（右）が直接扱うキーボードやマウスなどの入出力機器に，エルゴノミクスの考え方を取り入れた製品が増えている．一般的なキーボードや世界で初めて作られたマウスは，四角形を基調としたデザインであるが，最近は人間にとっての疲れやストレスを減らす目的で湾曲したデザインを採用しているものがある（図1，図2）．これらは手の向き，手首の角度，指の動きが人間の負担にならないようにデザインされている．一方で，コンピュータ画面上では，メニューのようなGUI部品が未だに四角くデザインされている．

3

2.2 一般的なGUI部品
1980年代初頭に商品化されて以降，GUIは本格的に普及し，現在では GUI は標準的なユーザインターフェースとして親しまれている．しかしGUIを構成する「デスクトップ」「ウィンドウ」「メニュー」「アイコン」「ボタン」「スライダー」などの要素は，四角形を基調とし，水平垂直方向に対して配置が直線的である．しかし，この直線的なGUIを操作する時，人間の手は直線的な動きを求められてしまう．このことは，まっす
ぐの動作が苦手な人間にとっては負担になっていると考えられる．
2.3

エルゴノミクスGUIの提案

以上の観点から本研究は，エルゴノミクスの考え方を基に，人間の手で操作しやすいGUI，エルゴノミク
スGUIを提案する．ストレスを感じながらコントロールすることを強いられないような GUI を目指す．また，一般的なGUIの特徴を損なわないこともエルゴノミクスGUIとして重要であると考える．以降では，プルダウンメニューを対象にしたエルゴミクスGUIの試作とその評価について述べる．

3.1 ななめメニューと曲がりスライダー
本研究は，手に優しい操作が可能なエルゴノミクス
GUIとしてななめメニューと曲がりスライダーを提案する．従来のプルダウンメニューやスライダーが垂直方向直線状に配置するのに対して，これらは人間の手の動きによる自然なカーブに合うように，斜め方向への弧を描くように配置する．また，弧の形状はユーザの過去の動きに合わせて適応させる．

エルゴノミクスの考え方

一方で，エルゴノミクスという概念がある．人間にとっての使いやすさという観点から，人間が扱いやすい装置の形状などを研究し，疲れやストレスをなるべく感じずに人間が機械を扱えることを目的にする学問である．この考え方を基に，エルゴノミクス対応を謳う製品が世に数多く出回っている．情報分野でも人間

3.2 事前実験
ななめメニューと曲がりスライダーの試作の前に，プルダウンメニューの項目選択時のマウスポインタの動きを観察することを目的として，事前実験を行った．
ポインタの軌跡は皆まっすぐではなく，多くは弧を描
1

図 6: アンケートによる評価の結果と加重平均する．そして，(1)の角度と(2)の比，(3)をメニューの総項目数倍した値から，平均の制御点を求める．

図 4: 試作したななめメニュー（左）と曲がりスライダー（右）マウスポインタの軌跡
C1

4.3

C2h

アンケートで，試作したななめメニューの主観的評価を行った．被験者は10人．操作デバイスには，マウス，ノートパソコンのタッチパッド，ペンタブレット，ペンタブレットPCを用いた．アンケートでは，項目の読みやすさ，選択の速さ，ポイントしやすさ，選択ミスの少なさ，選択の心地よさ，選択の煩わくなしさの６つの尺度について従来のメニューとななめメニューを比較した．これら６要素について｛-3, -2, -1, 0, 1,2, 3｝ の７段階評価を行った．0は，従来のメニューと比べ違いが感じられ無かったことを表している．

mC3

図 5: ななめメニュー：軌跡の反映

4.4 結果と分析
アンケートの結果から，評価の平均を図6に示す．ななめメニューは従来のプルダウンメニューよりも比較的高く評価された．全体的にタッチパッドが良い評価をされ，マウスは低い評価をされた．タブレットPCとペンタブレットはあまり違いが無かった．タッチパッドは多くの要素で高く評価された．9/10の被験者が週６日以上ノートパソコンのタッチパッドを使っていることから，多くの被験者がタッチパッドに慣れていて，違いに敏感だったためと考えられる．ペンタブレットに慣れているある被験者は，ななめメニューはペンタブレットに一番適していると述べた．このことから，エルゴノミクスGUIは，最も慣れたポインティングデバイスを使う時，もっとも効果的であると考えられる．

いていた．しかしカーブの具合は被験者と使用したデバイスしだいであった．そこで過去におけるユーザによるメニュー選択やスライダー操作の軌跡の特徴を形状に反映させていくことにした．

4

ななめメニュー

試作したななめメニューと曲がりスライダーを図4に示す．過去の軌跡から形状を決定する仕組みは同じであるので，以降はななめメニューについて述べる．
試作したななめメニューは，ウインドウの上部にメニューバーがあり，メニューバーの項目をユーザがクリックすると，ななめメニューが展開する．選択項目を配置する様々な弧の形状は，ユーザが過去のメニ
ュー操作で描いたマウスポインタ軌跡を反映している．斜めに弧を描くという外観以外は，従来のプルダウンメニューと同じ振る舞いをする．

5

関連研究

項目をななめに表示する手法として，MacOSX のDockで使われているFanStackがある．これは，扇を広げたようにアイコンを一覧する機能である．本研究は，手の負担を減少させる目的で設計している．

4.1 ななめメニューの形状の決定方法
ななめメニューは，メニュー項目を配置する弧に，制御点３つを用いた２次ベジェ曲線を使用する．また，過去のメニュー項目選択時の軌跡を加重平均する．
4.2

主観的評価実験

6

３つの制御点まとめ

エルゴノミクスの観点に基づいてデザインされた
GUI，エルゴノミクスデザインGUIを提案した．プル
ダウンメニューを対象にしたエルゴノミクスGUI，ななめメニューと曲がりスライダーを試作した．試作したななめメニューの主観的評価を行った．

制御点C1，C2，C3は以下の通りである．
C1 はメニューバーの項目の下端中央である．C2，C3は過去の軌跡のデータから決定する．図5は，一番底の項目を選択した場合の典型的なマウスポインタ軌
跡の例と，制御点を示す．点線が軌跡である．C2は軌跡データのうち最も膨らんだ点である．C3は軌跡の終点である．実際は，C3は，C1と軌跡の終点を通る直線と一番底のメニュー項目の下端との交点を使う．
また，異なるユーザおよびデバイスに適応させるた
め，C2，C3は，過去の軌跡から３つのパラメータ，直線C1-C3の角度(1)，線分C1-ｍとｍ-C3の比(2)，上からｎ番目の項目が選択された場合，C2と直線C1-C3の距離hをｎで割ったもの(3)を取得し，それまでの平均

参考文献[1] T. Flash, The Control of Hand Equilibrium Trajectories in Multi-Joint Arm Movements. Bio1.
Cybern. Vol. 57, pp. 257-274(1987).
[2] De Graaf et al., Misdirections in slow goaldirected arm movements and pointer-settingtasks. Exp Brain Res, vol. 84, pp. 434-438(1991).

2