design makes life richly.

Published: 4年 ago

第8回 Creators MeetUp でフラットデザインについて話してきた


 

第8回 Creators MeetUp でフラットデザインについて発表してきました。WindowsがMetro UIを採用して以来、じわじわと浸透し始め、AppleまでもがiOS7にてフラットUIを採用しました。今のデザインに置いてフラットデザインは無視出来ない存在になってきています。とはいっても課題はいくつも残っていて、そこの部分に深く触れてみようと思い、今回の発表をしました。
 

フラットデザインの成り立ち

 
skeoumorphism
フラットデザインはどのようにして生まれたのか。そのことを考える前にスキュアモーフィズムというものを考えなければいけません。スキュアモーフィズムのようなリアルな質感を用いたデザインがあったは、僕たちがデジタルな表現、コンテンツ自体に不慣れだった為、現実にあるものを用いて、ユーザーの経験を引き出すという事が目的でした。しかし、僕たちがデジタルな表現に慣れてくると、3次元を2次元で再現したコンテンツ自体に違和感を感じるようになってしまいました。リアル故に、予想している行動とギャップが生じた際に、混乱を招くようになってしまったのです。そのため、無駄な表現を削ってシンプルにデザインを行う。そうして生まれたのが、フラットデザインでした。

 

フラットデザインの問題点

 
しかし、そうして生まれたフラットデザインにも問題はあります。スキュアモーフィズム時代には、ユーザーの感覚自体に訴えて行動を促していました。しかし、3次元的なリアルな表現が抜け落ち、感覚的な気づきが抜け落ちてしまったのです。そこでそれらを埋める為に、インタラクティブな要素でユーザーの行動を促そうとします。

user-action
インタラクティブな要素を挟んだ場合、『触る』『認識』という行動を挟んでしまうため、スキュアモーフィズムの『予想』というシンプルな訴求に対し、ユーザーの学習コストを考慮してデザインしなければなりません。それらの問題をどう解決して行くか。それには、『触る』『認識』という行動をどうにかして、『予想』という行動に近づけていかなければなりません。

iOS7

 iOS6からiOS7でのロック解除画面では、スキュアモーフィズムも感覚的な訴求を埋める為に、言葉で行動を促すという解決策を取っています。iOS6ではリアルな質感で『スライド』という行動を促していました。iOS7ではスキュアモーフズム的な要素を削ったため、『スライドでロック解除』という説明的な言葉で行動を促そうとしているのです。しかし、このようなデザインの変更点から見えてくる問題もあります。
 

 
iOS6では感覚的に分かる構造だったため、学習を挟んでいれば赤ちゃんでさえ、ロックを解除出来ていました。それではiOS7になった途端ロックを解除出来なくなってしまったのはなぜでしょうか。赤ちゃんは言葉を認識できません。それは同時に『認識』から『行動』に結びつかない事を表しています。僕たちは言葉がわかりますし、iOS6もしくは、デジタルなデバイスを十分に触ってきましたから、言葉を通して『予想』し『行動』することができたのです。
 

フラットデザインと向き合う為に

 
色んなデザインにも共通していえることですが、インタラクティブな要素を含む場合特に『認識』という行動が重要になってきます。ユーザーが何も気付きを得る事が出来ませんからね。このことから言える事はどんなデザインにも明確な分かりやすさが必要になるという事です。そういったときに何か差別化して見せる要素が必要です。
 
flatdesign
 
例えば、Google Mapsではフラットな表現の上にわずかなグラデーション、わずかな立体感、わずかなシャドウを加えてユーザーに対して感覚的な気づきを与えています。このようにユーザーの行動を促すアクセントを意図的に付け加えて行く事が必要なのではないでしょうか。シンプルだからこそ、例外的なグラデーションやシャドウは従来より強いアクセントになります。そのことから考えられるのは、フラットデザインとは、フラットにデザインする事では無く、一度要素をフラットに考えた上で必要な要素を付け加えていくデザインないかということです。そうすることで、無駄が無く、その上シンプルにユーザーに対して響くデザインが出来るのだと思います。

 

Have a Comment?

WP-SpamFree by Pole Position Marketing

Some HTML is OK