フラットデザイン現地時間の2013年6月10日にいよいよAppleのイベントWWDC2013が開催されます。AppBank様々な新製品の発表が噂される中、やはり注目を集めているのがiPhoneやiPad向けのOSであるiOS7です。このiOS7なのですが、一説には今流行りのフラットデザインが採用されるのではないか、と言われており、その片鱗がWWDCの公式アプリに現れていると言われています。LINK個人的にもこの時期にAppleから公開されたアプリですから、iOS7につながる要素が入っているのは間違いないと感じています。するとどのようになるのか、デザイナーの1人として気になるということで色々と見ていくうちに、ある2枚のスクショを並べるとiOS7のヒントがありそうだと感じました。右側が標準アプリの1つカレンダーでラベル色を選択する画面になります。見てかなり印象が違っています。WWDC公式アプリは全体的に明るく、色鮮やかでiOS6よりもフラットな印象です。Windows8の用に完全にフラットというわけではなく、うっすらとグラデーションが入っていてて、凹凸が優しくなった感じになっています。ここからは職業病的に拡大して見比べて行きたいと思います。質感、テクスチャiOS6までは薄い青みがかった縦ストライプが背景に入っていましたが、これがなくなっています。この背景自体に機能があるわけではないので、この方向性であればカットされるのは順当でしょう。カラー、そして要素の大きさまずパッと目にはいるのが色の鮮やかさです。iOS6まではどちらかというとパステル調の色使いですが、WWDC公式アプリでは原色とはいかないまでも、かなり鮮やかな色になっています。グラデーションの方向が上が暗く、下が明るいというこれまでと逆方向になっています。拡大してみると、円の枠線がほとんど目立たないようになっています。枠線に対するこだわりは他の部分でも見られます。あと細かいですがWWDC公式アプリのほうが若干リストの縦幅が大きく、よりタッチしやすくなっているように感じます。枠線・影へのこだわりまず上端側の比較です。赤い丸のリスト最上部に入ったドロップシャドウですが、iOS6までは明度差のある2本のグレーで表現され厚みを感じる表現ですが、WWDC公式アプリはほぼ差のないグレーで表現されています。青い丸の交点の部分も重なりの表現が無くなっています。公式アプリのほうが若干暗い枠線になり、パッキリとした印象になっています。次にリストの下端です。こちらは背景が明るくなった分、ハイライトの表現が抑えめになっています。なくなったわけではなく、うっすらとは残っているという感じ。最後にステータスバー周りです。わかるのは色の変化です。iOS6までの青みがかった部分が軒並みグレーになっています。グラデーションの明度差が小さくなり、平らな印象になりました。いえ、帯部分とボタンともにうっすらとグラデーションは入っています。Chromeなどは完全に単色になっており、この微妙な違いでも雰囲気が違って見えます。Apple流のフラットデザインとはどういうものかあくまでiOS6上で動いているWWDC公式アプリからの推測にはなるのですが・Win8のように全く別物になるわけではない・フラットに近づくが完全にフラットになるわけではなく、微妙なニュアンスは残る。・色使いは最近のトレンドに合わせたグレートーンとポイントになる鮮やかなカラーの組み合わせ(このカラーパレット流行るんだろうな(笑))・背景のテクスチャなど機能的に不要なものはなくなる。シャドウの表現も控えめに。・枠線は最低限、これまでより強くなりキリッとした印象という感じではないでしょうか?実物っぽいデザインはどうなる?さてこうなるとメモ帳やリマインダー、ゲームセンターのような実物を感じさせるデザイン(スキューモーフィックデザイン)は無くなり、全てこのフラットデザインになるのか、という話が出てきます。私個人としてはこれらはこのままで残るのではないかな、と感じています。いうのもカットされた縦ストライプの背景はそれ自体に機能はありませんでしたが、これらのアプリで使われている質感表現は、そのアプリ自体の機能をビジュアルで感じさせるという機能があるからですね。このあたり、Win8は一気にやりすぎてしまった感があったかな、と。ゆるやかに、だけど変化はおとずれるすでに世界中で愛されているiOSですから、いきなりギャンブルのように全てをかえてくるということはないでしょう。登場から時間がたち、デザイントレンドもフラットな方向へ変化しているのは確かなので、それに合わせた微調整をしてくるという感じではないでしょうか?ともかく、本当にiOS7の発表はあるのかも含め、WWDCが開催されてみないとわからないのが憎いところ。なるのか今から楽しみですね!フラットデザインについてはこんなエントリもあります。▼デザインに必要な足し算と引き算。レバ(デザイン+イラスト+ガジェット)×ヒラメキ=ワシヅカミクリエイターのタムカイでした。5c」の正しい表記はスペースを挟んでsとcは小文字。ラクガキノート術」が発売されます!そして是非お願いが!Kindle版の「ラクガキノート集」のvol.2が出ました!参考資料として合わせてどうぞ!最新エントリ››エントリ一覧はこちらタムラカイ(タムカイ)@tamkaiラクガキコーチ・デザイナー・ブロガー。芸術系の両親の元に生まれ、幼い頃から「表現すること」に触れて育つ。大学卒業後インハウスデザイナーとして企業に勤める傍ら、人生の楽しみ方をデザインするブログ「タムカイズム」を運営、家庭では二児の父親。ガジェット、美味しいものとお酒、そしてラクガキがたまらなく好き。詳しいプロフィール人生の楽しみ方をデザインするプロジェクトのひとつとして「ハッピーラクガキライフ」というラクガキから始めるイラスト・発想法の講座を開催しています。→Webサイトを見る「絵を描く楽しさを伝えたい」という思いから、ハッピーラクガキライフというイベントを開催してみました。Twitterで更新情報や思いつきをつぶやいています。Wordpress.。