投稿者: Koda

1998年から2020年のGoogleトップページを2年おきに比較します。世界最大のWebサービスで、デザインの変化を学びます。サービスが増えていくにもかかわらずシンプルになっていくことが驚きです。

1998年 Google! BETAは色があった

まだBETA版のGoogle。Yahoo!と同じく感嘆符付きでした。

この時はエメラルドグリーンのような背景色が一部ついていて、Googleの歴史で一番色があったころです。

ロゴの文字が太くて立体的で、ゴツゴツしています。

2000年 Googleロゴは左にずれていた

中央のGoogleロゴが、左にずれています。

ロゴの右には「About Google」。

まだ自分たちが何者か、目立つところに配置する必要があったようです。

なお、BETA版よりシンプルになり、ロゴもスリムになりました。

2002年 タブの登場

Googleのロゴが中央になっています。

新たにタブデザインの導入です。

数年タブデザインが続いたので、記憶に残っている人もいるでしょう。

そして画像検索という強力な機能が追加されました。

※画像検索は2001年にサービス開始

2004年 タブが１つ増える

大きなデザインの変化はありません。

しかし、Googleニュースが始まっています。

Googleのサービスが拡大していきます。

2006年 タブが消える

表面的なデザインとしては、タブデザインをやめています。

ただの青文字下線リンクとなり、UIデザインの統一を図ったようです。

サービスはさらに増え、moreのボタンが登場します。

また、Googleアカウントが登場し、Sign inのリンクも追加されました。

2008年 メニューが左上に移動

検索ボックス周辺に増えていったメニューを、左上に移動しました。

主力サービスの検索の邪魔にならないようにデザインが改善されています。

そしてGmailやGoogleマップといった人気サービスも追加されています。

2010年 検索が一回り大きく

検索の入力ボックスや検索ボタンが一回り大きくなりました。

操作性が上がっています。

メニューにはVideosが追加されています。

2012年 黒いヘッダー登場

検索と他サービスを明確に分けるよう、黒いヘッダーが登場しました。

そして長年変わらなかったGoogleロゴが見直されます。

細かく追っていくと、2010年の途中でロゴは変わっていました。立体感が弱くなり、影も小さくなりました。

2014年（2013年） ロゴがフラットデザインに

ついにロゴの立体感が消えました。キャプチャは2014年ですが、1年前の2013年にロゴをフラットデザインに変更したようです。

メニューにはYouTubeやDriveといった強力なサービスが追加されます。

2016年（2015年） ロゴが太く丸く

2016年のキャプチャを見ると、またロゴが見直されています。

2015年にロゴの視認性を上げるため、ロゴの文字を太く丸くしたようです。

ロゴ以外の変更はありませんでした。PCよりスマホに注力していたと思われます。

2018年 多くのものをそぎ落とす

黒いヘッダーがなくなり、メニューもほとんど隠れました。

ユーザーの選択肢を減らすため、MapとかYouTubeとかの有名サービスを隠してしまいました。

検索は音声入力に対応。

2020年 UIに丸みを帯びる

大きな変化はありません。検索ボックスが丸くなりました。

細かいところを言えば、ブラウザのサイズで余白が変わるようになりました。

ブラウザの縦幅が小さい時、ロゴが小さくなり、上部の余白が無くなります。

きめ細かいデザインの配慮です。

サービスが増えているのにシンプルになるデザイン

22年間並べてみて驚愕なのが、サービスが増えていくにもかかわらず、デザインがシンプルになっていくことです。

組織が大きくなり、サービスが増えると、トップページで土地の争いが起こるものです。「自分の部署のサービスをもっと目立つように！」とか・・・。

Googleがシンプルで居続けられるのは、創業時から受け継ぐ強い信念があるからだと考えられます。

現在は情報過多の時代なので、よりシンプルなデザインをユーザーからは求められるでしょう。

Googleのデザインが参考になればと願います。

AppleのWebサイトのブラウザを縦方向に縮めると、縦方向の余白が調整されました。ファーストビューで商品を見せるこだわりを感じます。そのこだわりは、調べてみると予想以上のものでした。

ブラウザの縦幅で余白が変わる

AppleのWebサイトは、CSSのメディアクエリが細かく指定されています。

横幅によって見た目が変わる「レスポンシブWebデザイン」は、Web制作者には一般的です。

しかしAppleは、横幅だけではなく、縦幅でもデザインが変化します。

冒頭のキャプチャ画像を再度掲載します。

ブラウザの縦幅を変えたAppleのトップページを並べました。

まず、見出し（iPhone SEの文字）の上の余白が変わっているのが分かります。

ブラウザの縦が743px以下であれば53px。734px以上では65px。

指定が細かいですね。

さらにその下のiPhone画像。メディアクエリの指定が尋常じゃないです。

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1068px) and (min-height: 734px) and (min-width: 735px), only screen and (max-width: 1068px) and (min-height: 734px) and (min-resolution: 1.5dppx) and (min-width: 735px), only screen and (max-width: 1068px) and (min-height: 734px) and (min-resolution: 144dpi) and (min-width: 735px)

縦・横・解像度の組み合わせにより、表示される画像や余白が変わります。

商品の見せ方への強いこだわりを感じます。

ファーストビュー550pxで商品を見せる

1px単位で、細かく縦方向の余白を変更させている理由を考えます。

これはただ美しい余白を追い求めているだけではなく、もっと合理的な理由がありそうです。

ファーストビューで一般的に言われる550pxにブラウザサイズを変更してみました。

すると、iPhoneの商品写真がピッタリとおさまりました。

たまたまではないでしょう。

ファーストビューで商品を見せるこだわりです。

表面的な部分を称賛されるAppleのデザイン。実は裏側がすごいので、調べてみると勉強になります。

noteが究極的に読みやすい話と、マクドナルドのシンボルカラーが消えていく話から、アプリやWebデザインにおけるヘッダーの背景色を考察します。鮮やかな色を使うのは避け、まずは白の検討をお勧めします。

ヘッダーを侮ってはいけない

2014年、マテリアルデザインが流行りだしたころ、鮮やかな単色で塗りつぶされたヘッダーが、Webサイトやアプリで多く見られるようになりました。

YouTubeの赤いヘッダーとか、強烈な色で、不快に感じたのを覚えています。今は白いヘッダーに改善されています。

ヘッダーの色は、単純にシンボルカラー、ブランドカラーを使えばいいというわけではありません。コンテンツを引き立てる色や、コンテンツの邪魔にならない色を選ぶのが良いでしょう。

ヘッダーデザインが大きな違いに？

ブロガーの徳力基彦氏の記事で、「どうもnoteに書くと、普通のブログサービスより明らかに記事が読まれる気がする」というものがあります。

noteとLINE BLOGで同じ内容を書いたら、はてなブックマークで10倍以上の差がついたとのことです。

noteが今ほどドメインパワーを持っていなかったころの話。

noteの記事が読まれた要因の一つとして、徳力氏はヘッダーデザインを上げていました。

要素として違うのは、ヘッダーデザインぐらいだと思いますが、実はここが大きな違いを産んでる可能性があるわけです。

ヘッダーを比べたのがこちらです。

上がnote、下がLINE BLOG。

LINE BLOGのヘッダーの方が美しいかもしれませんが、noteの方が読み手にやさしく、実は優れたデザインです。

ヘッダーの配色に迷ったら白

多くのWebサービスがヘッダーを白に変えました。

さらにマクドナルドまでが、シンボルカラーを使わず、白いヘッダーにしている時代です。

Webサイトやアプリをデザインするうえで、少しでもヘッダーの色が邪魔をしていると感じるのであれば、白を選択するのが良いと思われます。

 

 

最近Webで情報を検索している時、noteの記事をよく見かけます。このnoteの画面がとにかく読みやすい！繰り返し行われるデザインのカイゼンに加え、お金の流れをデザインしていることが、読みやすさの要因に感じます。

noteとは？

noteの使い方、機能紹介から引用します。

noteはクリエイターが文章や画像、音声、動画を投稿して、ユーザーがそのコンテンツを楽しんで応援できるメディアプラットフォームです。

閲覧するだけの人にとっては、ブログサービスのように見えるかもしれません。

なぜnoteは読みやすい

読みやすいようにデザインされているから、とにかく読みやすい。

読みやすさ、使いやすさを繰り返し検証して、カイゼンしています。

年間100を越えるカイゼン施策（PDCA）を行っているようです。

ただ、もっとも気になったのが広告がないこと。

これが読みやすさの大きな要因です。

広告を入れるジレンマ

既存のプラットフォームの多くは、広告で収益を上げています。

企業である以上、利益を上げていくことは、間違いではありません。

ページ右側に広告を出したり、記事の間に広告を挟んだり、広告と気づかれないように記事の中に溶け込ませたり・・・。

邪魔だよなと思いつつ、広告のクリックやコンバージョンが上がるようにカイゼン？していきます。

広告の文字もABテストを行い、より過激な文字をギリギリまで探っていきます。

このやり方は、いずれ限界が来ると、多くの人は感じていたと思います。

予算制約のジレンマ

広告のないWebサービスもあります。公共サイトです。

しかし、実際は予算運営の公共サービスの方が、圧倒的にお金に縛られます。

予算が下りなければカイゼンできない上、スピードが出せない。

お金のデザインをできるか？

noteがこれだけ読みやすくデザインされているのは、お金のデザインも含めて優れているからだと思います。

最高に読みやすいデザインを作るには、広告にも予算にも依存しないことが重要と感じます。

「デザイン経営」で言われる分野で、noteは見た目のデザインだけではなく、経営レベルでデザインを考えているはずです。

noteのマネタイズの戦略を詳しく調べてみることにしました。

コンテンツ第一から最高峰のデザインが生まれる

東京新聞にあったnote創業者のインタビューを拝見しました。

違和感なく使ってもらうため、画面は極力シンプルに。コンテンツを引き立たせるため広告も入れない。

コンテンツを第一に考える理念から、noteのデザインは生まれたようです。

それと同時に外部との資本業務提携で、経営基盤を作っています。

参考にしようとして、手軽にマネはきるものではありません。

ただ、「コンテンツを引き立てるためには何をすればいいか？自分のデザインがコンテンツを殺さないか？」個人レベルでも、何度も自分に問いかける癖は付けられると思います。

外食産業が壊滅的なダメージを受ける中、売り上げを伸ばしたマクドナルド。実店舗集客ができない状況下、アプリやWebでどのような戦略をとったのか？今回はデザインに焦点を当てて検証します。シンボルカラーの使い方に興味深い変化が見られました。

シンボルカラーの赤が消える

2020年9月、マクドナルド公式ページの「よくあるご質問」から引用します。

創業当時より赤と黄色をシンボルカラーとしています。

あれ？シンボルカラーは？

公式サイトに赤がなく、昔と比べてずいぶん味気なくなりました。

2016年のデザインと比較してみましょう。

まずはアプリ。

※2016年のキャプチャ（AppBankより転載）と2020年9月のキャプチャ

続いてWebサイトのトップページ。

※2016年のキャプチャと2020年9月のキャプチャ

掲載する商品で印象が変わるため、ロゴやメニューの配色のみを比較します。

すると、驚くほどシンボルカラーの赤が無くなっていることに気づきます。

なぜ赤が無くなった？

赤は刺激が強すぎて、サイト閲覧の邪魔になるから無くしたのでしょう。

これは実店舗と同じです。

赤い看板は集客に使えます。しかし店内が鮮やかな赤だったら・・・落ち着いて飲食できません。

店内をGoogle画像検索で調べると、ナチュラルな落ち着いた色となっています。

Webサイトでも、もう訪問しているなら、激しい赤を使う必要はありません。

落ち着いて商品を選べる配色が良いです。

厳密にはWebサイトの場合、リラックスするより情報を探す欲求の方がユーザーは強いので、ナチュラルな配色より、情報を最速で探せる白背景が適していると言えそうです。

赤は食欲増進の色

ひとつ気になるのが色彩心理。

赤は、食欲を増進させる色と言われます。

それを白くて味気ないデザインに変更し、マイナスの効果はないのでしょうか？

色彩心理の効果は薄い

10年くらい前、色彩心理とWebアクセスの相関を、統計を使ってテストしたことがありました。

その時は、悲しいほど色彩心理とアクセスに相関がないという結果になりました。

アクセスが上がるのはコンテンツが見やすくなる配色。背景はただの白や無彩色、補色が効果的でした。

この法則は、どうやら外食産業にも当てはまるようです。

コロナ禍での進化・もう一つのシンボルカラーが消えていく

アプリやWebサイトから赤が消えたのは３・4年前のことです。

明確なカラー戦略を持っていると思われます。

そして、コロナ禍の3月下旬、マクドナルドのWebサイトがさらに進化しました。

背景で大面積で使われていた、もう一つのシンボルカラー黄色も減らしてきました。

非常に理にかなったデザインにリニューアルされています。

スマホサイトを見ながら、上から順に詳しく見ていきます。

トップにソーシャル・ディスタンス

コーポレートサイトとしての役割を重視したのでしょう。安全・安心を訴えかけるソーシャル・ディスタンスが最初に表示されます。

コロナで特殊な状態のため、一見シンボルカラーが復活したように見えましたが、そうではありません。

黄色のソーシャル・ディスタンスのパネルは、平常時にハンバーガーの写真に差し替わり、その下にある赤い「特別なお知らせ」という項目も平常時に消えるでしょう。

フラットデザイン2.0に

続いて下にスクロールすると、おすすめメニューの一覧がでてくるようになりました。ページ遷移が減り、おいしそうなハンバーガーを、すぐに選べるようになりました。

今までのフラットデザインは、どこがタップできるのか分かりずらいデザインだったのですが、リニューアル後、影のついたカード型UIに変更になっています。

いわゆるフラットデザイン2.0に進化しています。

明らかに選択や操作がしやすいです。

新着情報・お知らせ・キャンペーンがシンプルに

引き続きスクロールすると、一番驚く、大きな変化を見られます。

黄色で楽しい演出をしていた、新着情報やキャンペーンが、恐ろしくシンプルなカード型UIに変更されています。

マクドナルドの内情は知りませんが、一般的にシンプルなデザインを通すのは、決裁に膨大なエネルギーを使います。

表面的に楽しそうで、キレイなデザインの方が、何十倍も決裁を通しやすいです。

マクドナルドはデザイナーがすごいのか？決裁者がすごいのか・・・、このデザインでリニューアルが通ったことが、一番の驚きです。

PC版も見てみよう

新着情報からキャンペーンまでのデザインが興味深く、今度はPC版でも見てみたくなりました。

こちらが2020年3月までのデザイン。

そして今度は、リニューアル後のデザインです。

驚くほどの変貌。

文字が読みやすく改善

コントラスト不足だった新着情報の黄色の日付が、黒（#2d2d2d）に。

日付のWebフォント「LovinSansBold」と、本文の「游ゴシック」は、Chromeの標準フォント「メイリオ」に置き換わっています。

標準が何より読みやすいです。

コンテンツを引き立てる無彩色

そして、黄色く大面積で塗りつぶされていたキャンペーン部分。

黄色が目立ちすぎて、コンテンツ（商品）を殺していた状態が解消されました。

マクドナルドの事例を使おう

シンボルカラーも無視して、味気ないデザインを通すのは、Webデザイナーにとって至難の業です。

しかし、美しく装飾することに気を使って、売り上げを下げるデザインをすると、最終的に誰もが損をします。

シンプルなデザインで稟議を通すのが難しい場合、コロナ禍で売り上げを伸ばしたマクドナルドのデザインを事例に使うのが、一つの手だと思います。

ある医療関係者から、自分の資料が何だか読みにくいという相談を受けました。見せてもらった資料は丸ゴシック。フォントが原因でしょう。いくつか検証したところ、最も読みやすいのは「MS Pゴシック」だと分かりました。

丸ゴシックが読みにくい

※勉強用の資料で、写真公開OKの内容です。

「資料が読みにくいんだけど・・・」とA4の紙を渡され、相談を受けました。

見るとシンプルなWordの資料です。

文字はHG丸ゴシックです。読みにくく感じるのはフォントの影響でしょう。

読みやすいフォントは？

好きなフォントランキングは、2014年に1位「MS ゴシック」という記事を見たことがありました。

見慣れたフォントを好きになる結果です。

読みやすさについても、見慣れたフォントが最も読みやすい。という結果になると思われます。

実際に見比べて検証

相談者からWordのデータをもらって、フォントを変え、どれが読みやすいか選んでもらうことにしました。

選択肢が多いと疲れるので、３つに絞りました。

MS Pゴシック

好きな文字ランキング1位だった「MS ゴシック」。厳密に言うと「MS Pゴシック」で文字幅が調整されているプロポーショナル（P）フォントです。

Windows95で採用され、OSやIEの標準フォントとして多くの人の目に触れました。office2016になるまで、Wordの標準フォントでもありました。officeをバージョンアップしていない組織では今でも現役です。

読みやすいフォントの最有力候補。

メイリオ

Windows Vistaで採用されたフォント。「明瞭」が名前の由来。Webでの読みやすさも考慮されて作られたフォントで、2017年にChromeの標準フォントが「MS Pゴシック」から「メイリオ」に変更になりました。Web上では標準フォントという扱いです。

人によっては紙よりデジタルで文字を見ることが多くなり見慣れたため、もしかしたら読みやすさで「MS Pゴシック」に勝てるかもしれません。

BIZ UDPゴシック

誰もが見やすいユニバーサルデザイン（UD）フォント。Windows10をアップデートしていれば、標準で入っているフォントです。読みやすさを追求したフォント。

ユニバーサルデザインの力を信じたく、候補に入れました。

最も見やすいフォントは？

３つのフォントで印刷し、どれが読みやすいか選択してもらいます。

いずれも、以前の丸ゴシックより読みやすいという評価でした。

結果は・・・

1. MS Pゴシック
2. メイリオ
3. BIZ UDPゴシック

という順位で、予想通りの結果に。

私を含めてもサンプル数２なので、統計的に証明はされません。

ただ、デジタル化が始まって25年も「MS Pゴシック」を見ている現代人が、「MS Pゴシック」を見やすいと感じるのは必然です。

明瞭に改善された「メイリオ」や、誰にでも見やすい「BIZ UDPゴシック」が品質で劣るわけがない、むしろ、読みやすさは向上しているはずなのですが、人の慣れの方が、読みやすさに大きく影響します。

勉強用とか、社内用とか、読みやすさを優先する資料なら、現状「MS Pゴシック」を使う選択が、もっともよいでしょう。

他の候補

選択肢を減らすため、今回は対象から外した「游ゴシック」。最新版のWordの標準フォントで、WindowsとMacどちらでも使える共通フォントです。

慣れの問題で、読みやすいとはまだ言えませんが・・・今後長く「游ゴシック」が標準になるなら、読みやすいフォントは「游ゴシック」と言われる時代が来るのかもしれません。

とにかく慣れが、読みやすさにもっとも影響します。

次男がモルモットと対局を始めて9日が経ちました。未だにモルモットと対局しています。それで強くなれるのか？

シュールな対局

兄弟で対局するとケンカになるので、次男はモルモットと将棋をしています。

モルモットも将棋の駒が好きで、かじります。（やめてくれ。）

こんなことを続けて、次男は成長するのか？

ただ、モルモットと対局する姿がかわいくて、止められずにいます。

 

長男は銃が好き。「銃を描いたよ」と私に見せに来ます。なぜ人殺しの道具が好きなのでしょう。実は造形の美しさへの関心なのかもしれません。

機能を突き詰めた造形美

長男は本当に銃が好きなんだと思います。すごく書き込みが細かい。

勉強・・・漢字も、これくらい丁寧に書いて、覚えてほしいものです。

ところで、なんで銃が好きなのでしょう？

男の闘争本能が銃に関心を持たせるのは、納得しやすい理由です。

もう一つの理由で、昔デザイナーの先輩が、造形美について語っていました。

「武器は効率よく人を殺すために、極限まで無駄を省き、機能を突き詰めた芸術作品なんだ。（お前のデザインは無駄だらけだ！）」

そんなことを言われた覚えがあります。

案外、銃が好きなのは、闘争心があるのではなく、デザインの感性が高いからなのかもしれません。

Amazonオーディブルで朗読を聞いています。人気の『FACTFULNESS』、再生時間は約13時間。長い！長すぎる！こういった長いビジネス書は、倍速以上で聞いた方が頭に入るでしょう。

『FACTFULNESS』とオーディブルの相性が悪い？

ベストセラーの『FACTFULNESS(ファクトフルネス) 10の思い込みを乗り越え、データを基に世界を正しく見る習慣』を、Amazonオーディブルで聞いていました。

世界を｢先進国｣と｢開発途上国｣という２つに分断して考えることは、もはやできない・・・データによって示したこの事実について、私自身の考えを改める必要があると、痛感しました。

子供たちに「途上国」という言葉を使って、世界のことを説明していたので。

そんな気づきになった『FACTFULNESS』ですが、１つ問題が。

話が長いです。

後半は飽きて、もう話が頭に入ってきません。

文字では簡単に読み飛ばせる余談や、話の繰り返しや、助長な部分も、朗読ではうまく聞き飛ばせません。

最後まで聞き終わっても、前半しか頭に残っていない状態です。

2.5倍速で聞く

最後の章で気づきました。

Amazonオーディブルには再生速度を変更できる機能があることに。

個人差はあると思いますが、2倍くらいでも話を聞き取れます。

3倍だと聞き取れない部分があり、私の場合は2.5倍がちょうど良いです。

情報収集を目的とするビジネス書の場合、2倍以上で聞く方が、効率よく頭に入ると思います。

4人の息子が、不思議なカードゲームで遊んでいました。段ボールで作った手作りカードゲームのようです。自分たちで遊びを作れるところが、子供たちのすごいところ。家計も助かります。

段ボールを切ってカードゲームに

長男が前日の夜遅くまで、段ボールで何かを作業していました。

夜更かしは良くないのですが・・・終わるまで待っていると、カードゲームが完成しました。

長男はテレビも見ていない、ゲームもしていない状況なので、カードゲームを知らないはずですが・・・きっと友達から得た情報なのでしょう。

何か、参考にした元ネタはあると思います。

長男がルールを説明しながら兄弟対決

「シールドがなんとかかんとか・・・」と、長男が説明しながら、弟たちの対決が始まります。

モンスター（？）同士が戦うカードゲームのようです。

詳しくは分かりませんでしたが、自分たちで遊ぶものを作るのは、とても良いことです。

子供たちの創造性を高めるだけでなく、親の都合でも、ゲームを購入する費用も抑えられ、家計も助かります。