ちょっと長いけど、二人のやり取りがおもしろいので引用する。引用中、Steve はもちろん Steve Jobs、Bill は QuickDraw や HyperCard を書いたことで知られる Bill Atkinson だ。ちなみに、この記事(原文)を書いたのは Andy Hertzfeld (オリジナル Macintosh の開発者の一人で、Folklore.org の製作者)。
(レボリューション・イン・ザ・バレー; p.60「角丸長方形だらけ！」より)
しかし、ここで何かが Steve Jobs の頭に浮かんだ。 「まあ、円と楕円はよくできてたな。でも角の丸い長方形はどうだ？ それも今できるのか？」。「いや、そんなことはできませんよ」と Bill は食ってかかった。 [...snip...]
「角の丸い長方形なんて、そこら中にあるだろ！ この部屋を見回してみろ！」。確かに、たくさんあった。 [...snip...]
[...snip...] 「OK。参りました」と Bill は認めた。 「思っているほど難しいかどうか、やってみますよ」。 [...snip...]
翌日の午後、Bill は満面の笑みを浮かべて Texaco Towers に戻ってきた。 彼のデモは、見事に角の丸い長方形を、ほとんど普通の長方形と変わりない、猛烈な速さで描くようになった。 彼はその新しい命令を [...snip...]「RoundRects」と名付けた。 次の 2、3 ヶ月の間に、RoundRects はユーザーインターフェースのさまざまな部分に浸透し、まもなく必要不可欠なものとなった。
正直言って、技術者ではない Jobs が Macintosh (初代) の開発に直接的に貢献したとは思えないんだけど、こういう話を聞くと、なるほど Jobs がいなかったら Mac はこうなっていなかったんだな、とわかる。この「角の丸い長方形」の話なんて、Mac どころかその後の GUI の発展にも影響しかねないものだ。もし、あのとき Jobs の頭に「角の丸い長方形」が浮かばなかったら……、もし、Bill が Jobs との議論に勝っていたら……。
ウェブページでも角を丸く
角の丸い長方形は、今も初代 Macintosh の子孫たちに受け継がれている。Mac OS X のウィンドウたちは、たいてい四隅が(少なくとも上部の二つの隅は)丸い。iPhone のアプリアイコンも角が丸い。標準のボタンやリストもやはり角が丸い。改めて見回せば、丸い角はデジタルなモノの中にあふれている。まるで、角の丸いことがデジタルなモノの特性であるかのようだ。デジタルな道具に遺伝子があるなら、そこには「角は丸い」と書かれているにちがいない。
ならば、ウェブページでも角は丸くあるべきだろう。かつてのように、背景画像と table 要素を組み合わせて作らなければならなかった時代ならともかく、今では CSS3 だけで簡単に記述できる。もう、角を丸くしない理由がないじゃないか。Mac の伝統なんだよ。デジタルな遺伝子に書き込まれているんだよ。
実際に「丸く」してみればわかるが、やりすぎるとかえって見にくくなる。どこを丸くして、どこを四角く残すのかの「さじ加減」がムズカしい。
これは以前の記事で使った iPhone 上の Safari のスクショだが、日付部分の上部の枠線の角が丸くなっていることがわかるだろう。これは以下の記述によるものだ。
(角丸指定)
h2 {
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
ただし、iPad の Safari (iPhone OS 3.2.2) だと、この記述は効果がない。Safari のバージョンが iPhone や Mac と比べると少し古いようだ(2010-08-26 時点)。iPad の場合は以下のようにプロパティ名の前に -webkit- を付ければ良い。
(iPad 向け角丸指定)
h2 {
/* Safari on iPad is older than iPhone or Mac. */
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
}
デスクトップ用ブラウザにおける角丸指定に関しては、このまとめページが参考になる。→ 角丸 (Rubellum fly light)
目の前にあるモノの理由
「いまある道具はなぜこの形をしているのか？」という問いには必ず答え(理由)がある。そしてその多くは、ことに初期の判断のほとんどは、特定の個人に起因するものなのだ。道具の歴史が長くなると、無名の多数による合意や貢献だけでできたと思いがちになるけど。
そして、個人の判断によるものならば、必ず偏りがふくまれている。目の前にあるモノがただ一つの正解ではない。きっとそこには改良の余地がある。時折、歴史に対して「なぜこうなっているのか？」と問い掛けることは、発想の源泉になる。
ま、時の流れに打ち勝ち生き残ってきたモノを変えるのは難しい、と気付くだけかもしれないが。
「角の丸い長方形」がデジタルなモノの遺伝子に組み込まれたのは、それがすでに身の回りにあふれていたからだ(それは案外、安全性に起因する特性なのかもしれない)。Jobs が(ときどき)偉大なのは、当たり前すぎて皆が気付かないことに気付く(そして固執する)ところなのかもな。
関連リンク
- Round Rects Are Everywhere! (Folklore.org)
- CSS: border-radius and -moz-border-radius (The Art of Web; 角の丸い枠線の指定方法)
- 角丸 (Rubellum fly light; 角丸の指定方法まとめ)
0 件のコメント:
コメントを投稿