フラットデザイン流行ってますね。例えばWinodws8のModern UI、GoogleのAndroidなどが有名ですね。そして、ついにAppleもiOS7からフラットデザインになるようです。私はもともとシンプルなデザインが好きなので、これまでデザインしたものは結果的にフラットデザイン風のシンプルなデザインになっています。今回は、フラットデザインについてUXの視点で考えてみたいと思います。
まずは「見た目」ですが、フラットデザインは、立体感や装飾がないため全体的にシンプルですっきりした印象になります。文字とアイコンと四角の囲みで構成される画面が特徴的ですね。ボタンは立体感がなく、四角いエリアがタッチやクリックの対象になることもあります。
私はヒューリスティックチェックを行う際に、ヤコブ・ニールセンの10 Usability Heuristics for User Interface Designを参考にしています。「見た目」に関しては、「Recognition rather than recall」や「Aesthetic and minimalist design」を基準に考えてみたいと思います。
「Recognition rather than recall（記憶しなくても見ればわかるようなデザイン）」については、フラットデザインだから優れているということは言えないと思います。例えば、情報アーキテクチャを考慮して、わかりやすい情報構成やレイアウト構成にするとか、メタファやアフォーダンスを考慮したボタンを配置すれば、フラットデザインでなくても直感的にわかるデザインを作成することは可能です。「Aesthetic and minimalist design（最小限で美しいデザイン）」については、フラットデザインの特性にマッチしている点だと思います。レイアウト、整列と余白、色などに留意し、一貫したルールで画面をデザインすればすっきりした画面になると思います。また、ピクトグラム風のシンプルなアイコンを使用すことで、視認性を高めることができます。
次に「操作性」ですが、10 Usability Heuristics for User Interface Designの「Consistency and standards（一貫性を保ち標準に倣う）」を基準に考えてみたいと思います。
例えば、次の画面に遷移する際や、何らかのアクションをする際には、リンクやボタンを「タッチ／クリック」するのが一般的ですね。フラットデザインの場合、その対象がわかりにくいのが最も大きな問題ではないでしょうか。例えば「四角で囲まれたエリア」がアクションの対象であったり、「何の装飾もない文字列」がアクションの対象であったりします。ここで問題となるのが、アクションの対象物のデザインが統一されてないため、アクションの対象を識別しにくいという点だと思います。「Consistency and standards（一貫性を保ち標準に倣う）」を考慮して、アクションの対象を一貫したルールでデザインすれば、この問題点を解決できるのではないでしょうか。
最後に、主観的満足度についてですが、実際に使ってみないとわからないところですね。私はフラットデザインをベースに作成されたWeb画面を使用したことがあるのですが、その際にストレスを感じたことがあります。前述のように「どこをクリックすれば次の画面に遷移するのかわかりにくい」という点が主な要因です。例えば、四角で囲まれて背景に色がついているエリアがアクションの対象であったり、そうでなかったりといった具合です。何度も繰り返しこの体験を重ねると、主観的満足度はますます低下し、結果的にUXの評価を大きく下げてしまうことになります。
では、どうすればよいのでしょうか。いくつか思いつく案を記述してみます。
A. 四角の枠線エリアをアクションの対象とする。
B. 背景色のついたエリアをアクションの対象とする。
C. 控えめなドロップシャドウをつけたものをアクションの対象とする。
D. 丸で囲んだアイコンをアクションの対象とする。
E. アイコンと文字列のセットをアクションの対象とする。
基本的な考えは「アクションの対象をユーザーが識別しやすくする。一貫したルールでそのデザインを適用する。」ということになります。このようなルールをアプリケーション、あるいはもっと大きなスコープで統一すれば、ユーザーが操作に迷うことが軽減されるのではないでしょうか。
フラットデザインについて思いつくことを記述しましたが、みなさんは、フラットデザインについてどう思われますか？今後、アプリケーションを開発する際、お客様からフラットデザインにしたいというリクエストが増えてくるかもしれませんね。