似ているようで違う。Google+にあって、facebookにないもの。

via @uxboy

先日Google+に招待をいただいて、ぼちぼちと使い始めて思ったこと。

リリース当初、Google+のインターフェイスのデザインがfacebookに驚くほど似ている（上記画像参照）という話題がありました。僕自身も、パッと見では同じ様な印象を受けるのですが、なんとな〜くGoogle+の方が見やすくて洗練されているように感じます。

そこで、「なんとなく良い」というなんとなくモヤッとした感覚を、インターフェイスを分解して比較してみることで、具体的に優れている理由をまとめてみました。


1.アイコンの簡潔さ

両者のインターフェイスにおけるアイコンの役割は「一目で何か分かる」ようにすることであり、それが小さくなればなるほど視認性に重点をおくべきだと思います。
その中で、facebookのアイコンは多色かつ線的な表現になっていることで、全体で見た時に少しごちゃごちゃした印象を受けます。
それに対し、Google+のアイコンは色数を抑え、フラットな表現になっていることで、小さなスペースでも視認性が高く、よりシンプルであることで全体のデザインに調和が図られています。


2.ユーザーの空間

facebookの創始者マーク・ザッカーバーグ氏は、自身の広告哲学についてこう言ったそうです。

「ぼくは広告が全部嫌いというわけじゃない。
くだらない広告が嫌いなんだ」

しかし、facebookの広告は文字量が多くてパッと見何を伝えたいのかがわかりづらいものが多く、それがユーザーの混乱を招く一因になっており、現在の広告にその哲学が生きているかは疑問に思えます。
それに対し、Google+はそもそも広告が無いので、ユーザーにとってクリーンな空間であると思います。ベータテスト中なので「今のところ」ですが。


3.文字の読みやすさ

facebookはフォントサイズが11px、行間が1.28emとなっていて、文字が小さくて窮屈な印象を受けます。
それに対しGoogle+はフォントサイズが13px、行間が1.4emと、文字が大きく、より広い行間によって読みやすい文字設定になっています。
鈴木一誌氏の『ページネーションマニュアル』において、美しいとされている文字組の行間はフォントサイズの150%〜170％と言われており、それに従った場合、どちらも読みやすい設定とは言えませんが、Google+の方が文字の読みやすさに配慮されたデザインであるといえます。


4.レイアウトの余白

facebookでは、サイドバーの項目やコンテンツ同士の空間が狭く、ボックスの中にすし詰めの様にレイアウトされています。
それに対し、Google+ではそれぞれの要素の空間を適切にとっていることで、クリックしやすく、余白をうまく活かすことで落ち着いたデザインになっています。
「シンプルプレゼン」で有名なガー・レイノルズ氏の言葉を借りると、

「余白は埋めるべきものではなく、重要な何かである。」

まさにその通りであると思います。


5.インタラクティブ性

サイドバーとストリームを区切る線が、facebookでは単色のラインになっているのに対し、Google+ではストリームをクリックすることでコンテンツ単位に色分けがされるようになっています。
この細かな配慮によって、デザインエレメントそのものが主張しすぎず、ユーザーが読むべきコンテンツの量が把握しやすくなっており、よりインタラクティブで使いやすいものになっていると思います。


以上のfacebookとGoogle+のデザインの違いから分かることをまとめてみると…

• アイコンを小さなスペースで表示する場合は、要素を限りなく削ぎ落すことによって視認性・統一感のとれたデザインになる。 
• 適切な文字設定や、余白をうまく活かし、テキストをインターフェイスとして丁寧に扱うことで、読みやすく安定したデザインになる。 
• コンテンツを分けるエレメントを主張しすぎない程度に、機能を付加することでより使いやすいものになる。

Google+にあって、facebookに無いもの。それは、先行者が築き上げてきたものを土台に、余計なものを削ぎ落すという「引き算のデザイン」と、新たな価値を創りだす「足し算のデザイン」をバランス良く組み立てていると言うこと。

Google+のデザインは
マイナスでもあり、プラスでもある。
何を残し、何を活かすか。
選択のバランスを取ることの大切さを教えてくれます。

Tweet

と…Google+を推しつつも、まだまだ（´・ω・）ﾎﾟﾂｰﾝとした感じなのでサークル入れてもらえたら嬉しいです。招待枠もたんまりあるのでtwitterでリプライいただければ招待状お送りしますので遠慮無くどぞ。