秋葉秀樹の人に伝えるデザイン
第2回 フラットデザインの主役は誰だ？2013年8月28日
TEXT：秋葉秀樹
2013年秋にiOS7がリリースされる予定だが、それによってスマートフォンのUIデザインはフラットデザイン一色に近い状況になってしまいそうだ。
ところでみなさんは、フラットデザインを「平面的でグラデーションではなく単色塗りとなっており、角丸を使っていないデザイン」と解釈していないだろうか？ iOS7（2013年8月28日時点でベータ6）のアイコンはフラットデザインといわれているが、別に角丸やグラデーションがなくなったわけではない。
フラットデザインといわれているiOS7のアイコンに使われている背景は、基本的にグラデーション塗りだ（クリックで拡大）
フラットデザインとは？
フラットデザインは、単純にデザイン手法のひとつとしてとらえるのではなく、コンテンツと寄り添うためのコンセプトという切り口で理解したほうがよいかもしれない。まずは、以下のふたつのインターフェイスを見てほしい。
2003年、MacOS9で動作するDVDプレイヤーのUI（クリックで拡大）
2013年、iOS7で動作する動画プレイヤーのUI（クリックで拡大）
大きな違いはなんだろうか？ 再生ボタンが平面的だろうか？ いや、違う。ひとつだけ大きく感じることは「誰が主役なのか」ということではないだろうか。
2003年のDVDプレイヤーは、主役となるDVD動画よりむしろ「UIを見て！」とアピールしているようにも感じる。しかし、DVDプレーヤーの本来の目的は「UIを主張する」のではなく、「動画を見せる」ことだ。つまり、最低限の機能を損なわないまま主張しない、大事な脇役であるべきなのである。当時はこのテイストが高級感にあふれ、斬新であると感じる人も多かった。
こののちAppleはMac OS Xをリリースすることになり、リッチで美しいUI「アクア」の流れに突き進むことになる。また数年後、Microsoftも従来より美しくなったUI「エアロ」を採用したWindows Vistaを発売した。
このあたりでアイコンのテイストは透過も含められリッチになった半面、コンピュータの動作速度に影響が発生したため批判が高まった。しかしこの批判はコンピュータの処理能力向上により解決し、「UIの美しさ」はひとつのブランドのようなものとして主張され続けてきたようにも感じられる。
このUI自体が主張する流れは、多少なりとも今日のスマートフォンデバイスUIにまで影響を与えることになったのだが、むしろこの流れがあったからこそ人が手のひらサイズのタッチデバイスに慣れ親しめるようになれたのかもしれない。リッチなルックスをもつUIは私たちの体験に貢献してきた、とすら考えられないだろうか。
私はMac OSの前身「漢字Tank 6.0.7」からのMacユーザーだが、Mac OS Xがリリースされたあともしばらくは使いなれていたMac OS 9を使い続けていた。あのツヤツヤしてキラキラしてヌルっと動くエフェクトすべてに慣れず抵抗があったからだが、のちに否応なく移行を迫られることになる。私個人にとって、今の状況はあの時に割と近いものを感じる。
Google関連アプリのボタンのテイストに学ぶ
フラットデザインの課題や問題とされ要素のひとつに「押せるものかどうかわかりにくくなる」というものがある。最近なるほどと思うのが、Googleが提供しているアプリアイコンの下にフラットな塗りの影がついているデザインだ。「フラットかつ立体的」と言葉にすると奇妙な言い方になるが、主張せずとも「押せそう」と思わせるひとつの解決策なのかもしれない。
iOS版Google関連アプリ。最近はほとんど下にフラットな影で統一されたデザインとなっている（クリックで拡大）
さらに最近は、わりと近い手法でボタンをデザインしているWebサイトでも見られるようになった。CSSによるスタイリングもスムーズなので、画像を使わずとも文字の長さを気にせずに汎用的なボタンスタイルが定義できる。
http://onair.adobe-adc.jp/
まだまだ決めつけるには課題がありすぎるフラットデザイン
立体的でリアルなアイコンから平面の一色アイコンにすることで、なんのアイコンなのか余計わかりにくくなる可能性や、コントローラー（UI）なのか情報表示なのかわかりにくくなるという問題・課題は、一概にベストプラクティスは成り立ちにくいように思える。
そこで前述のとおり、影がダメだとかグラデーションがダメだとか角は四角だとか「外観」に重きを置くのではなく、「コンテンツに集中させる主張しないUIデザイン」ということをひとつのコンセプトとしてはどうだろう？ 主役なのか脇役なのかわからないUIデザインより、コンテンツ集中型デザインを目指す、という考え方だ。
そうなると、私たちデザイナーがコンテンツをより理解する難しさも要求されるが、きっとそういうデザインのほうが色々な意味で求められるデザインなのかもしれない。
【著者プロフィール】
秋葉秀樹（あきば・ひでき）
株式会社ツクロア（tuqulore） 代表取締役／デザイナー
本業はデザイナー。DTP・グラフィックデザイン・Webフロントエンド全般・Flashゲーム開発・3DCGと幅広く携わる。主な作品は海遊館やサンシャイン水族館とコラボしたAndroid／iPhoneアプリ「Ikesu」。NFC技術を世界で初めて水族館で利用して魚をスマートフォン内に持ち帰られる体験を提供し、2ヶ月足らずで一万人が利用、人の集まる場所に私たちのデザインがどうビジネスに貢献するかをテーマに仕事をしている。
近著に『Firefox OSアプリ開発ガイド』（リックテレコム）。その他、共著として『10倍ラクするIllustrator仕事術』（技術評論社）や『すべての人に知っておいてほしい HTML5+CSS3の基本原則』（MdN）など多数。
2013年4月に株式会社ツクロアを設立。
●株式会社ツクロア：http://tuqulore.com
●秋葉秀樹個人ブログ：http://akibahideki.com/blog/
●Grad3 - Easy CSS3 gradient editor -：http://grad3.ecoloniq.jp/
