✏️第1問-問4を一緒に解答しよう

問4はユーザインタフェースの設計に関する問題です。

では、問題を確認しましょう。

問4-aの問題

今回の出題テーマ

ユーザインタフェース設計と操作時間(Fittsの法則)

この問題は、IP01-07「情報デザインと表現方法」で学んだ内容が出題されています。

情報デザインに近い問題なのかな?

どのようにデザインすれば利用者が扱いやすいか考える必要がありそうですね。

問4 次の文章を読み,後の問い(a・b)に答えよ。

マウスカーソルをメニューやアイコンなどの対象物に移動する操作をモデル化し, Webサイトやアプリケーションのユーザインタフェースをデザインする際に利用されている法則がある。 この法則では,次のことが知られている。

・対象物が大きいほど,対象物に移動するときの時間が短くなる。

・対象物への距離が短いほど,対象物に移動するときの時間が短くなる。

a

次の文章中の空欄 ケ に入れるのに最も適当なものを,図5の⓪~③のうちから一つ選べ。

この法則では,PCなどでマウスを操作する場合,マウスカーソルはディスプレイの端で止まるため, ディスプレイの端にある対象物は実質的に大きさが無限大になると考える。

この法則に基づくと,図5の⓪~③で示した対象物のうち,現在ディスプレイ上の黒矢印 黒矢印 で示されているマウスカーソルの位置から,最も短い時間で指し示すことができるのは ケ である。

図5 ディスプレイ上の対象物

問4-aの解説

正直、この問題…何を考えればいいのかよくわからないです。

大丈夫です。まずは難しく考えずに、 普段パソコンでマウスを動かす場面を思い出してみましょう。

アイコンをクリックするとき、「近いもの」と「遠いもの」では、 どちらが早く選べますか?

近いほうが早く選べますね。

そうですね。さらに、「大きいボタン」と「小さいボタン」なら、 どちらがクリックしやすいでしょうか?

大きいほうが押しやすいです!

実際にパソコンでマウス操作をすることをイメージしてみましょう。
この問題は「大きさ」と「距離」の2つで判断します。

この法則では次の2点が重要です。

  • 対象物が大きいほど速い
  • 距離が近いほど速い

さらに重要なのが、画面の端にあるものは無限に大きいとみなせるという点です。

画面の端では、マウスカーソルが外に出られないため、端に向かって動かせば必ずその位置で止まります。
つまり、多少ズレても必ず当たるため、「とても大きい対象」と同じように扱えるのです。

図では②と③が画面の端にありますが、カーソルからの距離を見ると、 ②の方が近いため最も速く選択できます。

端にあると「外に行かない」から当てやすいんですね!

A n s w e r

答えは②です。

理由:端にあり実質的に大きく、かつカーソルからの距離も最も近いからです。

問4-bの問題

続いて、問題を確認しましょう。

b

次の文章中の空欄 コ ・ サ に入れるのに最も適当なものを,後の解答群のうちから一つずつ選べ。

操作時間を短くするためにこの法則を適用した事例として,利用頻度に基づいてメニュー項目を配置する方法がある。

ここでは,マウスを右クリックした際に,マウスカーソルに対して図6に示すような位置で表示されるメニュー項目の配置について考える。 マウスカーソルで選択できる各メニュー項目の大きさは同じであるとし, この法則のみに沿って設計されたとすると,「項目5」は,他の項目と比べ利用頻度が コ 項目なので,意図的に サ に配置されていると考えられる。

図6 右クリックした際のメニュー項目

コ の解答群

⓪ 低い

① 同程度の

② 高い

サ の解答群

⓪ メニューの中で一番目立つ場所

① マウスカーソルの位置から遠い場所

② マウスで素早く選択できる場所

問4-bの解説

利用頻度と配置の関係が分かりませんでした。

ここも同じ法則です。「速く選べる場所」に何を置くかを考えます。

この問題では、「よく使うものほど速く選べる場所に置く」という考え方が重要です。

図では、カーソルの近く(上側)が最も速く選べる位置です。

しかし「項目5」はその位置にありません。

つまり、「項目5」は 利用頻度が低いため、 あえて優先されない位置に配置されていると考えられます。

なるほど!よく使わないから遠くにあるんですね!

A n s w e r

答えは(コ)⓪、(サ)①です。

理由:利用頻度が低い項目は優先度が低く、素早く選択できる位置には配置されないためです。

類題にチャレンジ

あるWebサイトの情報編集画面で,「保存」ボタンと「削除」ボタンを配置する。

利用者が入力内容を確認した後,最もよく使う「保存」ボタンを押しやすくし, 誤って押すと困る「あまり使わない削除」ボタンは押しにくい位置に置きたい。

このとき,最も適切なボタン配置はどれですか。

⓪ 保存:画面下側の中央付近,削除:画面上部の左側

① 保存:画面右上,削除:画面下側の右側

② 保存:画面左上,削除:画面中央

選択肢0

保存:画面下側の中央付近,削除:画面上部の左側

選択肢1

保存:画面右上,削除:画面下側の右側

選択肢2

保存:画面左上,削除:画面中央

ヒントをみる

よく使う「保存」は、少ない移動で押しやすい位置に置きます。 一方、誤って押すと困る「削除」は、押し間違えにくい位置に置くことを考えましょう。

問4は実生活にも直結する内容でしたね。

これで第1問はすべて完了です。

※この再現版では提出は行いません(送信先は未接続です)

Well done!

次のステップに進みましょう!

次のステップに進む

← 前のステップにもどる