NITE and DAY.blog

ルーチンを嫌う遊び人クリエイターKaiのシゴト観。

【つまづいたらチェック!】フラットデザイン採用時に起こりがちな問題点と解決策

f:id:doubleM:20170313161608j:plain

※この記事は2015-11-25に書いた文章のリライト記事です

スマホアプリのデザイン制作に携わって4年目に突入しました。
移り変わるデザイン事情を現在進行形で楽しくお勉強中の遊び人クリエイタ―Kaiです。

今日は、フラットデザインを作成する際に現場で起こりがちな問題と、その問題に対してデザイナーが現場で行なっている地味な努力について、公開してみようと思います。

この記事の狙い
「シンプル過ぎてどうも扱いが難しい!」フラットデザインを

「オシャレで洗練された」フラットデザインに!!

 

フラットデザインてこんなやつ

フラットデザインというと、きっとみなさまが思い浮かべるのはこんなデザインじゃないでしょうか?

f:id:doubleM:20151122231536p:plain

ペタッとしてて、ノイズ(余計な情報)がなく、かつかわいらしいので私もフラットデザインがもてはやされる昨今の風潮は気に入っています。

その半面、フラットデザインは実はデザイナー取扱い注意な側面があることも、ご存知でしたでか?

現場でありがちな、連動課題

「流行りのフラットデザインにして!」
こんなオーダーをもらった際、杓子定規に先ほどのようなフラットなパーツで全体のデザインをするとどうなるか…。大抵は、こんな反応が返ってくるんですよね。

・ちょっとシンプルすぎる
・"押せる"感が足りない
・もう少しリッチな印象にしたい

こうした反応に対して、そもそも論としての「フラットデザイン」の精神性を説いたり、アニメーションで補完したりすることもできますが、私がよく取るのはこんな手法です。

課題解決の一例("良い"デザインのための考え方)

f:id:doubleM:20151122233839p:plain
各所で厚み、影、光を表現していますね。

これを見て、これじゃフラットじゃないじゃん!立体じゃん!!と思った方。その感覚ももちろん間違いではありません。

(ここからは、今お見せした例じゃ納得行かない!という方向けの解説になります。)

優先すべきは何か

「チーズバーガーのチーズ無し」と同じように、「フラットデザインで、シンプル過ぎなくてリッチな感じ」はすでにオーダーが破綻しています。

トレードオフ(両立不可能なこと)が含まれるオーダーが挙がってきた場合、まず確認すべきは誰にとって何が今、一番優先すべき事項かということです。

私はUIデザイナーにとって最優先すべきことは、「機能」を表現することだと考えています。

その前提に立って考えた時、例えば先ほどの指摘の中でユーザーにとって最も影響をあたえるのは「押せることがわからないこと」つまり機能が伝わらない点です。UXを考える上で、ユーザーに使いかたが伝わらなくては話になりませんね。
その上で、その他の装飾部分を極力クライアントの希望に寄せることが、最もシンプルで丸く収まるデザイン方法だ、という個人的な方針でこの先を進めます。

言葉の定義を掘り下げる

次に、クライアントの言葉の定義を掘り下げる必要があります。

例えば…ですが。
シンプルすぎる
 → どのラインから「シンプル」ではなくなるのか、逆にどこからは「派手」になってしまうのか
"押せる"感が足りない
 → どうであればユーザは押せる、と認識するのかまた、どの層のユーザーについて言及しているのか
  (※ 高リテラシーユーザはすでにフラットデザインに慣れている)
もう少しリッチな印象にしたい
 → なにをもってリッチと認識しているのか。リッチはシンプルの対局にあることを理解しているのか。
などなど。

もちろん、上記項目はクライアントに直接質問しても答えは出ません。
というか、逆効果ですのでデザイナーは自分でこれを探る必要があります。

これと同時進行で、クライアントの言う「フラットデザイン」についても掘り下げる必要があります。
上記のようなオーダーが入っている時点で、すでにクライアントは「フラット」であることを望んではいません。
あくまでも、「フラットっぽい」デザインを望んでいることが伺えます。では、クライアントの感じるフラットっぽさ、とはなにか。それさえ分かれば、ここだけを外さずに、あとは自由にやってよし!と解釈できますね。

外さないポイントは独自にルール化

先ほどお見せした展開例(画像)はほんの一例ですが、あの中でも私が独自に決めているルールが有ります。

f:id:doubleM:20151122234456p:plain

例えば
・シャドウにボケ足を付けない
・光を表現する場合もグラデーションは使わない
・色の数を増やさない

などです。

こうすることで、説明可能なデザインが生まれます。

まとめ

デザイナーは現場で、奥ゆきのあるフラットデザインを作ってる!!

少し説明が冗長になってしまった気もしますが、
今回はデザインの現場で行われているUIデザイナーの思考回路を簡単に公開してみました。
(実際はもっと複雑な政治的事情なんかも絡んできて紆余曲折することも多いのですが…笑)
「デザインで問題解決をする際、どう考えていいかわからない」
と感じている方に、ひとつのサンプルとしてご覧いただければ嬉しいです!

あなたの抱える、デザインの悩みって…?