来るフラットデザイン時代!フラットアイコン作成に役立つページまとめ。

2013年06月14日 |
Pocket

ios7では全体を通してフラットデザインを、
採用することが発表されました。

ios7は今年の秋から導入されます、
iphone4以降のデバイスには対応していますので、
数か月後には、大部分のユーザーがios7に移行するのではないでしょうか。

特にアプリ開発者にとっては、
アプリのDLに直結する、
Appstore上でのアイコンの重要性というのは非常に大きく、
アイコンについてもデザインを考慮してく必要がでてくるかもしれません。

ios7のAppstoreデザイン
オフィシャルサイトによると以下のデザインになるそうです。

Apple - iOS 7 - Design

本記事では、
フラットデザイン・フラットアイコン関連の、
役に立ちそうな情報をまとめたいと思います。

Apple公式のフラットデザイン移行ガイド

iOS 7のフラットデザインでアプリを開発するための移行ガイドをAppleが発行
iOS 7のフラットデザインでアプリを開発するための移行ガイドをAppleが発行 - TechCrunch

やはりまずはAppleがオフィシャルで公開している、
移行ガイドには目を通しておく必要があると思います。

フラットデザインを採用したことによる、
Appleのメッセージは「よりアプリの本質に注力しよう」ということのようで、

「物理的なリアリズム(グラデーション、ドロップシャドウ等)を廃すること」

「アプリは明快さを優先しホワイトスペースを多くする、
色はUIを単純化するためにのみ使うこと」

などと言及しています。

5分で分かるフラットデザイン

5分で分かるフラットデザイン
5分で分かる製作現場(8):5分で分かるフラットデザイン  1 5  - @IT

フラットデザインとは何なのか、
ということを丁寧に説明した記事です。

なかなか、言葉だと説明しにくいですが、
画像でみるとイメージがわきやすいですね。

・グラデーションを使わない
・影を付けない
・背景画像を使う

などポイントに絞っての解説もされています。

フラットアプリアイコンの実例

今すぐ真似したい! フラットデザインのiOSアプリアイコン32個まとめ
flaticonmatome

デザイン的に優れているフラットアイコンアプリの実例が32個紹介されています。
海外系のアプリが多いですが、シンプルで単色、
まさしくフラットアイコンという感じのものが多いです、

デザインイメージがわかないときに眺めると、
アイディアが浮かんできやすいかもしれません。

フラットデザイン入門

フラットデザイン入門: その利点と注意点と主なテクニック
フラットデザイン入門  その利点と注意点と主なテクニック   freshtrax   btrax スタッフブログ

フラットデザインについての端的な説明に加えて、
かっこいいフラットデザインを実現するポイント、
採用する場合の注意点などを解説しているページです。

クリエイティブエージェンシーのブログだけあり、
専門家としての意見をわかりやすく、まとめてくれています。

“アプリの目的やデザインにもよるので、
ただかっこ良いという理由だけで無理してフラットデザインを採用しない事”
とはっきりと言っている点も印象的です。

iOS 7とiOS 6のアイコン比較

【iOS 7】「iOS 6」とアイコンを比較した画像 → 並べると変化が分かりやすい!
[N  【iOS 7】「iOS 6」とアイコンを比較した画像 → 並べると変化が分かりやすい!

ios6とios7のデフォルト機能のアイコンを比較しています。
並べてみてみると変化がわかりやすいです。

しかし、記事でも述べられている通り、ios6アイコンのほうが、
直感的に機能を示しているアイコンも多数あるように感じます。

フラットデザインで発生する問題点

iOS7に見る“フラットデザイン”の難しさ
iOS7に見る“フラットデザイン”の難しさ

windowz8とio7はモダンなデザインに向かうことで、
アプリ開発者が、無駄な装飾にかけるコストを削減し、
より本質的な機能をもったUIを目指していることを述べながらも、

・どこがボタンなのか、ユーザーが直感的にわかりにくくなる
・フラットデザインはごまかしがきかない分、デザイン力が求められる

などのフラットデザインの採用で起こり得る問題や混乱を、
提唱した内容になっています。

フラットなアイコン素材まとめ

フリーでフラットなアイコン素材がダウンロードできるサイトのまとめ
フリーでフラットなアイコン素材がダウンロードできるサイトのまとめ|Webpark

フラットアイコン素材がDLできるサイトのまとめページです、
海外のサイトが中心になっています、

フラットデザインのアプリを作る時の、
プロトタイプやモックアップを作成する時に重宝しそうです。

フラットデザインの今後のトレンド

フラットデザインをより魅力的にする、新スタイルトレンド5個まとめ
フラットデザインをより魅力的にする、新スタイルトレンド5個まとめPhotoshopVIP

フラットデザインが主流になった後は、どのようなデザイントレンドになるのか?
ロングシャドウ、グラデーション、ドロップシャドウ、ベベル加工、3Dフラットデザインなど、
画像を添えて、派生するデザイントレンドを解説したページ。

「フラットデザインをベースにしてこういう風になっていくのだな」と、
今後のデザイントレンドをなんとなく感じることができる良記事です。

フラットデザインがなぜ誕生したか。

フラットデザイン誕生の理由 ~今後のデザインプロセスについて2013~

なぜ今フラットデザインの流れになっているのかが、
わかりやすく書かれています。

フラットデザインを実装する時の色やデザインについても、
翻訳情報がメインのようですが、綺麗にまとめられていて、
現実的なデザイン時にも非常に役立つページです。

iOS7用のアイコンテンプレート

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

ios7用のテンプレート素材が公開されています、
データはPSD形式です。

フラットデザインになると、
クリエイティブ自体はシンプル化しますが、

アイコンを作るのが苦手なアプリ開発者は、
このようなテンプレを活用すると良いかもしれません。

別にアプリアイコンが、
必ずしもフラットである必要はないとは思います。

iOS7用のアイコンテンプレート

iOS7用のアイコンテンプレ(ピクセル最適化済)
iOS7用のアイコンテンプレ(ピクセル最適化済)   fladdict

こちらは日本のサイトです。
iOS7用アイコンのイラストレーターテンプレートデータが公開されています。
実機表示にあわせてpxを調整してくれている。

これから細かい部分も調整して、
アップデートも検討しているそうです。
それにしても仕事が早いですね。

ios7デザインを再現したPhotoshopデータが登場

iOS 7完全再現、Photoshop無料UIコンプリートセット
iOS 7完全再現、Photoshop無料UIコンプリートセットPhotoshopVIP

iOS7を、完全再現したPhotoshop用データが登場しました、
各種アイコン、ボタン、ホームスクリーン画面など十分すぎるほどカバーされていて、
再現クオリティも高く、io7用のモックアップをつくりたい場合など重宝しそうです。

Free iOS 7 UI Kit   MediaLoot

素材の利用に関しては、個人、商用ともに可能とのこと。
ios7発表から素材公開までのスピード感と、
クオリティからも有料で販売できるレベルですね、世界は広いです。
ぜひios7関連で活用してみてください。

フラットデザインが進化してロングシャドーに?

ロングシャドーってどうやって作るの?そんな時に役立つジェネレーターまとめ - W3Q - Web制作者のお悩み解決サイト

海外でも人気を集めているフラットデザインですが、
その次にロングシャドーデザインに流れがくるとも言われています。

意外に作成することが難しいロングシャドーデザインを、
簡単に作ることができるジェネレーターをまとめたページです。

フラットアイコンフリー素材ページ

本命フラットデザイン、素敵フリーアイコン素材まとめ

フラットアイコンの進化形、美しいソリッドなラインを使ったアイコン素材 -Tab Bar Icons iOS 7

トレンドを押さえた、最新フラットデザイン系フリーアイコン素材まとめ

今流行のフラットデザインに一工夫!ロングシャドウ作成ツールまとめ

Pocket

アプリマーケティング研究所編集部 アプリのマーケティングメディアです。有料マガジン「月刊アプリマーケティング」もスタートしました。【配信提携】LINEニュース【過去連載】週アスPLUS、マックピープル。アプリの取材申請はコチラのページから。
スポンサーリンク
広告掲載
btn_fb btn_tw btn_rss

Latest stories

Related stories