2013年のトレンド、フラットデザインを使うメリット+参考にしたいデザインまとめ

2013.2.18

こんにちは！
先月の頭に書いた記事「【2013年度版】今年流行る！7つのUIデザイントレンドまとめ」が
今でもかなり多くの方に読んでいただけているようでとても嬉しいです。今回のブログは「【2013年度版】今年流行る！7つのUIデザイントレンドまとめ」でご紹介した「メトロUI（フラットデザイン）」にフォーカスした記事です。

（下記はDesignmodoの記事「Flat Design: Can You Benefit from the Trend?」の翻訳です）

最近よくフラットデザインが取り入れられているWebサイトやアプリを見かけます。このトレンドはWindows 8とGoogleの新デザインがリリースされた事で人気になり、他のサイトなどでも取り入れられ始めました。デザインの装飾をたくさん使わず、フラットデザインはメッセージや製品、アイデアをユーザーに伝えるシンプルな方法です。ぜひ今のトレンドであるフラットデザインをチェックしてみましょう！

フラットデザインとは？
フラットデザインの呼び名
フラットデザインのインスピレーション
結論

フラットデザインとは？

フラットデザインとは立体的でなく、余分なエフェクトが使われていないデザイン方法です。要素を立体的に見せたり、へこませて見せるようなドロップシャドウ、ベベル、エンボス、グラデーションなどを使わない、アイコンやUI要素がくっきりしているデザインです。フラットデザインはまったくエフェクトが使われていないデザインのことではなく、単に人工的に感じる立体感やへこみを作る為のエフェクトをなくしたものです。

テクニック

装飾をすべてなくすことがフラットデザインではありません。

色に焦点を当てて考えてみましょう。

フラットデザインでは頻繁に数多くのビビットな色が使われています。カラーブロッキング（カラーを面積を大きくブロックのように使う使い方）や要素の形、線などの色合いにおいて、フラットデザインにおける色使いは重要な事です。白と黒だけの配色でフラットデザインを作ることも可能ですが、より多くの色を使う事でユーザーにインパクトを与える事ができます。

タイポグラフィに焦点を当てみましょう。

言葉はユーザーにメッセージを伝え、サイト上でナビゲーションをし、あなたのサイト上で何をすべきかを知らせることができる不可欠な存在です。ユニークで複数の種類のタイポグラフィを取り入れてみましょう。あなたWebサイト上で伝えたいメッセージにあったフォントを選びましょう。またはシンプルなフォントのがアクセントととして、一種類、普段使わないような珍しいフォントをアート的な要素として取り入れることも検討してみてください。

言葉に焦点を当てみましょう。

多くのフラットデザインでシンプルな全体の雰囲気と印象を保つために、言葉の数も減らしています。デザインする際は文字数の確認もしてみてください。

シンプルなユーザーインターフェースとUI要素。

ボタンに過剰なデザインやクリックが複雑になるようなデザインは必要はありません。UI要素が一目でどんな目的があるものか判断でき、要素として明確な意味がない場合、ユーザーにとって効果的ではありません。フォームの色やアウトライン、ボックスなどにも同じ事が言えます。

フラットデザインの呼び名

フラットデザインの呼び名について多くの議論があります。問題なのは、多くの人が主張していることですが、わかりづらいということです。さまざまな企業や団体が「ミニマルデザイン」や「正直なデザイン」、「本物のデジタル (authentically digital)」（←Microsoftが使用していた）という「フラットデザイン」以外の名前を試していました。

呼び名の議論についてみなさんはどう思われますか？この議論について興味のある方はBranchという掲示板で盛んに議論されているのでチェックしてみてください。