6月11日(日本時間)に開幕したWWDC2013!
来ました!iOS7!!
インターフェースの一新ぶりは正に新しい時代の幕開け。

写真引用:GIZMODE

アップルが発表したiOS7は既にネット上で多いに話題となっていますね!
今回、アイコンに特化して変化を言うのであれば、やや「フラットデザイン」の採用です。
以前のiOS6と見比べても違いは明らか!


  • こっちがiOS6

  • こっちがiOS7

シンプルにデフォルメされたアイコン、強い奥行き感を技巧的に作らないややフラットなデザイン、これらが特徴になりました。
アプリ開発者の皆様は、これに乗っかってややフラットデザインで一緒に今年を乗り切りましょう!

フラットデザインを学ぼう!

フラットデザインの特徴は、誰でもデザインできる点。
ポイントは、緩いグラデーションとデフォルメしたシェイプ、そして整列です。
早速やってみましょう!

緩いグラデーションに徹する!

こんな感じの、ちょっとぼやっとするくらいのグラデーションに留めましょう。

こういう強いグラデーションはNGです。これにさらにグロスやらを入れだしたら完全OUT!
ディテールは最小限まで抑えましょう。

デフォルメしたシェイプを配置しよう!

illustratorやphotoshopのパスで極力までデフォルメしたシェイプを描きます。
フラットデザインの一番の見せ所は、このピクトグラムと呼ばれるデフォルメしたシェイプをいかに魅力的に描くか! がポイントだと思います。
シェイプにほんの少し、奥行き間を与えてあげます。量としてはこれくらいはどうでしょう?

512pxの正方形のキャンパスで、1pxしかも不透明度20%となれば、かなりわずかな変化ですが、これやるだけでクッと締まります。

シェイプを傾けたりすると、どうも今っぽくなくて、「整列」がポイントのようです。

ざっくりと作るとこんな感じでしょうか。
まだまだ私もオシャレなフラットアイコン作れてませんね汗。
ポイントはカラフルに、パステルカラーを使って。誰でも作れるのがフラットデザインなので、是非皆様、今年のキーデザイン「フラットデザイン」をマスターして、今年のアイコンデザインを乗り切りましょう!!

追記

私、急ピッチでこの記事を書きましたが、違和感がありありです。
果たして、今回のiOS7で採用されたアイコンをフラットデザインと呼んでいいのか?
それはGIZMODEさんでも取り上げられておりました→[ #WWDC2013 ]iOS 7、フラットデザインというより「奥行き」のデザインである
さらに、私が急ピッチでデザインしたアイコンも全然良くない・・・。
もっと研究して書きます!すいません。

この記事を読んだ方はこんな記事も読んでます!

【iPhoneアプリ】アイコンのデザイン方法を思い切って晒してみた!【作成】
・【iPhoneアプリ】アイコンデザインでダウンロード数をのばそう!【作成】
・iPhoneアプリのアイコンサイズと角丸半径一覧【備忘録】
良く聞くけど「UI」って何??そんな疑問にお答えします!