【UI設計】シンプルに「見せる」ための簡単なテクニック
シンプルに作るのが苦手な日本人
最近はネットサービスを作る上でも「シンプルがいい」と言われることが多いと思いますが、基本的に日本人はシンプルに作ることが苦手です。この状況を打破するために、まず僕は「過剰は離脱を生み、不足は要望を生む」という考え方を提唱したいです。
過剰に与えすぎればサービスのアイデンティティは薄くなり、またそれを使うユーザーの視覚的・心理的ストレスも大きくなります。なので、特にサービスのスタート段階においては、これが初期ユーザーにとって本当に必要な機能なのか、初期段階で本当にワークする機能なのかを十分に検討する必要があると思います。
一方で、僕は「不足」に対しては「過剰」ほどシビアに考えてはいません。もちろんサービスのコンセプトが伝わる最低限の機能は実装されている必要はありますが、その周辺機能に不足があってもユーザーは離れて行くことはなく、むしろ前のめりに要望を上げてくれると思っているからです。
このように、まず第一フェーズとして企画・設計段階で徹底的に機能を吟味することは大切なのですが、それが行き過ぎると今度は奥行きがないサービスに仕上がってしまうという懸念が出てきます。例えば、あまりに限定的なシーンでしか使えない接触頻度の低いサービスになってしまい、いつの間にかユーザーに忘れられて行くという流れは容易に想像できます。また、そもそも上で言うところの「サービスのコンセプトが伝わる最低限の機能」の定義自体が曖昧です。
よって、機能の絞り込みには毎回頭を悩ますことが多いと思うのですが、ここで救世主になり得るのは「シンプルに見せる」というテクニックです。
シンプルに「見せる」ための簡単なテクニック
海外製のサービスが日本のサービスよりも機能を限定しているかと言われれば、僕はそうは思いません。ただし、同じ機能を持ったサービスをよりシンプルに「見せる」という意識やノウハウに関しては、日本のサービスはかなり差をつけられている印象があります。
この点においてキーになるのは、やはりUIだと思います。そこで、今回はUIにフォーカスして、僕がシンプルに「見せる」ために大切だと思っていることを3つほど挙げてみたいと思います。
メリハリをつける
まずこれが結構な盲点になっていると思うのですが、コンテンツにメリハリをつけることで体感する情報量を減らすことができます。
メリハリのある情報は全体構造を把握しやすく、その中から自分にとって必要なものを素早く取捨選択することができます。例えば、新聞はあの大きな見出しがあるからこそ流し読みができるのであり、もし仮に見出しも無しに各情報を同じ粒度で押し付けられたら、読む気が失せてしまうと思います。
また、メリハリをつけることで運営者が目的としている行動にユーザーを誘導できるという効果もあります。陳腐な例ですが、例えば拡散を生むいいね！ボタン的なものは、他のアクションボタンと並列に並べるのではなく、より目立つ位置に目立つデザイン・大きさで配置してみるとクリック率が高まるはずです。
大きさ、色、レイアウトなどに変化をつけることでメリハリを最適化し、目を向けるべき情報や取るべきアクションの優先順位をこちらからサジェストできるUIが望ましいと思います。
余白を大きく取る
僕はUIデザインにおける重要な要素の1つは、余白（の使い方）だと思っています。上のスクリーンショットは極端な例ではありますが、基本的には文字やボタンの周りに余白を大きく確保すればするほど、そのオブジェクトの存在感は際立ちます。その意味ではこれもメリハリをつけるための1つの考え方かも知れませんが、特に大切だと考えていることなのであえてフォーカスしてみました。
ちなみに、余白を大きく取ればその分1画面内に収まる情報量は少なくなりますが、スマートフォンはスクロールが快適なので、画面が縦に長くなることを恐れて無理に文字を小さくしたりする必要はないと思います。（むしろ読みづらくなってしまい逆効果です）
イラストもシンプルに
これは特にスマートフォンなどの画面サイズが小さいデバイス向けにアイコンなどのイラストを作成する時に注意した方が良いと思っていることなのですが、デザイナーが作業中に大きなディスプレイで見ているイラストとアプリに組み込んで実際の端末で見た時のイラストは、思っている以上に印象が違います。
自分の経験では、拡大状態だとイイ感じに見えていたのに、スマートフォンの画面サイズで見た途端に細かなニュアンスが伝わらなくなったり、ごちゃごちゃ見えることが非常に多かったです。そんな時は、一旦シンプル過ぎるかな？と心配になるくらいに振り切ったものに作り直して見ると、意外にも丁度良いバランスになったりします。ただし、個人的にはシンプルなデザインを差別化するのは質感だと思っているので、シンプルにする分そこへのこだわりは強く持っていたいと思います。
「その顔でよくデザインのこと話せるな」という天の声が聞こえた気がしたので、この話はこの辺で止めておきます。
~~~
ちなみに、今回は触れませんでしたが、1つ目の「メリハリをつける」には、より深いところで情報設計（IA）が大きく関わってきます。これは長くなりそうなのでまた別の機会に取り上げるとして、まずはすぐに取り入れられそうな施策を簡単に紹介してみました。
masaki
">by 将基 渡辺