Mac OS のクローズボタンはなぜ左配置なのか

https://en.wikipedia.org/wiki/Mac_OS

Mac OS の左と右考察シリーズ。今度のお題はウインドウのクローズボタン。閉じるボタンとも言う。昔は四角かったからクローズボックスとも言われた。Windows では右配置になっているクローズボタンだが、Mac OS を前提になぜ左配置なのかを考察したい。

ウインドウは左上からはじまり、右下に終わる

情報の流れの原則に従うと、ウインドウの起点は左上、終点は右下になる。右下には(かつての Mac OS では)サイズボックスと呼ばれるウインドウを拡大縮小するための箱が設置されており、それ=終点をドラッグすることで起点を固定したままウインドウの大きさを変えられた。ウインドウに収められるコンテンツも左上起点に描画されるので矛盾がない。

System 7
Mac OS 9
OS X 10.11 El Capitan
System 6
Mac OS 9
Mac OS X 10.2 Jaguar
OS X 10.11 El Capitan

今時の Mac OS ではウインドウの端であればどこを掴んでも拡大縮小できるようになっているのでサイズボックスは省かれた。掴んだ辺の位置によっては拡大縮小処理の起点が右上や左下になることもあるが、本質的なウインドウの起点は左上と見てよい。

ウインドウは左上から右下に向かって拡張する。逆に言えば右下から左上に向かって収束するということだ。だからその収束点にクローズボタンがあるのが自然だ。一番分かりやすい例が Dashboard ウィジェットの閉じる際のアニメーション。左上のクローズボタンを押すとウィジェット自体がそこに向かって吸い込まれる。

Finder の「新規ウインドウ」は左上から右下に向かって表示される
Dashboard Widget

Windows は Mac を反転させただけなんじゃないか説

Windows — アイコンとタスクバー
Windows – ウインドウ
マウスカーソル — Mac(左)、Windows(右)

ではなぜ Windows はクローズボタンを右側に配置したのかという疑問だが、実際のところはよく分からない。全く裏付けのない憶測だが、Windows が最初に Mac OS を真似たときに差別化を図るためにあえて配置を逆にしたのではないかと考えている。Windows には全体的にそのような反転した UI デザインが多く見られる。デスクトップアイコンの配置(左)、メニューバー(上)に対するタスクバー(下)、ボタン配置(肯定が左)、カーソルの色(白)、そしてウインドウのクローズボタン(右)。すべてを Mac の逆にしたはいいけれども、情報の流れる方向は変えられないので、結局矛盾が生じているように見える。その一つが右上クローズボタンだ。使えないわけではないが、テキストの正方向は右なのに次第に否定的なクローズボタンに近づいてゆくのが今ひとつ納得できない。


タブはウインドウの一種だからクローズボタンは左側にあるべきだ

Mac に話を戻してここでブラウザなどのタブを考えたとき、やはり左側にクローズボタンがあるのが自然になる。このタブというのは言い換えると複数の書類=ウインドウをひとつのウインドウに重ねまとめた状態、であればウインドウと同じく左側にクローズボタンを配置しないと一貫性が保てない。書類を閉じるアクション=左側 というルールは守られるべきである。Safari ではこれが正しく実装されているが、Chrome は残念ながら Mac 版であっても無視してしまっている。

Safari
Chrome
Safari — 掴むとタブはウインドウそのものであることがわかる

Web サイトのクローズボタンはどちらにあるべきか

閉じるためのボタンが右上にある例
Apple は Web でも左上

Web でもできれば、ユーザーの利用している OS で判断してクローズボタンの左右を最適化する実装があると良い。残念ながら大半のサイトのモーダル的画面では Windows にならって右側固定のクローズボタンが実装されている。これは Mac ユーザーや iOS ユーザーにとっては違和感のある体験だ。こういう1pxに匹敵する些細なインタラクション “little big details” に気を配ったデザインができれば、そのプロダクト全体の UX を良くすることにつながると思う。

Show your support

Clapping shows how much you appreciated usagimaru’s story.