読者です 読者をやめる 読者になる 読者になる

UXエンジニアになりたい人のブログ

転職活動はじめてすぐやめた

フラットデザインのアイコンを"幼稚"にさせないコツ

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

 

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

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

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

 

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

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

↓ 

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

http://marticleimage.nicoblomaga.jp/image/279/2015/7/a/7ab575e3dff6bc8683644bba6123acaf9bdd93111428711459-s.jpg

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

 

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

http://win7.jp/00cap7v/v7-00392.jpg

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

 

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

 

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

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

http://gori.me/wp-content/uploads/2014/06/yosemite-vs-mavericks-1.png

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

 

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

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

http://www.usability.gr.jp/wp-content/uploads/2013/11/photo-icon-ios7-vs-6.png

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

 

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

http://www.microsoft.com/global/ja-jp/office/2013/PublishingImages/insideNewOffice/img_icons.png

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

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

 

ということでひとまずは

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

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

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

 

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

 

あわせてよみたい
否定派によるフラットデザイン擁護論 - UXエンジニアになりたい人のブログ否定派によるフラットデザイン擁護論 - UXエンジニアになりたい人のブログ

わたしはフラットデザインの否定派だ。コンピューターはあらゆる物事をあらゆる角度から解決してくれる。それゆえ「なにを意図してどう解決させようとしているのか」をうま...

 

*1:つまり、なんでオフィスがドアやねん、とかなんで写真アプリが楕円形の重なりやねん、とか