2014/05/13 クリエイター

フラットデザインは諸刃の剣?質を落とさないためのフラットデザインの注意点

フラットデザインは諸刃の剣?質を落とさないためのフラットデザインの注意点 AppleがiOS7からUIにフラットデザインを採用するなど、Web業界では今フラットデザインが注目を集めています。iOSの以前の立体的なデザインから立体感のないフラットデザインは最初は違和感を覚えたユーザーも多いと思いますが、フラットデザインの方がスタリッシュさが感じられるという方も多いのではないでしょうか。シンプルに見えるフラットデザインですが、WebサイトやWebサービス、アプリなどでフラットデザインを取り入れる際の注意点をポイントごとに解説したいと思います。

フラットデザインの特徴

フラットデザインは立体感のあるリッチデザインとは異なり、立体感がないのが特徴です。
グラデーションを使うと立体感が出ますが、フラットデザインには基本グラデーションは使いません。
グラーデーションを使うとしたら立体的に見えない程度の淡いグラーデーションを使います。
iOS純正のアプリを見てみるとグラデーションを使ったアイコンもありますが、薄っすらとしたグラーデーションですし、陰影がないので立体感がありません。

フラットデザインのメリット

コントラストが明確になるので文字が読みやすくなる、スタイリッシュに見える、シンプルであるため分かりやすいといったメリットが挙げられます。
余計な装飾がないので画像の容量が少なくなり、ページの読み込み速度が早くなるといったメリットもあります。
装飾に邪魔されないので、コンテンツや商品の魅力が伝えやすくなります。
制作側のメリットとしては、デザインにグラデーションや陰影を付ける必要がないのでデザインにかける時間が短縮できるのもフラットデザインを採用するメリットと言えます。

フラットデザインのデメリット

装飾がシンプルであるためボタンが認識しにくい、個性が発揮されにくい、刺激が少ないといったデメリットが挙げられます。
特にボタンであると認識しづらいデザインだと、クリック率が低下する恐れがあります。
iOS7になってからロック画面の「ロック解除」のデザインが変更され、分かりづらくなったという方も多いことでしょう。
すでに使い方を知っている方は解除の仕方が分かりますが、初めて見た方はどうやって解除したらいいか迷う方が多いかもしれません。
iOS7以前なら矢印で解除の方向を示してくれていましたが、iOS7では「スライドでロック解除」という言葉による説明を採用しているのでスライドの意味が分からないと解除しにくいことでしょう。

フラットデザインの注意点

フラットデザインは立体感がないゆえにコンテンツとボタンのメリハリがつけにくく、ボタンと気付かれない可能性があります。
iOS7のロック解除のデザインについて述べた通り、デザインによっては初見のユーザーにとっては操作が分かりにくくなるという課題があります。
手抜きの装飾と余計なものがないシンプルで優れたデザインは紙一重で、ヘタするとデザイン性が低下してしまう恐れがあります。
フラットデザインはシンプルに見えますが、それだけにデザイン力が顕著に現れるデザインであると言えます。
Webデザインの求人案件 Webデザインの求人案件

Webデザイナーやクリエイターの求人・案件情報です。
制作会社もあれば自社サービスのUIデザイン案件等、幅広く掲載しています。