2018年のGoogleアップデートを振り返ろう!

あっという間に12月に入り、2018年も終わりを告げようとしています。振り返るとさまざまなことが起こり、また同時に変化があったかと思います。サイトのデザインでは「UI」や「UX」という言葉が、今年はそれまで以上に使われたのではなかったでしょうか。それに適応させるかのようにGoogleが何度もアップデートをしていたのが印象的でした。そこで今回は2018年度を振り返りつつGoogleがどのようにサイトをアップデートをしてきたのかについて見ていこうと思います。

UI・UXとは?

まずはUIとUXについて知らないという方に向けて簡単に解説を行なっていきたいと思います。

UIとは?

UIはユーザーインターフェイス(User Interface)の略称です。分解して意味について確認をしていくとUserは文字通り、使用者・ユーザーという意味で、Interfaceには接点・境界面という意味を持ちます。つまり「ユーザーと物・サービスとが接触する部分」。言い換えると「サイトを見ている際にユーザーが目で見たり、触れたり(クリックなど)できるもの」がUIの本質的な意味と言えます。例えば、サイトの中に設置されているボタンなどがUIの代表例と言えます。

UXとは?

一方UXはユーザーエクスペリエンス(User Experience)という略称で、Experienceが経験と訳せるように「ユーザーがモノ・サービスに触れたときに得ることができる経験や体験」のことを言います。例えばサイトの場合だと使いやすくて見やすい、デザインがかっこいい、ページの読み込み時間が速いなどユーザーが感じることすべてがUXにあたります。

よくUIとUXは混同されがちですが、このように意味には歴然とした違いがあります。関係性を簡単にまとめてしまうと、“より良いUXを獲得するためのツールとしてUI”があります。ただあくまでツールとしてUIが存在しているのでUXをあげるためにUIだけに注目して考えるのではなく、必ずユーザーの目線になって考えることが大事なのでその点は意識しておきましょう。

Googleはどのようにアップデートした?

さて本論に入ります。今回Googleがアップデートしたものはたくさんありますが、中でもガラッとデザインなどが変わったものについて焦点を絞って見ていきます。

Gmail

Gmailはご存知の方も多いとは思いますがGoogleが提供しているフリーメールサービスになっています。既にチームハッカーズ記事「GoogleがGmailをアップデートしてメールでのタスク管理を楽にした!」でも紹介しているとおりGmailのデザインやレイアウトが変更されました。

・旧バージョン

・新バージョン

※現在はすべてのユーザーが新バージョンのデザインになっています。

タイトルが大きく変わった

まずはパッと見て気づくことはタイトルがGoogleからGmailへと変わったことでここがどのようなページなのか、何をするところなのかをすぐに理解できるようになりました。またその横のハンバーガーメニューは受信トレイなどのスペースを小さくすることが出来るます。個人の自由に合わせてメニューを折りたたむことが出来るので、メニューが大きくてうっとうしいと言う方はクリックして折りたたんでください。

アイコンが追加されて見やすくなった

受信トレイやスター付きなどの左にアイコンが追加されたため文字がなくてもどのようなことをするのかをある程度分かるようになりました。また作成というボタンはより立体感を持つようになったため、われわれユーザーがリアルにクリックできるという実感を持つ事ができるようになりました。

タブが追加された

新バージョンには旧バージョンにはなかったタブが追加されたことで、そのメールがどこからきたメールなのかを簡単に判断することが出来るようになりました。仕事などのメールはメインへ、twitterやFacebookなどのメールはソーシャルに入るなどすべてのメールを表示して探す手間が省けたことは効率的で素晴らしいデザインと言えるでしょう。

PageSpeed Insights

こちらのPageSpeed Insightsはページのスピードを測るツールとなっていて最近ではありますが11月に入ってからデザインの変更がありました。

旧バージョン

新バージョン

※今はすべてのユーザーが新バージョンのデザインになっています。

タイトルが変わった

こちらもGmailと同じように左上にPageSpeed Insightsとアイコンを表示することによりどのようなページなのかを瞬時に判断できるようになりました。

タブ的要素が強まった

こちらもGmailのアップデートの傾向に似ていますが、タブ的要素が強まり自分がいまどのタブにいるかなど色がついて表示されるようになったので、自分がいまどのページにいるかなどを探さなくてよくなったのでユーザーにとっては使いやすいページになったといえるでしょう。

余白の取り方が変わった

新バージョンは旧バージョンに比べると余白の取り方が変わったためユーザーにとってすっきりとした印象を与えることが出来ています。またこちらもボタンのデザインが立体感を持ち押すときのエフェクトが変わったほかに、URLの入力欄が中心になり周りとの色の差別化により前のデザインよりもどこにURLを入れればいいのかなどわかりやすくなっています。

ドライブ(Googleドライブ)

Googleドライブは、あらゆる種類のファイルを保存しまたそれを共有できるツールとなっています。こちらは5月ごろにアップデートがありました。

旧バージョン

新バージョン

タイトルとボタンが変更

GmailとPageSpeed Insightsでもすでに確認している通りですが、タイトルとボタンが変更されています。

背景色が灰色から白色へ

背景色が灰色から白色になったことで個人差にもよりますが、やや見やすくなったような印象を受けました。また文字も丸っこい文字から明朝体のような文字へと変わっています。

Googleアップデートのまとめ

さてここまでのアップデートの事例をまとめてみると以下のようになります。

  • タイトルとボタンがより見やすくなった
  • 余白や背景色が変わりすっきりとしたデザインに
  • タブの要素が強まりどのページにいるのか瞬時に理解できる

こちらのすべてのデザインは「マテリアルデザイン」の原則に沿ってアップデートされていることが分かりました。

マテリアルデザインとは?

マテリアルデザインとは、2014年にGoogleが発表したデザインの概念となっていて、物理的な法則に沿ったデザインのことを指します。物理的な法則に沿うとはどういうことかというと、現実で見ている光や影、奥行きや重なり方などを取り入れることで「質量」を表すことが出来ます。「質量」が追加されたことでリアルに触れるかのような「触覚」を生み出すことでユーザーが直感的に触れているかのような感覚や操作を実現することができています。

今回のGoogleのアップデートはこの「マテリアルデザイン」の要素が非常に強まってるということができます。

まず一番わかりやすい例でいうと、ボタンです。前述したように立体感をもつことでユーザーが直感的に押すことができるようになりました。またGmailとPageSpeed Insightsではヘッダー部分とメインの部分とで段差を付けることやマウスをホバーしたときに浮きあがせルなどのアップデートがされていました。

このように今年のGoogleは「マテリアルデザイン」に沿ってアップデートしていたことを理解していただけたかと思います。

ちなみにフラットデザインとは?

マテリアルデザインという言葉を耳にしたことある人は、同時に「フラットデザイン」という言葉もきいたことがありませんか?

フラットデザインとは2013年ごろから流行りだしたデザインで、その名の通りシンプルで装飾を省いた平面的なデザインをフラットデザインと言います。使用例としては、windowsのスタートアップ画面があげられるかと思います。しかしシンプルで装飾を省いたがためにユーザーはどこをクリックすれば良いのか分からないという問題点が生まれました。その結果として「マテリアルデザイン」や「フラットデザイン2.0」などとユーザーが直感的に操作ができるデザインへと変わっていきました。

よりユーザーが使いやすいものへと


フラットデザインからマテリアルデザインへと変わっていくように日々ユーザーが使いやすいものへと進化し続けています。デザインだけではなく、ページのスピードも重視されるなど「UI」「UX」の強化が進んでいます。まだまだ改善される要素も多いのでこれからの動きも大変楽しみなものになりますね。

まとめ

いかがでしたでしょうか?
今年Googleはマテリアルデザインの原則に沿ってアップデートをしていたことをご理解していただけたのではないでしょうか。2019年度もマテリアルデザインに沿って他のツールもアップデートするのは間違いないでしょう。今後のGoogleの動きに注目しながら2019年度を過ごしてみてはいかがでしょうか?

新入社員「オレ、定時で帰ります。」上司より先に退社キメてみたら…

この記事を読む

イチオシ記事

最新情報をチェックしよう!
>TeamHackで、タスク管理を驚くほどラクに。

TeamHackで、タスク管理を驚くほどラクに。

TeamHackは、タスク管理とチャットが同時にできる「業務コミュニケーションのしやすさ」に特化したオンラインワークスペースです。コミュニケーションツールとタスク管理ツールを行ったり来たりして、二重に管理の手間がかかる問題をスッキリ解決します。

CTR IMG