ITエンジニアに必要な今を知れる情報メディア
あなたのマウスカーソルは実は曲がっている!? その理由とは?
lifehack

あなたのマウスカーソルは実は曲がっている!? その理由とは?

マウスカーソル。実は、よく見ると曲がっている

いったいどれだけの方が気がついているだろうか。PCを使っているほぼすべての人が毎日見ているはずであろうマウスカーソル。実は、よく見ると曲がっている。柄の部分が少し曲がっているのだ。あまりに小さく、そして全体が斜めになっているために気がつかないが、柄の部分は4度も中心線からずれている。

もちろん、それにはきちんとした理由がある。マウスカーソルを見やすくするために意図的に柄の部分を曲げているのだ。


あなたのマウスカーソルは曲がっている!?

あなたのマウスカーソルは曲がっている!?

(毎日見ているマウスカーソル。実は少し歪んでいる。柄の部分が少し右に曲がっている。少し極端に表示すると模式図のようになっている)

マウスを発明したのは、スタンフォード大学研究所(現SRIインターナショナル)のダグラス・エンゲルバート

マウスという装置を発明したのは、スタンフォード大学研究所(現SRIインターナショナル)のダグラス・エンゲルバートで、このマウスは1968年12月9日に行われた公開デモンストレーションで広く世間の人が知ることになった。

エンゲルバートの研究は、今日のリモートワークにつながるもので、ネットワーク対応のコンピューターシステムNLS(oN-Line System)を開発するものだった。このNLSは、遠隔地にあるコンピューター同士を接続して、テキスト編集やグラフィック編集を、複数の人が同時にひとつの画面に対して行えるというものだった。つまり、今日のクラウド上でのリアルタイム編集を実現していた。

このNLSが50年前に開発されていたものだと聞くと、現代の私たちでも驚いてしまうが、当時、このデモンストレーションを見た人はことごとく仰天をした。そのため、この1968年のデモンストレーションは「ビッグ・デモ」と今日でも呼ばれている。


あなたのマウスカーソルは曲がっている!?

(マウスの発明者でもあるダグラス・エンゲルバートの1968年の「ビッグ・デモ」。ここでのマウスカーソルは垂直なものだった。このデモから、パーソナルコンピューターの発展が始まる)

パロアルト研究所で開発されたアルトでは、マウスカーソルが斜めになった

この仰天した観客の中に、アラン・ケイがいた。アラン・ケイは後にゼロックス社のパロアルト研究所で、グラフィカルなコンピューター「アルト」の開発を行う。このアルトもマウスを使って操作するコンピューターだった。

この開発中のアルトを見て、仰天をしたのが、次世代コンピューターの開発を始めていたアップルのエンジニアたちだった。彼らはMacintoshの前身にあたるコンピューターを開発することになる。これは今日のMacの直接の祖先で、もちろんマウスが使われていた。

エンゲルバートのNLSで、マウスカーソルは垂直方向に上を向いた矢印だった。画面上の位置を指定するマウスカーソルとして、矢印記号を使うのは優れたアイディアだった。先端の尖ったところで、精密な位置指定ができるからだ。しかし、垂直であることには改善が必要だった。コンピューターでの作業は、テキスト入力やテキスト編集が多い。文字の多くは、垂直線と水平性で構成されている。そのため、マウスカーソルが垂直矢印だと、文字列に紛れてしまい見失いやすくなってしまうのだ。

そこで、パロアルト研究所で開発されたアルトでは、マウスカーソルが斜めになった。これでマウスカーソルを見失うことは少なくなった。しかし、マウスカーソルのデザインには工夫が必要だった。


あなたのマウスカーソルは曲がっている!?

(パロアルト研究所で開発されたアルト。今日のMacの祖先にあたる。アルトのマウスカーソルは斜めに改良された。そして、よく見ると、柄の部分が歪んでいる。Wikipediaより引用)

わずか4度だが、柄の部分が曲がっている

当時のディスプレイの解像度は低かったので、斜め線にジャギーが出やすかったのだ。アルトのディスプレイは横8.5インチ×縦10.5インチで、解像度は72dpi(1インチあたり72ドット)というものだった。現在、Retinaディスプレイを搭載しているMacの解像度は機種により多少の違いがあるが、220dpi前後と3倍以上細かくなっている。

解像度の低い画面でも、垂直線、水平性を使うことは問題ない。縦横に並んだピクセルがつながって、きれいな直線が描ける。45度の斜め線もまずまず問題ない。ピクセルが斜めにつながって、多少ジャギーが出るものの許容範囲だ。

また、26.57度という斜め線も許容範囲だ。縦に2つ並んだピクセルが斜めにつながっていく。多少ガタガタするものの、斜め線であることは認識できる。

しかし、その他の角度ではジャギーが出てしまう。図のように、並ぶピクセルの数がまちまちになってしまい、これを遠目で見ると、線がガタガタしているように見え、直線に見えなくなってしまうのだ。

つまり、当時は、斜め線として使っていい角度が限定されていた。

どんな角度なら使っていいのか。それは簡単に計算で求めることができる。三角関数のタンジェントの数表を見て、整数比(1:Nになる比)になる角度を使えばいいのだ。タンジェントというのは直角三角形の底辺と高さの比だ。タンジェント値が1:Nの整数比になれば、直線があまりがたつかない。

このようなジャギーが出ない角度だけを使って、矢印を構成できるだろうか。矢印は7本の線から構成されている。矢印の肩の部分が左右2本、そして肩下の袖の部分が左右で2本、最後が柄の部分が3本だ。

デザイナーは、矢印を斜めにするにあたって、まず左肩を0度に設定することを思いついただろう。これはいいスタートだ。では、右肩はどうしたらいいだろうか。135度(90+45)が利用できる。矢印の先端の角度は45度となる。

では、次に肩下の袖の部分はどうしたらいいだろうか。左の袖は45度となり、右の袖は90度が使える。これもものすごくいい。今のところ、ジャギーが出てしまう角度はまったく使っていない。


あなたのマウスカーソルは曲がっている!?

(解像度の低いディスプレイ上では、利用できる斜め線の角度に制限がある。上のような角度であれば、多少のジャギーは出るものの斜め線と認識してもらえる。しかし、下のような角度では、ドットがばらつき、きれいな直線に見えなくなってしまう。現在のディスプレイでは、解像度もあがり、アンチエイリアス処理などを行うため、このような問題は起こらなくなっている)

しかし、問題は柄の部分だ。矢印の先端の角度が45度だから、矢印を貫く中心線は45/2=22.5度にならなければならない。柄を構成する2本の角度は22.5度である必要がある(垂直線から時計回りに計れば157.5度となる)。しかし、この角度はタンジェント値が1:Nの整数比とならず、ジャギーが出てしまう。そこで、デザイナーは22.5度に近い26.57度を使った。これならタンジェント値が0.5となり、ジャギーが出ないのだ。

そのため、わずか4度だが、柄の部分が曲がっている。現在のディスプレイは解像度が非常に高くなっているので、ジャギーということを気にしなくてよくなっている。紙の上でデザインするのと同じように自由な角度を使えるようになっている。それでも、未だに歪んだマウスカーソルが使われている。あなたのPCのマウスカーソルはどうなっているだろうか。確かめてみていただきたい。


あなたのマウスカーソルは曲がっている!?

(マウスの先端部分は、うまくがたつきがない角度の斜め線で構成できる。しかし、柄の部分は本来は中心線と同じ22.5度にしなければならないが、利用できない角度なので、26.57度を使っている)

【関連記事】「『UI/UXの処方箋』第1回--ミニマリズムがUI/UXの基本、ガラパゴスになりつつある日本式「賑やかなUI」」

【関連記事】「『UI/UXの処方箋』第2回--Macのエンジニアがユーザーテストを徹底する理由」

原稿:牧野武文(まきの・たけふみ)

テクノロジーと生活の関係を考えるITジャーナリスト。著書に「Macの知恵の実」「ゼロからわかるインドの数学」「Googleの正体」「論語なう」「街角スローガンから見た中国人民の常識」「レトロハッカーズ」「横井軍平伝」など。

この記事はどうでしたか?

おすすめの記事

エンジニア向け求人特集

BACK TO TOP ∧

FOLLOW