フラットデザイン

作成者: hagimoto
[`evernote` not found]

先月の初めにAppleからiOS7が発表され、過剰な装飾や立体的な表現を排除したフラットUIデザインが話題になりました。

純粋にユーザビリティの観点で見ると、装飾や立体感それ自体がいい、悪いということはありません。というのは、ユーザビリティという概念はデザインルールやデザインスタイルを指すわけではなく、そのデザインがユーザーに与える効果を指しているので。つまり、結果的にユーザーがわからなかったり迷ったり見にくかったりしないことこそ重要で、それが実現できるのであれば、どんなデザインも否定しないというのがユーザビリティの立場だということです。

iOS7のbeta版の画面で、フラットかどうかという観点ではないかもしれませんが、ちょっと気になるところがありました。

iOS6とiOS7

掲載した画像は、iPhoneの写真アプリの画面の一部ですが、左がiOS 6で右がiOS 7です。色々と違いがありますが、3つの違いについて考えてみたいと思います。

  • 一番上のステータス表示(電波受信状況やバッテリー残量を表示するエリア)とナビゲーションバー(「アルバム」と書かれているエリア)の境界線の有無
  • 「+(追加)」「編集」ボタンの、文字を囲む四角形の有無
  • 一覧表示(「カメラロール」「フォトライブラリ」など)の行を区切るラインの有無

iOS 7は、ステータス表示とナビゲーションバーの境界線がなくなることで、電波受信状況、時刻表示、バッテリー残量、「+(追加)」「アルバム」「編集」といったアイテムがひとくくりになっているように見えます。それらのうち、あるものはグラフィック表示、あるものは黒い文字、あるものは青い文字で表示されており、天地サイズも統一感がなく、それぞれの配置も意味があるようなないような不思議なバランスです。

これらのうち、タッチすると何らかの変化が起こるのは「+(追加)」と「編集」だけで、これらのみが青で表示されていますが、iOS 6のボタン形状と比較すると、このアイテムが単なる表示ではなく押せる部分だという主張がかなり弱くなっていることがわかります。色が違うのだから明確じゃないかという意見もあるとは思いますが、先に書いたとおり、グラフィックと文字の違い、大きさの違い、意味ありげなレイアウトなど、他の要素が様々あるために、どの要素に着目して押せる部分とそれ以外の部分を区別すればいいのかがわかりにくい状況になっています。また、色だけで他と区別するのはユニバーサルデザイン的にもリスクが増加すると思います。

iOS 6のボタン形状が最高のデザインなので変えるべきではないと言っているのではありません。ただ、GUIのユーザビリティにとって、表示部と操作部の区別、あるいはバックグラウンドとオブジェクトの区別、メインコンテンツと広告の区別など、同じ画面上にあって異なる意味を持つものが明確に区別できることは基本的な要件となります。iOS 6とiOS 7を比べた場合、後者の方が区別がつきにくいということです。

iOS 7で一覧表示の行を区切るラインがなくなった点ですが、最初に違和感を覚えたのは、画面右側に並ぶ「>」マークです。iOS 6の方を見るとわかるのですが、これは各行に対して右端に1つずつ表示されており「この行をタッチすると別の画面に移行する」ことを示唆しています。iOS 7のようにラインがなくなっただけで、行と「>」表示の対応関係がずっと弱くなり、何を意味しているのかわかりにくくなっています。1行目の「カメラロール」のようにたまたまタイトルの文字列が短い時は、意味なく離れたところに「>」が唐突に表示され、2行目の「自分のフォトストリーム」のようにタイトルが長いと、今度は「>」がタイトルの一部のように見えなくもありません。それにしては微妙に位置がずれているので、ユーザーに余計な疑問を持たせてしまいそうです。

さて、最後に繰り返しになりますが、GUIのユーザビリティを考えるうえで、画面上のアイテムの意味の違いをユーザーがしっかり区別できるようにデザインすることは極めて重要です。そして、1本のラインがあるかないか、文字を囲む四角形があるかないかという違いだけでも、その区別のしやすさにかなり影響を与えるということがおわかりいただけたと思います。今後大きなトレンドとなりそうなフラットデザインは、基本的に表現パターンを減らす方向性のものです。パターンを減らしすぎると、あるいはその使い方を誤ってしまうと、ユーザーが意味の違いを区別できず混乱を招くことになります。見た目の美しさ、目新しさだけに走らず、この点を踏まえたうえでデザインすることをお勧めします。

なお、今回見たものはあくまでもiOS 7のbeta版であり、ここで採り上げた部分も、これからきちんと作りこまれるのかもしれません。というより、そう期待しています。