ここぽんのーと

コードとデザインの境界に生きるエンジニアの、雑多な記録帳。

Appleがつくる、ホーム画面とアイコンの世界。 (1)

2012/11/24, cocopon

iPhoneのホーム画面。
そこに並ぶアプリのアイコンたち。

それだけといえば、それだけ。

でも、目を凝らしてじっと見つめると、見えてくる世界があります。

「アイコンがそこにある」ということ

真っ白な壁紙を設定してみます。

アイコンの後ろに影が落ちていますね。
つまり、アイコンは光を遮り、確かに「そこにあるもの」なのです。
こんな感じ。

影はかなり薄くてぼやっとしているので、壁紙とは一定の距離があるはず。
(別の影も重なっていますが、今回は省略します…;)
Dockの上面を見ると、アイコンの置かれた位置がわかりますね。

今度は一番手前に注目してみましょう。

Dockの側面は画面の幅ぴったりに見えるので、ホーム画面の奥行きは、おそらくDockの奥行きと同じくらい。
こんな感じでしょうか。

アイコンの光と影

もう一度、影を見てみましょう。

影は下の方に落ちていますね。

背景を暗くして、光の反射を見てみます。
純正のアイコン、例えば App Store を見てみると…

上端が白色に、キラッと強く反射しています。

つまり、白色の光が、画面の上方向から入ってくるのです。

当たり前だけど、大事なこと

ここまで書いてきたことは、見ればわかる当たり前のこと。
「そんなこと知ってるよ」と思う方も多いはず。

でも、そんな当たり前のことが、アイコンをデザインするときにとっても大事なのです。

次回に続きます。