フラットデザインのアイコンを"幼稚"にさせないコツ - UXエンジニアになりたい人のブログ

windows10のアイコンの評判がすこぶる悪いようだ。

【Windows 10カウントダウン】2週間で更新された新ビルドの目玉Project Spartanを使ってみる - PC Watch

アイコンは青い四角形の中に、どうやら地球を模したマークが描かれたデザインとなっている。他のアイコンと同様に怖ろしくフラットなもので幼稚ささえ感じる。

↓

幼稚と評されたSpartanのアイコンはこれ。

Windows 10 TP Build 10049時点でのProject Spartanのアイコンは、Windows 10での「ネットワーク」を象徴するアイコン。シンプル pic.twitter.com/tvfdWQikhX
— KIMATA RobertHisasi (@robert_KIMATA) 2015, 3月 31

Windows 10のアイコンひどすぎワロッタ

マジで小学生がペイントで描いたレベルじゃね？？

↓

小学生が描いたと評されたごみ箱のアイコンはこれ。

via Windows 10のアイコンひどすぎワロッタ

ちなみに、Windows7のIEとごみ箱のアイコンはこれ。

via Win7JP RCウィンドウズ7の総合情報＆カスタマイズ－ Windows 7のデスクトップ上にInternet Explorerのアイコンを表示させるには

主観的な問題ではあるけど、確かに幼稚であるという意見があるのは頷ける。ていうかSpartanもひどいけどネットワークのアイコンも相当ひどい・・・

まずひとつ言えるのは、フラットデザイン界では「地球」とか「ごみ箱」といった現実の3次元空間にあるものをアイコンモチーフにすることはタブーなのだろう。影がなくてべた塗り一色になるので、どうしても塗り絵感が出てしまう。

Mac OSもYosemiteになってからかなりフラットになったが、コンパスとか歯車みたいな現実世界を模したオブジェクトはデフォルメしても（おそらくあえて）フラット化しきっていない。逆にメッセージのような図形的なアイコンはフラットになって違和感がないし、かなりスッキリして見える（がしかしどっちがいいかと聞かれると、、、げふんげふん）

「OS X Yosemite」と「OS X Mavericks」のUIデザインを比較した画像が公開！ | gori.me（ゴリミー）

線を使って絵を描くのもNGだ。ごみ箱なんかはまさにこの典型。線ではなく面で表現しなければならない。

ごちゃごちゃして線で表現せざるを得ない現実のモチーフは、なんの意味も持たない幾何学模様に変えたほうがはるかにフラットでスマートになる。iOSの「写真」アプリがよいお手本だ（この幾何学模様のどこがどう写真なのかは知らんが）

iOS6(左)と7(右)の「写真」アプリのアイコン via iOS 7のユーザーエクスペリエンス評価－ U-Site

図形的モチーフと単色化をうまくつかったお手本としてはoffice2013のアイコン群がある。

http://www.microsoft.com/ja-jp/office/2013/article/change.aspx

一応、「本を開いた絵」という立体図形なのだけど、単なる平面図のようにも見えるくらい簡略化・記号化されてすっきりしているし、メトロお得意の反転画像にしても違和感がない。

ということでひとまずは

現実世界のオブジェクトをそのまま平面化するのを避ける
図形的・記号的モチーフに置き換える
色や線を多く使わない。できれば単色で

と心がけておけばとりあえずなんとかなるんではないかな。

とはいえ、やっぱり難しくなったと思う。色や線や表現手法が多く使えない中で、シンプルかつ子供っぽくならないようにするというのはまずモチーフ探しのセンスが問われる。良いモチーフが見つかっても、それをステークホルダーに納得させづらくなるのではなかろうか*1。光沢・影・半透明などを使ってとりあえずリアルっぽくしておけばそれなりの高級感が出た今までとは違って、「低品質のアイコン」が量産される事になるのではないかな。困ったもんです。

しかしベータ版とはいえ、メトロでフラットデザインを提唱した言い出しっぺのマイクロソフト自身がこの体たらくで、おしゃれデザインの中でユーザビリティを誰より考えていたはずのアップルがご覧の有様で、ほんとフラットデザインはどこにいくんだろうか、、、、