Modern UI のようなフラットデザインを目指して使いづらくなっている件について

consideration-modernui
2052件のシェア(何も言うことありません記事)

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

img-modernui3

Windows 8 がリリースされてだいぶ日が経ちました。最大の特徴と言ってもよい Modern UI *1。モバイル端末をはじめとしたタッチデバイスに特化した大きめのタイル(ボタン)とタイポグラフィが一際目を引くデザインで、OS X や iOS のそれとは一線を画しています。

一方の Android。2011年2月にバージョン3.0である Honeycomb がリリースされ、それまでの 2.x から刷新したデザインになりました *2。2013年4月現在の最新バージョンである4.2(Jelly Beans)もこの流れを踏んでいます。

両者ともそれまでの Web2.0 と呼ばれていた頃に流行ったグラデーションやドロップシャドウをふんだんに使ったデコラティブなデザインに対し、平面的で装飾要素の極めて少ないミニマルなデザインが特徴です。これらは主に Flat UI と呼ばれ、2012年頃から現在に至るまでのトレンドとなっています。

Flat UI - 2013年のデザインのトレンド(?)

ss-flatui

それまでよく見受けられたデザインから一転して、この Flat UI のデザインは装飾要素をひたすら削ぎ落としてタイポグラフィに特化したデザインとなっています。一見地味なように見えて文字のジャンプ率やカーニングなどが緻密に計算されたそのデザインは、洗練されたオシャレな雰囲気が感じられるということから至るところで見受けられるようになりました。

また、要素を削ぎ落としてミニマルに落ち着かせるということは、最終的に操作に必要な要素のみが残るために使い方が直感的に判る、余計な説明が要らないといった点でデザインを考える人達から憧れられているわけです。

Windows 8 をインストールしてみて…

ちなみに僕は1年半ほど前から Mac ユーザーではありますが、それまでは10年以上ずっと Windows ユーザーであり、今も会社での業務は全て Windows 環境で行なっています。そんな僕が Windows8 ではじめて Modern UI に触れて感じたのは、やはり使いづらいというものでした。僕個人だけが感じているのならまだしも、ネットを検索してみると似たような意見をもつ方が一定数存在するということが分かります。

もちろん Microsoft はワザと使いづらい UI を採用したわけではありません。今までにない斬新かつスタイリッシュで、これまでのどんな UI よりも使いやすいと信じて世に送り出したモノなのに、ユーザーにその想いが伝わりきれていない。そこには何らかの理由があると考え、僕なりに考察してみました。

Flat UI の落とし穴

Modern UI に見られる Flat UI の特徴

改めて Modern UI ならぬ Flat UI の特徴を洗い出してみます。

  • グラデーションやドロップシャドウといったデザイン要素をなくす(※もしくはごく控えめの利用に留める)
  • アイコンはリアリティあるものから、ピクトグラムのように書き込み量を最小限に抑える
  • タイポグラフィデザインの手法を取り入れ、見出しから本文といったレイアウトのジャンプ率は、文字サイズとごく僅かな罫線のみで表現する

などなど、パッと思いつくところだとこんな感じでしょうか。ではこれらの特徴を考察すると同時に、そこに潜む落とし穴についても考えてみるとします。

リアリティあるデザインからピクトグラムへ

ss-osX-ui_icons

かつて流行した立体感を強調したデザインというのは、よりリアリティのあるデザインにするということです。カメラアイコンはより本物のカメラらしくデザインされていました。現実のそれに近い絵であればあるほど、僕たちはそのアイコンが何を意味しているのか識別しやすくなります。頭でゴチャゴチャ考えるよりも先にそれが何であるか理解することが出来ます。

ss-modernui_icons1

対して書き込み量を少なくするということは、より抽象的なデザインにするということです。抽象的ということは、それだけリアリティから遠ざかっていくということです。勿論そのアイコンが何であるのかすらユーザーが識別できないようでは元も子もないので、現実のそれと本質的には同じようにはデザインされています。

しかし僕達はものごとの本質だけを見て全てを識別出来るわけではありません。本質の周囲に漂っている補足情報をヒントとして同時に認識し、それら全てを踏まえて物事を識別しているわけです。ミニマル(単純)化したアイコンは、そういった補足情報の多くが削ぎ落とされているため、僕達はより少ない情報だけでそれが何であるのか識別しなくてはなりません。もちろん識別不可能ではありませんし、充分に可能ではありますが、少なからず脳への負担は高まり、それはストレスとなって蓄積されます。

タイポグラフィデザインの手法を取り入れ、ジャンプ率は極端な文字サイズで表現

地下鉄など交通機関に見られる標識

ご存じの方も多いかと思いますが、Modern UI の元ネタはロンドンの地下鉄にある標識です。見出しの文字は極端に大きく、反対に本文の文字は小さいなど、非常に大きなジャンプ率を文字サイズのみで取っています。冗長な文章は避け、必要最小限の文言だけで伝えたいことを述べ、それ以外の情報や飾り気は一切ありません。アイコンもピクトグラムのように極めて抽象化されたものになっています。

そしてこれは Modern UI に限らず文字がアルファベットである国々ではごく一般的なことですが、罫線と呼ばれるものが殆ど使われていません。基本的に余白や行間の広さを調整することでジャンプ率を表現しています。表組みとなると、方眼紙のように縦横無尽に罫線が引かれるのを僕たち日本人は思い浮かべますが、海外の表組はヘッダーとボディを一本の線で区切るだけで、それ以外の線は無いというのも珍しくありません。過剰に線を引くよりもいかに余白を上手く調整して可読性を高めるかという思想が、彼らには遺伝子レベルで刷り込まれているのです。

Modern UI が使いづらい理由

見出し、本文、ラベル、ボタン、テキストインプットなどの区別がつきづらい

UI の大半がタイポグラフィのみで構成されているということは、それだけ各要素の差別化に制限が生まれることになります。例えば見出し、本文、そしてボタン。基本的に全てがただの文字列です。文字サイズ以外の違いが無いため、パッと見はすべて一つの段落であるかのような錯覚に陥ったりして、どこからどこまでがひとつのセクションなのか判断に困ることがあります。

ボタンに関しては、ベタ塗りの背景色や枠線などで矩形の領域を識別出来るようにはなっていますが、その矩形領域も非常にミニマルなデザインであるが故にテキストインプットのデザインと酷似しているため、一瞬ですがどちらなのか識別するために脳に負荷がかかります。

余白の取り方がアルファベット圏と日本語とでは違う

地味なところなのでデザインリテラシーの低い人はなかなか気付かないのですが、英語の文章と日本語の文章とでは行間の取り方が全く違います。英語の文章はアルファベットと数字と幾つかの記号だけと非常に種類が限られているので、普通に文章を書くだけでもそれとなく整然とした見栄えを演出することが出来ます。一文がスッキリしているので、あまり行間を広く取らなくても可読性は保てるんですよね。

一方の日本語ですが、平仮名、カタカナ、漢字、アルファベット、数字、記号と実にカオスな言語となっています。そのためタイポグラフィという見栄えの観点からすれば、どうしてもゴチャゴチャした印象になりがちです。結果として英文よりも行間を少しだけ広く取らないと可読性が損なわれてしまう訳です *3

Modern UI は罫線やシャドウ、その他装飾といった補助を使わずに余白だけでセクション分けを実現するため、自然と余白が大きくなります。ただでさえ英文よりも余白を取らざるをえない日本語文をModern UI に流し込むと、更に余白を大きく取らなくてはならないため、ページのスクロールが増えるといった弊害が生まれます。かといって余白を英文基準のままにしておくと、行間が狭すぎて可読性が落ちるという弊害にぶち当たります。どの道不便ですね。アルファベット文化の人達には無い弊害が僕たち日本人にはあります。

おわりに

本音を言うと、タイポグラフィデザインには非常に強い憧れを抱いています。スタイリッシュかつユーザビリティの高い UI を作れるようになりたいとずっと考えています。映画トレインスポッティングを最初に観た時、その世界観はもちろんのこと、映像やタイポグラフィを主体としたポスターといったビジュアルが最高にクールに見えて、それがデザインを志すきっかけになったのだと考えています。

Modern UI はビジュアルデザインという視点から見れば、非常にスタイリッシュかつカッコイイものだと思いますし、僕の好みそのものです。しかしいくらスタイリッシュにしたところで、それは本当の意味での使いやすさに直結しないということを同時に気付かされた UI でもあります。

余談ですが、ニコニコ動画を Youtube 寄生型の頃から利用し続けていますが、現行のプレイヤーにはどうしても馴染めないでいるので、未だに旧バージョン(原宿)を使っています。iPhone アプリ版は正にスタイリッシュさとユーザビリティが上手く共存出来ていて、凄く好きなんですけどねぇ…。

脚注

  1. 2012年8月までは Metro UI と呼ばれていましたが、Metro AG というドイツのパートナー企業から商標に関するクレームがついたために、Modern に名称変更しました。
  2. 明らかに映画 Tron がデザインモチーフになっていますね。
  3. 日本語の新聞よりも英字新聞の方がカッコよくみえるのは決して英語コンプレックスによるものではなく、字面に統一感があるからなんですよね。

AWS Cloud Roadshow 2017 福岡

  • http://twitter.com/hsmt masanori hashimoto

    見出し、本文、ラベル、ボタン、テキストインプットなどの区別がつきづらいというところ、共感しました!

    • 直樹 山田

      正にそこが Modern UI の使いにくさを最も具体化している箇所だと思います。このブログの反響から結構な数の人が同じような意見をお持ちだという印象を受けましたが、英語圏の人たちはどのように感じているのか、個人的に気になるところです。

  • Daisuke

    シリコンバレーでデザイナーとして働いています。フラットデザインで日本語での行間に問題があるという点、興味深いです。フラットデザインの流行は単なる見た目のデザインの流行ではなく、混沌としたモバイルの解像度に柔軟に対応するためにベクター形式でデザインしたほうが効率がいいという時間、コスト削減と技術的側面を考慮した一面もあります。他言語でのデザインに問題があるならばまた新しい流行が生まれるかもしれませんね。

    • 直樹 山田

      確かに「Mobile First」というキーワードと時同じくして広まった感があります。作り手側のコスト削減は無視できない問題ですが、もしその一面が一人歩きしてしまって、「結局ユーザーのこと何も考えてないじゃないか!」なんて意見が出てきてしまうと不幸ですよね。
      シリコンバレーをはじめとした英語圏の間で、Modern UI やフラットデザインのトレンドがどのように受け止められているのか、ものすごく気になるところです。

  • kari_name

    読んでいて何の何を指しているか分かり辛かったのですが、例えば、FlipboardのUIも使い辛いと言う事でしょうか。

    私は、スマホではなく、タブレット以上の大きさなら使い易いと思いました。

    • 直樹 山田

      上手い表現が見つからないので恐縮ですが、Flipboard は余白を大きく取っていてクリーンな印象を演出してはいるものの、ここで語っている Flat UI とは違うと思いますし、ミニマルですらないと思いますね。ちゃんと利用したことがないので、使いづらいかどうかは分かりません。

      • kari_name

        なるほど。
        終始否定否定で終わってしまっていて、提案要素も無かった為、質問させて頂きました。

        Windows8のストアアプリに関して言えば一覧性が高くUIは使いやすいと感じました。
        メインで使用されて半年後に使用感を教えて頂ければ良いなと思います。UIの話でしたか(笑)。

  • http://twitter.com/mont_k Mont

    行間という考えからは以前議題に上がった「日本のWebデザインがダサい」という、話でもあった言語ごとの文化という点に着地すると思います。
    http://memo.goodpatch.co/2013/02/is-japanese-web-design-bad/

    Modern UIなども各言語への最適化が進んでいくのではないでしょうか

    • 直樹 山田

      もし Modern UI がトレンドからスタンダードになることがあれば、そういった対応も考えられますね。
      日本語のWebデザインがダサいという件については、フォントの品質が重要な要素になってるかと思います。非現実的ですが、仮にモリサワフォントを使った上で、ベースラインやカーニングを調整することができたらどうなるでしょうかね?