参考資料

Appleのアイコンがあの形をしているのには理由がある

Appleのアイコンの角丸について書かれた興味深い記事を見かけたのでメモしておきます。

iOSホームに配置されたアイコンのプロダクトテンプレートを見るとわかりますが、Illustratorの角丸ツールでは作れないカーブになっています。Illustratorで簡単に作る方法はないのかなぁ。SketchやPixelmeterにはスムースコーナー機能があるらしい。クロソイド曲線が近いとい話を見かけたのでスクリプトを試しましたが、テンプレートのパスと比較すると完全に一致しませんでした。

https://hackernoon.com/apples-icons-have-that-shape-for-a-very-good-reason-720d4e7c8a14

 

Appleのアイコンがあの形をしているのには理由がある

iOSのインターフェイスデザインにどっぷり浸かったことのない人なら、Appleのアイコンを見て、ただの角丸四角形か「roundrect」だと思うかもしれない。アイコンをデザインしたことがある人なら、アイコンは違うものだと知っているだろうし、スクイークル(正方形と円の数学的中間)という言葉を聞いたことがあるかもしれない。また、インダストリアル・デザイナーであれば、これがハードウェア製品のコアな特徴であると認識しているはずだ。

iOS 7以降、アプリのアイコンは丸みを帯びた四角形から、より複雑で洗練されたものになった。Appleが細かなディテールにまで気を配っていることは誰もが知っているが、この一見小さな変更の背後にある明白な論理を誰もが理解しているわけではない。Appleが使用しているAutodeskのサーフェシング・ソフトウェアAlias Studioで曲線の微調整に時間を費やしたことがある人なら、その理由はすぐに理解できるだろう。答えは一貫性だ。Appleはハードウェアとソフトウェアの間にデザインの一貫性を作り出している。

 

Appleのアイコンが角丸長方形でないのは、ハードウェア製品が角丸長方形でないからだ。

Apple製品はミニマリスティックと表現されるが、「ミニマリスティック」を「シンプル」と混同してはならない。ハードウェア製品の表面加工には、シンプルなものなど何もない。インダストリアル・デザイナーの友人に指摘されない限り、平均的なApple製品のオーナーが意識することはないだろう。

Appleの物理的な製品の「秘密」は、接線(半径が一点で直線に接する部分)を避け、曲率の連続性と呼ばれるもので表面を作ることだ。製品の曲率連続性の見分け方を知れば、身の回りのあちこちで曲率連続性(あるいはその欠如)を目にするようになるだろう。

 

良いサーフェシングのためのスポッターズ・ガイド。

ここに、ラウンドエッジを持つ基本的な長方形の箱である2つの製品がある(左の製品は、不愉快な下書き壁もあるが、それはハードウェア・デザイン通になる方法についての別の記事である)。主面の丸みを帯びたエッジの始まりと終わりを見てください。ハイライトが鋭く変化しているのがわかりますか?これが接線の結果だ。

 

Appleと比較してみよう。

右のMacBook Proも、2つの直角な面が丸みを帯びた曲面で結ばれた製品だ。ハイライトがいかにソフトかわかるだろうか。これは表面の仕上げがマットだからというわけではない(そう、それは役に立つ)。今、「丸みを帯びた 」と言ったが、もちろん丸みはない。曲率が連続的に変化する、美しく、甘く、セクシーな表面で、Apple製品が私を好きにさせる理由のひとつだ。

 

なぜ違うのか?

下の曲率の櫛(曲率を視覚化する方法)の画像を見てください。櫛の各線は、曲線上のある点における曲率の大きさを表している。左側では、曲率はゼロから半径の値まで瞬時に変化する。曲率の急激な変化=急激なハイライト。

 

Appleはこの特許を持っていない。どの企業でも、サーフェスをこの程度の品質にすることはできる。では、なぜそうしないのか?昔はもっと言い訳ができた。かつては、エンジニアリングCADツールはこの種のことにあまり関心がなかった。あるいは、エンジニアがCADツールのそのモジュールに精通していなかったかもしれない。あるいは、サーフェスデザインツールとエンジニアリングツールは相性が悪かった。あるいは、収益に対する重要性が認識されていなかった。

多くのインダストリアル・デザイナーが、Apple以外の製品にもこのレベルの技術を適用しています。そしてその多くは、デザインする企業のリソースやコミットメントによって制限されている(つまり、必ずしもデザイナーの責任ではない)。

もっと深く、本当にテクニカルなサーフェシングの話を読んで、曲率の連続性には実際には2つのレベルがあることを知りたい方は、AutodeskのAliasツール(曲率の連続サーフェシングが可能な数あるツールのひとつ)に関するこのチュートリアルをご覧ください。

最後に、Apple社への賞賛と感謝の言葉で締めくくらなければならない。特に、すべてのデザイナーが実装を夢見るような細部へのこだわりに、ドルという力と卓越した製造へのコミットメントを注いだCレベル(スティーブ・ジョブズ)に対して。そして今、アイコンの小さな変更のおかげで、これらすべてがより内部のソフトウェアとつながっている。ありがとう。

コメントを残す