2012年8月15日水曜日

Staccalのアイコンが出来るまで


先週ようやくリリースに漕ぎ着けた拙作、Staccalですが
なんとこの度、iOSアプリのアイコンの殿堂、iOS icon galleryに選ばれました!




その、掲載されているアイコン達のレベルの高さに、いつか自分が製作した
アイコンを載せたい。と長い間夢見ていたiOS icon galleryですが
なんとも幸運な事に、リリースから間もなく掲載してもらう事が出来ました。


そこで、Staccalのアイコンがどの様に生まれたのか、その思考過程
(という程のものではありませんが)をご紹介したいと思います。

第一段階
こちらがStaccalのメインの画面デザインですが、ご覧の通り

・木目のテクスチャの背景
・紙のテクスチャのカレンダー

の2つが、アプリのUIの重要なデザインの要素となっています。




このコンセプトは開発の早い段階から決まっていた為
アイコンのデザインの検討を開始した当初には、この2要素を
アイコンに用いる事は、決定事項でした。

そこでまず出来上がった第一弾が、このデザインです。




木目のテクスチャを「土台」として、その上に数枚の紙を
重ねる事で、2要素をアイコンに採り入れました。

加えて、より紙らしさ表現しようと、紙の右下に折り目を入れています。

アイコン上部の金属感のあるリングは、カレンダーのメタファーとして
多くのカレンダーアプリのアイコンに採り入れられています。
この時、紙の中の要素がノーアイディアだった為、とりあえず
リングを付けておきました。
第二段階
次に作成したのが、このアイコンです。




第一段階を異なるのは「台」となっている木目部分に立体感を
つけた点です。

これは個人的に、この頃Wunderlistのアイコンデザインが
非常に気に入っており、真似してみました。
カレンダーを表す要素
ここでカレンダーを表現する要素について触れておきます。

アプリのアイコンはiPhoneのデバイス上では114✕114pxで
表示される為、アートワークよりも非常に小さい状態で表示されます。

その為、出来るだけ少ない要素でシンプルに、アプリの内容を
表現する事が定石です。

それでは、どの様な要素を含むと「カレンダーアプリ」っぽさを
表現する事が出来るのか、考察してみたいと思います。

私が思いつく限りで、大体以下の5つになります。


1. カレンダーが書いてある
 月のカレンダーがそのまま書いてあるデザインです。
 アイコンに含まれる要素は多くなってしまいますが
 全体としてカレンダーである事が、直感的に理解
 しやすいデザインです。

2. グリッドタイプ
 こちらは数字の代わりに罫線でグリッドを表している
 パターンです。単体ではカレンダーと認識しにくいですが
 他の要素と組み合わせる事でカレンダーらしくなります。

3. 数字が1つ書いてある
 標準のカレンダーアプリや、Googleカレンダーが
 このタイプのアイコンを採用しています。

4. 上部に穴が開いている
 Googleカレンダーのアイコンが採用していますが
 上部に穴が2つ空いているデザインで、他の要素と
 組み合わせる事で、カレンダーを想起しやすくなります。

5. 紙がリングに付いている
 4の穴に似ていますが、もっと具体的に紙が下の台に
 リングを介して据え付けられているデザインを表しています。


現在AppStoreにあるカレンダーアプリは、大体がこの何れか
または、何れかの組み合わせによって構成されています。

中には、この何れの要素も含まないアイコンもありますが
カレンダーアプリとして直観的に認識されるには、難しさがあります。



こちらはiOSの標準カレンダーアプリのアイコンですが
・白背景
・上部の赤いリボン
・曜日
・日付
の4要素で、とてもシンプルに出来ているアイコンです。



このアイコンの日付の数字は、カレンダーを強く想起させる
メタファになっています。

しかし、このCalendarアプリのアイコンは、当日の日付を
表示するという、他のアプリには出来ない裏ワザを行なっています。
つまり、デザインの要素である日付が、機能にもなっています。

普通のアプリが日付を表す固定の数字を、アイコンにでかでかと
表示した場合、ユーザーはその数字に意味を求める可能性があります。
その場合、解釈に苦しみ混乱する場合があるでしょう。
第三段階
「紙」の部分に含める要素を悶々と考えていましたが、なかなか
これというアイディアが出てきませんでした。

シンプルでユニークな要素を採り入れたいのですが、その一方
上に並べた5タイプから離れる程に、カレンダーと認識されにくく
なってしまいます。

悩んでても出てこないものは出てこないので、とりあえず次の段階
では、アタリで月のカレンダーを入れてみる事にしました。


ここでは、紙のデザインに注視する為に、第二段階にあった
金属のリングと、台の立体感を一時省きました。

この段階の時期に、アプリで「フリップ」してカレンダーが
めくれるアニメーションを採用していた為、これをアプリを
表す大きな特徴として、紙の中央が折れ曲がっているデザイン
をアイコンに採り入れました。

フリップのアニメーションについては、動画をご覧下さい。

第四段階
前段階で紙部分を折り曲げた事がきっかけとなって、ここから
一気にアイコンが完成へと向かっていきました。


Staccalのアプリとしての特徴を更に見直して、カレンダーの
レイアウトの豊富さ、という要素をアイコンに採り入れる事にしました。




カレンダーがフリップでめくれる事により、カレンダーのレイアウト
が切り替わる、という仕組みを採用している為、これを現実世界に
置き換えると、数枚のカレンダーが積み重なっている姿がイメージ
出来ます。

これをアイコンで表現しようと、一番上のカレンダーの右下隅を
少しめくれた状態にして、下に異なるレイアウトのカレンダーが
覗いている状態を表現しました。
第五段階
第四段階のカレンダーのめくれ方を、更にわかりやすく表現しようと
左側を少し浮かせてみました。

自分としては、この段階での出来映えにかなり手応えを感じました。


第六段階
更にカレンダーが重なっている事を表現しようと、2枚目も
めくって、3枚目が少し見える状態にしました。


一見、良さそうにも見えましたが、114pxのアイコンサイズで
確認したところ、右下がかなりゴチャゴチャした印象になったので
この案は却下しました。
アイコン完成
最終的に、当初案にあった金属のリングを元に戻して完成です。



アイコンは検討をはじめてから、実に3ヶ月くらいの期間に
渡って悩み続けていました。

デザインが決定するきっかけとなったのは
・フリップでカレンダーがめくれる
・カレンダーが何種類も重なっている
という2点をアプリの特徴と位置づけた事で、アプリの
キャラクターが徐々に具体的になり、これをシンボル化する事で
アイコンのデザインが完成しました。

紙の中身の要素については、結局アタリで入れた月のカレンダーを
そのまま採用しました。要素が多くなるため、シンプルさは損なわれ
てしまうものの、アイコン全体の姿としては、カレンダーらしさを
十分表現出来ていると感じています。

個人的には、アプリのキャラクターを良く表したアイコンになった
のではないかと満足しています。


ちなみにアプリ名のStaccalですが、これは
  Stack : 重なる
    +
  Calendar : カレンダー
    ↓
  StacCal
    ↓
  Staccal

という具合に、出来上がりました。