notソフトウェアbutプロダクト。iOS7の角丸から見えたAppleのUIデザイン変化

iOS7が発表され、Appleのデザインを統括するジョナサンアイブがUIまで関わったことが今回話題となっています。 特にフラットデザインの採用とアイコンのビジュアルが物議を醸していますが、それはさておき、小さいながら重大な違いが。 アイコンの角丸。じっくり見る必要があります。

角丸が滑らかに。・・？

今回、ホーム画面のアイコンにはグリッドデザインが採用されたということで早くもテンプレートを提供する方まであらわれています。

早くも登場！iOS7用のアイコンのテンプレート素材 -Template for iOS 7 App Icons - coliss

この記事の最後、注意して読むと・・

"新しい角丸は滑らかに"

つまり、単純な円の弧を使ったアールではなくなっています。こちら、プロダクトデザインの業界では通例となっている、アプローチRという技術が、新たに採用されています。

アプローチRとは・・・より自然なカーブを描く手法

アプローチRについては、下記のページが詳しいです。

3Dデジタルツールと立体造形 第7回：複合カーブのコントロール　その2 - pdweb.jp

見ての通り、これ、もとはプロダクトデザイナー向けの技法です。単純な角R(角丸)だとモデルのシルエットが曲線から直線に切り替わる点で激しく変化してしまうのを、自然なラインで処理するために使用されます。iPhoneなどのApple製品もこの曲線で描かれています。 ホームボタンのアイコンも、物体としてより自然な存在として処理するために、このようなディテールが加えられたということですね。

ちなみにアプローチRの描き方は、クロソイド曲線という数学がベースになっています。高速道路のジャンクションなどにも採用されていて、カーブの末端で極端な力がかからない効果があります。

クロソイド曲線 - T's Page http://www2s.biglobe.ne.jp/~tsu_home/road/my_road2.htm

ソフトウェアデザインに取り込まれはじめたプロダクトデザイン的発想

今回のデザイン刷新は、仮想空間的なモチーフから、現実のプロダクトと画面をシームレスにつなぐ表現に変化したことが興味深い点だと私は考えます。 プロダクトデザインの一部として、ソフトウェアデザインも一体化をする実験をジョナサンアイブは行っているのではないか？その片鱗が細部からも発見できることは、その意気込みが本物であることを感じます。

アプローチRの描き方、研究しませんか？

以上、新しく採用されたアプローチRですが、実際描くとなると、悩ましいです。PhotoshopやIllustratorで、これを手軽に描く方法はあるんでしょうか？ ぜひ、今回気がついた皆さんといっしょに考えたいです・・ アイディア、お待ちしてます。

ファーイーストガジェット masarutakeでした。
Mac用「Ps / Ai ショートカットステッカー」好評販売中‥